Bodingles | Colt Steele

The most important requirement of any Bootstrap structure is that it must be contained within a container, and Bootstrap forms are no different.

So first off, we create the container, < div class="container">, and within this container, we create the form. < form action="">.

And because of the nature of Bootstrap we know it is built using rows and columns (12). So next we create a row, < div class="row">.

In bootstrap forms, we can group together form labels, and form inputs. This is called a form-group. And in the Input field, we use a bootstrap class called form-control, to tell bootstrap how to format this form element. So we create our columns in form-groups like so:

< div class="form-group">
- < label for=" fname">First Name
- < input type="text" class="form-control" id="fname">
< /div>

This creates our form columns. In the example below, we have the First and Last name inputs on the same row. And because no colum width is specified, each column is 6-wide. The same is true for the City, State, Zip row. Because no column width is defined, each of theses three columns in 4-wide, because they share the same row.

We can now add our breakpoint styling code for our responsive web design. This code goes inside the column control. In our example the column control is created with the form-group div. So the First/Last Name column code would be something like, < div class="form-group mb-3 col-md-6">. Here we are adding a margin-bottom of 3 and if the viewport is larger than medium (md) then make each column 6-wide.

*note: one other thing of importance to mention is that different form elements have different bootstrap code to style the elements properly. Refer to the Bootstrap Forms page for more information.

Here is the final code for this form:

< div class="container">

< form action="">

< div class="row">

< div class="form-group mb-3 col-md-6">

< label for="fname">First Name< /label>

< input type="text" class="form-control" id="fname" placeholder="First Name" required>

< /div>

< div class="form-group mb-3 col-md-6">

< label for="lname">Last Name< /label>

< input type="text" class="form-control" id="lname" placeholder="Last Name" required>

< /div>

< /div>

< div class="row">

< div class="form-group mb-3">

< label for="address">Address< /label>

< input type="text" class="form-control" id="address" placeholder="Address">

< /div>

< /div>

< div class="row">

< div class="form-group mb-3 col-lg-4 col-md-6">

< label for="city">City< /label>

< input type="text" class="form-control" id="city" placeholder="City">

< /div>

< div class="form-group mb-3 col-lg-4 col-md-6">

< label for="state">State< /label>

< input type="text" class="form-control" id="state" placeholder="State">

< /div>

< div class="form-group mb-3 col-lg-4 col-md-6">

< label for="zip">Zip< /label>

< input type="text" class="form-control" id="zip" placeholder="Zip">

< /div>

< /div>

< div class="row">

< div class="form-group mb-3 col-md-6">

< label for="email">Email Address< /label>

< input type="email" class="form-control" id="email" placeholder="email@domain.com" required>

< /div>

< div class="form-group mb-3 col-md-6">

< label for="pswd">Password< /label>

< input type="password" class="form-control" id="pswd" placeholder="Password" required>

< /div>

< /div>

< div class="row">

< div class="form-check mb-3">

< input class="form-check-input" type="checkbox" value="" id="tos" required>

< label class="form-check-label" for="tos">I agree to the Terms of Service.< /label>

< /div>

< /div>

< button class="btn btn-success mb-5">Submit< /button>

< /form>

< /div>

The Web Developer Bootcamp 2024

Bootstrap Forms