Bootstrap provides styled headings from h1 to h6. You should always use them in order of importance, from <h1> to <h6> (the least important).

The heading has classes for identifying its style. So, if your most important phrase is not the biggest one at times, you can swap the sizes by adding heading classes, just as in the following example:

<h1 class="h3">Heading 1 styled as heading 3</h1>
<h2 class="h1">Heading 2 styled as heading 1</h2>
<h3 class="h2">Heading 3 styled as heading 2</h3>

The other element of the first row is a button! We can apply button classes for hyperlinks, button elements, and inputs. To make one of these elements a button, just add the .btn class followed by the kind of button, in this case the kind .btn-default, which is a blue button. The next table shows every possibility of color classes for a button:

Button class	Output
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

We have also added the .btn-lg class in the first row button. This class will increase the size of the button. Bootstrap also provides some other button size classes, such as .btn-sm for small buttons and .btn-xs for even smaller ones.

You can also make a button span the full width of the parent element with the .btn-block class, changing the display of the button to block.

With regards to the second row, we have a row that contains a heading and complementary small text after that.

To add lighter and secondary text to the heading, we can add a <small> tag or any other tag with the .small class inside the heading. The HTML for the first column in the second row should be like the following:

<div class="row">
  <div class="col-md-offset-4 col-md-4">
    <h3>
      Some text with <small>secondary text</small>
    </h3>
  </div>
  <div class="col-md-4">
    <h3>
      Add to your favorites
      <small>
        <kbd><kbd>ctrl</kbd> + <kbd>d</kbd></kbd>
      </small>
    </h3>
  </div>
</div>

Note that inside the small tag, we have added a <kbd> tag, which is an HTML element that creates a user-like input keyboard. Refresh the web browser and you will see this row as shown here:

For the third row, we have a code snippet and an image. To create a code snippet, use the <pre> tag for multiple lines of code. The <pre> tag is present in HTML for creating preformatted text, such as a code snippet. You have the option of adding the .pre-scrollable class, which will add a scrollbar if the code snippet reaches the maximum height of 350 px (or 21.8 em).

For this row, in the right column, we have an image. For that, just create an <img> tag and add the .img-responsive class, which will make the images automatically responsive-friendly to the viewport. The HTML for the third row is as follows:

<div class="row">
  <div class="col-md-3">
    <pre>&lt;p&gt;I love programming!&lt;/p&gt;
&lt;p&gt;This paragraph is on my landing page&lt;/p&gt;
&lt;br/&gt;
&lt;br/&gt;
&lt;p&gt;Bootstrap by example&lt;/p&gt;
    </pre>
  </div>
  <div class="col-md-9">
    <img src="imgs/center.png" class="img-responsive">
  </div>
</div>

Refresh your browser and you will see the result of this row as shown in the following screenshot:

In the fourth row, we have images in both the left and right columns and a testimonial in the middle. Bootstrap provides a typographic theme for doing block quotes, so just create a <blockquote> tag. Inside it, create a <footer> tag to identify the source, and wrap the name in a <cite> tag, like this:

<div class="row">
  <div class="col-md-3">
    <img src="imgs/bs.png" class="img-responsive">
  </div>
  <div class="col-md-6">
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Testimonial from someone at <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
  <div class="col-md-3">
    <img src="imgs/packt.png" class="img-responsive">
  </div>
</div>

Moving on, we must advance to the fifth row. This row is here just to show the different ways in which we can apply typography and coding elements tags using Bootstrap. Let's go through each one to describe its usage.

In the first column, we have a piece of inline code. To do that, wrap the snippet in a <code> tag. From the first to the fourth column of this row, we are presenting the alignment classes. Using these, you can easily realign text content in a paragraph tag. The code for the row is as follows:

<div class="row">
  <div class="col-md-3">
    <p class="text-left"><code>&lt;Left&gt;</code></p>
  </div>
  <div class="col-md-3">
    <p class="text-center">Center</p>
  </div>
  <div class="col-md-3">
    <p class="text-justify">Justify</p>
  </div>
  <div class="col-md-3">
    <p class="text-right">Right</p>
  </div>
</div>

Just use the right classes for a proper alignment. The result in the browser should look like this:

The sixth row is composed of four equally divided columns, but in this case, we are using the nesting rows option. On the first three columns, we added Bootstrap text transformation classes to make the text lowercase, uppercase, and capitalized, respectively. The code for this row should be like the following:

<div class="row">
  <div class="col-md-3">
    <h3>Lowercase</h3>
    <p class="text-lowercase">
      Lorem ipsum dolor ... consequat.
    </p>
  </div>
  <div class="col-md-6">
    <div class="row">
      <div class="col-md-6">
        <h3>Uppercase</h3>
        <p class="text-uppercase">
          Lorem ipsum dolor ... consequat.
        </p>
      </div>
      <div class="col-md-6">
        <h3>Capitalize</h3>
        <p class="text-capitalize">
          Lorem ipsum dolor ... consequat.
        </p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <h3>Strong and italic</h3>
    <p>
      <strong>Lorem ipsum</strong> dolor ... <em>consequat</em>.
    </p>
  </div>
</div>

Pay attention to the last column, where we are using the <strong> tags to make the text bold and the <em> tag to make the text italic. Refresh your web browser and see the result, like this:

Finally, we are going through the footer, which is the last row. If you take a look at the full layout image (the one presented at the beginning of this section), you will notice that it is composed of three columns. The first column contains a logo image, the middle one contains an inline list, and the last one has the company's contact address.

For the first column, we should just create an <img> tag with the .img-responsive class. For the second column, the inline list, we must create a <ul> tag. By default, every <li> inside a <ul> has the bullets on the left-hand side. To remove them, apply the .unstyled Bootstrap class. Also, a <ul> will create the <li> elements as a block. In our case, we want the <li> to appear side by side, so we use the .list-inline Bootstrap class to create this effect.

To present contact information in the last column, we will use the <address> tag. Bootstrap offers a CSS theme for this tag; you just need to keep the formatting along with the <br> tags, as shown in this code:

<footer class="row jumbotron">
  <div class="col-md-2">
    <img src="imgs/logo.png" class="img-responsive">
  </div>
  <div class="col-md-7">
    <ul class="list-inline list-unstyled">
      <li><a href="#">Documentation</a></li>
      <li><a href="#">Packt publisher</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Bootstrap</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="col-md-3">
    <address>
      <strong>Name, Inc.</strong><br>
      Address line 1<br>
      Address line 2<br>
      <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>
  </div>
</footer>

Pay attention to the <footer> tag. We added the .jumbotron class to make it rounded and give it a gray background. The following screenshot presents to us the result of the footer: