Create Forms with Bootstrap

[00:00] Create a section with an ID of form. Add in a div element with a class of container and a top margin of 5. I'll quickly paste in an H2 and a paragraph and add in a form with a class of row. Let's create our first input. Give it a type of [00:20] text, an ID, a full name, and add a class of form control. Take a peek at the styling of the input right now. You can see the massive difference in highlighting when the input is active versus inactive. Undo that class, and we can see that we've lost all of that pretty styling. [00:41] Next, add a label above the input, include for equals full name, and add a class of form dash label. Wrap this in a div and give it a class of margin bottom 3, column 12, and column medium [01:01] 6. I also wanted to show off the checkbox. Add a div with a class of margin bottom 3 and form dash check. Copy and paste the input and label above, and we'll change a few things. [01:21] The 4 will be example check, and the class is form dash check dash label. The input will be a type of a checkbox, a class of form dash check dash input, [01:41] and change the ID to Example Check. Also, change the text for the label to be checkbox. Take a peek at the styling of the checkbox. It adds some nice highlighting when focused and a vibrant blue check mark. For the [02:01] checkbox, it doesn't matter which order you put the label or the input. The label will always be after the input. To finish off, I want to show off an options list. You can do this by using a data list. As a side note, while most browsers and operating systems include some support for data list elements, their [02:21] styling can be inconsistent, but I find it's really cool to show off. Datalist lets you create a group of options to select from or type out and have it autocomplete for you. Below the full name input, create a Datalist with an ID of Datalist, And [02:41] here, create an option with a value of your name, for instance. Duplicate this a few times and add in any number of names you want. Then in the full name input above, add the property of list and set it to Datalist. [03:05] Our full name input now gives us a list of names to choose from, or we can start typing 1 out and have it autofill. With that, the form is now complete.