Bootstrap Framework Quick Start

There’s been a lot of buzz lately about Twitter’s Bootstrap framework, many new excellent websites are built upon Bootstrap solid framework. whether your need is a responsive grid system or pre-styled typography, Bootstrap comes in handy, it is very easy to start and well documented. But if you are wondering where to start, look no further, because I am going to create a basic responsive layout using Bootstrap, focusing on some fundamental stuff to get you started quickly.

What is Bootstrap?

Bootstrap is a open source(free) front-end framework library for web developers, it was developed by Twitter’s Mark Otto and Jacob Thornton. Bootstrap comes with CSS stylesheets and jQuery plugins, which can be included in web projects for creating amazing websites and web applications. Since version 2.0 bootstrap supports responsive designs, this means web pages based on Bootstrap adjusts dynamically in tablet, desktop or smartphone.

Customize and Download Bootstrap

Bootstrap can be customized and downloaded here, just select components you need for your website, if you are unable to decide or confused, just select everything and hit download button, you can customize it later again when you are more familiar the framework. Extract the zipped file, and you should get following structure of folders and files.
bootstrap-folder-files
Good thing about customized download is that you get all checked CSS and jQuery plugins compiled into just two minified file : bootstrap.min.css & bootstrap.min.js. File with extension min.js and min.css are compressed files, it is a process to reduce the file size to improve load time performances. Since we only need minified versions bootstrap.min.css & bootstrap.min.js, we can delete other two non-minified files bootstrap.css & bootstrap.js at this point.

jQuery Download

Before we start, we also need latest jQuery from their download page, and include it inside Bootstrap JS folder.
Please note: we can build a page layout without including jQuery or Bootstrap JS file, but we might want to use other Bootstrap features, such as transition effects, dropdown, modal or popover effects etc, which are all jQuery based plugins and require jQuery to run.

Include Bootstrap into your project

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Magic</title>


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<p>My responsive design.</p>
</body>
</html>

It is up-to you where you want to put Javascripts, I have included them within head tag, but it is recommended that you include them just before </body> tag (at the end of page), so that the pages load faster and rendering goes smoothly.

Another thing you must not forget to include within head tag is viewport meta <meta name="viewport" content="width=device-width, initial-scale=1.0">. Viewport meta tag indicates that the site is Responsive & optimized for mobile. without this tag, your website may fail to adjusts dynamically in different devices, such as tablet, desktop or smartphone.

The Grid & Markup

Bootstrap default grid system comes with standard 12 columns, and option to choose from fixed or fluid container. Difference is that the fluid container covers 100% width of screen, and fixed container doesn’t go further than 724px or 1170px wide depending on your viewport. Below 767px viewports, all columns in the containers automatically become fluid and stack vertically. It is up to you to choose the container that fits your requirements.

Fixed Container: Without making things anymore complicated, Lets see how easily we can achieve simple fixed 2 column layout with Bootstrap:

1
2
3
4
5
6

<div class="container">
<div class="row">
<div class="span2"> Sidebar </div>
<div class="span10"> Main content </div>
</div>
</div>

As you can see the columns are wrapped within row and row is wrapped in the container. Since Bootstrap supports 12 columns, span number should always add up to 12, no matter how many columns you may decide to place in there.
bootstrap-12-cols
Fluid Container: To create a fluid two-column layout, just change <div class="container"> to <div class="container-fluid"> and <div class="row"> to <div class="row-fluid">

Here’s example of fluid 2 column layout with 2 rows:

1
2
3
4
5
6
7
8
9
10

Lets break things up in a picture to see how our layout renders on a browser:

Here’s our code so far, I have added bit of own style here, just play with example code below, try adding up columns and rows, change container to fluid and fixed, resize browser to different sizes or test it in various devices to understand the difference more clearly:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Magic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<style type="text/css">

</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid colorme">
<div class="span2">Col 2</div>
<div class="span10">Col 10</div>
</div>
<div class="row-fluid colorme">
<div class="span5">Col 5</div>
<div class="span7">Col 7</div>
</div>
</div>
</body>
</html>

Adding Navigation

At this point you must be clear about Bootstrap responsive grid system, many grid frameworks out there work similar way, but Bootstrap is more advance and powerful, because it comes packed with many features such as buttons, modal box or the Navigation bar.

Navigation is very important part of any websites, but many beautiful navigation menus don’t really work with responsive layout and would distort and fail! because they are not designed to adopt to the different screen sizes. Thanks to Bootstrap, we can have a responsive navigation bar, which will automatically collapse and adjust to different screen sizes.

HTML Example below to achieve a Bootstrap collapsible navigation bar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="row-fluid">
<div class="navbar">
<div class="navbar-inner">


<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

<a class="brand" href="#">Site Name</a>


<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.Facebook.com">Facebook</a></li>
</ul>
</div>

</div>
</div>
</div>

We can also change the position the navigation bar simply by adding following class names:
Fix the navbar to the top:

1
2
3

Or the bottom:

1
2
3

For dark backgrounds, you can inverse the color of the navbar:

1
2
3

Conclusion

At this moment, you must be feeling pretty confident about the whole Bootstrap thing, but this is not the end, I suggest you go further and find out how to use Bootstrap Dropdown menus, Modals, tabs and more, Good luck.

3 Thoughts

sanjeev shrivastava February 5, 2013 at 4:47 pm

Nice Tutorial I also created a registration form using bootstrap here http://www.infotuts.com/create-registration-form-easily-with-twitter-bootstrap-in-minutes/

Reply ↓
ali February 5, 2013 at 7:23 pm

hi
very nice tutorial
thank you

Reply ↓
sudha February 6, 2013 at 6:25 am

This excellent tutorial useful for Freshers !!!
Expecting more from you if possible

Thank you very much

Reply ↓