Bootstrap - Quick Guide

Bootstrap - Overview

What is Twitter Bootstrap?

Bootstrap is a sleek, intuitive, and powerful, mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript.

History

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was released as an open source product in August 2011 on GitHub.

Why Use Bootstrap?

Mobile first approach − Bootstrap 3, framework consists of Mobile first styles throughout the entire library instead them of in separate files.
Browser Support − It is supported by all popular browsers.

Easy to get started − With just the knowledge of HTML and CSS anyone can get started with Bootstrap. Also the Bootstrap official site has a good documentation.
Responsive design − Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles. More about the responsive design is in the chapter Bootstrap Responsive Design.

Provides a clean and uniform solution for building an interface for developers.
It contains beautiful and functional built-in components which are easy to customize.
It also provides web based customization.
And best of all it is an open source.

What Bootstrap Package Includes?

Scaffolding − Bootstrap provides a basic structure with Grid System, link styles, and background. This is is covered in detail in the section Bootstrap Basic Structure
CSS − Bootstrap comes with the feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. This is covered in detail in the section Bootstrap with CSS.
Components − Bootstrap contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, pop-overs, and much more. This is covered in detail in the section Layout Components.
JavaScript Plugins − Bootstrap contains over a dozen custom jQuery plugins. You can easily include them all, or one by one. This is covered in details in the section Bootstrap Plugins.
Customize − You can customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.

Bootstrap - Environment Setup

It is very easy to setup and start using Bootstrap. This chapter will explain how to download and setup Bootstrap. We will also discuss the Bootstrap file structure, and demonstrate its usage with an example.

Download Bootstrap

You can download the latest version of Bootstrap from https://getbootstrap.com/. When you click on this link, you will get to see a screen as below −

Here you can see two buttons −

Download Bootstrap − Clicking this, you can download the precompiled and minified versions of Bootstrap CSS, JavaScript, and fonts. No documentation or original source code files are included.
Download Source − Clicking this, you can get the latest Bootstrap LESS and JavaScript source code directly from GitHub.

If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, Bootstrap officially supports only Recess, which is Twitter's CSS hinter based on less.js.

For better understanding and ease of use, we shall use precompiled version of Bootstrap throughout the tutorial. As the files are complied and minified you don't have to bother every time including separate files for individual functionality. At the time of writing this tutorial the latest version (Bootstrap 3) was downloaded.

File structure

Precompiled Bootstrap

Once the compiled version Bootstrap is downloaded, extract the ZIP file, and you will see the following file/directory structure −

As you can see, there are compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). Fonts from Glyphicons are included, as it is the optional Bootstrap theme.

Bootstrap Source Code

If you have downloaded the Bootstrap source code then the file structure would be as follows −

The files under less/, js/, and fonts/ are the source code for Bootstrap CSS, JS, and icon fonts (respectively).
The dist/ folder includes everything listed in the precompiled download section above.
docs-assets/, examples/, and all *.html files are Bootstrap documentation.

HTML Template

A basic HTML template using Bootstrap would look like this −

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Here you can see the jquery.js, bootstrap.min.js and bootstrap.min.css files that are included to make a normal HTM file to the Bootstrapped Template. Just make sure to include jQuery library before you include Bootstrap library.

More details about each of the elements in this above piece of code will be discussed in the chapter Bootstrap CSS Overview.

Example

Now let's try an example using the above template. Try the following example using Live Demo option available at the top right corner of the below sample code box on our website −

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints
Max container width	None (auto)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
# of columns	12	12	12	12
Max column width	Auto	60px	78px	95px
Gutter width	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)
Nestable	Yes	Yes	Yes	Yes
Offsets	Yes	Yes	Yes	Yes
Column ordering	Yes	Yes	Yes	Yes

