You're reading from Bootstrap 4 ??? Responsive Web Design A step-by-step practical course enabling you to nail Bootstrap and make your web designs responsive.

Product type Course

Published in Jul 2017

Publisher Packt

ISBN-13 9781788397315

Length 810 pages

Edition 1st Edition

Languages

HTML

Tools

Bootstrap

Concepts

Design

Authors (4):

Matt Lambert

Benjamin Jakobus

Silvio Moreto

Jason Marah

View More author details

Table of Contents (6) Chapters

Preface

1. Module 1

2. Module 2 FREE CHAPTER

3. Module 3

Bibliography

Index

Chapter 4. Applying the Bootstrap Style

After making our landing page mobile-first and fully responsive for any device, it is time to go further into the Bootstrap framework, adding more and more components along with the style improvement.

This is the main objective of this chapter. We will take a step forward in terms of layout improvement, taking in regards the use of Bootstrap components. The chapter's key points are:

Layout improvement
Bootstrap forms
Using images in Bootstrap
Bootstrap helpers

By the end of this chapter, our landing page will almost be done, and you will be able to handle every HTML component customized by Bootstrap.

Changing our grid layout

First of all, the grid that we used for the current landing page is just a showcase of Bootstrap's potential and possibilities of customization. In this chapter, our objective is to make the grid fancier and more beautiful. To do this, we will change the grid to be like the one presented in the next figure.

We will go a little faster this time, since you already know how to create the grid using Bootstrap. Also, we will go mobile-first, as we discussed in the last chapter, but the screenshots will be taken from larger viewports just to improve the understandability.

Starting over the grid system

As you can see in the grid image, we split the grid into six parts. This time, each part will be a section that we will present step by step. If you are starting the example from scratch, don't forget to keep the boilerplate that we presented previously.

The header

So, we will start with the header. The code for representing the grid presented should be this one, to be placed right after the <body> tag:

<header>
  <div class="container">
    <!-- row 1 -->
    <div class="row">
      <a class="brand pull-left" href="#">Company name</a>
      <ul class="list-inline list-unstyled pull-right">
        <li><a href="#about">About</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</header>

As you can see, the <header> tag is wrapping all of our .container, making it similar to a section. Just for the note, to have the brand link placed on the left-hand side and the list on the right-hand side, we added the .pull-left and .pull-right classes to it, respectively. These are two Bootstrap helpers.

Now, let's modify our CSS to change the header style. Remember to import the custom CSS file at <header>:

<link rel="stylesheet" href="css/base.css">

For that part, we will change the background color and the alignment to a better placement of the link and list elements, so let's customize and override some styles from Bootstrap:

header {
  background-color: #F8F8F8;
}

header ul {
  margin: 0;
}

header a,
header li {
  padding: 1.4rem 0;
  color: #777;
  font-weight: bold;
}

The header will look like what is shown in the following screenshot:

The introduction header

We have called the introduction header section 2 of our grid. In this section, we have a big name of the company followed by the tagline and some buttons. The code for this row should be as follows:

<section id="intro-header">
  <div class="container">
    <!-- row 2 -->
    <div class="row">
      <div class="wrap-headline">
        <h1 class="text-center">Company name</h1>
        <h2 class="text-center">Tagline message</h2>
        <hr>
        <ul class="list-inline list-unstyled text-center">
          <li>
            <a class="btn btn-default btn-lg" href="#" role="button">Sign in</a>
          </li>
          <li>
             <a class="btn btn-primary btn-lg" href="#" role="button">Sign up</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

So, we have wrapped the entire container in a section, just as we said we would. There is no secret here; we used <h1> for the company name and <h2> for the tagline. We placed the buttons in a centered list, just like the headlines, using the .text-center helper class, and the buttons are all set as before.

We will place a big image as the background for the #intro-header section. To do this, we edit the CSS file as follows:

section#intro-header {
  background-image: url(../imgs/landscape.jpg);
  background-size: cover;
}

