Create Forms with Bootstrap

Lucas Minter
InstructorLucas Minter
Share this video with your friends

Social Share Links

Send Tweet
Published a month ago
Updated a week ago

Bootstrap has amazing forms that are easy to build and offers a lot of customization like the cards. Simply setup different inputs to fill out, making them required, form sizing, radio buttons, popup when the final button is hit or disabling it until all required fields are filled in.

[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.

egghead
egghead
~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today