Sr.No.	Tag & Description
1	<table> Wrapping element for displaying data in a tabular format
2	<thead> Container element for table header rows (<tr>) to label table columns.
3	<tbody> Container element for table rows (<tr>) in the body of the table.
4	<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row.
5	<td> Default table cell.
6	<th> Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>
7	<caption> Description or summary of what the table holds.

Sr.No.	Class & Description
1	.active Applies the hover color to a particular row or cell
2	.success Indicates a successful or positive action
3	.warning Indicates a warning that might need attention
4	.danger Indicates a dangerous or potentially negative action

Sr.No.	Class & Description
1	btn Default/ Standard button.
2	btn-primary Provides extra visual weight and identifies the primary action in a set of buttons.
3	btn-success Indicates a successful or positive action.
4	btn-info Contextual button for informational alert messages.
5	btn-warning Indicates caution should be taken with this action.
6	btn-danger Indicates a dangerous or potentially negative action.
7	btn-link Deemphasize a button by making it look like a link while maintaining button behavior.

Sr.No.	Class & Description
1	.btn-lg This makes the button size large.
2	.btn-sm This makes the button size small.
3	.btn-xs This makes the button size extra small.
4	.btn-block This creates block level buttons—those that span the full width of a parent.

Element	Class
Button element	Use .active class to show that it is activated.
Anchor element	Use .active class to <a> buttons to show that it is activated.

Classes	Devices
.visible-xs	Extra small (less than 768px) visible
.visible-sm	Small (up to 768 px) visible
.visible-md	Medium (768 px to 991 px) visible
.visible-lg	Larger (992 px and above) visible
.hidden-xs	Extra small (less than 768px) hidden
.hidden-sm	Small (up to 768 px) hidden
.hidden-md	Medium (768 px to 991 px) hidden
.hidden-lg	Larger (992 px and above) hidden

Classes	Print
.visible-print	Yes Visible
.hidden-print	Visible only to browser not to print.

Class	Description	Code Sample
.btn-group	This class is used for a basic button group. Wrap a series of buttons with class .btn in .btn-group.	<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button1</button> <button type = "button" class = "btn btn-default">Button2</button> </div>
.btn-toolbar	This helps to combine sets of <div class = "btn-group"> into a <div class = "btn-toolbar"> for more complex components.	<div class = "btn-toolbar" role = "toolbar"> <div class = "btn-group">...</div> <div class = "btn-group">...</div> </div>
.btn-group-lg, .btn-group-sm, .btn-group-xs	These classes can be applied to button group instead of resizing each button.	<div class = "btn-group btn-group-lg">...</div> <div class = "btn-group btn-group-sm">...</div> <div class = "btn-group btn-group-xs">...</div>
.btn-group-vertical	This class make a set of buttons appear vertically stacked rather than horizontally.	<div class = "btn-group-vertical"> ... </div>

Option Name	Type/Default Value	Data attribute name	Description
backdrop	boolean or the string 'static' Default: true	data-backdrop	Specify static for a backdrop, if you don’t want the modal to be closed when the user clicks outside of the modal.
keyboard	boolean Default: true	data-keyboard	Closes the modal when escape key is pressed; set to false to disable.
show	boolean Default: true	data-show	Shows the modal when initialized.
remote	path Default: false	data-remote	Using the jQuery .load method, inject content into the modal body. If an href with a valid URL is added, it will load that content. An example of this is shown below − <a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>

Method	Description	Example
Options − .modal(options)	Activates your content as a modal. Accepts an optional options object.	$('#identifier').modal({ keyboard: false })
Toggle − .modal('toggle')	Manually toggles a modal.	$('#identifier').modal('toggle')
Show − .modal('show')	Manually opens a modal.	$('#identifier').modal('show')
Hide − .modal('hide')	Manually hides a modal.	$('#identifier').modal('hide')