The background set as cover will do the trick for us to make the image cover full width, although the size of the section is too small right now. For that, we will use our .wrap-headline element to do the trick and make it bigger:

section#intro-header .wrap-headline {
  position: relative;
  padding-top: 20%;
  padding-bottom: 20%;
}

As you may notice, we let a 20% padding at the top and bottom relative to our current position. With this, the height of the section becomes responsive to any viewport.

Moving on, we add some more CSS rules just for formatting, as follows:

section#intro-header {
  background-image: url(../imgs/landscape.jpg);
  background-size: cover;
}

section#intro-header .wrap-headline {
  position: relative;
  padding-top: 20%;
  padding-bottom: 20%;
}

section#intro-header h1,
section#intro-header h2 {
  color: #FFF;
}

section#intro-header h2 {
  font-size: 1.5rem;
}

section#intro-header hr {
  width: 10%;
}

section#intro-header .btn-default {
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
}

The final output of those two sections should be like the one shown in the following screenshot. Pretty fancy, isn't it?

The about section

So, for the about section, we will place a container that wraps all of the section as well. We will play with two rows equally divided, in which we will display an image and text alternated side by side. The code for this section should be as follows:

<section id="about">
  <div class="container">
    <!-- row 3 -->
    <div class="row">
      <div class="col-sm-6">
        <img src="imgs/mock_ipad.jpg" class="img-responsive">
      </div>
      <div class="col-sm-6">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
          Lorem ipsum dolor...
        </p>
      </div>
    </div>
    <hr>

    <!-- row 4 -->
    <div class="row">
      <div class="col-sm-6">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
          Lorem ipsum dolor...
        </p>
      </div>
      <div class="col-sm-6">
        <img src="imgs/mock_nexus.jpg" class="img-responsive">
      </div>
    </div>
  </div>
</section>

At this section, we just created two rows with two columns in each one. Since the columns are equally divided, they receive the .col-sm-6 class. We added the .img-responsive class to the images to keep the ratio over the viewport and placed some text content on the image side of the column.

For the CSS, we add some rules to increase the margin between the content and the top portion of the page:

section#about img {
  margin-top: 6.5rem;
  margin-bottom: 5rem;
}

section#about h3 {
  margin-top: 10rem;
}

The following screenshot shows the resultant output of this section. Check whether the result of your code is similar to the following screenshot, and then let's move on to the features section:

The features section

The features section is composed of two lines of three columns, although we will create only one .row element and use the column wrapper technique. Do you remember it?

The column wrapper technique uses more than 12 parts of columns in a single row. The columns that overflow the .row will then be placed in the line below, creating the effect similar to having two .row elements:

<section id="features">
  <div class="container">

    <!-- row 5 -->
    <div class="row">
      <div class="col-sm-12">
        <h3 class="text-center">Features</h3>
        <p class="text-center">Features headline message</p>
      </div>
    </div>

    <!-- row 6 -->
    <div class="row">
      <div class="col-sm-2 col-md-4">
        <div class="feature">Feature</div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">Feature</div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">Feature</div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">Feature</div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">Feature</div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">Feature</div>
      </div>
      </div>
    </div>
  </div>
</section>

In this section, we created two rows. The first one holds the title and headline of the section with the <h3> and <p> tags, respectively. The second row is just composed of six equal columns with the .col-sm-2 and .col-md-4 classes. The use of .col-sm-2 will place the .feature elements in a single line when using a small viewport.

Now, edit the CSS, and let's change the text color and add some padding between the features columns list:

section#features {
  background-color: #eef2f5;
  border-top: 0.1rem solid #e9e9e9;
  border-bottom: 0.1rem solid #e9e9e9;
}

section#features * {
  color: #657C8E;
}

section#features .feature {
  padding-top: 2rem;
  padding-bottom: 4rem;
  text-align: center;
}

The following screenshot presents the final output for the features section. Then it is time for us to start modifying the price table. It should be easy since we have already done the groundwork for it.

The price table section

For the price table section, we will use the same table from the Manipulating tables section in Chapter 2, Creating a Solid Scaffolding, but with a few modifications to make it prettier. We will make some small changes, as presented in the following code:

