Final Content Integrations for the Homepage
In this guide we'll walk through adding the final content items for the social network, spending specific time to analyzing how it works within the grid layout provided by Twitter Bootstrap.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

I've added the rest of the content, and we'll go through it section by section. I pasted the content because I want you to focus on the different bootstrap classes and design integration, instead of seeing me type out everything manually.

The first thing I added is another <div> tag with "vertical" class.

<div class="vertical padding featured">
  <div class="image">
    <img src="images/image2.png" />
    <ul class="stats">
      <li>
        <span class="icon icon-view"></span>
        <p>369</p>
      </li>
      <li>
        <span class="icon icon-comment"></span>
        <p>36</p>
      </li>
      <li>
        <span class="icon icon-relations"></span>
        <p>52</p>
      </li>
    </ul>
    <div class="featured"></div>
</div>
<div class="text">
   <h2>New Stuff Coming This Fall</h2>
   <p>Duis aute irure dolor in reprehenderit in 
                            voluptate velit esse cillum dolore eu fugiat
                            nulla pariatur sunt in culpa <strong>qui officia 
                            deserunt</strong> mollit anim id est laborum. 
                            Duis aute irure dolor in reprehenderit...</p>
    <a href="article.html" class="btn btn-default btn-dotted pull-left"><span>Read More</span></a>
  </div>
</div>

It's similar to the ones we've done in the past, and includes an image and some text.

All these text-image combinations are located inside a <div> tag that has a column span of 9. We're now going to work on the remaining three column span. So, make sure you're out of that <div> before typing in this code. 

<div class="col-xs-3 sidebar pull-right">
  <ul>
    <li><a href="#">All</a></li>
    <li class="active"><a href="#">Business</a></li>
    <li><a href="#">Gaming</a></li>
    <li><a href="#">Leisure</a></li>
    <li><a href="#">Lifestyle</a></li>
    <li><a href="#">Offbeat</a></li>
    <li><a href="#">Politics</a></li>
    <li><a href="#">Science</a></li>
    <li><a href="#">Business</a></li>
    <li><a href="#">Gaming</a></li>
    <li><a href="#">Leisure</a></li>
    <li><a href="#">Lifestyle</a></li>
    <li><a href="#">Offbeat</a></li>
    <li><a href="#">Politics</a></li>
    <li><a href="#">Science</a></li>
    <li><a href="#">Business</a></li>
    <li><a href="#">Gaming</a></li>
    <li><a href="#">Leisure</a></li>
    <li><a href="#">Lifestyle</a></li>
    <li><a href="#">Offbeat</a></li>
    <li><a href="#">Politics</a></li>
    <li><a href="#">Science</a></li>
    <li><a href="#">Business</a></li>
    <li><a href="#">Gaming</a></li>
    <li><a href="#">Leisure</a></li>
    <li><a href="#">Lifestyle</a></li>
    <li><a href="#">Offbeat</a></li>
    <li><a href="#">Politics</a></li>
  </ul>
</div>

If you see, we're using the remaining three column spans for these links, so they will appear to the right of the text-image sets. These are the categories placed inside an unordered list.

With this, our <div> tag with "container" class ends.

Finally, we have the "footer", that has another <div> tag with "container" class nested inside it. 

<div id="footer" class="blue">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <ul class="pull-left">
          <li><a href="index.html">Home</a>/</li>
          <li><a href="faq.html"  class="active">FAQ</a>/</li>
          <li><a  href="contact.html">Contact</a>/</li>
          <li><a href="affiliate.html">Affiliate</a>/</li>
          <li><a href="pricing.html">Pricing</a></li>
        </ul>
        <p class="copyright pull-right">Copyright © 2015 <strong>Daily Smarty.</strong> All rights reserved. </p>
      </div>
    </div>
  </div>
</div>

This contains an unordered list of links and our copyright image.

At the very end, I've added a line of JavaScript. 

<!-- Bootstrap -->
<script src="vendor/bootstrap-3.3.2/js/bootstrap.min.js"></script>

Don't worry too much about it, as you won't need it at all. I just put it in there to show you how you can give access to bootstrap classes through JavaScript.

There's one more piece of code I've added at the end.
They are commented for now, but you'll have to uncomment them if you're application is going to be run on older browsers. 

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="vendor/bootstrap-3.3.2/js/html5shiv.js"></script>
  <script src="vendor/bootstrap-3.3.2/js/respond.min.js"></script>
<![endif]-->

After all this, the output looks like this:

large

If you see, that's quite a lot of content. it doesn't look great, though we've used many pre-built bootstrap classes. This is because bootstrap only provides a foundation for our page and doesn't give all the styles we need. This is why it's a bad design practice to only use bootstrap classes for design. You can use them, provided you also use some custom classes to give it a unique touch.

So, we'll get to styling them in the next few videos.