Summer’s over — what’s your move? Join Pro for 50% off using code [MAKEITHAPPEN](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=MAKEITHAPPEN)


Learn to create a webpage quickly using the Twitter Bootstrap library. 

Building with Bootstrap

One of the reasons Bootstrap and frameworks like it are so popular is because they offer _grids_. A _grid_ makes it possible to organize HTML elements using preconfigured columns. Using a grid, you can customize responsive page layouts quickly and reliably.

The Bootstrap grid contains *12 equal-sized columns*, as seen in the diagram on the right. HTML elements are arranged to span different numbers of columns in order to create custom page layouts. 



On the Grid

Many websites have a supporting content area. Supporting content can be arranged using Bootstrap's grid. Below is an example implementation of a supporting content area. 

First, an HTML section element with the `container` class is used:   

```html
<section class="container">

</section>
```
Next, div elements with the `row` class are added:  

```html 
<section class="container">
  <div class="row">
  </div>
  <div class="row">
  </div>
</section>
```
Finally, the rows are divided by using divs with Bootstrap's `col-sm-...` class.

```html 
<section class="container">
  <div class="row">
    <div class="col-sm-6">
     ...
    </div>
    <div class="col-sm-6">
     ...
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
     ...
    </div>
    <div class="col-sm-6">
     ...
    </div>
  </div>
</section>
```
Above, two rows are divided into two equal parts. Each part takes up 6 of bootstrap's 12 columns. Using the `col-sm-6` class ensures that this layout will  appear when the user's screen is the width of a tablet device(768 pixels). On narrower screens, such as an iPhone, only one image per row will appear.  

Let's create a supporting content area for our webpage! 

Supporting Content

_Bootstrap_ is a popular CSS framework with _prewritten_ CSS rules designed to help you build webpages faster.   


CSS Frameworks

Before Bootstrap can work for us, we need to link to it. 

In earlier lessons, we linked only to __main.css__. Now, in addition to __main.css__, we will link to a URL that hosts Bootstrap. 

The HTML link element makes Bootstrap available to us. Remember that the link element is typically contained within HTML head tags.   

```html
<head>
  ... 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  ...
</head>
```
Above, the `href` attribute is set to the URL `https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css`. 

Let's explore what Bootstrap can do for us. 

Connecting to Bootstrap


Congratulations! You've made it to the bottom of the webpage: the _footer_!

Footers display copyright information, social media links, and sometimes, site navigation.     

Below is one possible implementation for a footer section using Bootstrap: 

First, a footer element with Bootstrap's `container` class is used:  

```html
<footer class="container">

</footer>
``` 
Inside the footer, a div with Bootstrap's `row` class is added to hold footer content: 

```html
<footer class="container">
  <div class="row">
  ... 
  </div>
</footer>
``` 
Finally, the row is divided into parts using Bootstrap's grid. Here is one suggestion: 

```html 
<footer class="container">
  <div class="row">
    <p class="col-sm-4">...</p>
    <ul class="col-sm-8">
      <li class="col-sm-1">...</li>
      <li class="col-sm-1">...</li>
      <li class="col-sm-1">...</li>
    </ul>
  </div>
</footer>
```
Above, the row is broken into three parts: a `p` element that takes up four columns, a `ul` which takes up 8 columns, and `li` items which take up 1 column each. The `li`s could hold navigation menu items or social media icons. 

Again, because the `col-sm-...` class is used, this layout will appear on tablet-width screens and wider. Screen sizes smaller than tablet-width (768 pixels), will not maintain this layout. 

Now let's write the code for your own footer!

Footers

In addition to a header/navigation, many websites have a large showcase area featuring important content. Bootstrap refers to this as a _jumbotron_. Below is an example implementation of a jumbotron. 

First, a new _section_ element is created and assigned the `jumbotron` class:

```html
<section class="jumbotron">

</section>
```  

Next a div with the Bootstrap class `container` is used:    

```html
<section class="jumbotron">
  <div class="container">
  ... 
  </div>
</section>
```   
A div with the Bootstrap class `row text-center` can center subsequent child elements which will contain text: 

```html
<section class="jumbotron">
  <div class="container">
    <div class="row text-center">
       ...
    </div>
  </div>
</section>
```
The `...` is a placeholder for HTML elements containing text, such as h2, p or anchor elements. 

Let's explore the jumbotron feature by creating our own below!  

The Jumbotron

You just built an impressive webpage using the Bootstrap CSS framework. Nice work! 

Let's take a moment to review the core concepts learned in this lesson:

Bootstrap Generalizations

Let's use Bootstrap's grid to create a simple header with navbar.  

In the example code below, an HTML _header_ element with Bootstrap's predefined `container` class is used:    

```html
<header class="container">
  ...
</header>
```

Inside the header, a row is created by using a div with Bootstrap's `row` class:  

```html
<header class="container">
  <div class="row">
  </div> 
</header>
```

Finally, the row is cut into two parts:

```html
<header class="container">
  <div class="row">
    <h1 class="col-sm-4">Heading</h1>
    <nav class="col-sm-8 text-right">
      <p>nav item 1</p>
      <p>nav item 2</p>
      <p>nav item 3</p>
    </nav> 
  </div>
</header>
``` 
The first part consists of the `h1` with Bootstrap's class `col-sm-4`. It will take up the first four columns on the grid. The second part consists of the `nav` element with class `col-sm-8`. It will take up the remaining eight grid columns. `text-right` indicates that text will be arranged on the right side of the `nav`.   
