Bootstrap tutorial - Part III

Third part of a series of tutorials on how to design an adaptive website using Bootstrap. Hero unit, thumbnails, links styled as buttons.

After analyzing the basic concepts of Bootstrap's fluid grid implementation, today we are going to apply them in context, for that we will start designing a web page for a fictitious company: "The Flowers Store". Unlike the previous chapter, in this lesson we will not use any additional CSS for styling. If you follow along all the tutorial, by the end you will have something like this:

This is how your web page should look when you're done!

Beginning.

We're going to start using the same basic HTML5 document structure we've used before:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Tutorial – Multicored!</title>
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> </head> <body> <script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/js/bootstrap.min.js"></script>
</script> </body> </html>

Let's add a header just under the opening body tag, and make it span across the width of the page:

<header class="span12">
<h1>The Flowers Store</h1>
</header>
Hero unit.

A hero unit is an area in the page that we want to highlight or make more "obvious" than the rest of the content. It can be used for featured articles, images, galleries, etc., the limit is your imagination. The CSS class we have to assign is "hero-unit":

<section class="row-fluid">
<div class="span8 hero-unit">
<h2>We sell bouquets!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan ultrices velit a commodo.
Suspendisse dui elit, pretium sed fringilla eget, egestas a libero. Mauris sed urna in ante fermentum
sollicitudin. Morbi posuere interdum eleifend. Vivamus eget turpis metus, ac vulputate tellus. Nunc
venenatis justo vel odio placerat elementum. Praesent id est sem. Sed congue nulla in tortor interdum
iaculis. Morbi eleifend sagittis elit ut blandit. Mauris dictum est non nibh adipiscing sed venenatis neque
aliquam. Ut volutpat dolor in diam semper interdum. Etiam at condimentum sem. Fusce quis arcu
consequat ligula interdum suscipit. </p>

In the above code we created a section, assigned it a row-fluid class and then nested a div classified as "hero-unit". This division will have a different background color and the font will be stronger. With "span8" we said that this unit will use only 8 of the 12 available columns.

Now we are going to use the other 4 columns with a side bar:

<div class="span4">
<h2>We also offer wholesale!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan ultrices velit a 
commodo. Suspendisse dui elit, pretium sed fringilla eget, egestas a libero. Mauris sed urna
in ante fermentum sollicitudin. Morbi posuere interdum eleifend. Vivamus eget turpis metus,
ac vulputate tellus. Nunc venenatis justo vel odio placerat elementum. Praesent id est sem.
Sed congue nulla in tortor interdum iaculis. Morbi eleifend sagittis elit ut blandit. Mauris
dictum est non nibh adipiscing sed venenatis neque aliquam. Ut volutpat dolor in diam semper
interdum. Etiam at condimentum sem. Fusce quis arcu consequat ligula interdum suscipit.</p>

Since the right column is very often used as an informational area, with links to others pages or even other websites, we are now going to add a read more link and will close the section immediately after that:

<p><a href="#" class="btn btn-info btn-small">Read more</a></p>
</div>
</section>

Bootstrap allows to style links as buttons with the class “btn”, additional classes such as “btn-info” and “btn-small” control the color and size of the button. This classes can be applied to links <a> and <button> as well.

Finally, let's add three columns at the bottom that will work as a thumbnails gallery. For that we will use an unsorted list <ul>

and will give it a class of "thumbnails". Each individual item <li> will be a "thumbnail" class member:

<div class="row-fluid">
<ul class="thumbnails">
<li class="span4">
<article class="thumbnail">
<img src="/img/roses.png" alt="Roses" />
<h3>Roses bouquet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan ultrices velit a commodo.
Suspendisse dui elit, pretium sed fringilla eget, egestas a libero.</p> </article> </li> <li class="span4"> <article class="thumbnail"> <img src="/img/lilies.png" alt="Lilies" /> <h3>Lilies bouquet</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan ultrices velit a commodo.
Suspendisse dui elit, pretium sed fringilla eget, egestas a libero.</p> </article> </li> <li class="span4"> <article class="thumbnail"> <img src="/img/tulips.png" alt="Tulips" /> <h3>Tulips bouquet</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan ultrices velit a commodo.
Suspendisse dui elit, pretium sed fringilla eget, egestas a libero.</p> </article> </li> </ul> </div>

By now your page should look like the picture we showed at the start of the lesson. As you can see, with Bootstrap you can make any chunk of code look like a real web page only by applying a few CSS classes.

Just in case you want to check your code to make sure everything is ok, it should be like this:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flower Store - Multicored!</title>
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> </head> <body> <div id="global-header" class="container-fluid"> <header class="span12"> <h1>The Flowers Store</h1> </header> <section class="row-fluid"> <div class="span8 hero-unit"> <h2>We sell bouquets!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan ultrices velit a commodo.
Suspendisse dui elit, pretium sed fringilla eget, egestas a libero. Mauris sed urna in ante fermentum
sollicitudin. Morbi posuere interdum eleifend. Vivamus eget turpis metus, ac vulputate tellus. Nunc
venenatis justo vel odio placerat elementum. Praesent id est sem. Sed congue nulla in tortor interdum
iaculis. Morbi eleifend sagittis elit ut blandit. Mauris dictum est non nibh adipiscing sed venenatis neque
aliquam. Ut volutpat dolor in diam semper interdum. Etiam at condimentum sem. Fusce quis arcu
consequat ligula interdum suscipit. </p> </div> <div class="span4"> <h2>We also offer wholesale!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan ultrices velit a commodo.
Suspendisse dui elit, pretium sed fringilla eget, egestas a libero. Mauris sed urna in ante fermentum
sollicitudin. Morbi posuere interdum eleifend. Vivamus eget turpis metus, ac vulputate tellus. Nunc
venenatis justo vel odio placerat elementum. Praesent id est sem. Sed congue nulla in tortor interdum
iaculis. Morbi eleifend sagittis elit ut blandit. Mauris dictum est non nibh adipiscing sed venenatis neque
aliquam. Ut volutpat dolor in diam semper interdum. Etiam at condimentum sem. Fusce quis arcu
consequat ligula interdum suscipit.</p> <p><a href="#" class="btn btn-info btn-small">Read more</a></p> </div> </section> <div class="row-fluid"> <ul class="thumbnails"> <li class="span4"> <article class="thumbnail"> <img src="/img/roses.png" alt="Roses" /> <h3>Roses bouquet</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan ultrices velit a commodo.
Suspendisse dui elit, pretium sed fringilla eget, egestas a libero.</p> </article> </li>
<li class="span4">
<article class="thumbnail">
<img src="/img/lilies.png" alt="Lilies" />
<h3>Lilies bouquet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan ultrices velit a commodo.
Suspendisse dui elit, pretium sed fringilla eget, egestas a libero.</p>
</article>
</li>
<li class="span4">
<article class="thumbnail">
<img src="/img/tulips.png" alt="Tulips" />
<h3>Tulips bouquet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan ultrices velit a commodo.
Suspendisse dui elit, pretium sed fringilla eget, egestas a libero.</p>
</article>
</li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/js/bootstrap.min.js"></script>
</script>
</html>

In the next delivery we will discuss how to fine tune the styling of your text, images, buttons and add icons as well.