Much has been said and written about Twitter Bootstrap these days in
the world of web designing and development. Some people call it a boon
for web developers with zero designing knowledge, while others call it a
blessing for the designers. Whatever it may be, it does things easier
and faster.
In
many scenarios web developers have the entire setup ready with them but
they can’t proceed due to absence of the design of the project they are
going to work on. They have to rely on the designers to complete the
client side of their project. This process consumes a hell lot of time
and is a serious wastage of time for a developer who needs his/her ideas
to be implementing as quickly as possible. In such scenarios, Twitter
Bootstrap comes to the rescue in the super-heroic fashion!
Twitter
Bootstrap is a CSS framework that helps in designing web applications.
It is one of the easiest CSS frameworks to use in the Industry today. It
assumes you have no designing knowledge and all you want to do is write
some HTML as per the Bootstrap specifications. In short, Twitter
Bootstrap has already written a CSS style sheet for you, has inbuilt
jQuery support and also has some popular JavaScript tools. Wooh! Isn’t
that great? You get a bunch of poplar tools ready to use. All you have
to do is just place the right HTML mark-up at correct place.
In
this tutorial, I will explain how you can start using Twitter Bootstrap
by showcasing a demo layout page, and how you can explore the framework
and customize it for your own requirements.
Getting Started
To start using Twitter Bootstrap, you have to download bootstrap.zip from their official
github page. It contains a set of files, namely
css,
js and
img that we need to start building websites with Twitter Bootstrap. The
“css”
folder has style sheet for both non-responsive and responsive designs
and also their minimized versions. You will use the minimized version
for making the site faster when the design has been finalized and the
project is ready for the launch. The
“js” folder has bootstrap.js
and its minimized version. These JavaScript files contain various
JavaScript components that we will use in our website designs. The last
folder,
“img” contains two set of Halflings images, both are
exactly the same except for their foreground color. The halflings images
are supplied by
glyphicons who were very generous enough to provide the images for free in the Twitter Bootstrap project.
So
let us get our hands dirty. Before we start, open your text editor and
create the first file named “index.html” and save it in the home folder
of your project.
Basic HTML Template for Bootstrap to work
In
order to activate the Bootstrap framework, you need to include all the
appropriate files and follow a proper HTML structure. Here, we will
build the structure first and then see which files are required. The
first thing that you should note is that it requires an HTML5 doctype
declaration at the top:
<!DOCTYPE html>
We will set the
meta
character to utf-8 because we will be using special characters in our
project and we want the browser to parse them correctly. Twitter
Bootstrap also specifies the use of utf-8 in their documentations for
better compatibility.
<meta charset=”utf-8”>
Then
we will set normal html tags like <html>, <head> and
<body> which are basic tags of html. Your index.html page should
look as below.
We will now proceed to include the necessary style sheet which is
bootstrap.css.
<link rel=”stylesheet” href=”css/bootstrap.css” type=”text/css”/>
Now
that we have our CSS ready, we will include all the required JavaScript
files. Firstly, you need to include a jQuery file, for this I will
suggest including from the jQuery CDN, as below.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Then we will include the Bootstrap file.
<script src=”js/bootstrap.js”></script>
All these scripts should lie just above the end body tag
</body>, in consideration of the performance of your web page.
Finally,
we are done with the process of including all the necessary files. You
are now set to start building the various components of your website.
Your index.html should look like this.
Understanding how it works
Firstly, we need to understand that Twitter Bootstrap is largely dependent on 12 grids. So, what are grids?
Suppose
you want two large equal divisions inside the body of your index.html.
You have to give a class of “span6” to each of div element. This tells
Bootstrap to make two equal divisions that should span six grids on each
side. Hopefully, this gives you an idea of how Bootstrap works. It has
a set of predefined classes for each element. You have to give
appropriate classes to each when needed.
To better understand what we are going to build today, here’s the first
demo page. Have a look and come back. We will start building it.
Coding with Bootstrap
Let us divide the demo page into five major parts:
- The header
- The marketing area
- The leftside bar
- The contents area
- The footer
To
wrap everything contained in our website, we will create a container
class that should be centered to the middle of the screen and also have a
decent amount of padding on all sides. For this, Bootstrap has a class
called “container”, which we will use as our parent wrapper. So go ahead
and write the following piece of code:
1 | <div class="”container”"> |
Now inside the container div, first we will jot down the title of the website. For this we will use, h1 heading tag.
1 | <h1><a href="”#”">Bootstrap Site</a></h1> |
Check
your index.html in the browser, it will be centered beautifully. It’s
time for the navigation bar. Twitter Bootstrap specifies following
markup for the navigation bar:
2 | <div class="navbar-inner"> |
3 | <div class="container"> |
5 | <li class="active"><a href="#">Home</a></li> |
6 | <li><a href="#">Projects</a></li> |
7 | <li><a href="#">Services</a></li> |
8 | <li><a href="#">Downloads</a></li> |
9 | <li><a href="#">About</a></li> |
10 | <li><a href="#">Contact</a></li> |
“navbar”
should be the class given to the main div of the navigation. You have
to follow the above markup for the navigation to appear as per Twitter
Bootstrap style. Place the above code just below the h1 tag. Make sure
you are placing everything inside our parent wrapper class, i.e.
“container”. Go to the browser and check your page, you will see a
beautiful navigation bar just below the site title.
Obviously,
you would want your header to look a bit different to this. At the end
of this tutorial, we will look at how we can add our own styles to the
existing Bootstrap styles and add a bit more CSS to design the header
area. Let’s move on to make the second part, which we’ve called “The
marketing area”.
There is a beautiful predefined class supplied by
Twitter Bootstrap for a marketing area. They have given it a class of
“hero-unit”. Go ahead and copy the code given below and paste it below
the navigation div.
2 | <h1>Marketing stuff!</h1> |
3 | <p>Cras
justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus.</p> |
4 | <a href="#" class="btn btn-large btn-success">Get Started</a> |
Check your page in the browser; it should now look like below:
Isn’t
that amazing? Without writing a single piece of CSS, you have such a
beautiful marketing area. OK, let’s explore the above code. The
“hero-unit” has a CSS designed for an h1 tag. So anything you write in
an h1 heading will look bold and stand out from rest of the body
elements. Next we have general
<p> paragraph tag to describe our marketing or our product.
Here comes the interesting part,
the links and buttons. You can make any link look like a button by adding a class “
btn” and then vary its size by adding some more additional classes like
btn-large/btn-small/btn-mini. To change the colors of the buttons, add classes like
btn-success (green),
btn-info (light blue),
btn-warning (yellow) and
btn-danger (red). More about buttons and decorating links can be found in the Twitter Bootstrap’s
Base CSS section. These classes are applicable to the HTML button element.
I
hope so far your journey has been interesting. Twitter Bootstrap is so
easy that it doesn’t let you do anything inside CSS stylesheets. You
have to just use the resources it provides. This is what makes it one of
the most powerful CSS frameworks in the industry.
We will now
proceed to the next sections, the left side bar and the contents
section. You will understand how I was able to divide the area into two
unequal vertical areas and how can we do more such divisions. As stated
earlier, Twitter Bootstrap is a 12 grid system. You have to remember
this, always. This means you can make at most 12 vertical grids inside
any parent grid.
Currently we are working inside our parent
wrapper class “container”. So we will divide the section into two
unequal parts using the 12 grids. For the left side bar, we will use the
class “span4” and for the rightside content section we will use
“span8”. The class names reflect my intention that the left side should
span to four grids and the right side should span across remaining the
eight grids.
Your webpage should now appear as below.
There
should be two separate columns standing side by side. You must be now
thinking about the extra wrapper div that I have added above with class
“row”. Well, the reason is span* classes are by default floated left. To
force both columns to be present below all the contents above we have
added the “row” div. It acts like the traditional “<tr>” row of
tables. Now you should delete the dummy paragraph elements from your
code. We will now fill the left column with navigation list.
For the navigation list you have to follow the following markup.
1 | <ul class="nav nav-list"> |
2 | <li class="nav-header">What we are?</li> |
3 | <li class="active"><a href="#">Home</a></li> |
4 | <li><a href="#">Our Clients</a></li> |
5 | <li><a href="#">Our Services</a></li> |
6 | <li><a href="#">About Us</a></li> |
7 | <li><a href="#">Contact Us</a></li> |
8 | <li class="nav-header">Our Friend</li> |
9 | <li><a href="#">Google</a></li> |
10 | <li><a href="#">Yahoo!</a></li> |
11 | <li><a href="#">Bing</a></li> |
12 | <li><a href="#">Microsoft</a></li> |
13 | <li><a href="#">Gadgetic World</a></li> |
You
have to add “nav-list” class in addition to “nav” class which will make
it look like a list. Adding class “nav-header” to any “li” element of
“nav” class will make it look like a heading to the section of links. Go
ahead and see how it looks in the browser.
Moving
to the content area, we will be just filling it up with general h3 tags
and paragraph tags. No extra classes are needed as we want them to
appear one below the other. Below is the code that I will be placing
inside “span8”.
1 | <h3>How we started ?</h3> |
2 | <p>Donec
id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec
sed odio dui.</p> |
3 | <p>Donec
id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec
sed odio dui.</p> |
4 | <h3>How do we market?</h3> |
5 | <p>Donec
id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec
sed odio dui.</p> |
6 | <p>Donec
id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec
sed odio dui.</p> |
Refresh your browser and it should now look like below:
As you can see, we are very close to achieving our final design. We are just left with the footer portion.
For
the footer, we will again divide the “row” into three parts as you can
see in the demo page. This time the division will be in equal portions,
which is “span4”. So we will create another “row” div just below the
“row” div of the above left sidebar and content area. Follow the code
below:
3 | <h4 class="muted text-center">Meet Our Clients</h4> |
4 | <p>Donec
id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec
sed odio dui.</p> |
5 | <a href="#" class="btn"><i class="icon-user"></i> Our Clients</a> |
8 | <h4 class="muted text-center">Know Our Employees</h4> |
9 | <p>Donec
id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec
sed odio dui.</p> |
10 | <a href="#" class="btn btn-success"><i class="icon-star icon-white"></i> Our Employees</a> |
13 | <h4 class="muted text-center">Reach Us</h4> |
14 | <p>Donec
id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec
sed odio dui.</p> |
15 | <a href="#" class="btn btn-info">Contact Us</a> |
Simple
enough! We have divided the row into three equal parts using “span4”
class and then filled each one of them using h4 tags, paragraph tags and
links that look like buttons. Check the output in your browser. You
should be seeing little images inside the link buttons, Our Clients and
Our Employees. You have to take help of <i> tag and add
appropriate image classes like icon-user, icon-star, icon-glass etc. To
change the icon to white, use class icon-white along with icon-user and
icon-star classes. A full list of icon classes can be found in the
Bootstrap’s documentation
here.
To
give a little spacing between the footer area and the above content, we
will add a <hr> tag between each “row” div. Go ahead insert
<hr> tag and compare it with the demo page.
Now for the copyright area, we will add the following code:
So finally, we have built a simple yet decent landing page using purely the Twitter Bootstrap framework.
Adding Custom Styles to Twitter Bootstrap
If
you have a little knowledge of CSS and you want to tweak Bootstrap’s
default styles, then the best way is to build your own custom style
sheet, import Bootstrap’s Style sheets at the top and then override the
styles in your own CSS file. Make sure to link to your custom style
sheet and not to the Bootstrap’s CSS files. If you are happy with
Twitter Bootstrap’s default style then obviously you don’t have to
create a custom style sheet. But as many websites will use this
framework, it will become a common style which can be seen in every
other websites built with Bootstrap. So it is better if you add your own
flavor of CSS on top of the Bootstrap’s CSS.
1 | @import url("bootstrap.min.css"); |
Some more Important Components of Twitter Bootstrap
Lead Paragraphs
To
make a paragraph stand out in the middle of long document, you can add
class “lead” to it. It will make the fonts of that particular paragraph a
bit bigger than the rest of the document.
Emphasis Tags
You
can also use the default Emphasis tags like <small>,
<strong> and <em> inside your html page. Tags like <b>
and <i> are still valid.
Text aligning
Text aligning inside any paragraph or a div tag can be done using the classes: “text-left”, “text-center” and “text-right”.
Text colors
You
can set the default color for paragraph text by using various text
color emphasis classes like “muted” for grey, “text-warning” for red,
“text-error” for deep maroon, “text-info” for light blue and
“text-success” for green color.
Styling Tables
Twitter Bootstrap also designs the default tables. Follow the following markup:
Playing with images
You
can add images using the normal <img src=”demo.jpg”/> tag. To
make your designs a bit more interesting, add classes like “img-rounded”
for rounded corners, “img-circle” for circling the image and
“img-polaroid” to give box-shadow and border radius to the image.
Drop down menu
To
add a drop down menu to the existing navigation bar as shown in the
demo page, you have to add the following markup inside a “li” element.
2 | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> |
3 | <i class="icon-th-large"></i> Drop Down |
6 | <ul class="dropdown-menu"> |
7 | <li><a href="#">Item1</a></li> |
8 | <li><a href="#">Item2</a></li> |
9 | <li><a href="#">Item3</a></li> |
For
a dropdown, you have to wrap the parent element using the “dropdown”
class and then use the default “a” markup for the caret and then nest
another ul element with the items.
I have shown you the basics of
using Twitter Bootstrap and how can you get started with it. Now that
you have understood how it works, I hope it will be easier for you to
understand their original documentations. Go through it and you will
definitely find a lots of new features as you explore.
No comments:
Post a Comment