<section id="pricing">
  <div class="container">

    <!-- row 7 -->
    <div class="row">
      <div class="col-sm-12">
        <h3 class="text-center price-headline">Price table</h3>
      </div>
    </div>

    <!-- row 8 -->
    <div class="row">
      <div class="col-sm-10 col-sm-offset-1">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th class="success">
                <h4 class="text-center white-text">Free plan</h4>
              </th>
              <th class="info">
                <h4 class="text-center white-text">Standard plan</h4>
              </th>
              <th class="danger">
                <h4 class="text-center white-text">Premium plan</h4>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="success">
                <h3 class="text-center white-text">$ 0</h3>
              </td>
              <td class="info">
                <h3 class="text-center white-text">$ 99</h3>
              </td>
              <td class="danger">
                <h3 class="text-center white-text">$ 999</h3>
              </td>
            </tr>
            <tr>
              <td>Lorem ipsum</td>
              <td>Lorem ipsum</td>
              <td>Lorem ipsum</td>
            </tr>
            <tr>
              <td>Lorem ipsum</td>
              <td>Lorem ipsum</td>
              <td>Lorem ipsum</td>
            </tr>
            <tr>
              <td>Dolor sit amet</td>
              <td>Lorem ipsum</td>
              <td>Lorem ipsum</td>
            </tr>
            <tr>
              <td>-</td>
              <td>Dolor sit amet</td>
              <td>Lorem ipsum</td>
            </tr>
            <tr>
              <td>-</td>
              <td>-</td>
              <td>Lorem ipsum</td>
            </tr>
            <tr>
              <td><a href="#" class="btn btn-success btn-block">Purchase</a></td>
              <td><a href="#" class="btn btn-info btn-block">Purchase</a></td>
              <td><a href="#" class="btn btn-danger btn-block">Purchase</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

The first change is that we added a header, <h3>, in this section in the first row. Furthermore, we added the .success, .info, and .danger classes to the first <tr> in <tbody> (they are highlighted in bold).

Also in <table>, we removed the .table-bordered class to take out the border from it. Finally, we changed some colors in the CSS file and created the .white-text class, which is highlighted in the code as well:

section#pricing h3.price-headline {
  margin-top: 5rem;
  margin-bottom: 3rem;
}

section#pricing .white-text {
  color: #FFF;
}

section#pricing thead .success {
  background-color: #78CFBF;
}

section#pricing thead .info {
  background-color: #3EC6E0;
}

section#pricing thead .danger {
  background-color: #E3536C;
}

section#pricing tbody .success {
  background-color: #82DACA;
}

section#pricing tbody .info {
  background-color: #53CFE9;
}

section#pricing tbody .danger {
  background-color: #EB6379;
}

The following screenshot presents the result of the price table. Finally, to sum it up, we will advance to the footer, which contains the contact information:

The footer

For the footer, we will have five columns, the first one being the logo with a .col-sm-2. This will be followed by three info columns, each one with a .col-sm-2 as well. The last column is the address column, with the .col-sm-4 class. The HTML code is as follows:

<footer>
  <div class="container">
    <div class="col-sm-2">
      <img src="imgs/logo.png" class="img-responsive">
    </div>
    <div class="col-sm-2">
      <h5>The company</h5>
      <ul class="list-unstyled">
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Packt publisher</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="col-sm-2">
      <h5>Social</h5>
      <ul class="list-unstyled">
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </div>
    <div class="col-sm-2">
      <h5>Support</h5>
      <ul class="list-unstyled">
        <li><a href="#">Contact</a></li>
        <li><a href="#">Privacy police</a></li>
        <li><a href="#">Terms & conditions</a></li>
        <li><a href="#">Help desk</a></li>
      </ul>
    </div>
    <div class="col-sm-4">
      <address>
        <strong>Name, Inc.</strong>
        Address line 1<br>
        Address line 2<br>
        <abbr title="Phone">P:</abbr> (123) 456-7890
      </address>
    </div>
  </div>
