Bootstrap Introduction
Objective
Bootstrap is the most popular front-end framework, and it has now released its third version (v3.0.0). This tutorial will guide you through getting started with Bootstrap 3.
You will also see how to use custom and distinctive features of the framework, such as creating layouts with grids, building navigation with nav, creating dropdowns with carousal, and adding third-party plugins like social plugins and Google Maps.
What is Bootstrap
Bootstrap is a front-end framework for quickly developing web applications and websites.
In modern web development, there are several components that are almost always needed in every web project.
Bootstrap provides you with all these basic modules - Grid, Typography, Tables, Forms, Buttons, and Responsiveness.
Additionally, there are numerous other useful front-end components such as Dropdowns, Navigation, Modals, Typehead, Pagination, Carousal, Breadcrumb, Tab, Thumbnails, Headers, and more.
With these, you can build a web project and get it running more quickly and easily.
Furthermore, since the entire framework is based on modules, you can customize it with your own CSS bits, or even a major overhaul after the project has started.
It is based on several best practices, and we believe it is a great time to start learning modern web development. Once you have a basic understanding of HTML and JavaScript/jQuery, you can apply this knowledge in web development.
Although there are criticisms that all projects built with Bootstrap look the same, and you can build a website without knowing much about HTML + CSS. However, we need to understand that Bootstrap is a generic framework, and like any other generic thing, you need to customize it to make it unique. When you want to customize, you need to delve deeper, and without a good foundation in HTML + CSS, it is not feasible.
Of course, besides Bootstrap, there are many other good front-end frameworks, and the choice of which framework to use is up to the developer, but Bootstrap is definitely worth trying.
Why use Bootstrap in your project?
Download and Understand the File Structure
You can download Bootstrap Version 3.0.0 from https://github.com/twbs/bootstrap/archive/v3.0.0.zip or https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zip. We are using the first one, but you can also use the second.
Additionally, the code we provide for download includes a folder with the bootstrap code downloaded from the first link. This also contains the custom.css for customizing the original CSS of Bootstrap.
After unzipping, you will find that within the root folder bootstrap-3.0.0, there are some files and folders.
The main CSS files - bootstrap.css and its minified version bootstrap-min.css, are located in the 'css' folder within the 'dist' folder under the root folder bootstrap-3.0.0.
Inside 'dist', there is a 'js' folder containing the main JavaScript file bootstrap.js and its minified version.
In the root folder, there is a separate 'js' folder containing different JavaScript plugins in different files.
Inside 'assets' in the root folder, you will find another 'js' folder. This contains the html5shiv.js for HTML5 shim to get IE8 support. There is also a respond.min.js file for media query support in IE8. This folder also contains the jquery.js that the Bootstrap js plugins depend on.
In the same folder, there is an 'ico' folder containing favicon icons and various mobile device icons.
In the same path, there is a 'css' folder containing the CSS files for the documentation.
The '_includes' and '_layouts' folders contain some default layout structure files that may be useful for quick prototyping. The 'less' folder in the root directory contains some .less files. These files will be very useful if you are developing based on LESS.
In the root folder, there are several files. Some are HTML files for basic prototype design, and some are bower.json and browserstack.json for compilation based on Bower. Additionally, there are composer.json and a YAML file _config.yml.
Apart from downloading from the given link, you can also compile all CSS and JS files using the following command:
$ bower install bootstrap
You can clone the Bootstrap Git repository:
git clone git://github.com/twbs/bootstrap.git
In this tutorial, we only downloaded the Zip file and did not use it.
Once you have learned this tutorial, we encourage you to understand how it works by installing the framework via bower.
NetDNA supports compiled and minified versions of Bootstrap CSS, JS, and other theme CSS. You can reference them with the following statements:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Developing with Bootstrap v3.0.0
Basic HTML
The following is the basic HTML structure for our project:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap V3 template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="bootstrap-3.0.0/assets/js/html5shiv.js"></script>
<script src="bootstrap-3.0.0/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
Please note that html5shiv.js and respond.min.js added to the template are for IE8 support. These files have been included in Bootstrap version 3.
We have placed the bootstrap-3.0.0 folder within the twitter-bootstrap folder in the root folder of our web server. All HTML files we create will be placed within the twitter-bootstrap folder. This is mentioned to simplify our development process.
Customization
We will customize unique CSS box styles. Therefore, without altering the original CSS file (located in the bootstrap-3.0.0 dist folder), we will create a separate CSS file named custom.css in the same folder. Then, in the HTML file, we will reference this CSS file immediately after the original CSS file. This way, we can override the default styles we want to change, and if Bootstrap is updated, the original CSS file will also update without disrupting our customizations. We recommend you follow this approach during development.
Creating Navigation
To create navigation, add the following code in the HTML file, right after the opening tag of the body.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><a href="new.html" class="navbar-brand">
<img decoding="async" src="logo.png"></a></li>
<li class="active"><a href="#">Home</a></li>
<li><a href="price.html">Price</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="socials"><g:plusone annotation="inline" width="150"></g:plusone></li>
<li class="socials"><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></li>
<li class="socials"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
</ul>
</li>
</ul>
</nav>
For navigation, Bootstrap uses the 'navbar' class at the container level. Therefore, it is assigned to the nav element holding the entire navigation.
We have used the 'navbar-inverse' class to change the default color of the navigation bar, using a dark color instead of the previous default light color. The 'navbar-fixed-top' class ensures that the navigation bar stays fixed at the top position when we scroll down the HTML page.
In Bootstrap V3.0.0, using role="navigation" when creating navigation is new. Bootstrap recommends this for accessibility.
At this point, we have added 'padding-top: 80px;' to the body in the custom.css file. The pixels you add to the body as top padding may vary, but unless you do this, the top part of the content following the navigation bar will be hidden. Inside the container nav, we have an unordered list with the class 'nav' and 'navbar-nav'. Within this unordered list, each list item contains a link in the navigation.
The 'navbar-brand' class is used to display the brand name. We have used an image. Since the image height is greater than the navbar baseline height, we have made some customizations. We increased the 'line-height' property of '.navbar-nav>li>a' from the default 20px to 50px and changed the font size to 16px.
The rightmost link has been enhanced with a dropdown. For the 'dropdown' class added to the relevant li, immediately following it, an anchor with the classes 'dropdown-toggle' and 'caret' is added. This anchor actually contains the anchor text "social" in our project. This li contains an unordered list, with each nested list item containing links displayed in the dropdown.
In the dropdown, we have added social plugins. The first li contains the Google Plus icon, the second li contains the Facebook icon, and the third li contains the Twitter button icon and some js scripts.
Additionally, you must add the following markup and script after the opening body tag to make the Facebook button work:
<div id="fb-root"></div>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
To make the Twitter button work, we add the following script before the closing body tag:
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
We use the following styles to add some extra styling to the social buttons with the 'socials' class:
.socials {
padding: 10px;
}
This completes our navigation.
Creating a Slideshow with Carousel
To create a slideshow under the navigation bar on the project's homepage, we will use the following markup:
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img decoding="async" src="computer.jpg" alt="...">
<div class="carousel-caption">
<h1>Large Desktops are everywhere</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img decoding="async" src="mobile.jpg" alt="...">
<div class="carousel-caption">
<h1>Mobiles are outnumbering desktops</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</button></p>
</div>
</div>
<div class="item">
<img decoding="async" src="cloud1.jpg" alt="...">
<div class="carousel-caption">
<h1>Enterprises are adopting Cloud computing fast</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</button></p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
There are four sections in the carousel. The main container is defined using a div tag with the 'carousel slide' class.
Next is an ordered list with the 'carousel-indicators' class. Each list item in the ol represents a slide. The default slide loaded when the page loads has the 'active' class. When rendered, you will see them as small circles below the heading.
Then, each slide (image) is placed inside a div tag with the 'item' class. Each item is nested inside a div with the 'carousel-caption' class. The carousel-caption contains some markup that is displayed as a heading along with the image. The paragraph contains an h1 and a button, and you can also include other markup of your own.
The last part is for controlling the next slide/previous slide. This is defined using the 'left' and 'carousel-control' class for the previous one, and 'right' and 'carousel-control' class for the next one.
The 'icon-prev' and 'icon-next' classes are used for the next and previous icons.
We have made some customizations in the default carousel. We want the captions, indicators, and next/previous icons to be rendered a few pixels above their default positions.
To achieve this, we added the following styles in the custom.css file:
.carousel-inner .item .carousel-caption {
position: absolute;
top: 200px;
}
.carousel-indicators {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom: 0;
}
.navbar-nav>li>a {
line-height: 50px;
font-size: 16px;
}
We also customized the h1, giving it a 30-pixel bottom margin.
h1 {
margin-bottom: 30px;
}
Responsive Images
You may have noticed that in each image in the slides, we have used the 'img-responsive' class. This is a new feature in Bootstrap v3.0.0. By using the 'img-responsive' class in the img tag, Bootstrap makes the image responsive.
Creating Grids
Below the slides, we use grids to place the content. Start a grid with a div having the 'container' class. Note that we are going to develop a responsive website, unlike previous versions of Bootstrap, where the container had a single class, which was responsive by default.
The container div nests several divs with the 'row' class (three in the first row, six in the second row) to create rows in the Bootstrap grid.
Each row contains a div with a 'col-x-y' class to create columns. The value of x can be: xs for mobile devices, sm for tablets, md for laptops and smaller desktop screens, and lg for larger desktop screens. This is the first method. The value of y can be any positive integer, but the total number of columns in the grid must not exceed 12. In our project, for simplicity, we have used lg, but since we have done so, you might want to view the project site on a phone or tablet for comparison.
In later tutorials, we will have a complete tutorial on the Bootstrap grid system to explore its fascinating responsive features.
In this example, we want the three columns in the first row to be of equal width, so we use 'col-lg-4' for all columns. In the second row, we want the six columns to be of equal width, so we use 'col-lg-2' for all columns.
Below is the markup for a grid containing two rows, with three columns in the first row and six columns in the second row.
<div class="row barone"> <div class="col-lg-2"> <p><img decoding="async" src="//www.tutorialpro.org/wp-content/uploads/2013/10/php.png"></p> </div> <div class="col-lg-2"> <p><img decoding="async" src="//www.tutorialpro.org/wp-content/uploads/2013/10/mysql-logo.jpg"></p> </div> <div class="col-lg-2"> <p><img decoding="async" src="//www.tutorialpro.org/wp-content/uploads/2013/10/javascript-logo.png"></p> </div> <div class="col-lg-2"> <p><img decoding="async" src="//www.tutorialpro.org/wp-content/uploads/2013/10/java.jpg"></p> </div> <div class="col-lg-2"> <p><img decoding="async" src="//www.tutorialpro.org/wp-content/uploads/2013/10/postgresql.png"></p> </div> </div>
We conclude the grid with an hr and a footer with the following markup:
<hr> <p>Copyright@2013-14 by ToDo App.</p>
### Using Tables
In the price.html page of our project, we used a table to present a price list, with the following markup:
<table class="table table-bordered"> <thead> <tr> <th>Features</th> <th>Individual</th> <th>Small Team</th> <th>Medium Team</th> <th>Enterprise</th> </tr> </thead> <tbody> <tr> <td><h3>No. Of users</h3></td> <td><span class="badge">One</span></td> <td><span class="badge">Five</span></td> <td><span class="badge">Fifteen</span></td> <td><span class="badge">Unlimited</span></td> </tr> <tr> <td><h3>Pro training</h3></td> <td><span class="badge">No</span></td> <td><span class="badge">Yes</span></td>
```html
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Forum Support</h3></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>In-person Support</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Weekly Webinars</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Price</h3></td>
<td><button type="button" class="btn btn-warning btn-lg">$9/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$19/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$49/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$99/Month</button></td>
</tr>
<tr>
<td></td>
<td><button type="button" class="btn btn-success btn-lg">Buy Now</button></td>
<td><button type="button" class="btn btn-success btn-lg">Buy Now</button></td>
<td><button type="button" class="btn btn-success btn-lg">Buy Now</button></td>
<td><button type="button" class="btn btn-success btn-lg">Buy Now</button></td>
</tr>
</tbody>
</table>
Using the 'table' and 'table-bordered' classes from the Bootstrap original CSS file. However, we have made some customizations to make the table look different by adding the following CSS in the customize.css file:
th {
background-color: #428bca;
color: #ec8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}
Using Badges
We use the 'badge' class to display some text in the table. We have a custom badge class with the following CSS:
.badge {
background-color: #428bca;
color: #fff;
font-size: 22px;
}
For this page and the contact.html page, we added another CSS rule in customize.css:
.container > h1 {
text-align: center;
}
This centers the h1.
Using Forms
In the contact.html file, we created three columns, and in the first column, we embedded a form. The form uses default styles.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="country" class="col-lg-2 control-label">Country</label>
<div class="col-lg-10">
<select>
<option>USA</option>
<option>India</option>
<option>UK</option>
<option>Australia</option>
</select>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea rows="5" cols="50"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
The 'form-horizontal' class keeps the form aligned horizontally. Note that role="form" is added for easy access. This is a new feature in version 3.0.0.
Bootstrap 3.0.0 uses a new 'form-group' class to position each form control.
In the second column of the grid on this page, we simply placed some text.
Adding Google Maps
In the contact.html page, in the third column of the grid, we added a Google Map. To do this, we used the following markup:
<div id="map_canvas"></div>
</div>
The following js is added to the header of the HTML file:
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(23.244066, 87.861276),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
Before the previously mentioned JavaScript, you must add the following script tag:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
To ensure the map renders correctly, you must add the following styles in custom.css:
#map_canvas {
width: 400px;
height: 400px;
}
This is how to create a simple project based on Bootstrap V3.0.0. However, we have only scratched the surface; the following chapters will delve into more details.