Bootstrap Basics Tutorials and Guide

Bootstrap Page Heading

June 25, 2014 by Krishna Srinivasan Leave a Comment

A page header is text that is separated from the main body of text and appears at the top of a page. The page header is more useful on a web page when we have several titles and need to add distinction between them. We can use h1’s default small element and other components to create appropriate spacing around the header. We can create appropriate page header by using Bootstrap’s .page-header class within a div element.

also read:

Bootstrap Setup

Bootstrap Typography

We can create appropriate page header by using the class .page-header as shown in the following example. If you have any questions about bootstrap page header, please write it in the comments section.

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Page Header
<small>small page header</small>
</h1>
<p>The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.
It includes CSS and HTML for typography, icons, forms, buttons, tables, layout grids and other interface components, as well as optional JavaScript extensions.</p>
</div>
</div>
</body>
</html>
[/code]

Above script defines page header by using page-header class within div element and <small> element is used to display subtext for the header in the document.

Run Bootstrap Page Header Example Demo

Bootstrap Glyphicons

June 18, 2014 by Sutha Kaliannan Leave a Comment

In the present days, font icons are becoming more popular for better user experience. This tutorial explains how to use and customize Glyphicons with Bootstrap. Glyphicons is a collection of monochromatic icons and symbols recognized by most of the people which help them to identify easily links and information on your site. Glyphicons are icon fonts which are based on CSS sprites, in which we can create icons of any color just applying the CSS color property on the specified element.

also read:

Bootstrap Setup

Bootstrap Typography

Glyphicons are not available free, but the creator has made them available for Bootstrap free of cost. We can get number of available Glyphicons at this link Glyphicons Website. When we download Bootstrap, extract the zip file, and we will find file structure of the Bootstrap. We may find glyphicons within fonts folder within dist folder. It contains following four files:

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

The bootstrap.css and bootstrap-min.css files are present within the CSS folder of dist folder.

Using of icons in the code

We can use bootstrap icons along with <span> tag with base class glyphicon and individual icon glyphicon-*, where * indicates keyword with specific icon name. The syntax is as follows:

[code lang=”xml”]
<span class=”glyphicon glyphicon-*”></span>
[/code]

For instance:

[code lang=”xml”]
<button type=”button” class=”btn btn-primary”>
<span class=”glyphicon glyphicon-music”></span>Music</button>
[/code]

The glyphicon glyphicon-music is the name of particular icon class defined in bottstrap.css. They should not be used with other classes and use <span> tag and apply the icon classes to the <span> .

Glyphicons Example

Above script defines different types glyphicon icons such as email, phone, music, home and time icons used within the span element. The span element contains base class glyphicon and glyphicon-envelope is the name of the particular icon class and same as to all other glyphicon icon classes.

Run Bootstrap Glyphicons Example Demo

Customizing Glyphicon Icons

We can also customize the Glyphicons such as larger size, smaller size and extra smaller size by using btn-lg, btn-sm and btn-xs respectively within the button element. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Glyphicon icons with large size</h2>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span>: User Icon</button><br><br>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-headphones"></span>: Headphone Icon</button><br><br>
<h2>Glyphicon icons with small size</h2>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-camera"></span>: Camera Icon</button><br><br>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-comment"></span>: Comment Icon </button><br><br>
<h2>Glyphicon icons with extra small size</h2>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-earphone"></span>: Earphone Icon</button><br><br>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-repeat"></span>: Repeat Icon </button>
</div>
</body>
</html>
[/code]

Above script defines how to display Glyphicon icons with different sizes on the web page. The class btn btn-default btn-lg is used to display icons with larger size, btn btn-default btn-sm class displays icons with smaller size and btn btn-default btn-xs class displays the icons with extra smaller size and all these classes would be defined within the button element.

Run Bootstrap Customizing Icons Demo

Bootstrap Images

June 17, 2014 by Sutha Kaliannan Leave a Comment

This tutorial explains how to style images, creating thumbnails, text and so on using Bootstrap framework. Images are common in the web designing field. So styling images and placing it on the web pages makes user experience much better. Bootstrap provides built in three classes to style images such as rounded image, circular image and thumbnail image.