</footer>

Now, let's prettify the footer with some CSS rules:

footer {
  background-color: #191919;
  color: #ADADAD;
  margin-top: 3em;
}

footer h5,
footer img {
  margin-top: 5em;
  font-weight: bold;
}

footer address {
  margin-top: 5em;
  margin-bottom: 5em;
  color: #5A5A5A;
}

footer ul {
  margin-bottom: 5em;
}

footer address strong {
  color: #ADADAD;
  display: block;
  padding-bottom: 0.62em;
}

footer a {
  font-weight: 300;
  color: #5A5A5A;
}

footer a:hover {
  text-decoration: none;
  color: #FFF;
}

So, we basically changed the background to a shaded one, added some margins to make the footer larger, and modified the links' colors. And we are done with the new layout! See in the following screenshot how the final layout for the footer looks:

Resize the viewport and you will see how the page correctly adapts to any kind of resolution. So we have made the page again, this time with the mobile-first perspective in mind, adding more content and using Bootstrap as our backup. Nicely done!

Forming the forms

The Web would not be the same without forms. They are one of the major methods of interacting with a web page and sending data to consolidate. Since the beginning of the Web, the style and rendering of forms were a source of trouble, because they were displayed differently for each browser and there were placement problems.

This is one of the reasons Bootstrap appeared to make all web pages follow the same rendering pattern for any browser and device. For forms, this is no different. There are styles for almost every kind of element. We will start talking about forms in this section, although we will keep discussing them in later chapters as well, since they are an important element in frontend web development.

Newsletter form

To start easy, we will use an inline form in our landing page. Let's add a new row between the price table row and the footer with the following HTML code:

<section id="newsletter" class="text-center">
  <h4>Stay connected with us. Join the newsletter to receive fresh info.</h4>
  <form class="form-inline" method="POST">
    <div class="form-group">
      <input class="form-control" placeholder="Your name">
    </div>
    <div class="form-group">
      <input class="form-control" placeholder="Your email">
    </div>
    <button type="submit" class="btn btn-primary">Join now!</button>
  </form>
</section>

OK, we're starting to break down every part of the code. The first part—we just created a new <section> and centralized it using the .text-center class from the Bootstrap helpers.

The first form type that you will learn about is .form-inline, which simply makes all the controls inside it the inline-block kind. Because of that, we are able to centralize the form using the .text-center helper. Also, this form will make the controls inline until the small viewport, when it changes the controls to become blocks, each one filling one line.

Inside .form-inline, we have two div.form-group. Every element inside a <form> that contains the .form-group class will automatically be displayed as a block element. In almost every form element, we will have a .form-group, since it is an important wrapper for labels and controls for the purpose of optimizing spacing in Bootstrap.

In our case, since we set the form to be the inline kind (because of the .form-inline class), the .form-group elements will be inline elements as well.

The two <input> are not magical; just place it in your code as shown. The same applies to the button, by using the .btn-primary class to make it blue.

The CSS for this section is quite simple. We have just made some tweaks for better rendering:

section#newsletter {
  border-top: 1px solid #E0E0E0;
  padding-top: 3.2em;
  margin-top: 2em;
}

section#newsletter h4 {
  padding: 1em;
}

section#newsletter form {
  padding: 1em;
  margin-top: 2em;
  margin-bottom: 5.5em;
}

Our first form is complete! The following screenshot shows the final output of the form:

This one was the simplest form. Now let's crack some other forms to nail it in Bootstrap.

Contact form

To make a contact form, we need to create another HTML file. Name it contact.html and use the same header and footer that you used earlier in the landing page. The final output is shown in the next image. Let's break down each part of the form to achieve the final result:

First of all, we need to create the grid for this form. As you can see, the form is in the center of the page, so to do that, create this HTML code:

<section id="contact" class="container">
  <div class="row">
    <div class="col-sm-offset-2 col-sm-8">
          …
    </div>
  </div>
</section>