Event	Description	Example
show.bs.modal	Fired after the show method is called.	$('#identifier').on('show.bs.modal', function () { // do something… })
shown.bs.modal	Fired when the modal has been made visible to the user (will wait for CSS transitions to complete).	$('#identifier').on('shown.bs.modal', function () { // do something… })
hide.bs.modal	Fired when the hide instance method has been called.	$('#identifier').on('hide.bs.modal', function () { // do something… })
hidden.bs.modal	Fired when the modal has finished being hidden from the user.	$('#identifier').on('hidden.bs.modal', function () { // do something… })

Event	Description	Example
show.bs.tab	This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.	$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab })
shown.bs.tab	This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.	$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab })

Option Name	Type/Default Value	Data attribute name	Description
animation	boolean Default: true	data-animation	Applies a CSS fade transition to the tooltip.
html	boolean Default: false	data-html	Inserts HTML into the tooltip. If false, jQuery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.
placement	string\|function Default: top	data-placement	Specifies how to position the tooltip (i.e., top\|bottom\|left\|right\|auto). When auto is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
selector	string Default: false	data-selector	If a selector is provided, tooltip objects will be delegated to the specified targets.
title	string \| function Default: "	data-title	The title option is the default title value if the title attribute isn’t present.
trigger	string Default: 'hover focus'	data-trigger	Defines how the tooltip is triggered: click\| hover \| focus \| manual. You may pass multiple triggers; separate them with a space.
content	string \| function Default: ''	data-content	Default content value if data-content attribute isn't present
delay	number \| object Default: 0	data-delay	Delays showing and hiding the tooltip in ms — does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is − delay: { show: 500, hide: 100 }
container	string \| false Default: false	data-container	Appends the tooltip to a specific element. Example: container: 'body'

Method	Description	Example
Options − .tooltip(options)	Attaches a tooltip handler to an element collection.	$().tooltip(options)
Toggle − .tooltip('toggle')	Toggles an element's tooltip.	$('#element').tooltip('toggle')
Show − .tooltip('show')	Reveals an element's tooltip.	$('#element').tooltip('show')
Hide − .tooltip('hide')	Hides an element's tooltip.	$('#element').tooltip('hide')
Destroy − .tooltip('destroy')	Hides and destroys an element's tooltip.	$('#element').tooltip('destroy')

Event	Description	Example
show.bs.tooltip	This event fires immediately when the show instance method is called.	$('#myTooltip').on('show.bs.tooltip', function () { // do something })
shown.bs.tooltip	This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).	$('#myTooltip').on('shown.bs.tooltip', function () { // do something })
hide.bs.tooltip	This event is fired immediately when the hide instance method has been called.	$('#myTooltip').on('hide.bs.tooltip', function () { // do something })
hidden.bs.tooltip	This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).	$('#myTooltip').on('hidden.bs.tooltip', function () { // do something })

Option Name	Type/Default Value	Data attribute name	Description
animation	boolean Default − true	data-animation	Applies a CSS fade transition to the popover.
html	boolean Default − false	data-html	Inserts HTML into the popover. If false, jQuery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.
placement	string\|function Default − top	data-placement	Specifies how to position the popover (i.e., top\|bottom\|left\|right\|auto). When auto is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.
selector	string Default − false	data-selector	If a selector is provided, popover objects will be delegated to the specified targets.
title	string \| function Default − "	data-title	The title option is the default title value if the title attribute isn’t present.
trigger	string Default − 'hover focus'	data-trigger	Defines how the popover is triggered − click\| hover \| focus \| manual. You may pass multiple triggers; separate them with a space.
delay	number \| object Default − 0	data-delay	Delays showing and hiding the popover in ms — does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is − delay: { show: 500, hide: 100 }
container	string \| false Default − false	data-container	Appends the popover to a specific element. Example: container: 'body'

Method	Description	Example
Options − .popover(options)	Attaches a popover handler to an element collection.	$().popover(options)
Toggle − .popover('toggle')	Toggles an element's popover.	$('#element').popover('toggle')
Show − .popover('show')	Reveals an element's popover.	$('#element').popover('show')
Hide − .popover('hide')	Hides an element's popover.	$('#element').popover('hide')
Destroy − .popover('destroy')	Hides and destroys an element's popover.	$('#element').popover('destroy')

Event	Description	Example
show.bs.popover	This event fires immediately when the show instance method is called.	$('#mypopover').on('show.bs.popover', function () { // do something })
shown.bs.popover	This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).	$('#mypopover').on('shown.bs.popover', function () { // do something })
hide.bs.popover	This event is fired immediately when the hide instance method has been called.	$('#mypopover').on('hide.bs.popover', function () { // do something })
hidden.bs.popover	This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).	$('#mypopover').on('hidden.bs.popover', function () { // do something })

Method	Description	Example
.alert()	This method wraps all alerts with close functionality.	$('#identifier').alert();
Close Method .alert('close')	To enable all alerts to be closed, add this method.	$('#identifier').alert('close');

Event	Description	Example
close.bs.alert	This event fires immediately when the close instance method is called.	$('#myalert').bind('close.bs.alert', function () { // do something })
closed.bs.alert	This event is fired when the alert has been closed (will wait for CSS transitions to complete).	$('#myalert').bind('closed.bs.alert', function () { // do something })

Method	Description	Example
button('toggle')	Toggles push state. Gives the button the appearance that it has been activated. You can also enable auto toggling of a button by using the data-toggle attribute.	$().button('toggle')
.button('loading')	When loading, the button is disabled and the text is changed to the option from the data-loading-text attribute of button element	$().button('loading')
.button('reset')	Resets button state, bringing the original content back to the text. This method is useful when you need to return the button back to the primary state	$().button('reset')
.button(string)	String in this method is referring to any string declared by the user. To reset the button state and bring in new content use this method.	$().button(string)

Option Name	Type/Default Value	Data attribute name	Description
parent	selector Default − false	data-parent	If selector is false, then all collapsible elements under the specified parent will be closed (similar to traditional accordion behavior - this dependent on the accordion-group class).
toggle	boolean Default − true	data-toggle	Toggles the collapsible element on invocation.

Method	Description	Example
Options − .collapse(options)	Activates your content as a collapsible element. Accepts an optional options object.	$('#identifier').collapse({ toggle: false })
Toggle − .collapse('toggle')	Toggles a collapsible element to shown or hidden.	$('#identifier').collapse('toggle')
Show − .collapse('show')	Shows a collapsible element.	$('#identifier').collapse('show')
Hide − .collapse('hide')	Hides a collapsible element.	$('#identifier').collapse('hide')

Bootstrap - Quick Guide

Bootstrap - Overview

What is Twitter Bootstrap?

History

Why Use Bootstrap?

What Bootstrap Package Includes?

Bootstrap - Environment Setup

Download Bootstrap

File structure

Precompiled Bootstrap

Bootstrap Source Code

HTML Template

Example

Bootstrap - Grid System

What is a Grid?

What is Bootstrap Grid System?

Mobile First Strategy

Working of Bootstrap Grid System

Media Queries

Grid options

Basic Grid Structure

Responsive column resets

Offset Columns

Nesting columns

Column Ordering

Bootstrap - CSS Overview

HTML5 doctype

Mobile First

Responsive Images

Typography and Links

Normalize

Containers

Bootstrap - Typography

Headings

Inline Subheadings

Lead Body Copy

Emphasis

Abbreviations

Addresses

Blockquotes

Lists

Bootstrap - Code

Bootstrap - Tables

Basic Table

Optional Table Classes

Striped Table

Bordered Table

Hover Table

Condensed Table

Contextual classes

Responsive Tables

Bootstrap - Forms

Form Layout

Vertical or Basic Form

Inline Form

Horizontal Form

Supported Form Controls

Inputs

Textarea

CheckBoxes and Radio Buttons

Selects

Static Control

Form Control States

Input Focus

Disabled lnputs

Disabled Fieldsets

Validation States

Form Control Sizing

Help Text

Bootstrap - Buttons

Button Size

Button State

Active State

Disabled State

Button Tags

Bootstrap - Images

Bootstrap - Helper Classes

Close icon

Carets

Quick Floats

Event	Description	Example
show.bs.collapse	Fired after the show method is called.	$('#identifier').on('show.bs.collapse', function () { // do something })
shown.bs.collapse	This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).	$('#identifier').on('shown.bs.collapse', function () { // do something })
hide.bs.collapse	Fired when the hide instance method has been called.	$('#identifier').on('hide.bs.collapse', function () { // do something })
hidden.bs.collapse	This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).	$('#identifier').on('hidden.bs.collapse', function () { // do something })

Option Name	Type/Default Value	Data attribute name	Description
interval	number Default − 5000	data-interval	The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause	string Default − "hover"	data-pause	Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
wrap	boolean Default − true	data-wrap	Whether the carousel should cycle continuously or have hard stops.

Method	Description	Example
.carousel(options)	Initializes the carousel with an optional options object and starts cycling through items.	$('#identifier').carousel({ interval: 2000 })
.carousel('cycle')	Cycles through the carousel items from left to right.	$('#identifier').carousel('cycle')
.carousel('pause')	Stops the carousel from cycling through items.	$('#identifier')..carousel('pause')
.carousel(number)	Cycles the carousel to a particular frame (0 based, similar to an array).	$('#identifier').carousel(number)
.carousel('prev')	Cycles to the previous item.	$('#identifier').carousel('prev')
.carousel('next')	Cycles to the next item.	$('#identifier').carousel('next')

Event	Description	Example
slide.bs.carousel	This event fires immediately when the slide instance method is invoked.	$('#identifier').on('slide.bs.carousel', function () { // do something })
slid.bs.carousel	This event is fired when the carousel has completed its slide transition.	$('#identifier').on('slid.bs.carousel', function () { // do something })

Example	Description	Download link
Buy Table	This example indicates about buy table structure in Bootstrap.	Download
Plan Table	This example indicates about Plan table structure in Bootstrap.	Download
Table with gallery	This example indicates about gallery table structure in Bootstrap.	Download

Example	Description	Download link
Login Page	This example indicates about login page structure in Bootstrap	Download
Contact page	This example indicates about Contact page structure in Bootstrap	Download
Sign Up page	This example indicates about Sign Up page structure in Bootstrap	Download

Example	Description	Download link
IOS Buttons	This example indicates about button structure in Bootstrap	Download
Image Buttons	This example indicates about Image button structure in Bootstrap	Download
Shadow Buttons	This example indicates about Shadow button structure in Bootstrap	Download
Sign up Buttons	This example indicates about Sign Up button structure in Bootstrap	Download

Example	Description	Download link
Image Gallery	This example indicates about image gallery structure in Bootstrap	Download
Image zoom	This example indicates about Image Zoom structure in Bootstrap	Download
Team Image gallery	This example indicates about grid image structure in Bootstrap	Download
Background image	This example indicates about Background Image structure in Bootstrap	Download
Image in panel	This example indicates about image structure in Bootstrap	Download

Example	Description	Download link
Card Responsive	This example indicates about Card structure in Bootstrap	Download
simple Testimonials	This example indicates about Testimonials structure in Bootstrap	Download
Video grid	This example indicates about Grid Video structure in Bootstrap	Download
Banner image	This example indicates about Banner Image structure in Bootstrap	Download
Carousel with face indicators	This example indicates about Carousel with face indicators structure in Bootstrap	Download

Example	Description	Download link
Navigation Demo	This example indicates about navigation structure in Bootstrap	Download
Image Navigation bar	This example indicates about Image Navigation Bar structure in Bootstrap	Download
Findcon Buttons	This example indicates about findcon Button structure in Bootstrap	Download
Tiny Navbar	This example indicates about Tiny Navbar structure in Bootstrap	Download