also read:

Bootstrap Setup

Bootstrap Typography

Rounded Images

Below script shows images in the form of rounded corner. The Bootstrap uses img-rounded class which sets border-radius property to 6px to give rounded corner to the associated images.

Run Bootstrap Rounded Images Demo

Circle Images

Bootstrap provides img-circle class which creates image with circle shape or round cornered. The following is an example:

Run Bootstrap Circle Images Demo

Thumbnail Images

Bootstrap provides img-thumbnail class which is used for creating grid of images, gives thumbnail like styles to images. The following is an example:

Run Bootstrap Thumbnail Images Demo

Responsive Images

We can make image to be responsive friendly by using Bootstrap’s img-responsive class. The following is an example with this class:

The .img-responsive class defines images must be displayed as block level elements, height of the image and width of the image to 100% which scales much better to parent element and it restrict the image according to the devices on which it is being rendered. The margin-bottom property sets the bottom margin of an element on the web page.

Run Bootstrap Responsive Images Demo

Bootstrap Buttons

June 17, 2014 by Sutha Kaliannan Leave a Comment

The button is used for creating button control which defines clickable action. The buttons are integral part of HTML which selects the elements that are of type button. The Bootstrap provides different types of buttons to specify different states of button. The following are available button classes to style a button in the Bootstrap:

Default: It is default button.
Primary: It defines visual weight and primary action in the set of buttons.
Success: It defines successful message when action completes successfully.
Info: It is used to define informational alert messages.
Warning:It indicates warning the user about risks with use of the associated item on the web page.
Danger: It indicates caution when there is a negative action on the web page.

Following example demonstrates how to customize default buttons:

also read:

Bootstrap Setup

Bootstrap Typography

The above script specifies different types of buttons available in the Bootstrap which defines different styles for the buttons.

Run Bootstrap Default Buttons Demo

Changing Sizes of Buttons

The Bootstrap provides facility of changing sizes of buttons by using additional classes .btn-lg, .btn-sm and .btn-xs. The following example demonstrates how to define different sizes of buttons on the web page:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Large Buttons</h2>
<button type="button" class="btn btn-default btn-lg">Default Button</button>
<button type="button" class="btn btn-primary btn-lg">Primary Button</button>
<button type="button" class="btn btn-success btn-lg">Success Button</button>
<button type="button" class="btn btn-info btn-lg">Informational Button</button>
<button type="button" class="btn btn-warning btn-lg">Warning Button</button>
<button type="button" class="btn btn-danger btn-lg">Danger Button</button>
<hr>
<h2>Small Buttons</h2>
<button type="button" class="btn btn-default btn-sm">Default Button</button>
<button type="button" class="btn btn-primary btn-sm">Primary Button</button>
<button type="button" class="btn btn-success btn-sm">Success Button</button>
<button type="button" class="btn btn-info btn-sm">Informational Button</button>
<button type="button" class="btn btn-warning btn-sm">Warning Button</button>
<button type="button" class="btn btn-danger btn-sm">Danger Button</button>
<hr>
<h2>Extra Small Buttons</h2>
<button type="button" class="btn btn-default btn-xs">Default Button</button>
<button type="button" class="btn btn-primary btn-xs">Primary Button</button>
<button type="button" class="btn btn-success btn-xs">Success Button</button>
<button type="button" class="btn btn-info btn-xs">Informational Button</button>
<button type="button" class="btn btn-warning btn-xs">Warning Button</button>
<button type="button" class="btn btn-danger btn-xs">Danger Button</button>
</div>
</body>
</html>
[/code]

The above code uses .btn-lg, .btn-sm and .btn-xs classes to define different sizes of buttons. The .btn-lg class is used to create large size of buttons, the .btn-sm class is used to create small size of buttons and the .btn-xs class is used to create extra small size of buttons on the web page.

Run Bootstrap Changing Size Buttons Demo

Block level Buttons

We can use block level buttons to use full width of container within which the button is residing by using the class .btn-block. The following is an example:

Run Bootstrap Block Level Buttons Demo

Active State

The buttons will be active when they will appear as pressed with darker border and inset shadow. This can be done by using .active on button. We could also use anchor element to show that it is activated. The following is an example:

[code lang=”xml”]]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Active Buttons</h2>
<button type="button" class="btn btn-default active">default Button</button>
<button type="button" class="btn btn-primary active">primary Button</button>
<button type="button" class="btn btn-success active">success Button</button><hr>
<a href="#" class="btn btn-info btn-sm active ">link one</button></a>
<a href="#" class="btn btn-warning btn-sm active">link second</button></a>
<a href="#" class="btn btn-danger btn-sm active">link three</button></a>
</div>
</body>
</html>
[/code]

Run Bootstrap Active Buttons Demo

Disabled State

We can disable the button by using disabled attribute to buttons. When a button is disabled, it appears dimmed and does not respond to user input. To disable button, we write as disabled=”disabled” within the button element. We cannot enter any value in that field. The following is an example:

Run Bootstrap Disabled Buttons Demo

Button Tags

We can also use button classes with <a>,<button> or <input> elements to use buttons as tags. It is recommended that use it only with <button> element to ensure cross browser rendering. The following is an example:

Run Bootstrap Button Tags Demo

Bootstrap Tables

June 13, 2014 by Krishna Srinivasan Leave a Comment

This tutorial explains about different types of table structures available in Bootstrap. As we know, tables are used to represent the data in the form of rows and columns. The Bootstrap framework enables us to create table by using .table class to <table> element. There are some of the table elements which we will use in bootstrap as follows:

<table>: It is set of data values represents in a tabular format using vertical columns and horizontal rows.
<thead>: It is used to define headings for table columns in a table.
<tbody>: It is used to group body content in a table.
<tr>: It is used to define row of cells in a table.
<td>: It is used to define a cell which contains data.
<th>: It is used to define a header cell in a table.
<caption>: It describes nature or title of what the table holds and it is always first descendent of a <table>.

Also read:

Bootstrap Typography

Bootstrap Grid System

Bootstrap CSS

Example of Simple Table

Run Bootstrap Simple Table Demo

Example of Striped Rows Table

We can make background of table like zebra strips by simply using .table-striped class to the <.table> base class.

Run Bootstrap Striped Rows Table Demo

Example of Bordered Table

If we want to make border surrounding every element in a table, then we could make use of .table-bordered class to the <.table> base class.

Run Bootstrap Bordered Table Demo

Example of Hover Rows Table

We can also make table with mouse hover styled in Bootstrap by using .table-hover class to the <.table> base class.

Run Bootstrap Hover Rows Table Demo

Example of Condensed Table

We could make table more compact and save the space by using the class .table-condensed class to the <.table> base class. It makes table more compact by cutting the cell padding in half.

Run Bootstrap Condensed Table Demo

Example of Contextual Classes

Bootstrap provides some contextual classes to emphasize the cells in the table with some light weight styles by using following classes:

.active: It provides hover color to a particular cell when we keep mouse on the particular cell.
.success: It defines when the successful action happens on a cell.
.warning: It indicates warning that needs to pay the attention.
.danger: It defines when there may be an error or dangerous action.

Run Bootstrap Contextual Classes Demo

Example of Responsive Table

Responsive table allows enabling horizontal scrolling on small devices which contains width below 768px. To make horizontal scroll, we wrap .table in .table-responsive class. However viewing on larger devices (more than 7698px) will not make much difference.

Run Bootstrap Responsive Table Demo

Bootstrap Reference

Bootstrap Environment Setup

June 5, 2014 by Krishna Srinivasan Leave a Comment

The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development. It includes CSS and HTML for typography, icons, forms, buttons, tables, layout grids and other interface components, as well as optional JavaScript extensions. It is combination of HTML, CSS and JavaScript which helps in building user interface components.

What is Bootstrap?

Getting Started with Bootstrap

It is easy to get started with Bootstrap. This section explains how to download and setup the Bootstrap. The first thing is to download required files.

We can download latest version of Bootstrap from the link: getbootstrap.com/ and download the latest archived files. There are three types of downloads available for Bootstrap;

Download Bootstrap
Download Source
Download Sass

as shown in the following picture:

Download Bootstrap: Click on Download Bootstrap link, Once download is complete, unzip the file and we will get a folder named simply “bootstrap” which includes compiled CSS and JS and minified CSS and JS and fonts from glyphicons are included and they will have the following file structure:

Download Source: Click on Download Bootstrap Source link, Once download is complete, unzip the file and we will get less, js and fonts files which source code for Bootstrap CSS, JS and fonts respectively. The docs folder contains assets, layouts, data, examples etc which are useful for Bootstrap documentation. The dist folder includes js, fonts and css which are defined in the download section above. It has following file structure as shown below:

Download Sass: It is Sass powered version of Bootstrap. Sass is stable, powerful CSS extension language which is compatible with all versions of CSS. Bootstrap is ported from Less to Sass which provides support for Rails, Compass or Sass only projects.

Bootstrap CDN

Bootstrap CDN is free and public Content Delivery Network. Bootstrap uses MaxCDN’s global content delivery network which provides support for Bootstrap’s CSS and JavaScript. It is easy to use Bootstrap with a CDN. We can use following Bootstrap CDN links:

Developers can access Bootstrap CDN’s complete CSS with the following:

[code lang=”xml”]
<link rel=”stylesheet” href=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css”>
[/code]

Bootstrap CDN’s JavaScript Libraries:

[code lang=”xml”]
<script src=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.js”></script>
[/code]

As shown in above, bootstrap.min.css and bootstrap.min.js are two CDN links which provides support for Bootstrap’s CSS and JavaScript. These files are included to make normal HTML file to Bootstrapped template. The advantage of using CDN is that you need not download any source files for the bootstrap.

also read:

JQuery Tutorials

HTML5 Tutorials

Bootstrap Example

Here is a simple example for how to import the bootstrap for your project. This example doesn’t implement any other logic, but just shows how to start using the bootstrap.

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Basic Example</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<h2>Hello…Welcome to Bootstrap!!!</h2>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
[/code]

As shown in above code, we have used meta tag which provides information of data. It will not be display on the page, but will be machine parsable. The meta tag always goes inside head tag. It contains attributes such as name which defines name for the metadata, content which gives value associated with name attribute which in turn contains device-width property to set width of the device screen and initial-scale attribute describes the initial zoom when visiting the page. 1.0 does not zoom.
The next line contains CDN link <strong>bootstrap.min.css</strong> which provides support for Bootstrap’s CSS.
The two CDN links, <script src=https://code.jquery.com/jquery.js> </script> and <script src=”js/bootstrap.min.js”> </script> are necessary for Bootstrap’s JavaScript plugins and include all compiled plugins or individual files as needed.

Responsive Design using Bootstrap

When we use the word “Responsive” in the context of website, first thing comes to our mind that it should be compatible with all kinds and sizes of the devices. It has become an essential technique in which every web designer must be conversant with. The responsive design is a concept which leads to design a website or app in such a way that the same design can be rendered across various devices of different screens and provides the users with the best possible user experience.

It provides functional built in components which are easy to customize and also provides web based customization. The Bootstrap’s responsive design adjusts to Desktops Tablets and mobiles. There is demand to make every web site responsive for better readability of the online contents in different environments.

Browser Support

Bootstrap is supported by all popular browsers. The following list shows on which platforms browsers supports the Bootstrap.

Windows: Google Chrome, Mozilla Firefox, Internet Explorer, Opera and Safari.
Mac OS: Google Chrome, Mozilla Firefox, Opera and Safari.
iOS: Google Chrome, Safari.
Android: Google Chrome.

Using of icons in the code

Glyphicons Example

Customizing Glyphicon Icons

Rounded Images

Circle Images

Thumbnail Images

Responsive Images

Changing Sizes of Buttons

Block level Buttons

Active State

Disabled State

Button Tags

Example of Simple Table

Example of Striped Rows Table

Example of Bordered Table

Example of Hover Rows Table

Example of Condensed Table

Example of Contextual Classes

Example of Responsive Table

Bootstrap Reference

Getting Started with Bootstrap

Bootstrap CDN

Bootstrap Example

Responsive Design using Bootstrap

Browser Support

Bootstrap Books