We just created the grid for this container. Inside this column, we need to create a <form> element with the following code:

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label" for="contact-name">Name</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="contact-name" placeholder="Full name">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label" for="contact-email">Email</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="contact-email" placeholder="Contact email">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label" for="contact-email">Message</label>
    <div class="col-sm-10">
      <textarea class="form-control" rows="3" placeholder="Type your message"></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <label class="checkbox">
        <input type="checkbox" value="">
        I want to subscribe to receive updates from the company.
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button class="btn btn-success btn-lg" type="submit">Submit</button>
    </div>
  </div>
</form>

At first sight, it looks like a common form, with two input fields, a text area, a checkbox, and a submit button. The .form-horizontal class is responsible for aligning the labels and the inputs side by side horizontally. Note that we are using the .col-sm-* grid classes in both labels and inputs in a grid of 12 parts inside .form-group, just like the column nesting technique.

In the .form-group checkbox, we created a <div> with an offset of 2 to fill the part that is not needed in this case. Note that we are able to use the same grid classes to acquire the same results inside forms. To place the Bootstrap theme in the checkbox, just add the .checkbox class to the label wrapping the input.

We don't need much CSS in this section; just add some padding to give some space to the form:

section#contact form {
  padding-top: 9rem;
  padding-bottom: 3rem;
}

Let's start with some JavaScript

It's time to start playing with some JavaScript! Create a file named main.js inside the js folder, which also contains the Bootstrap JavaScript file and jQuery library. To do the groundwork in the JavaScript file, we need to load it after document is ready:

$(document).ready(function() {
    // document ready, place you code
});

Then, we will validate the form before sending it. To do that, attach an event handler to the form submission, like this:

$(document).ready(function() {
    $('#contact form').on('submit', function(e) {
        e.preventDefault();
    });
});

You may know this, but the e.preventDefault() code line is a method that prevents the default action from being triggered, the form submission in this case.

Moving on, we create the variables that we will use and the validation code:

$(document).ready(function() {
    $('#contact form').on('submit', function(e) {
        e.preventDefault();
        var $form = $(e.currentTarget),
            $email = $form.find('#contact-email'),
            $button = $form.find('button[type=submit]');
        
        if($email.val().indexOf('@') == -1) {
            vaca = $email.closest('form-group')
            $email.closest('.form-group').addClass('has-error');
        } else {
            $form.find('.form-group').addClass('has-success').removeClass('has-error');
            $button.attr('disabled', 'disabled');
            $button.after('<span>Message sent. We will contact you soon.</span>');
        }
    });
});

So, we first created our variables for the form, the email field, and the button element. After that, we performed a naïve validation on the email field, where if the @ character is present in the field, it is valid. If it is not present, we add the .has-error class to the parent .form-group of the field. It will produce the elements inside the form group in red, as presented in the following screenshot:

Load the JavaScript file in the HTML of contact.html just below where bootstrap.js loads:

<script src="js/bootstrap.js"></script>
<script src="js/main.js"></script>

If the @ sign is present in the field, we simply pass the validation by fake-sending it. When this happens, we add the .has-success class to each .form-group, making them green. We also add the attribute disabled to the button, changing its behavior and theme as Bootstrap does it.

Finally, we add after the button a simple feedback message for the user, saying that the contact message was sent. The following screenshot shows the case where the contact message is successfully sent:

The sign-in form

Now that you have learned some more form styles in the contact file, we will play with another kind of form: the sign-in form.

Go back to the landing page HTML file, and in the sign in .btn located inside the introduction header, add the #sign-btn identifier:

<a id="sign-btn" class="btn btn-default btn-lg" href="#" role="button">Sign in</a>

After the <ul> that wraps the sign buttons, place the sign-in form code:

<form id="signin" class="form-inline text-center hidden-element">
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
      <input type="text" class="form-control" id="signin-email" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">*</div>
      <input type="password" class="form-control" id="signin-password" placeholder="Password">
    </div>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

The result should be like what is shown in the following screenshot, where the new form appears after the buttons:

