Using Bootstrap 3.0 Components

To build this example we’ll need to add a few images to the img directory. Download and extract the following files and place them in the appropriate directory. Demo Images

Before we start we need to get an idea of the different components available to us. Based on the site sample we viewed earlier we can identify four key areas that we’ll need to build.

demo-legend

Documentation

The Navbar is a self-contained element that can be positioned at the top or the bottom of a page or element. Below is the code well need to implement a Navbar similar to what we have in the mock up. Copy an paste this code directly after the opening body tag. If you would like to customize its appearance, look at the documentation for your options.

After you have added the code, save the document and then Preview in your web Browser (F12 or File > Preview in Browser).

Back to Top

Content Container

The Content Container is a structural element required by Bootstrap to maintain document dimensions. We’ll add one to our code below the close of the Navbar section. Be sure to place the other components inside of this container element.

After you have added the code, save the document and then Preview in your web Browser (F12 or File > Preview in Browser).

Back to Top

Jumbotron Element

Documentation

A Jumbotron Element is meant to be used as a call to action or a spot to feature a piece of content. The code we’ll use is below.

After you have added the code, save the document and then Preview in your web Browser (F12 or File > Preview in Browser).

Back to Top

4 Column Grid ( 2 Column Small Screen / 1 Column XS Screen)

Documentation

In order to add a row of grid columns we’ll need to add a div with the class="row" attribute added. Inside we can place up to 12 additional “columns” using the appropriate Bootstrap classes.  For example we’d like 4 equal-sized columns in our desktop mock up so we will add the class “col-md-3”.  This class creates a column that spans 3 of the 12 available columns in the grid on any viewport greater than or equal to 992px. The second class “col-sm-6”, creates a column that spans 6  of the 12 available columns in the grid on any viewport sized between 769px and 991px. When the viewport is equal to or below 768px each column will span all grid columns. There are 4 different classed that allow you to target different breakpoints. For more information visit the documentation.

To duplicate the demo site we’ll need to use the following code…

After you have added the code, save the document and then Preview in your web Browser (F12 or File > Preview in Browser).

Back to Top