Introducing Twitter’s Bootstrap

Twitter Bootstrap is an incredibly popular front-end framework that’s used by many designers, developers and companies. It’s a very well developed and maintained open source framework that is easy to use, responsive, cross browser compatible (they claim that it’s compatible up to IE7!). On top of that, there’s not much you can’t accomplish with Bootstrap.

As with all major frameworks there are a lot of themes available but that’s not what we are going to look at today. Please note that this guide is written for Bootstrap 2.3.2 and things might change in the future.

Introducing Twitter’s Bootstrap 4

What is it for?

Bootstrap provides great handlebars to quickly build prototypes or websites. It’s made for developers by developers.

Where do you begin?

You can download Twitter Bootstrap from their website or you can download /clone it from Github. I suggest that you download it from their website because the website also gives you a lot of information about the framework.

Explore the options

As I mentioned in the introduction, Twitter Bootstrap is a complete framework. It gives you tons of possibilities so it might take some time to understand the framework. Also make sure you only download what you need when you’re going to use it in the real world but for now the default package will do the trick.

Getting started

The default package is nothing other than a folder structure with some CSS, JS and images. That’s no problem; we’ll just make the index.html ourselves and add use the following HTML markup:

< !DOCTYPE html>
<html>
<head>
   <title>Bootstrap 101 Template</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <!-- Bootstrap -->
   <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"/>
</head>
<body>
   <h1>Hello, world!</h1>
   <script src="http://code.jquery.com/jquery.js"></script>
   <script src="js/bootstrap.min.js"></script>
</body>
</html>

The code above isn’t very different than the code you’d typically write for your normal web projects. The only differences are that you include the Bootstrap files so you can use their features across your website. The biggest difference is that you use Bootstrap classes to use Bootstrap features.

(We might want to change some of the default styles so we add a style.css to the markup.)
Now it’s time to actually make something! If you want an impression of how website markup looks like that uses Twitter Bootstrap you might want to check out their examples.

For this tutorial we’re going to make a user profile page for – let’s say a blog – that covers some of the features you might be going to use on a frequent basis when you are going to work with Twitter Bootstrap. The webpage that we are going to build will have the following structure: a navigation bar with some controls, breadcrumbs, sidebar, content and a small footer. I’ll break down each part so that it’s clear what I did. Example below:

Introducing Twitter’s Bootstrap 1

Layout

Let’s start with something simple and obvious like the layout. Bootstrap provides a 12 column grid that you can lay out very easily by adding the class “spanX”. To center the content we add a container to our HTML markup. Every other element between the container tags will stick to the container.

<div class="container">

   <div class="row page-header">
      <!-- Page title and search form -->
   </div>

   <!-- breadcrumb -->

   <div class="row">

      <div class="span4">
         <!-- Sidebar content -->
      </div>

      <div class="span8">
         <!-- content -->

         <div class="page-header">
            <h2>Written posts for our blog</h2>
         </div>

         <article class="clearfix">
            <!-- post introduction -->
         </article>

         <article class="clearfix">
            <!-- post introduction -->
         </article>

         <article class="clearfix">
            <!-- post introduction -->
         </article>

         <div class="pagination">
            <!-- Pagination -->
         </div>

      </div>
   </div>

   <div class="row">
      <!-- Footer -->
   </div>

</div>

As you can see I applied a couple of classes to some elements in which need special styling and behavior. Every row of a grid is wrapped in an element that has the class “row” also. I also applied classes like page-header & pagination because these are given special styling by Bootstrap.

Header

The header contains a logo and a simple search form. I already made some space for the header in the layout markup so the code we have to put there looks something like:

<h1 class="pull-left">Webpage title</h1>

<form class="form-search pull-right span4">
   <input type="text" name="search" class="input-large search-query" placeholder="Search website..." />
   <button type="submit" class="btn pull-right">Search</button>
</form>

I used classes that I didn’t mention before, these are form-search, pull-right, input-medium, search-query and btn. Some might be obvious but some probably aren’t. For example search-query gives you an input field with round borders. More information about these classes can be found here and here.

Breadcrumbs

<ul class="breadcrumb span12">
   <li><a href="#">Home</a> <span class="divider">/</span></li>
   <li class="active">Blog</li>
</ul>

The breadcrumb unordered list is styled via the breadcrumb class, everything in between will automatically get their styling but you might want to add “active” to the current page indicator.

The sidebar

<img src="img/me.jpg" class="img-polaroid"/>

<h2>Paula Borowska</h2>
<span class="label marginbottom">UX designer and blogger</span>

<p>
   <strong>Current hometown</strong><br />
   San Francisco
</p>
<p>
   <strong>Other information</strong><br />
   Lorem ipsum dolor sit amet.

</p>

To give the avatar a nice border I added the class “img-polaroid” to the image tag. I also added a class label to the subtitle so that it looks a little prettier.

The content

This one is a little more difficult than the rest because this one requires a wrapper to prevent the content from looking odd when the content is longer than the sidebar.

The Header

<div class="page-header notop">
   <h2>Written posts for our blog</h2>
</div>

The Articles

<article class="clearfix">

   <a class="thumbnail pull-left">
      <img src="#"/>
   </a>

   <header>
      <h3>Interview with Daryl Ginn</h3>
   </header>

   <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut libero tortor, adipiscing non magna sed, sollicitudin laoreet quam. Sed a turpis in nisl gravida luctus. Quisque felis sem, auctor non dictum et [...]
   </p>

   <a class="btn">Read more &raquo;</a>

</article>

The class thumbnail gives the image the same look as the img-polaroid class I used in the sidebar, however this class also adds a styled hover state.

Pagination

<ul>
   <li class="disabled"><a href="#">&laquo;</a></li>
   <li class="active"><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>

As you may have seen, there is a little space for the pagination in the layout markup. The pagination works kind of similar to the breadcrumb but has a different style. Note: make sure it’s wrapped in a tag that has the class “pagination”. (The disabled class makes the button look non-clickable.)

Footer

<p class="text-center">Copyright &copy; 2013</p>

The class text-center makes the text center horizontally. You can also use text-left and text-right to align the text in a way you like.

Current status

If you’ve used the same markup as me you should have something similar to:

Introducing Twitter’s Bootstrap 2

As you may notice this is not exactly pixel perfect. There is a lack of margin between the articles and the alignment isn’t what you’d call great. That’s where the custom stylesheet comes in.

Additional Styles

/*

   LEGEND

   article = Blog posts
   .form-search = search form
   a.thumbnail.pull-left = the post thumbnail
   .notop and .notop h2 = self added classes to improve vertical alignment
   .margin-bottom = self added class to improve vertical alignment
   .breadcrumb = the website's breadcrumb
*/

article {
   margin-bottom: 20px;
   padding-bottom: 20px;
   border-bottom: 1px solid #eee;
}
   
article header h3 {
   margin-top: 0;
}

.form-search {
   margin-top: 20px;
}

.form-search input[type=text] {
   width: 195px;
}

a.thumbnail.pull-left {
   margin-right: 20px;
}

.notop, .notop h2 {
   margin-top: 0;
}

.marginbottom {
   margin-bottom: 20px;
}

.breadcrumb {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

I added .notop to the elements that don’t necessarily need a top margin. But these are very little customizations that make the result look heaps better.

Introducing Twitter’s Bootstrap 3

Roundup

Check out the attached file to make sure we are on the same page and that you’ve gotten the same results.

This all required very little effort and the end result looks fairly professional. The little effort is one of the reasons why a lot of people and companies around the world like to work with Twitter Bootstrap or a similar framework.

What are your thoughts on using frameworks?

Advertisement