Before moving on to fixing the layout, let's explain .input-group. Bootstrap offers this option to prepend or append things to an input using .input-group-addon. In this case, we prepend @ and * to each input. We could also have appended this to the inputs by placing .input-group-addon after the input instead of before.

For the CSS, we just added the .hidden-element rule. We could not use the .hidden Bootstrap helper because it applies the !important option, and we would not have been able to make it visible again without removing the class:

.hidden-element {
  display: none;
}

Let's animate it a little! Go to the JavaScript file and add the event listener to the click on the sign-in button:

$(document).ready(function() {
    … // rest of the JavaScript code
    $('#sign-btn').on('click', function(e) {
        $(e.currentTarget).closest('ul').hide();
        $('form#signin').fadeIn('fast');
    });
});

By doing this, we hide the <ul> element that contains the sign buttons and show the sign in form. That was just the cherry on our pie, and we are done with forms by now! Refresh the web page in the browser, click on the Sign in button, and see the new form appearing. Moving forward, we will use some images and see how Bootstrap can help us with that.

Images

For images, Bootstrap offers some classes to make your day better. We have already discussed the use of the .img-responsive class, on which the image becomes scalable by setting max-width: 100% and height: auto.

The framework also offers three convenient classes to style your image. To make use of that, place the following code after the price table in the landing:

<section id="team">
  <div class="container">
    <div class="row">
     <div class="col-sm-12">
        <ul class="list-inline list-unstyled text-center">
          <li>
            <img src="imgs/jon.png" class="img-rounded">
            <h5>Jonny Doo</h5>
            <p>CEO</p>
          </li>
          <li>
            <img src="imgs/jon.png" class="img-circle">
            <h5>Jonny Doo</h5>
            <p>CTO</p>
          </li>
          <li>
            <img src="imgs/jon.png" class="img-thumbnail">
            <h5>Jonny Doo</h5>
            <p>CIO</p>
          </li>
        </ul>
      </div>
    </div>
</section>

As you can notice, we simply created another container and row with a single column, .col-sm-12. Inside the column, we added an inline list with the elements, each one having one image with a different class. The .img-rounded class makes the corners rounded, .img-circle turns the image into a circular shape, and .img-thumbnail adds a nice rounded border to the image, like this:

The preceding screenshot shows how this section is displayed. We also had to add some CSS code to increase margins and paddings, along with font customization:

section#team ul {
  margin: 5rem 0;
}

section#team li {
  margin: 0 5rem;
}

section#team h5 {
  font-size: 1.5rem;
  font-weight: bold;
}

So, it's nice to have a backup of Bootstrap, even with the images, making our work easier and pacing up the development. By the way, Bootstraps offers tons of helpers with the same objective. We have already used some of them; now let's use even more.

Helpers

Helpers are Bootstrap classes that help us achieve certain customizations. They are planned to offer a single purpose and reduce CSS frequency of repeated rules. The goal is always the same: increase the pace of development.

Floating and centering blocks

We have talked previously about the .pull-left and .pull-right classes, which make the HTML element float to the left or right. To center the block, you can use the .center-block class.

To make use of this, go to the column that wraps the pricing table, and replace the.col-sm-10.col-sm-offset-1 classes with .center-block. In the CSS, add the following rule:

section#pricing .center-block {
  width: 90%
}

Refresh the web page and you will see that the table stays centered, but now using a different approach.

Context colors

You can apply the same colors that we used in buttons and the price table to every element in the page. To do that, use these classes: .text-primary, .text-success, .text-warning, .text-info, .text-danger, and .text-muted.

In the images section that we have just made, apply the .text-info class to the <h5> elements and apply .text-muted in <p>:

<section id="team">
  <div class="container">
    <div class="row">
      <ul class="list-inline list-unstyled text-center">
        <li>
          <img src="imgs/jon.png" class="img-rounded">
          <h5 class="text-info">Jonny Doo</h5>
          <p class="text-muted">CEO</p>
        </li>
        <li>
          <img src="imgs/jon.png" class="img-circle">
          <h5 class="text-info">Jonny Doo</h5>
          <p class="text-muted">CTO</p>
        </li>
        <li>
          <img src="imgs/jon.png" class="img-thumbnail">
          <h5 class="text-info">Jonny Doo</h5>
          <p class="text-muted">CIO</p>
        </li>
      </ul>
    </div>
