The legacy of Twitter will be twofold. First is the bastardization of keyword tagging with hashtags now ubiquitous in almost all social media platforms and even some business applications. The other is Bootstrap, an open source front end framework widely used for building responsive websites. Bootstrap takes care of the legwork involved in developing websites that are compatible across devices and screen resolutions. The framework may seem daunting at first with all of its specific rules and conventions, but once you get a grasp of how things work it becomes a very effective tool. Here is a quick guide to get you started if you don’t feel like looking through their extensive documentation. At the time of writing this guide, Bootstrap is currently at version 3.3.6.
Begin by including the minified CSS and Javascript file packaged with the framework distribution as well as jQuery. It is recommended that the CSS file be placed in the header and Javascript files in the footer right before the ending body tag:
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="[PATH TO FRAMEWORK]/bootstrap.min.css" rel="stylesheet"> </head> <body> ... <script src="[PATH TO FRAMEWORK]/jquery.min.js"></script> <script src="[PATH TO FRAMEWORK]/bootstrap.min.js"></script> </body> </html>
Framework files are also hosted on a CDN available for public use but I still prefer hosting it on my own server. And don’t forget the viewport meta data which designates the website as responsive.
Fixed Width, Full Width Containers, and Rows
Website layouts need to be wrapped in a container that is either fixed width or full (100%) width. Fixed width containers by default extend to a maximum of 1170px. However this can be customized to your particular needs. To use a fixed width container simply create a <div> element with class container:
<div class="container">...</div>
To use a full (or fluid) width container change the class to container-fluid:
<div class="container-fluid">...</div>
Each section of your content is then organized into rows:
<div class="container-fluid">
<div class="row">
...
</div>
</div>
Note that container-fluid by default adds 15px of gutter padding to the left and right side of the container. Adding a row <div> under it corrects this padding back to zero and you get a perfect 100% width container. You can also achieve 100% width by not putting elements in a container at all. This is commonly done with the navigation section.
Navigation
Navigation items use a standard unordered list placed under a <div> element with ID navbar. The hamburger button for mobile navigation is created as a <button> element and each bar in the “hamburger” is a different <span> element. It is placed under a separate <div> with class navbar-header:
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
</ul>
</div>
</div>
</nav>
Placing this <nav> element within a container element will create a fixed width navigation or you can also make it fluid width as described above. On mobile devices it automatically transitions to the hamburger button driven by jQuery to expand and collapse the navigation items when touched. By default the navigation has a light gray background and dark gray text. Using the class navbar-inverse instead of navbar-default would create a dark background with off-white text. You can also use the classes navbar-static-top or navbar-fixed-top to give the navigation static or fixed positioning respectively.
Bootstrap Grid System
Everything adds up to 12! That is the beauty of the Bootstrap grid system and what makes it so easy to use when creating content columns. By utilizing the 12-column system you have the freedom to create almost any combination of layouts as long as each row of columns add up to 12. Columns are defined by col-xs-, col-sm-, col-md-, and col-lg- corresponding to extra small, small, medium, and large devices. Here is an example for common medium devices:
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4"></div>
<div class="col-md-6"></div>
</div>
</div>
You can also combine different column classes to control how the content stacks on different devices. For example:
<div class="col-xs-6 col-md-2"></div>
On a medium device it will have a column size of 2 and on an extra small device it will have a column size of 6. The resolutions at which device sizes are defined can be found here. Now what if you wanted to achieve a centered layout with a column size that is less than 12? Along comes column offsets classes. Here is an example of a centered <div> with column size of 8 and left/right offsets of 2:
<div class="col-md-8 col-md-offset-2"></div>
Custom Themes
Many Bootstrap websites can be identified easily by just looking at it. That is because most people use the framework elements out of the box without any customization. The unfortunate outcome is cookie-cutter responsive websites that look the same. But Bootstrap can be quickly customized with themes by simply add a CSS file that loads after the Bootstrap CSS file. Style definitions for any element in the framework can be overridden in your custom CSS file. The end result is amazing creativity!
Other Handy Features
I hope this quick guide has been informative and helpful. Some other handy Bootstrap features that you should check out is the built-in carousel and glyphicons. They serve well as a poor man’s slider and Font Awesome. If you have any questions, please feel free to ask here.
