This twitter bootstrap tutorial is designed to get you up and running with twitter bootstrap within 20 minutes. After this tutorial you should be able to create a basic responsive layout using twitter bootstrap. You should understand the grid system and be able to use the twitter bootstrap navigation, nav bars and understand the basics of responsive design. These are all the basis to using twitter bootstrap.
First thing to mention is that the twitter bootstrap documentation is excellent, it provides detailed examples of all the components it provides allowing you to easily copy and paste extras into your design. Their documentation can be found here.
We need to start with a basic HTML template so we can include the required bootstrap files. Below is the start to our twitter bootstrap project, copy this code into a file and name it index.html.
<!DOCTYPE html>
<head>
<title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
<style type='text/css'>
body {
background-color: #CCC;
}
</style>
</head>
<body>
</body>
</html>
We have added some CSS to make the background of the web page a light grey, this is so we can easily see the different columns within our design, making it easier to understand.
To use twitter bootstrap there is only one file that we are required to include into our template, but there are many varieties available, please refer to the documentation if you wish to explore these options.
For the sake of this twitter bootstrap tutorial, we will include one file bootstrap-combined.min.css via CDN so we don’t even need to download any files. Place the following code on the line after the title tags:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
This now makes all the twitter bootstrap CSS available within our template.
The bootstrap .container class is very useful and creates a centered area within the page that our other site content can be put within. The .container class is the equivalent of creating a #frame DIV with a static width and setting its margin: to auto; to center it. The benefit of the twitter bootstrap .container is that as it is responsive it will work out the best width to use for the screens current width.
Within the body tags, create a div with a class of container. This will act as the pages main wrapper where we will place all our other HTML code.
If you were to set a height and a background colour of white to this DIV, it would look as follows:
Now we have a place to add our additional HTML code, we can add the heading text and then create the sites main navigation bar.
Add the following text, or text of your choosing within .container div.
<h1>TWITTER BOOTSTRAP TUTORIAL</h1>
Nothing new here, just a heading, lets swiftly move on to something more interesting, the twitter bootstrap nav.
Bootstrap has a .nav class that allows us to create all kinds of navigation elements, place the following code after the h1 tags.
<div class='navbar navbar-inverse'>
<div class='navbar-inner nav-collapse' style="height: auto;">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
</ul>
</div>
</div>
The .navbar class holds all the styles for the navbar, then adding the .navbar-inverse class will apply the super cool black style that is so common with twitter bootstrap. I recommend expanding on these styles and creating something really unique, but for this bootstrap tutorial we will be sticking to the basic bootstrap styles.
Within the .navbar DIV, we add another DIV whith the class .nav-collapse and some inline CSS of height: auto;. This is telling bootstrap that when the page is viewed within a browser that has a window size of less that 979px it will provide a compressed alterative view.
If you save the index.html file and preview it in a browser you will be able to see this response on resizing the browser window, as illustrated below:
Additionally, we add a .nav class to the un-ordered list HTML element to apply more style from the bootstrap CSS and also add a .active class to the “Home” list element.
We have the main navigation of the site complete, now we need to add the main content area and a sidebar to hold more links / navigation routes. Add the following code directly after the navbar code:
<div id='content' class='row-fluid'>
<div class='span9 main'>
<h2>Main Content Section</h2>
</div>
<div class='span3 sidebar'>
<h2>Sidebar</h2>
</div>
</div>
This is where we need to understand the twitter bootstrap grid system, of course the bootstrap documentation covers it in detail here, but we will now cover the basics to get you started.
The grid system utilizes a 12 column layout, meaning that the page can be divided by 12 equal columns if you so desire. The following image from the bootstrap documentation provides a good visual representation.
In the code that we just pasted under the havbar you can see classes span9 and span3. This will divide the page into 9 columns width on the left and then 3 columns width on the right, making our content area and sidebar. A benefit to using this grid system is that it works out the width of each of these colums relative to the screen size, so you don’t have to worry about writing any extra media queries to get the site working on all screen resolutions.
Experiement with this code by changing the span number and then try resizing the browser to see the effect. You will notice that after the .container become 724px wide, the columns will stack vertically.
Quickly throw the following text, or any text into the main content area directly after the h2 tags, just to pad out the site a little.
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.<p> <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
You show now have something that looks like this:
Twitter bootstrap has a set of navigation elements available for use, you can see them all here.
We are going to use the stacked tabs to create an additional navigation pane. Copy and paste the following code after the sidebar h2 tags.
<ul class="nav nav-tabs nav-stacked">
<li><a href='#'>Another Link 1</a></li>
<li><a href='#'>Another Link 2</a></li>
<li><a href='#'>Another Link 3</a></li>
</ul>
And it is as simple as that! The above code is literally just an un-ordered list with the two classes nav-tabs and nav-stacked which creates the navigation pane for us.
Take a look at the final, twitter bootstrap responsive design.
This twitter bootstrap tutorial was a very quick blast through some of the features that twitter bootstrap can offer, over time and practice along with reading the official documentation it won’t be long before you are a bootstrap wiz.
After reading this bootstrap tutorial you should understand how to use the grid system, the different types of navigation available and the basic fundamentals of responsive design.
If you have any questions or feedback please leave me a message in the comments box below. Thank you for reading.
If you would like to learn even more about Twitter bootstrap and start utilizing this killer HTML framework then I highly recommend you get hold of a few books, here are two I would recommend:
My name is Leon Revill and am a Web Developer. I work with PHP, CodeIgniter, HTML, CSS, jQuery, WordPress and ActionScript every day, this site is to showcase all of my work and a place to help other people learn and develop their skills. I offer a wide range of Tutorials, Articles and Reviews which cover all aspects of Web Development in hope of passing on my knowledge and helping others. My Web Development Services are available to anyone seeking an experienced Web Developer to work on Web Applications or Web sites. Socialize with me over all major networking sites.
Bootstrap – Jake Spurlock – O’Reilly
Twitter Bootstrap Web Development How-To – David Cochran (For absolute beginners!)
Pingback: Twitter Bootstrap Tutorial – Bootstrap in 20 Minutes! | Design News
Pingback: Great tutorials for mastering Twitter Bootstrap. With examples | Web, Mobile and Social Technology Tips, Tutorials, Best Apps
Pingback: Complete List of Bootstrap Resources | America's Web Developers – WebMedia FX
Pingback: JustinHay | Best Bootstrap Resources
Pingback: Jussie | Best Bootstrap Resources
Pingback: 20分钟打造你的Bootstrap站点 | 易资讯
Pingback: iJussie | Best Bootstrap Resources
Pingback: Twitter Bootstrap Tutorial – Twitter Bootstrap in 20 Minutes | Gristech