</section>

Refresh the web page, and the headline element will be light blue and the paragraph text grey.

To make the opposite operation—changing the background to the context color—apply the .bg-* class, where you can pass one of the color options (primary, info, warning, or danger).

Spacing

In Bootstrap 4, they added new helpers for margins and padding spacing. If you are using Sass, you can set a default $spacer and every margin will work like a charm by using these classes, although the default value for the spacer is 1rem.

Next, we will present a table with the classes for margin usage. In summary, you will use the .m-*-* regex, where the first option is the location, such as top, bottom, and so on. The second option is the size of the margin. Refer to this table for a better understanding of the usage:

	Remove margin	Default margin	Medium margin (1.5 times)	Large margin (3 times)
All	`.m-a-0`	`.m-a`	`.m-a-md`	`.m-a-lg`
Top	`.m-t-0`	`.m-t`	`.m-t-md`	`.m-t-lg`
Right	`.m-r-0`	`.m-r`	`.m-r-md`	`.m-r-lg`
Bottom	`.m-b-0`	`.m-b`	`.m-b-md`	`.m-b-lg`
Left	`.m-l-0`	`.m-l`	`.m-l-md`	`.m-l-lg`
Horizontal	`.m-x-0`	`.m-x`	`.m-x-md`	`.m-x-lg`
Vertical	`.m-y-0`	`.m-y`	`.m-y-md`	`.m-y-lg`

For the padding, the classes are almost the same; just use the .p-*-* prefix to get the expected result. Remember that the default spacer is 1rem, so the medium is 1.5rem and large is 3rem:

	Remove margin	Default padding	Medium padding (1.5 times)	Large padding (3 times)
All	`.p-a-0`	`.p-a`	`.p-a-md`	`.p-a-lg`
Top	`.p-t-0`	`.p-t`	`.p-t-md`	`.p-t-lg`
Right	`.p-r-0`	`.p-r`	`.p-r-md`	`.p-r-lg`
Bottom	`.p-b-0`	`.p-b`	`.p-b-md`	`.p-b-lg`
Left	`.p-l-0`	`.p-l`	`.p-l-md`	`.p-l-lg`
Horizontal	`.p-x-0`	`.p-x`	`.p-x-md`	`.p-x-lg`
Vertical	`.p-y-0`	`.p-y`	`.p-y-md`	`.p-y-lg`

Responsive embeds

The new version of Bootstrap 4 also allows us to make embeds responsive. So, there are classes for the <iframe>, <embed>, <video>, and <object> elements. To get the expected result, add the .embed-responsive class to your element:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="//www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
</div>

We added the .embed-responsive-16by9 class to make the aspect ratio of the video 16:9. You can also use the aspect ratios 21:9 and 4:3 with the .embed-responsive-21by9 and .embed-responsive-4by3 classes respectively.

Summary

In this chapter, we remade our landing page by applying the Bootstrap theme and customizing it, getting a much better result in the end. Right now, we have a clean web page, developed quickly using the mobile-first paradigm.

You also started to learn the use of some forms by going through three examples, one of these being a complementary contact page. Along with forms, we started using JavaScript! We performed form validation and some simple animations on our page, with regard to the template.

Finally, we presented the Bootstrap image options and a bunch of helpers. Remember that there are more helpers than the ones shown in this chapter, but don't worry, because we will see them in the upcoming chapters.

If you think you already have a fancy landing page, we will prove to you that we can improve it even more! We will talk about it again in the next chapter, reaching icons, more forms, buttons, and navigation bars.

Congratulations! You have reached this point of the book. Brace yourself, because the next level is coming. We will take a step forward by using more complex elements and components of Bootstrap.

The rest of the chapter is locked