Now that the header is ready, let's start adding content to the rest of the site.

Below everything, we're going to create another set of <div> tags that'll hold pretty much everything in the page.

As always, we'll have a "container" <div> and a "row" <div> inside of it. Within this, we're going to have another <div> tag for the 12-column grid. Along with this, we'll have a built-in class as well as a style that we'll create in the future.

<div class="container">
  <div class="row">
    <div class="col-xs-9 article-grid pull-left">

    </div>
  </div>
</div>

Inside this nested <div>, we'll have a button with a link. Now, bootstrap offers many button styles, but it's not a good idea to use existing ones when you're building something for the production site. So, we'll override the default bootstrap styles just to give your own touch to it, and to make it look a little unique.

<div class="col-xs-9 article-grid pull-left">
  <a href="#" class="btn btn-default btn-charcoal pull-left"></a>
</div>

In this code, the first two classes come from bootstrap while the third one, namely, "btn-charcoal" is a custom one. Inside this, let's add a <span> tag and some text inside of it.

The webpage looks like this now, though we'll style it better with our custom CSS class.

Next, we'll create an unordered list that'll have one from bootstrap, and the other that is a custom one. Inside this list, we'll place some list items.

<div class="col-xs-9 article-grid pull-left">
  <a href="#accept-article" class="btn btn-default btn-charcoal pull-left"><span>Submit Article</span></a>
  <ul class="filter pull-right">
    <li>Top Now</li>
    <li>Most Recent</li>
    <li class="active">Today</li>
    <li>This Week</li>
    <li>All Time</li>
  </ul>
</div>

If you look at the code, you'll see that we have a special class for just one list item, and that is just to highlight it.

Next, we'll have the categories. Let's start with a <a href> tag and inside of it, a <span> tag. This is going to have some built-in and custom button classes as well.

<a href="#show-categories" class="btn btn-default btn-blue pull-right show-categories"><span>Categories</span></a>

On a side note, what we're doing here is practical learning - something that you're likely to do in the future. In general, while building websites, you're either given a page designed by someone else or a template, and from that, you'll have to build the site. In this sense, what we're doing now is not just going through or replicating code, but also giving you a hands-on feel of what you'll get from clients and how to take it from there.

Moving on, we'll have a select box that'll again have a mix of custom and built-in classes.

<select data-class="filter-select pull-right blue filter-sort" name="type" class="filter-sort pull-right">

If you see, we have both data-class and regular class for our select boxes. Next, we'll put the same items from our unordered list, but instead of list items, we'll use the <option> tag.

<a href="#show-categories" class="btn btn-default btn-blue pull-right show-categories"><span>Categories</span></a>
<select data-class="filter-select pull-right blue filter-sort" name="type" class="filter-sort pull-right">
  <option>Top Now</option>
  <option>Most Recent</option>
  <option selected="selected">Today</option>
  <option>This Week</option>
  <option>All Time</option>
</select>

If you're wondering about the selected attribute, it's a part of responsive design. In a smaller screen, only these <option> items will be show, and the list-items will be hidden.

It's cool that you can accomplish something so complex with just bootstrap classes.

Let's continue in the next video.