Introduction
With the increasing popularity of mobile devices, web developers are required to think about their website design for mobile devices from the beginning of a development project. Developing web applications targeting multiple devices can be challenging. Web developers often resort to third-party frameworks for features such as theming, widgets and responsive design. One such handy, popular and open source framework is Bootstrap. Using Bootstrap you can develop responsive websites without bothering too much about CSS. It provides a rich CSS framework that you can customize if the need arises. Adding common web page elements such as navigation menus, buttons, form elements and typography is quite easy with Bootstrap. This article is intended to give you a basic understanding of Bootstrap so that you can start using it in your web applications.
Overview of Bootstrap
Any professional website uses CSS for the styling purposes. However, using raw CSS calls for creating even the basic styling rules manually. Obviously, this is time consuming and lacks any standardization since web developers tend to create rules as per their own requirement and understanding. Wouldn’t it be nice if some readymade CSS framework is given to you that you can start using right away? That’s what Bootstrap is about. Moreover, Bootstrap can be easily customized to meet your needs.
To use Bootstrap in a project, you need to follow certain conventions while writing the HTML markup. These conventions mainly pertain to the structuring of HTML elements and CSS classes that these elements use. Once you follow these conventions you can link Bootstrap with your web page and your web page works without any styling from your side. With Bootstrap in place you are freed from the responsibility of creating CSS rules. This boosts the developer productivity. Moreover, since Bootstrap is convention based, web designers can easily do the job of fine tuning and customization while you focus on development tasks.
Bootstrap uses jQuery at certain places. So, you should also reference the jQuery library in your project.
Just to give you an idea, consider a web page that has Bootstrap linked with it:
<link href="css/bootstrap.min.css" rel="stylesheet" /> <script src="js/jquery-2.1.0.min.js"></script> <script src="js/bootstrap.min.js"></script>
And somewhere in the HTML markup you have an <a> element like this:
<a class="btn btn-lg btn-primary" href="#">Know More...</a>
The above anchor element when loaded in the browser looks like this:
Anchor Element When Loaded in a Browser
Remember, you got the above result without any CSS from your side. It’s all the magic of Bootstrap. Notice the <a> element shown above uses the Bootstrap CSS classes.
In the remainder of this article you will develop a simple web page that resembles the following figure:
Simple Web Page
The above page renders interface elements such as top navigation bar, button, vertical menu and a two column layout using Bootstrap.
Downloading and Referencing Bootstrap
The first and obvious step is to download and include Bootstrap in your project. To download Bootstrap visit http://getbootstrap.com and download the ZIP file containing the required files. If you unpack the ZIP files on your machine you should get the following folder structure:
Folder Structure
The CSS folder consists of development and minified versions of Bootstrap.css – the main CSS file you need. The Fonts folder contains fonts used by the CSS font definitions. This font is used by the Bootstrap for text content. The JS folder contains Bootstrap.js JavaScript file. Note that Bootstrap is dependent on jQuery and you need to add jQuery to your project separately.
Once you extract these folders you can add them to your web project folder. For example, the following figure shows these folders after adding them to an ASP.NET web application project in Visual Studio.
Add Folders to Your Web Project Folder
Note that jquery-2.1.0.min.js has been added separately to the JS folder.
Creating a Sample Web Page
Now add a new HTML page to your project and reference the following files in the <head> section:
Reference the Files in the <Head> Section
As you can see bootstrap.min.css style sheet has been linked to the web page using a <link> tag. Then a <script> reference to jquery-2.1.0.min.js and bootstrap.min.js has been added. (You may consider placing the <script> tags just before the ending body tag of the document for performance reasons. Placing them in the head section is alright for our simple example).
Your web page is now ready to use Bootstrap features.
Horizontal Navigation Bar
In this section you will add the top navigation bar to the web page. The navigation bar looks like this:
Top Navigation Bar
The top navigation bar consists of a brand – typically the application name (My WebSite in the above figure), followed by three navigation links (Home, Products and Services). A dropdown menu – More – consists of four menu items and a divider. Finally, the right hand side of the navigation bar consists of three more navigation links (About Us, Follow Us and Contact Us).
To add this navigation bar to your web page, key-in the following markup:
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">My WebSite</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Products</a></li>
<li><a href="#contact">Services</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More... <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Support Ticket</a></li>
<li><a href="#">Knoledge Base</a></li>
<li class="divider"></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contributions</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About Us</a></li>
<li><a href="#">Follow Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
Observe the above markup carefully. The outermost <div> acts as the container for the navigation bar. This <div> has three CSS classes applied to it – navbar, navbar-default and navbar-static-top. These CSS classes are pre-defined by the Bootstrap and are responsible for the styling of the top navigation bar.
Then another <div> is placed that wraps the navigation bar header and individual menu items. This <div> has a CSS class of container. The brad name (My WebSite) is displayed in the header of the navigation bar. The <div> element that represents this brand header has a CSS class of navbar-header. The actual brand name is placed as a hyperlink having CSS class navbar-brand.
The navigation bar header <div> is followed by another <div> that wraps the navigation links. It has a CSS class of navbar-collapse. A list of navigation links is added using <ul> and <li> elements. The <ul> has CSS classes nav and navbar-nav. The active navigation link can be indicated by a CSS class active. In the above example Home is the active navigation link.
The “More” dropdown is created by setting the CSS class of the respective <li> to dropdown. The dropdown menu items are wrapped inside a nested <ul> element. This nested <ul> element has CSS class named dropdown-menu. The dropdown menu consists of four items and one divider.
Another set of navigation links is displayed using CSS classes nav, navbar-nav and navbar-right.
Jumbotron
Below the top menu bar you have a big block of text. This block is called a Jumbotron in Bootstrap terms. A Jumbotron is generally used for content that you want to highlight such as marketing information, a slogan or some special offer. The Jumbotron of our example looks like this:
Jumbotron
To create this Jumbotron add the following markup below the menu bar:
<div class="container">
<div class="jumbotron">
<h1>Highlighted Content</h1>
<p>
Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World!
</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button">Know More...</a>
</p>
</div>
</div>
In our example the Jumbotron consists of a heading, a paragraph of text and a hyperlink that looks like a button. The Jumbotron is wrapped inside a container <div> element. The <div> that makes the Jumbotron has jumbotron CSS class attached with it. Due to this CSS class the <h1> element that follows is automatically displayed in a bigger font. Also, the background color of the <div> is set to the one shown in the figure. The Know More button is an anchor element that has btn, btn-lg and btn-primary CSS classes attached to it. The btn-primary CSS class is responsible for rendering a blue button as shown. Other CSS classes applicable to buttons include – btn-success (green button), btn-warning (yellow button) and btn-danger (red button).
Two Column Layout
Below the Jumbotron is a two column layout with text content in the left hand column and vertical menu in the right hand column. These two columns are shown below:
Two Column Layout
Bootstrap uses its own Grid system to place the content. As per this grid system each row has 12 columns irrespective of the target device. These columns are named like this:
col-md-8
The first part (col) is constant for any column. The second part indicates the target device display size. The possible values are xs (extra small – mobile phone displays), sm (small – tablet displays), md (medium – laptops and small desktop displays), lg (large – large desktop displays). The last part is a number indicating the column span. A value of 8 means that element spans 8 columns of the grid of 12. So, if you need two column layout where the first column of content spans 8 columns of the grid and the second column of content spans 4 columns of the grid you will write:
<div class="row"> <div class="col-md-8"></div> <div class="col-md-4"></div> </div>
Note that all the classes used above – row, col-md-8 and col-md-4 – are defined by Bootstrap.
In our specific example the two column layout can be rendered using the following markup:
<div class="container">
<div class="row">
<!-- Left hand side column-->
<div class="col-md-8">
<h1>Heading goes here...</h1>
<p class="lead">
Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World!
</p>
</div>
<!-- Right hand side column-->
<div class="col-md-4">
<!-- Vertical Menu -->
<ul class="nav nav-stacked">
<li><a href="#">ASP.NET Web Forms</a></li>
<li><a href="#">ASP.NET MVC</a></li>
<li><a href="#">Web API</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</div>
Notice how the vertical menu is rendered using nav and nav-stacked CSS classes applied to the <ul> element.
Text Content
You can use all the common HTML tags such as <p> to add text to the web page. The text can also use tags such as <strong> and <em> to get the respective text effect. Additionally, Bootstrap defines a few classes that can change the way text is displayed. Some of the classes include text-left, text-right and text-center. These classes can be used to set text alignment to the respective values. Consider a following example:
<div class="container">
<p class="text-muted text-center">Copyright (C) 2014. All rights reserved.</p>
</div>
As you can see the <p> element uses text-muted and text-center classes. The text-muted class displays the text in dimmed color whereas text-center class center aligns the text.
That’s it! Save the web page and run it in the browser. Verify whether you get the same look as shown at the beginning of this article.
Summary
Bootstrap is a CSS framework that simplifies development of websites targeting multiple devices. By linking Bootstrap CSS with your web page and by following certain conventions you can quickly apply styling to your web page without writing any CSS yourself. Moreover, you can customize the CSS provided by Bootstrap to achieve the desired look and feel for your web application. This article discussed the basics of using Bootstrap. You can read more about Bootstrap here.
