Creating and customizing forms in Bootstrap

At last, we are ready to move on to the final part of our landing page, the Contact Us form. Note that we will not be writing any of the actual JavaScript that transfers the contents of the form to the server. Instead, we will learn how to use Bootstrap to lay out our form elements in an elegant and responsive manner.

Typically, contact forms require at least three pieces of information from the user: the user’s name (so that the recipient of the form data will know who they are talking to), the user’s email address (so that the recipient of the form data can reply to the user), and the actual message (what the user wants to send to the recipient). As such, we will be creating a form that will consist of three inputs: a name field, an email address field, and a text area for the user to write their message.

Let’s dig right into it. Start by creating an empty form below the Contact Us header:

<div class=”container-fluid myphoto-section bg-myphoto-light” id=”contact”>

<h3>Contact Us</h3>

<form>

<!—Our form will go here—>

</form>

</div>

At the heart of Bootstrap’s form layout is the form-group class. On its own, all this class does is to set a 1rem bottom margin. However, as we will see, combining the form group with form controls gives us a powerful way of controlling our form’s appearance.

By default, Bootstrap lays out its form elements vertically—that is, each element is stacked above the other. Let’s go ahead and add a name field to our form. Insert the following snippet in between our previously created form tags:

<div class=”form-group”>

<label for=”name”>Your name</label>

<input type=”text” class=”form-control” id=”name” placeholder=”Name”>

</div>

Save and hit refresh. As you can see, the label takes over the entire first row, with the name input field appearing on the second row (figure 4.14). Note how we applied the form-control class to our name input field. This class is what styles our actual input element. Among other things, applying the form-control class will change the element’s height and its position (to relative), clears its bottom margin, sets the element’s z-index (to 2), and gives the element a nice inset effect by adjusting the border style, border color, and border-radius. Removing this class from our input will result in just a simple, plain input box being displayed.

Now, what if we want slightly smaller form elements? Well, we can apply our own styles; for example, we can change the font size or height of our input element. However, Bootstrap provides us with form-control-lg and form-control-sm. The latter reduces the line-height of nested form controls as well as their font-size, border-radius, and padding. On the other hand, the former form-control-lg class increases the form controls by again changing their font size and line-height. Go ahead and apply either one to our form group. To see the differences between these classes, consider the following code:

<div class=”form-group”>

<label for=”name”>

Your name (large)</label>

<input

type=”text”

class=”form-control form-control-lg” placeholder=”Name”>

</div>

<div class=”form-group”>

<label for=”name”>

Your name (default)</label>

<input

type=”text”

class=”form-control”

placeholder=”Name”>

</div>

<div class=”form-group”>

<label for=”name”>

Your name (small)</label>

<input

type=”text”

class=”form-control form-control-sm”

placeholder=”Name”>

</div>

Then, take a look at figure 4.14:

Figure 4.14: Showing the difference between form-control-lg, the default form control, and form-control-sm

Note how (figure 4.14) our name field stretches across the entire page, taking up a lot of valuable real estate. Seeing how users will certainly not need all this space for their names, you might wish to align the label and name input field. Luckily, Bootstrap makes this quite easy for us by offering horizontal form layouts and inline forms through the form- inline class. Applying it to our form element will change the display style of form controls and form groups contained within the form to inline-block. This will align the various components within your form element. Go ahead and apply it:

<form class=”form-inline”>

<div class=”form-group”>

<label for=”name”>Your name</label>

<input

type=”text”

class=”form-control form-control-sm” id=”name”

placeholder=”Name”>

</div>

</form>

Take a look at the screenshot in figure 4.15:


Figure 4.15: Our vertical name form group

This is much better, but we are not done quite yet. Try adding a second form group to the form. It will end up on the same line as our name form group. Furthermore, the input fields are now a bit too small to be of practical use. Try customizing them by combining the lessons that you learned in this chapter with the lessons you learned in chapter 2, Making a Style Statement.

While we can save valuable space by aligning labels and input boxes, there is a second approach that we can take to combine input description with the actual input fields: icons and placeholder texts (refer to figure 4.16). The idea is that we combine icons and placeholder texts to indicate the expected input. The advantage behind this approach is that we will not be losing space to label elements.

First, let’s remove the previously inserted label element and edit the input’s placeholder attribute to contain the string Your name. Our name form group should now consist of a single input element:

<form>

<div class=”form-group”>

<input

type=”text”

class=”form-control”

placeholder=”Your name”>

</div>

</form>

Let’s go ahead and duplicate this form group so that we now also have an input for our user’s email address:

<form>

<div class=”form-group”>

<input

type=”text”

class=”form-control”

placeholder=”Your name”>

</div>

<div class=”form-group”>

<input

type=”email”

class=”form-control”

placeholder=”Your email address”>

</div>

</form>

Now let’s go ahead and select two Font Awesome icons that best describe the expected input. We recommend the following:

  • A user symbol to indicate the user’s name: fa fa-user
  • An @ symbol to indicate the user’s email address: fa fa-at

To combine the input elements with the icons, we first apply Bootstrap’s input- group class to the form control—that is, our form control’s class attribute should now be set to class=”form-group input-group”. Next, we create the <i> tag for our Font Awesome icon, insert it before our input element, and then wrap the icon with a span element. We set the span class attribute to class=”input-group-text”:

<form>

<div class=”form-group input-group”>

<div class=”input-group-prepend”>

<span class=”input-group-text”>

<i class=”fa fa-user”></i>

</span>

</div>

<input

type=”text”

class=”form-control”

placeholder=”Your name”>

</div>

<div class=”form-group input-group”>

<div class=”input-group-prepend”>

<span class=”input-group-text”>

<i class=”fa fa-at”></i></span>

</div>

<input

type=”text”

class=”form-control”

placeholder=”Your email address”>

</div>

</form>

The above code produces the form displayed in figure 4.16 below.

Figure 4.16: Combining placeholder text with icons to denote the expected input

Our form is almost done. All that is left is to add a text area for our message (using the textarea element) and a Send button. To achieve the former, go ahead and create a new form-group. However, instead of the form-group containing an input box, add a label and a textarea. Just as with the input elements, the textarea should be a form control (so go ahead and set its class attribute to form-control):

<form>

<div class=”form-group input-group”>

<div class=”input-group-prepend”>

<span class=”input-group-text”>

<i class=”fa fa-user”></i>

</span>

</div>

<input

type=”text”

class=”form-control”

placeholder=”Your name”>

</div>

<div class=”form-group input-group”>

<div class=”input-group-prepend”>

<span class=”input-group-text”>

<i class=”fa fa-at”></i></span>

</div>

<input

type=”text”

class=”form-control”

placeholder=”Your email address”>

</div>

<div class=”form-group”>

<label for=”name”>Your message</label>

<textarea

class=”form-control”

rows=”5″

id=”message”>

</textarea>

</div>

<div class=”form-group”>

<button class=”btn btn-success”>

<i class=”fa fa-send-o”></i> Send

</button>

</div>

</form>

The last missing part of the puzzle is our Send button. Although we won’t be writing the event listeners for this button, we will now learn just how easy it is to create a good-looking Bootstrap button.

The parent class of any button is the btn class. In essence, this class adjusts the padding, margin, border radius, font size, and line height of any element that it is applied to. The nine context classes offered by Bootstrap are btn-primary, btn-secondary, btn- success, btn-link, btn-info, btn-danger, btn-light, btn-dark, and btn- warning (take a look at figure 4.17):

Figure 4.17: The five Bootstrap button context styles. From left to right: default, success, danger, info, and warning

Let’s go ahead and complete our form by inserting a button element and applying the success context class. Create a new form group below our text area. Inside the form group, create a button element and set its class to btn btn-success. Insert a nice icon and add some text to the button:

<div class=”container-fluid myphoto-section bg-myphoto-light” id=”contact”>

<h3>Contact Us</h3>

<form>

<div class=”form-group input-group”>

<div class=”input-group-prepend”>

<span class=”input-group-text”>

<i class=”fa fa-user”></i>

</span>

</div>

<input

type=”text”

class=”form-control”

placeholder=”Your name”>

</div>

<div class=”form-group input-group”>

<div class=”input-group-prepend”>

<span class=”input-group-text”>

<i class=”fa fa-at”></i></span>

</div>

<input

type=”text”

class=”form-control”

placeholder=”Your email address”>

</div>

<div class=”form-group”>

<label for=”name”>Your message</label>

<textarea

class=”form-control”

rows=”5″

id=”message”>

</textarea>

</div>

<div class=”form-group”>

<button class=”btn btn-success”>

<i class=”fa fa-send-o”></i> Send

</button>

</div>

</form>

</div>

Last but not least, we can add some descriptive text to our Contact Us section. In this case, we will use placeholder text generated using http://generator.lorem-ipsum.info/ (a useful tool if you ever require placeholder text for demo purposes):

<h3>Contact Us</h3>

<p>Lorem ipsum dolor sit amet, modo integre ad est, omittam temporibus ex sit, dicam molestie eum ne. His ad nonumy mentitum offendit, ea tempor timeam nec, doming latine liberavisse his ne. An vix movet dolor. Ut pri qualisque reprehendunt, altera insolens torquatos in per. Mei veri omnium omittam at, ea qui discere ceteros.</p>


Figure 4.18: The Contact Us section along with the Send button (example08.html)

While the inputs are pretty explanatory in the case of the preceding example, there may be inputs that require an explanation. As such, you can add descriptive text using the form- text class:

<p class=”form-text”>Some text describing my input.</p>

All that the form-text class does is to set the element’s display property to block and add a top margin of 0.25 rem to the element.

Furthermore, it should be noted that we wrapped both the Contact Us title texts inside the h3 header tag. This is appropriate in this case, as the title blends nicely with the content. However, for cases in which the title should stand out more, or should not blend in with the content, one should use Bootstrap’s display heading class display-*, where * denotes a number between 1 and 4. As with the header tags, the smaller the number, the bigger the font. The largest display class applies a font size of 6 rem to the target element and decreases this for each successive display class (so, for example, display-2 sets the font size to 5.5 rem).

The display style definition also sets the font weight to 300. Figure 4.19 contrasts the use of display-* against the use of the HTML header tags:

Figure 4.19: Contrasting Bootstrap’s display classes against the HTML header tags

Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.

Leave a Reply

Your email address will not be published. Required fields are marked *