Submitted by : Engineer Farid Osuli(Afghan)Facebook: Farid Osuli , linked.com :Egineer Farid OsuliEmail Addr: faridisolisheena@yahoo.com
|
What is Bootstrap?
- Bootstrap is a free front-end framework for faster and easier web development
- Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
- Bootstrap also gives you the ability to easily create responsive designs
| What is Responsive Web Design? Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops. |
Bootstrap History
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.
In June 2014 Bootstrap was the No.1 project on GitHub!
Why Use Bootstrap?
Advantages of Bootstrap:
- Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
- Responsive features: Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops
- Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
- Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
Where to Get Bootstrap?
There are two ways to start using Bootstrap on your own web site.
You can:
- Download Bootstrap from getbootstrap.com
- Include Bootstrap from a CDN
Downloading Bootstrap
If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the instructions there.
Bootstrap CDN
If you don’t want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).
MaxCDN provide CDN support for Bootstrap’s CSS and JavaScript. Also include jQuery:
MaxCDN:
<!– Latest compiled and minified CSS –>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
<!– jQuery library –>
<!– Latest compiled JavaScript –>
| One advantage of using the Bootstrap CDN: Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN’s will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time. |
Create First Web Page With Bootstrap
- Add the HTML5 doctype
Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.
Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
</head>
</html>
- Bootstrap 3 is mobile-first
Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.
To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.
- Containers
Bootstrap also requires a containing element to wrap site contents.
There are two container classes to choose from:
- The .container class provides a responsive fixed width container
- The .container-fluid class provides a full width container, spanning the entire width of the viewport
Note: Containers are not nestable (you cannot put a container inside another container).
Two Basic Bootstrap Pages
The following example shows the code for a basic Bootstrap page (with a responsive fixed width container):
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
</head>
<body>
My First Bootstrap Page
This is some text.
</body>
</html>
Try it Yourself »
The following example shows the code for a basic Bootstrap page (with a full width container):
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
</head>
<body>
My First Bootstrap Page
This is some text.
</body>
</html>
Bootstrap Grids
Bootstrap Grid System
Bootstrap’s grid system allows up to 12 columns across the page.
If you do not want to use all 12 column individually, you can group the columns together to create wider columns:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Bootstrap’s grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
Grid Classes
The Bootstrap grid system has four classes:
- xs (for phones)
- sm (for tablets)
- md (for desktops)
- lg (for larger desktops)
The classes above can be combined to create more dynamic and flexible layouts.
Basic Structure of a Bootstrap Grid
The following is a basic structure of a Bootstrap grid:
</div>
</div>
First; create a row (
Below we have collected some examples of basic Bootstrap grid layouts.
Three Equal Columns
.col-sm-4
.col-sm-4
.col-sm-4
The following example shows how to get a three equal-width columns starting at tablets and scaling to large desktops. On mobile phones, the columns will automatically stack:
Example
</div>
Two Unequal Columns
.col-sm-4
.col-sm-8
The following example shows how to get two various-width columns starting at tablets and scaling to large desktops:
Example
</div>
Bootstrap Text/Typography
Bootstrap’s Default Settings
Bootstrap’s global default font-size is 14px, with a line-height of 1.428.
This is applied to the <body> and all paragraphs.
In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).
Bootstrap vs. Browser Defaults
In this chapter, we will look at some HTML elements that will be styled a little bit different by Bootstrap than browser defaults.
<h1> – <h6>
By default, Bootstrap will style the HTML headings (<h1> to <h6>) in the following way:
Example
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
<small>
In Bootstrap the HTML <small> element is used to create a lighter, secondary text in any heading:
Example
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
<mark>
Bootstrap will style the HTML <mark> element in the following way:
Example
Use the mark element to highlight text.
<abbr>
Bootstrap will style the HTML <abbr> element in the following way:
Example
The WHO was founded in 1948.
<blockquote>
Bootstrap will style the HTML <blockquote> element in the following way:
Example
For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
From WWF’s website
To show the quote on the right, use the .blockquote-reverse class:
Example
For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
From WWF’s website
<dl>
Bootstrap will style the HTML <dl> element in the following way:
Example
Coffee
– black hot drink
Milk
– white cold drink
Try it Yourself »
<code>
Bootstrap will style the HTML <code> element in the following way:
Example
The following HTML elements: span, section, and div defines a section in a document.
Try it Yourself »
<kbd>
Bootstrap will style the HTML <kbd> element in the following way:
Example
Use ctrl + p to open the Print dialog box.
Try it Yourself »
<pre>
Bootstrap will style the HTML <pre> element in the following way:
Example
Text in a pre elementis displayed in a fixed-widthfont, and it preservesboth spaces andline breaks.
Try it Yourself »
Contextual Colors and Backgrounds
Bootstrap also has some contextual classes that can be used to provide “meaning through colors”.
The classes for text colors are:.text-muted, .text-primary, .text-success, .text-info, .text-warning, and.text-danger:
Example
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Try it Yourself »
The classes for background colors are:.bg-primary, .bg-success, bg-info, bg-warning, and .bg-danger:
Example
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Try it Yourself »
More Typography Classes
The Bootstrap classes below can be added to style HTML elements further:
| Class | Description | Example |
| .lead | Makes a paragraph stand out | Try it |
| .small | Indicates smaller text (set to 85% of the size of the parent) | Try it |
| .text-left | Indicates left-aligned text | Try it |
| .text-center | Indicates center-aligned text | Try it |
| .text-right | Indicates right-aligned text | Try it |
| .text-justify | Indicates justified text | Try it |
| .text-nowrap | Indicates no wrap text | Try it |
| .text-lowercase | Indicates lowercased text | Try it |
| .text-uppercase | Indicates uppercased text | Try it |
| .text-capitalize | Indicates capitalized text | Try it |
| .initialism | Displays the text inside an <abbr> element in a slightly smaller font size | Try it |
| .list-unstyled | Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) | Try it |
| .list-inline | Places all list items on a single line | Try it |
| .dl-horizontal | Lines up the terms (<dt>) and descriptions (<dd>) in <dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side | Try it |
| .pre-scrollable | Makes a <pre> element scrollable | Try it |
Complete Bootstrap Typography Reference
For a complete reference of all typography elements/classes, go to our complete Bootstrap Typography Reference.
Also look at our Bootstrap Helper Classes Reference for more information about contextual classes.
Bootstrap Tables
Bootstrap Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.
The .table class adds basic styling to a table:
Example
| Firstname | Lastname | |
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Striped Rows
The .table-striped class adds zebra-stripes to a table:
Example
| Firstname | Lastname | |
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Bordered Table
The .table-bordered class adds borders on all sides of the table and cells:
Example
| Firstname | Lastname | |
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Hover Rows
The .table-hover class enables a hover state on table rows:
Example
| Firstname | Lastname | |
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Condensed Table
The .table-condensed class makes a table more compact by cutting cell padding in half:
Example
| Firstname | Lastname | |
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Contextual Classes
Contextual classes can be used to color table rows (<tr>) or table cells (<td>):
Example
| Firstname | Lastname | |
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
The contextual classes that can be used are:
| Class | Description |
| .active | Applies the hover color to the table row or table cell |
| .success | Indicates a successful or positive action |
| .info | Indicates a neutral informative change or action |
| .warning | Indicates a warning that might need attention |
| .danger | Indicates a dangerous or potentially negative action |
Bootstrap Images
Bootstrap Image Shapes
Rounded Corners:
Circle:
Thumbnail:
Rounded Corners
The .img-rounded class adds rounded corners to an image (IE8 do not support rounded corners):
Example
<img src=”cinqueterre.jpg” class=”img-rounded” alt=”Cinque Terre” width=”304″ height=”236″>
Try it Yourself »
Circle
The .img-circle class shapes the image to a circle (IE8 do not support rounded corners):
Example
<img src=”cinqueterre.jpg” class=”img-circle” alt=”Cinque Terre” width=”304″ height=”236″>
Try it Yourself »
Thumbnail
The .img-thumbnail class shapes the image to a thumbnail:
Example
<img src=”cinqueterre.jpg” class=”img-thumbnail” alt=”Cinque Terre” width=”304″ height=”236″>
Try it Yourself »
Responsive Images
Images comes in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen.
Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.
The .img-responsive class applies max-width: 100%; and height: auto; to the image:
Example
<img class=”img-responsive” src=”img_chania.jpg” alt=”Chania”>
Try it Yourself »
Image Gallery
You can also use Bootstrap’s grid system in conjunction with the .thumbnail class to create an image gallery:
Example
</div>
Try it Yourself »
Responsive Embeds
Also let videos or slideshows scale properly on any device.
Classes can be applied directly to , , , and elements.
The following example creates a responsive video by adding an .embed-responsive-item class to an tag (the video will then scale nicely to the parent element). The containing
Example
</div>
Try it Yourself »
| What is aspect ratio?
The aspect ratio of an image describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century), and 16:9 (universal for HD television and European digital television). |
You can choose between two aspect ratio classes:
<!– 16:9 aspect ratio –>
<!– 4:3 aspect ratio –>
Bootstrap Jumbotron and Page Header
Creating a Jumbotron
A jumbotron indicates a big box for calling extra attention to some special content or information.
A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.
Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.
Use a
Bootstrap Tutorial
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.
Jumbotron Inside Container
Place the jumbotron inside the
Example
Bootstrap Tutorial
Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Try it Yourself »
Jumbotron Outside Container
Place the jumbotron outside the
Example
Bootstrap Tutorial
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.
This is some text.
This is another text.
Creating a Page Header
A page header is like a section divider.
The .page-header class adds a horizontal line under the heading (+ adds some extra space around the element):
Example Page Header
Use a
Example
Example Page Header
Bootstrap Wells
Wells
The .well class adds a rounded border around an element with a gray background color and some padding:
Basic Well
Example
Well Size
Small Well
Normal Well
Large Well
Change the size of the well by adding the .well-sm class for small wells or .well-lg class for large wells:
Example
Bootstrap Alerts
Alerts
Bootstrap provides an easy way to create predefined alert messages:
×Success! This alert box indicates a successful or positive action.
×Info! This alert box indicates a neutral informative change or action.
×Warning! This alert box indicates a warning that might need attention.
×Danger! This alert box indicates a dangerous or potentially negative action.
Alerts are created with the .alert class, followed by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger:
Example
Closing Alerts
To close the alert message, add class=”close” and data-dismiss=”alert” to a link or a button element:
Example
Success! Indicates a successful or positive action.
| The aria-* attribute and × explanation
To help improve accessibility for people using screen readers, you should include the aria-label=”close” attribute, when creating a close button. × (×) is an HTML entity that is the preferred icon for close buttons, rather than the letter “x”. |
Animated Alerts
The .fade and .in classes adds a fading effect when closing the alert message:
Example
Bootstrap Buttons
Button Styles
Bootstrap provides seven styles of buttons:
Default Primary Success Info Warning Danger Link
To achieve the button styles above, Bootstrap has the following classes:
- .btn-default
- .btn-primary
- .btn-success
- .btn-info
- .btn-warning
- .btn-danger
- .btn-link
The following example shows the code for the different button styles:
Example
Default
Primary
Success
Info
Warning
Danger
Link
Try it Yourself »
The button classes can be used on an , , or element:
Example
Link Button
Button
| Why do we put a # in the href attribute of the link? Since we do not have any page to link it to, and we do not want to get a “404” message, we put # as the link. In real life it should of course been a real URL to the “Search” page. |
Button Sizes
Bootstrap provides four button sizes:
Large Medium Small XSmall
The classes that define the different sizes are:
- .btn-lg
- .btn-md
- .btn-sm
- .btn-xs
The following example shows the code for different button sizes:
Example
Large
Medium
Small
XSmall
Try it Yourself »
Block Level Buttons
A block level button spans the entire width of the parent element.
Button 1Button 2
Add class .btn-block to create a block level button:
Bootstrap Button Groups
Button Groups
Bootstrap allows you to group a series of buttons together (on a single line) in a button group:
AppleSamsungSony
Use a
Example
Samsung
Sony
Tip: Instead of applying button sizes to every button in a group, use class .btn-group-* to size all buttons in the group:
Example
Samsung
Sony
Vertical Button Groups
Bootstrap also supports vertical button groups:
AppleSamsungSony
Use the class .btn-group-vertical to create a vertical button group:
Example
Samsung
Sony
Justified Button Groups
To span the entire width of the screen, use the .btn-group-justified class:
Apple
Samsung
Sony
Example with <a> elements:
Example
Note: For <button> elements, you must wrap each button in a .btn-group class:
Example
</div>
Try it Yourself »
Nesting Button Groups & Dropdown Menus
AppleSamsung
Sony
Nest button groups to create dropdown menus:
Example
Samsung
Sony
</div>
Try it Yourself »
Split Button Dropdowns
Sony
Example
Bootstrap Glyphicons
Glyphicons
Bootstrap provides 200 glyphicons from the Glyphicons Halflings set.
Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.
Here are some examples of glyphicons:
Envelope glyphicon:
Print glyphicon:
Search glyphicon:
Download glyphicon:
Glyphicon Syntax
A glyphicon is inserted with the following syntax:
<span class=”glyphicon glyphicon-name“></span>
The name part in the syntax above must be replaced with the proper name of the glyphicon.
Glyphicon Example
The following example shows different ways to use glyphicons:
Example
<p>Envelope icon: <span class=”glyphicon glyphicon-envelope”></span></p>
<p>Envelope icon as a link:
<a href=”#”><span class=”glyphicon glyphicon-envelope”></span></a>
</p>
<p>Search icon: <span class=”glyphicon glyphicon-search”></span></p>
<p>Search icon on a button:
<button type=”button” class=”btn btn-default”>
<span class=”glyphicon glyphicon-search”></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type=”button” class=”btn btn-info”>
<span class=”glyphicon glyphicon-search”></span> Search
</button>
</p>
<p>Print icon: <span class=”glyphicon glyphicon-print”></span></p>
<p>Print icon on a styled link button:
<a href=”#” class=”btn btn-success btn-lg”>
<span class=”glyphicon glyphicon-print”></span> Print
</a>
</p>
Bootstrap Badges and Labels
Badges
Badges are numerical indicators of how many items are associated with a link:
The numbers (5, 10, and 2) are the badges.
Use the .badge class within <span> elements to create badges:
Example
<a href=”#”>News <span class=”badge”>5</span></a><br>
<a href=”#”>Comments <span class=”badge”>10</span></a><br>
<a href=”#”>Updates <span class=”badge”>2</span></a>
Try it Yourself »
Badges can also be used inside other elements, such as buttons:
Primary 7
The following example shows how to add badges to buttons:
Example
<button type=”button” class=”btn btn-primary”>Primary <span class=”badge”>7</span></button>
Try it Yourself »
Labels
Labels are used to provide additional information about something:
Example New
Example New
Example New
Example New
Example New
Example New
Use the .label class, followed by one of the six contextual classes .label-default, .label-primary, .label-success, .label-info, .label-warning or .label-danger, within a <span> element to create a label:
Example
<h1>Example <span class=”label label-default”>New</span></h1>
<h2>Example <span class=”label label-default”>New</span></h2>
<h3>Example <span class=”label label-default”>New</span></h3>
<h4>Example <span class=”label label-default”>New</span></h4>
<h5>Example <span class=”label label-default”>New</span></h5>
<h6>Example <span class=”label label-default”>New</span></h6>
Try it Yourself »
The following example shows all contextual label classes:
Default Label Primary Label Success Label Info Label Warning Label Danger Label
Example
<span class=”label label-default”>Default Label</span>
<span class=”label label-primary”>Primary Label</span>
<span class=”label label-success”>Success Label</span>
<span class=”label label-info”>Info Label</span>
<span class=”label label-warning”>Warning Label</span>
<span class=”label label-danger”>Danger Label</span>
Try it Yourself »
Bootstrap Progress Bars
Basic Progress Bar
A progress bar can be used to show a user how far along he/she is in a process.
Bootstrap provides several types of progress bars.
A default progress bar in Bootstrap looks like this:
70% Complete
To create a default progress bar, add a .progress class to a
Example
</div>
Try it Yourself »
| Note: Progress bars are not supported in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve some of their effects). |
Progress Bar With Label
A progress bar with a label looks like this:
70%
Remove the .sr-only class from the progress bar to show a visible percentage:
Example
</div>
Try it Yourself »
Colored Progress Bars
Contextual classes are used to provide “meaning through colors”.
The contextual classes that can be used with progress bars are:
- .progress-bar-success
- .progress-bar-info
- .progress-bar-warning
- .progress-bar-danger
40% Complete (success)
50% Complete (info)
60% Complete (warning)
70% Complete (danger)
The following example shows how to create progress bars with the different contextual classes:
Example
</div>
</div>
</div>
</div>
Try it Yourself »
Striped Progress Bars
Progress bars can also be striped:
40% Complete (success)
50% Complete (info)
60% Complete (warning)
70% Complete (danger)
Add class .progress-bar-striped to add stripes to the progress bars:
Example
</div>
</div>
</div>
</div>
Try it Yourself »
Animated Progress Bar
Here is an “animated” progress bar:
40%
Add class .active to animate the progress bar:
Example
</div>
Try it Yourself »
Stacked Progress Bars
Progress bars can also be stacked:
Free Space
Warning
Danger
Create a stacked progress bar by placing multiple bars into the same
Example
</div>
Try it Yourself »
Test Yourself with Exercises!
Bootstrap Pagination
Basic Pagination
If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.
A basic pagination in Bootstrap looks like this:
To create a basic pagination, add the .pagination class to an <ul> element:
Example
<ul class=”pagination”>
<li><a href=”#”>1</a></li>
<li><a href=”#”>2</a></li>
<li><a href=”#”>3</a></li>
<li><a href=”#”>4</a></li>
<li><a href=”#”>5</a></li>
</ul>
Try it Yourself »
Active State
The active state shows what is the current page:
Add class .active to let the user know which page he/she is on:
Example
<ul class=”pagination”>
<li><a href=”#”>1</a></li>
<li class=”active”><a href=”#”>2</a></li>
<li><a href=”#”>3</a></li>
<li><a href=”#”>4</a></li>
<li><a href=”#”>5</a></li>
</ul>
Try it Yourself »
Disabled State
A disabled link cannot be clicked:
Add class .disabled if a link for some reason is disabled:
Example
<ul class=”pagination”>
<li><a href=”#”>1</a></li>
<li><a href=”#”>2</a></li>
<li><a href=”#”>3</a></li>
<li class=”disabled”><a href=”#”>4</a></li>
<li><a href=”#”>5</a></li>
</ul>
Try it Yourself »
Pagination Sizing
Pagination blocks can also be sized to a larger size or a smaller size:
Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:
Example
<ul class=”pagination pagination-lg”>
<li><a href=”#”>1</a></li>
<li><a href=”#”>2</a></li>
<li><a href=”#”>3</a></li>
<li><a href=”#”>4</a></li>
<li><a href=”#”>5</a></li>
</ul>
<ul class=”pagination pagination-sm”>
<li><a href=”#”>1</a></li>
<li><a href=”#”>2</a></li>
<li><a href=”#”>3</a></li>
<li><a href=”#”>4</a></li>
<li><a href=”#”>5</a></li>
</ul>
Bootstrap Pager
What is Pager?
Pager is also a form of pagination (as described in the previous chapter).
Pager provides previous and next buttons (links).
To create previous/next buttons, add the .pager class to an <ul> element:
Example
<ul class=”pager”>
<li><a href=”#”>Previous</a></li>
<li><a href=”#”>Next</a></li>
</ul>
Result:
Align Buttons
Use the .previous and .next classes to align each button to the sides of the page:
Example
<ul class=”pager”>
<li class=”previous”><a href=”#”>Previous</a></li>
<li class=”next”><a href=”#”>Next</a></li>
</ul>
Result:
Bootstrap List Groups
Basic List Groups
The most basic list group is an unordered list with list items:
- First item
- Second item
- Third item
To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item:
Example
<ul class=”list-group”>
<li class=”list-group-item”>First item</li>
<li class=”list-group-item”>Second item</li>
<li class=”list-group-item”>Third item</li>
</ul>
Try it Yourself »
List Group With Badges
You can also add badges to a list group. The badges will automatically be positioned on the right:
- 12New
- 5Deleted
- 3Warnings
To create a badge, create a <span> element with class .badge inside the list item:
Example
<ul class=”list-group”>
<li class=”list-group-item”><span class=”badge”>12</span> New</li>
<li class=”list-group-item”><span class=”badge”>5</span> Deleted</li>
<li class=”list-group-item”><span class=”badge”>3</span> Warnings</li>
</ul>
Try it Yourself »
List Group With Linked Items
The items in a list group can also be hyperlinks:
First itemSecond itemThird item
To create a list group with linked items, use
- and instead of
- :
Example
Disabled Item
The following list group has a disabled item:
First itemSecond itemThird item
To disable an item, add the .disabled class:
Example
Contextual Classes
Contextual classes can be used to color list items:
- First item
- Second item
- Third item
- Fourth item
The classes for coloring list-items are: .list-group-item-success, list-group-item-info, list-group-item-warning, and .list-group-item-danger:
Example
<ul class=”list-group”>
<li class=”list-group-item list-group-item-success”>First item</li>
<li class=”list-group-item list-group-item-info”>Second item</li>
<li class=”list-group-item list-group-item-warning”>Third item</li>
<li class=”list-group-item list-group-item-danger”>Fourth item</li>
</ul>
Try it Yourself »Custom Content
You can add nearly any HTML inside a list group item.
Bootstrap provides the classes .list-group-item-heading and .list-group-item-text which can be used as follows:
Example
First List Group Item Heading
List Group Item Text
Second List Group Item Heading
List Group Item Text
Third List Group Item Heading
List Group Item Text
Bootstrap Panels
Panels
A panel in bootstrap is a bordered box with some padding around its content:
A Basic Panel
Panels are created with the .panel class, and content inside the panel has a .panel-body class:
Example
A Basic Panel</div>
Try it Yourself »The .panel-default class is used to style the color of the panel. See the last example on this page for more contextual classes. Panel Heading
Panel Heading
Panel Content
The .panel-heading class adds a heading to the panel:
Example
Panel HeadingPanel Content</div>
Try it Yourself »Panel Footer
Panel Content
Panel Footer
The .panel-footer class adds a footer to the panel:
Example
A Basic PanelPanel Footer</div>
Try it Yourself »Panel Group
To group many panels together, wrap a
with class .panel-group around them.The .panel-group class clears the bottom-margin of each panel:
Example
Panel Content</div>
Panel Content</div>
</div>
Try it Yourself »Panels with Contextual Classes
To color the panel, use contextual classes (.panel-default, .panel-primary, .panel-success, .panel-info,.panel-warning, or .panel-danger):
Example
Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content
Bootstrap Dropdowns
Basic Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
Dropdown Example
Example
Dropdown Example
Example Explained
The .dropdown class indicates a dropdown menu.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle=”dropdown” attribute.
The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.
Dropdown Divider
The .divider class is used to separate links inside the dropdown menu:
Example
<li class=”divider”></li>
Try it Yourself »Dropdown Header
Dropdown Header Example
The .dropdown-header class is used to add headers inside the dropdown menu:
Example
<li class=”dropdown-header”>Dropdown header 1</li>
Try it Yourself »Disable an Item
Dropdown Disabled Example
To disable an item in the dropdown menu, use the .disabled class:
Example
<li class=”disabled”><a href=”#”>CSS</a></li>
Try it Yourself »Dropdown Position
Dropdown Right Example
To right-align the dropdown, add the .dropdown-menu-right class to the element with .dropdown-menu:
Example
<ul class=”dropdown-menu dropdown-menu-right”>
Try it Yourself »Dropup Example
If you want the dropdown menu to expand upwards instead of downwards, change the
element with class=”dropdown” to “dropup”:Example
Try it Yourself »Dropdown Accessibility
To help improve accessibility for people using screen readers, you should include the following role and aria-*attributes, when creating a dropdown menu:
Example
Tutorials
Bootstrap Tabs and Pills
Menus
Most web pages have some kind of a menu.
In HTML, a menu is often defined in an unordered list <ul> (and styled afterwards), like this:
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3</a></li>
</ul>If you want to create a horizontal menu of the list above, add the .list-inline class to <ul>:
<ul class=”list-inline”>
Try it Yourself »Or you can display the menu above with Bootstraps’ Tabs and Pills (see below).
Tabs
Tabs are created with <ul class=”nav nav-tabs”>:
Tip: Also mark the current page with <li class=”active”>.
The following example creates navigation tabs:
Example
<ul class=”nav nav-tabs”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3</a></li>
</ul>
Try it Yourself »Tabs With Dropdown Menu
Tabs can also hold dropdown menus.
The following example adds a dropdown menu to “Menu 1”:
Example
<ul class=”nav nav-tabs”>
<li class=”active”><a href=”#”>Home</a></li>
<li class=”dropdown”>
<a class=”dropdown-toggle” data-toggle=”dropdown” href=”#”>Menu 1
<span class=”caret”></span></a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Submenu 1-1</a></li>
<li><a href=”#”>Submenu 1-2</a></li>
<li><a href=”#”>Submenu 1-3</a></li>
</ul>
</li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3</a></li>
</ul>
Try it Yourself »Pills
Pills are created with <ul class=”nav nav-pills”>. Also mark the current page with <li class=”active”>:
Example
<ul class=”nav nav-pills”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3</a></li>
</ul>
Try it Yourself »Vertical Pills
Pills can also be displayed vertically. Just add the .nav-stacked class.
The following example places the vertical pill menu inside the last column. So, on a large screen the menu will be displayed to the right. But on a small screen, the content will automatically adjust itself into a single-column layout:
Example
Pills With Dropdown Menu
Pills can also hold dropdown menus.
The following example adds a dropdown menu to “Menu 1”:
Example
<ul class=”nav nav-pills nav-stacked”>
<li class=”active”><a href=”#”>Home</a></li>
<li class=”dropdown”>
<a class=”dropdown-toggle” data-toggle=”dropdown” href=”#”>Menu 1
<span class=”caret”></span></a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Submenu 1-1</a></li>
<li><a href=”#”>Submenu 1-2</a></li>
<li><a href=”#”>Submenu 1-3</a></li>
</ul>
</li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3</a></li>
</ul>
Try it Yourself »Centered Tabs and Pills
To center/justify the tabs and pills, use the .nav-justified class.
Note that on screens that are smaller than 768px, the list items are stacked (content will remain centered):
Example
<!– Centered Tabs –>
<ul class=”nav nav-tabs nav-justified”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3</a></li>
</ul><!– Centered Pills –>
<ul class=”nav nav-pills nav-justified”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3</a></li>
</ul>
Try it Yourself »Dynamic Tabs
To make the tabs toggable, add the data-toggle=”tab” attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a
element with class .tab-content.If you want the tabs to fade in and out when clicking on them, add the .fade class to .tab-pane:
Example
HOME
Some content.
Menu 1
Some content in menu 1.
Menu 2
Some content in menu 2.
</div>
Try it Yourself »Dynamic Pills
The same code applies to pills; only change the data-toggle attribute to data-toggle=”pill”:
Example
<ul class=”nav nav-pills”>
<li class=”active”><a data-toggle=”pill” href=”#home”>Home</a></li>
<li><a data-toggle=”pill” href=”#menu1″>Menu 1</a></li>
<li><a data-toggle=”pill” href=”#menu2″>Menu 2</a></li>
</ul>HOME
Some content.
Menu 1
Some content in menu 1.
Menu 2
Some content in menu 2.
</div>
Try it Yourself »Bootstrap Navigation Bar
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page:
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with <nav class=”navbar navbar-default”>.
The following example shows how to add a navigation bar to the top of the page:
Example
<body>
<nav class=”navbar navbar-default”></div>
</nav>
…
Try it Yourself »All of the examples on this page will show a navigation bar that takes up too much space on small screens (however, the navigation bar will be on one single line on large screens – because Bootstrap is responsive). This problem (with the small screens) will be solved in the last example on this page! Inverted Navigation Bar
If you don’t like the style of the default navigation bar, Bootstrap provides an alternative, black navbar:
Just change the .navbar-default class into .navbar-inverse:
Example
<nav class=”navbar navbar-inverse”>
</div>
</nav>
Try it Yourself »Fixed Navigation Bar
The navigation bar can also be fixed at the top or at the bottom of the page.
A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.
The .navbar-fixed-top class makes the navigation bar fixed at the top:
Example
<nav class=”navbar navbar-inverse navbar-fixed-top”>
</div>
</nav>
Try it Yourself »The .navbar-fixed-bottom class makes the navigation bar stay at the bottom:
Example
<nav class=”navbar navbar-inverse navbar-fixed-bottom”>
</div>
</nav>
Try it Yourself »Navigation Bar With Dropdown
Navigation bars can also hold dropdown menus.
The following example adds a dropdown menu for the “Page 1” button:
Example
<nav class=”navbar navbar-inverse”>
</div>
</nav>
Try it Yourself »Right-Aligned Navigation Bar
The .navbar-right class is used to right-align navigation bar buttons.
In the following example we insert a “Sign Up” button and a “Login” button to the right in the navigation bar. We also add a glyphicon on each of the two new buttons:
Example
<nav class=”navbar navbar-inverse”>
</div>
</nav>
Try it Yourself »Collapsing The Navigation Bar
The navigation bar takes up too much space on a small screen.
We should hide the navigation bar; and only show it when it is needed.
In the following example the navigation bar is replaced by a button in the top right corner. Only when the button is clicked, the navigation bar will be displayed:
Example
<nav class=”navbar navbar-inverse”>
</div>
</nav>Bootstrap Forms
Bootstrap’s Default Settings
Form controls automatically receive some global styling with Bootstrap:
All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.
Bootstrap Form Layouts
Bootstrap provides three types of form layouts:
- Vertical form (this is default)
- Horizontal form
- Inline form
Standard rules for all three form layouts:
- Always use <form role=”form”> (helps improve accessibility for people using screen readers)
- Wrap labels and form controls in
(needed for optimum spacing)
- Add class .form-control to all textual , , and elements
Bootstrap Vertical Form (default)
Email:
Password:
Remember me
Submit
The following example creates a vertical form with two input fields, one checkbox, and a submit button:
Example
Email address:Password:Remember me<button type=”submit” class=”btn btn-default”>Submit</button>
</form>
Try it Yourself »Bootstrap Inline Form
Email:
Password:
Remember me
Submit
In an inline form, all of the elements are inline, left-aligned, and the labels are alongside.
Note: This only applies to forms within viewports that are at least 768px wide!
Additional rule for an inline form:
- Add class .form-inline to the <form> element
The following example creates an inline form with two input fields, one checkbox, and one submit button:
Example
<form class=”form-inline” role=”form”>
Email address:Password:Remember me<button type=”submit” class=”btn btn-default”>Submit</button>
</form>
Try it Yourself »Tip: If you don’t include a label for every input, screen readers will have trouble with your forms. You can hide the labels for all devices, except screen readers, by using the .sr-only class:
Example
<form class=”form-inline” role=”form”>
Email address:Password:Remember me<button type=”submit” class=”btn btn-default”>Submit</button>
</form>
Try it Yourself »Bootstrap Horizontal Form
Email:
Password:
Remember me
Submit
A horizontal form stands apart from the other forms both in the amount of markup, and in the presentation of the form.
Additional rules for a horizontal form:
- Add class .form-horizontal to the <form> element
- Add class .control-label to all <label> elements
Tip: Use Bootstrap’s predefined grid classes to align labels and groups of form controls in a horizontal layout.
The following example creates a horizontal form with two input fields, one checkbox, and one submit button:
Example
<form class=”form-horizontal” role=”form”>
Email:</div>
Password:</div>
Remember me</div>
</div>Submit</div>
</form>Bootstrap Form Inputs
Supported Form Controls
Bootstrap supports the following form controls:
- input
- textarea
- checkbox
- radio
- select
Bootstrap Input
Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
Note: Inputs will NOT be fully styled if their type is not properly declared!
Name:
Password:
The following example contains two input elements; one of type text and one of type password:
Example
Name:Password:Bootstrap Textarea
Comment:
The following example contains a textarea:
Example
Comment:Bootstrap Checkboxes
Option 1
Option 2
Option 3
Checkboxes are used if you want the user to select any number of options from a list of preset options.
The following example contains three checkboxes. The last option is disabled:
Example
Option 1Option 2Option 3Use the .checkbox-inline class if you want the checkboxes to appear on the same line:
Option 1 Option 2 Option 3
Example
<label class=”checkbox-inline”><input type=”checkbox” value=””>Option 1</label>
<label class=”checkbox-inline”><input type=”checkbox” value=””>Option 2</label>
<label class=”checkbox-inline”><input type=”checkbox” value=””>Option 3</label>
Try it Yourself »Bootstrap Radio Buttons
Option 1
Option 2
Option 3
Radio buttons are used if you want to limit the user to just one selection from a list of preset options.
The following example contains three radio buttons. The last option is disabled:
Example
Option 1Option 2Option 3Use the .radio-inline class if you want the radio buttons to appear on the same line:
Option 1 Option 2 Option 3
Example
<label class=”radio-inline”><input type=”radio” name=”optradio”>Option 1</label>
<label class=”radio-inline”><input type=”radio” name=”optradio”>Option 2</label>
<label class=”radio-inline”><input type=”radio” name=”optradio”>Option 3</label>
Try it Yourself »Bootstrap Select List
Select list (select one): 1 2 3 4
Mutiple select list (hold shift to select more than one): 1 2 3 4 5Select lists are used if you want to allow the user to pick from multiple options.
The following example contains a dropdown list (select list):
Example
Select list:1
2
3
4Bootstrap Form Inputs (more)
Static Control
If you need to insert plain text next to a form label within a horizontal form, use the .form-control-static class on a <p> element:
Example
<form class=”form-horizontal” role=”form”>
Email:someone@example.com
</div>
</form>
Try it Yourself »Bootstrap Form Control States
- INPUT FOCUS – The outline of the input is removed and a box-shadow is applied on focus
- DISABLED INPUTS – Add a disabled attribute to disable an input field
- DISABLED FIELDSETS – Add a disabled attribute to a fieldset to disable all controls within
- READONLY INPUTS – Add a readonly attribute to an input to prevent user input
- VALIDATION STATES – Bootstrap includes validation styles for error, warning, and success messages. To use, add .has-warning, .has-error, or .has-success to the parent element
- ICONS – You can add feedback icons with the .has-feedback class and an icon
- HIDDEN LABELS – Add a .sr-only class on non-visible labels
The following example demonstrates some of the form control states above in a Horizontal form:
Example
<form class=”form-horizontal” role=”form”>
Focused</div>
Disabled</div>
<fieldset disabled>Fieldset disabled</div>
Disabled select
</div>
</fieldset>Input with success and icon
</div>
Input with warning and icon
</div>
Input with error and icon
</div>
</form>
Try it Yourself »And here is an example of some of the form control states in an Inline form:
Example
<form class=”form-inline” role=”form”>
FocusedDisabledInput with successInput with warningInput with error</form>
Bootstrap Input Sizing
Input Sizing in Forms
Set the heights of input elements using classes like .input-lg and .input-sm.
Set the widths of elements using grid column classes like .col-lg-*and .col-sm-*.
Height Sizing
Small input
Default input
Large input
The following examples shows input elements with different heights:
Example
<form role=”form”>
Default inputinput-lginput-sm</form>
Try it Yourself »You can quickly size labels and form controls within a Horizontal form by adding .form-group-* to the
element:Example
form-group-lg</div>
form-group-sm</div>
</form>
Try it Yourself »Column Sizing
col-xs-2
col-xs-3
col-xs-4
The following examples shows input elements with different widths using different .col-xs-* classes:
Example
col-xs-2col-xs-3col-xs-4Help Text
Use the .help-block class to add a block level help text in forms:
Example
Password:This is some help text…
Bootstrap Carousel Plugin
The Carousel Plugin
The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).
Tip: Plugins can be included individually (using Bootstrap’s individual “carousel.js” file), or all at once (using “bootstrap.js” or “bootstrap.min.js”). Carousel Example
Chania
The atmosphere in Chania has a touch of Florence and Venice.
Note: Carousels are not supported properly in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve the slide effect). How To Create a Carousel
The following example shows how to create a basic carousel:
Example
</div>
<!– Left and right controls –>
<a class=”left carousel-control” href=”#myCarousel” role=”button” data-slide=”prev”>
<span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span>
<span class=”sr-only”>Previous</span>
</a>
<a class=”right carousel-control” href=”#myCarousel” role=”button” data-slide=”next”>
<span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
<span class=”sr-only”>Next</span>
</a>
</div>
Try it Yourself »Example Explained
The outermost
:Carousels require the use of an id (in this case id=”myCarousel”) for carousel controls to function properly.
The class=”carousel” specifies that this
contains a carousel.The .slide class adds a CSS transition and animation effect, which makes the items slide when showing a new item. Omit this class if you do not want this effect.
The data-ride=”carousel” attribute tells Bootstrap to begin animating the carousel immediately when the page loads.
The “Indicators” part:
The indicators are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing).
The indicators are specified in an ordered list with class .carousel-indicators.
The .data-target class points to the id of the carousel.
The .data-slide-to class specifies which slide to go to, when clicking on the specific dot.
The “Wrapper for slides” part:
The slides are specified in a
with class .carousel-inner.The content of each slide is defined in a
with class .item. This can be text or images.The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
The “Left and right controls” part:
This code adds “left” and “right” buttons that allows the user to go back and forth between the slides manually.
The data-slide attribute accepts the keywords “prev” or “next”, which alters the slide position relative to its current position.
Add Captions to Slides
Add
within eachto create a caption for each slide:Example
Chania
The atmosphere in Chania has a touch of Florence and Venice.
</div>
Chania
The atmosphere in Chania has a touch of Florence and Venice.
</div>
Flowers
Beatiful flowers in Kolymbari, Crete.
</div>
Flowers
Beatiful flowers in Kolymbari, Crete.
</div>
</div><!– Left and right controls –>
<a class=”left carousel-control” href=”#myCarousel” role=”button” data-slide=”prev”>
<span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span>
<span class=”sr-only”>Previous</span>
</a>
<a class=”right carousel-control” href=”#myCarousel” role=”button” data-slide=”next”>
<span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
<span class=”sr-only”>Next</span>
</a>
</div>Bootstrap Modal Plugin
The Modal Plugin
The Modal plugin is a dialog box/popup window that is displayed on top of the current page:
Click To Open Modal
Tip: Plugins can be included individually (using Bootstrap’s individual “modal.js” file), or all at once (using “bootstrap.js” or “bootstrap.min.js”). How To Create a Modal
The following example shows how to create a basic modal:
Example
<!– Trigger the modal with a button –>
<button type=”button” class=”btn btn-info btn-lg” data-toggle=”modal” data-target=”#myModal”>Open Modal</button><!– Modal –>
×Modal Header
Some text in the modal.
Close</div>
</div>
</div>
Try it Yourself »Example Explained
The “Trigger” part:
To trigger the modal window, you need to use a button or a link.
Then include the two data-* attributes:
- data-toggle=”modal” opens the modal window
- data-target=”#myModal” points to the id of the modal
The “Modal” part:
The parent
of the modal must have an ID that is the same as the value of the data-target attribute used to trigger the modal (“myModal”).The .modal class identifies the content of
as a modal and brings focus to it.The .fade class adds a transition effect which fades the modal in and out. Remove this class if you do not want this effect.
The attribute role=”dialog” improves accessibility for people using screen readers.
The .modal-dialog class sets the proper width and margin of the modal.
The “Modal content” part:
The
with class=”modal-content” styles the modal (border, background-color, etc.). Inside this, add the modal’s header, body, and footer.The .modal-header class is used to define the style for the header of the modal. The inside the header has a data-dismiss=”modal” attribute which closes the modal if you click on it. The .close class styles the close button, and the .modal-title class styles the header with a proper line-height.
The .modal-body class is used to define the style for the body of the modal. Add any HTML markup here; paragraphs, images, videos, etc.
The .modal-footer class is used to define the style for the footer of the modal. Note that this area is right aligned by default.
Modal Size
Change the size of the modal by adding the .modal-sm class for small modals or .modal-lg class for large modals.
Add the size class to the
element with class .modal-dialog:Small Modal
Bootstrap Tooltip Plugin
The Tooltip Plugin
The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element:
Hover over me Hover over me
Tip: Plugins can be included individually (using Bootstrap’s individual “tooltip.js” file), or all at once (using “bootstrap.js” or “bootstrap.min.js”). How To Create a Tooltip
To create a tooltip, add the data-toggle=”tooltip” attribute to an element.
Use the title attribute to specify the text that should be displayed inside the tooltip:
Note: Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.
The following code will enable all tooltips in the document:
Example
$(document).ready(function(){
$(‘[data-toggle=”tooltip”]’).tooltip();
});Bootstrap Popover Plugin
The Popover Plugin
The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.
Click To Toggle Popover Click To Toggle Popover
Tip: Plugins can be included individually (using Bootstrap’s individual “popover.js” file), or all at once (using “bootstrap.js” or “bootstrap.min.js”). How To Create a Popover
To create a popover, add the data-toggle=”popover” attribute to an element.
Use the title attribute to specify the header text of the popover, and use the data-content attribute to specify the text that should be displayed inside the popover’s body:
Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.
The following code will enable all popovers in the document:
Example
$(document).ready(function(){
$(‘[data-toggle=”popover”]’).popover();
});Positioning Popovers
By default, the popover will appear on the right side of the element.
Use the data-placement attribute to set the position of the popover on top, bottom, left or the right side of the element:
Example
Click
Click
Click
Click
Try it Yourself »Tip: You can also use the data-placement attribute with a value of “auto”, which will let the browser decide the position of the popover. For example, if the value is “auto left”, the popover will display on the left side when possible, otherwise on the right. Closing Popovers
By default, the popover is closed when you click on the element again. However, you can use the data-trigger=”focus” attribute which will close the popover when clicking outside the element:
Example
Tip: If you want the popover to be displayed when you move the mouse pointer over the element, use the data-trigger attribute with a value of “hover”:
Example
Bootstrap Scrollspy Plugin
The Scrollspy Plugin
The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.
How To Create a Scrollspy
The following example shows how to create a scrollspy:
Example
…
- Section 1
- xs (for phones)
- sm (for tablets)
- md (for desktops)
- lg (for larger desktops)
- Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
- Use rows to create horizontal groups of columns
- Content should be placed within columns, and only columns may be immediate children of rows
- Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
- Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
- Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
- Start with a container (
)
- Create a row inside it with
- Use predefined classes like .col-md-4, .col-md-6, etc. to quickly make grid columns
- Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-md-4 columns
- The numbers in the .col-*-* classes should always add up to 12 for each row
- Content is placed inside the grid columns
The following example shows how to create four columns of equal width:
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam.Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.</div>
Try it Yourself »Columns With Different Widths
Now we wish to create columns of different widths.
The following example creates a three-column layout where the column in the middle is wider than the first and last column:
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam.Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.</div>
Bootstrap Case: Adding a Menu
Menus
Most web pages have some kind of a menu.
In HTML, a menu is often defined in an unordered list <ul> (and styled afterwards), like this:
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3</a></li>
</ul>Bootstrap provides two ways to display the menu above: tabs and pills.
Tabs
Tabs are created with <ul class=”nav nav-tabs”>.
Tip: Also mark the current page with <li class=”active”>.
The following example creates navigation tabs:
Example
<ul class=”nav nav-tabs”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3</a></li>
</ul>
Try it Yourself »Tabs With Dropdown Menu
Tabs can also hold dropdown menus.
The following example adds a dropdown menu to “Menu 1”:
Example
<ul class=”nav nav-tabs”>
<li class=”active”><a href=”#”>Home</a></li>
<li class=”dropdown”>
<a class=”dropdown-toggle” data-toggle=”dropdown” href=”#”>Menu 1
<span class=”caret”></span></a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Submenu 1-1</a></li>
<li><a href=”#”>Submenu 1-2</a></li>
<li><a href=”#”>Submenu 1-3</a></li>
</ul>
</li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3</a></li>
</ul>
Try it Yourself »Pills
Pills are created with <ul class=”nav nav-pills”>. Also mark the current page with <li class=”active”>:
Example
<ul class=”nav nav-pills”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3</a></li>
</ul>
Try it Yourself »Vertical Pills
Pills can also be displayed vertically. Just add the .nav-stacked class.
The following example places the vertical pill menu inside the last column. So, on a large screen the menu will be displayed to the right. But on a small screen, the content will automatically adjust itself into a single-column layout:
Example
Pills With Dropdown Menu
Pills can also hold dropdown menus.
The following example adds a dropdown menu to “Menu 1”:
Example
<ul class=”nav nav-pills nav-stacked”>
<li class=”active”><a href=”#”>Home</a></li>
<li class=”dropdown”>
<a class=”dropdown-toggle” data-toggle=”dropdown” href=”#”>Menu 1
<span class=”caret”></span></a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Submenu 1-1</a></li>
<li><a href=”#”>Submenu 1-2</a></li>
<li><a href=”#”>Submenu 1-3</a></li>
</ul>
</li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3</a></li>
</ul>Bootstrap Case: Adding a Navigation Bar
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page.
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with <nav class=”navbar navbar-default”>.
The following example shows how to add a navigation bar to the top of the page:
Example
<body>
<nav class=”navbar navbar-default”></div>
</nav>
…
Try it Yourself »All of the examples on this page will show a navigation bar that takes up too much space on small screens (however, the navigation bar will be on one single line on large screens – because Bootstrap is responsive). This problem (with the small screens) will be solved in the last example on this page! Inverted Navigation Bar
If you don’t like the style of the default navigation bar, Bootstrap provides an alternative.
Just change the .navbar-default class into .navbar-inverse:
Example
<nav class=”navbar navbar-inverse”>
</div>
</nav>
Try it Yourself »Fixed Navigation Bar
The navigation bar can also be fixed at the top or at the bottom of the page.
A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.
The .navbar-fixed-top class makes the navigation bar fixed at the top:
Example
<nav class=”navbar navbar-inverse navbar-fixed-top”>
</div>
</nav>
Try it Yourself »The .navbar-fixed-bottom class makes the navigation bar fixed at the bottom:
Example
<nav class=”navbar navbar-inverse navbar-fixed-bottom”>
</div>
</nav>
Try it Yourself »Navigation Bar With Dropdown
Navigation bars can also hold dropdown menus.
The following example adds a dropdown menu for the “Page 1” button:
Example
<nav class=”navbar navbar-inverse”>
</div>
</nav>
Try it Yourself »Right-Aligned Navigation Bar
The .navbar-right class is used to right-align navigation bar buttons.
In the following example we insert a “Sign Up” button and a “Login” button to the right in the navigation bar. We also add a glyphicon on each of the two new buttons:
Example
<nav class=”navbar navbar-inverse”>
</div>
</nav>Collapsing The Navigation Bar
The navigation bar takes up too much space on a small screen.
We should hide the navigation bar; and only show it when it is needed.
In the following example the navigation bar is replaced by a button in the top right corner. Only when the button is clicked, the navigation bar will be displayed:
Example
<nav class=”navbar navbar-inverse”>
</div>
</nav>Bootstrap Quiz
You can test your Bootstrap skills with W3Schools’ Quiz.
The Test
The test contains 25 questions and there is no time limit.
The test is not official, it’s just a nice way to see how much you know, or don’t know, about Bootstrap.
Count Your Score
You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 25 points.
Start the Quiz
Good luck!
Start the Quiz
W3Schools’ Online Certification
The perfect solution for professionals who need to balance work, family, and career building.
More than 10 000 certificates already issued!
The HTML Certificate documents your knowledge of HTML.
The HTML5 Certificate documents your knowledge of advanced HTML5.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The jQuery Certificate documents your knowledge of jQuery.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
Bootstrap CSS Typography Reference
Bootstrap’s Default Settings
Bootstrap’s global default font-size is 14px, with a line-height of 1.428.
This is applied to the <body> and all paragraphs.
In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).
Typography
The elements below are HTML elements that will be styled a little bit differently by Bootstrap than browser defaults. Look at the “Try it” examples to see the result/differences.
The classes below is used to style the elements further.
Element/Class Description Example <h1> – <h6>
or
.h1 – .h6h1 – h6 headings Try it <small> Creates a lighter, secondary text in any heading Heading (secondary text)
Try it .small Indicates smaller text (set to 85% of the size of the parent): Smaller text Try it .lead Makes a text stand out: Stand out text Try it <mark>
or
.markHighlights text: Highlighted text Try it <del> Indicates deleted text: Try it <s> Indicates no longer relevant text: No longer relevant text Try it <ins> Indicates inserted text: Inserted text Try it <u> Indicates underlined text: Underlined text Try it <strong> Indicates bold text: Bold text Try it <em> Indicates italic text: Italic text Try it .text-left Indicates left-aligned text Try it .text-center Indicates center-aligned text Try it .text-right Indicates right-aligned text Try it .text-justify Indicates justified text Try it .text-nowrap Indicates no wrap text Try it .text-lowercase Indicates lowercased text: lowercased text Try it .text-uppercase Indicates uppercased text: UPPERCASED TEXT Try it .text-capitalize Indicates capitalized text: Capitalized Text Try it <abbr> The <abbr> element indicates an abbreviation or acronym. Abbreviations with a title attribute have a dotted bottom border and a help cursor on hover, providing additional context on hover. Try it .initialism Displays the text inside the <abbr> element in a slightly smaller font size Try it <address> Presents contact information Try it <blockquote> Indicates blocks of content from another source Try it .blockquote-reverse Indicates a blockquote with right-aligned content Try it <ul> Indicates an unordered list Try it <ol> Indicates an ordered list Try it .list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) Try it .list-inline Places all list items on a single line Try it <dl> Indicates a description list Try it .dl-horizontal Lines up the terms and descriptions in the <dl> element side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side Try it Code
Element/Class Description Example <code> Indicates inline snippets of code: span, div Try it <kbd> Indicates input that is typically entered via the keyboard: CTRL + P Try it <pre> Indicates multiple lines of code Try it <pre class=”pre-scrollable”> Indicates multiple lines of code with scrollbar Try it <samp> Indicates sample output from a computer program: Sample output Try it <var> Indicates variables: x = ab + y Bootstrap CSS Buttons Reference
Button Colors
Default Primary Success Info Warning Danger Link
Button Sizes
Large Small XSmall
Active/Disabled Buttons
Info Button Active Info Button Disabled Info Button
Block-level Button
Block-level Button
Button Classes
The classes below can be used to style any <a>, <button>, or <input> element:
Class Description Example .btn Adds basic styling to any button Try it .btn-default Indicates a default/standard button Try it .btn-primary Provides extra visual weight and identifies the primary action in a set of buttons Try it .btn-success Indicates a successful or positive action Try it .btn-info Contextual button for informational alert messages Try it .btn-warning Indicates caution should be taken with this action Try it .btn-danger Indicates a dangerous or potentially negative action Try it .btn-link Makes a button look like a link (will still have button behavior) Try it .btn-lg Makes a large button Try it .btn-sm Makes a small button Try it .btn-xs Makes an extra small button Try it .btn-block Makes a block-level button (spans the full width of the parent element) Try it .active Makes the button appear pressed Try it .disabled Makes the button disabled Try it Bootstrap CSS Forms Reference
Bootstrap’s Default Settings
Individual form controls automatically receive some global styling with Bootstrap.
All textual <input>, <textarea>, and <select> elements with class=”form-control” are set to width: 100%; by default.
Standard rules for Bootstrap forms:
- Add role=”form” to the <form> element (helps improve accessibility for people using screen readers)
- Wrap labels and form controls in a
element with class=”form-group” (needed for optimum spacing)
- Add class=”form-control” to all textual , , and elements
The following example creates a simple Bootstrap form with two input fields, one checkbox, and a submit button:
Bootstrap Form Example
Email address:Password:Remember me<button type=”submit” class=”btn btn-default”>Submit</button>
</form>
Try it Yourself »<form> Classes
Class Description Example .form-inline Makes a <form> left-aligned with inline-block controls (This only applies to forms within viewports that are at least 768px wide) Try it .form-horizontal Aligns labels and groups of form controls in a horizontal layout Bootstrap CSS Helper Classes Reference
Text
Add meaning through text-colors with the classes below. Links will darken on hover:
Class Description Example .text-muted Text styled with class “text-muted” Try it .text-primary Text styled with class “text-primary” Try it .text-success Text styled with class “text-success” Try it .text-info Text styled with class “text-info” Try it .text-warning Text styled with class “text-warning” Try it .text-danger Text styled with class “text-danger” Try it Background
Add meaning through background-colors with the classes below. Links will darken on hover just like text classes:
Class Description Example .bg-primary Table cell is styled with class “bg-primary” Try it .bg-success Table cell is styled with class “bg-success” Try it .bg-info Table cell is styled with class “bg-info” Try it .bg-warning Table cell is styled with class “bg-warning” Try it .bg-danger Table cell is styled with class “bg-danger” Try it Other
Class Description Example .pull-left Floats an element to the left Try it .pull-right Floats an element to the right Try it .center-block Sets an element to display:block and center Try it .clearfix Clears floats .show Forces an element to be shown Try it .hidden Forces an element to be hidden Try it .sr-only Hides an element to all devices except screen readers Try it .sr-only-focusable Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user) Try it .text-hide Helps replace an element’s text content with a background image Try it .close Indicates a close icon Try it .caret Indicates dropdown functionality (will reverse automatically in dropup menus) Try it Responsive Utilities
These classes are used to show and/or hide content by device via media queries.
Use one or a combination of the available classes for toggling content across viewport breakpoints:
Classes Extra small devicesPhones (<768px) Small devicesTablets (≥768px) Medium devicesDesktops (≥992px) Large devicesDesktops (≥1200px) .visible-xs-* Visible Hidden Hidden Hidden .visible-sm-* Hidden Visible Hidden Hidden .visible-md-* Hidden Hidden Visible Hidden .visible-lg-* Hidden Hidden Hidden Visible .hidden-xs Hidden Visible Visible Visible .hidden-sm Visible Hidden Visible Visible .hidden-md Visible Visible Hidden Visible .hidden-lg Visible Visible Visible Hidden As of v3.2.0, the .visible-*-* classes for come in three variations, one for each CSS display property value:
Group of classes CSS display visible-*-block display: block; .visible-*-inline display: inline; .visible-*-inline-block display: inline-block; E.g. for small (sm) screens, the available .visible-*-* classes are: .visible-sm-block, .visible-sm-inline, and .visible-sm-inline-block.
The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg are deprecated as of v3.2.0.
Example
Example
Resize this page to see how the text below changes:
This text is shown only on a LARGE screen.
Bootstrap CSS Images Reference
Bootstrap Images
Rounded Corners:
Circle:
Thumbnail:
<img> Classes
The classes below can be used to style any image:
Class Description Example .img-rounded Adds rounded corners to an image (not available in IE8) Try it .img-circle Shapes the image to a circle (not available in IE8) Try it .img-thumbnail Shapes the image to a thumbnail Try it .img-responsive Makes an image responsive (will scale nicely to the parent element) Try it Responsive Images
Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.
The .img-responsive class applies max-width: 100%; and height: auto; to the image:
Example
<img src=”cinqueterre.jpg” class=”img-responsive” alt=”Cinque Terre”>
Try it Yourself »Bootstrap CSS Tables Reference
<table> Classes
Use the classes below to style any table:
Class Description Example .table Adds basic styling (light padding and only horizontal dividers) to any <table> Try it .table-striped Adds zebra-striping to any table row within <tbody> (not available in IE8) Try it .table-bordered Adds border on all sides of the table and cells Try it .table-hover Enables a hover state on table rows within a <tbody> Try it .table-condensed Makes table more compact by cutting cell padding in half Try it Combining all the table classes Try it <tr>, <th> and <td> Classes
Use the classes below to color table rows or cells:
Class Description Example .active Applies the hover color to a particular row or cell Try it .success Indicates a successful or positive action Try it .info Indicates a neutral informative change or action Try it .warning Indicates a warning that might need attention Try it .danger Indicates a dangerous or potentially negative action Try it Responsive Tables
The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:
Example
…
Bootstrap Dropdown Components
Dropdowns
For a tutorial about Dropdowns, read our Bootstrap Dropdowns Tutorial.
Class Description Example .dropdown Indicates a dropdown menu Try it .dropdown-menu Builds the dropdown menu Try it .dropdown-menu-right Right-aligns a dropdown menu Try it .dropdown-header Adds a header inside the dropdown menu Try it .dropup Indicates a dropup menu Try it .disabled Disables an item in the dropdown menu Try it .divider Separates items inside the dropdown menu with a horizontal line Try it Bootstrap Navigation Components
Tabs and Pills
Class Description Example .nav nav-tabs Creates navigation tabs Try it .nav nav-pills Creates navigation pills Try it .nav nav-pills nav-stacked Creates vertical navigation pills Try it .nav-justified Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs/pills are stacked Try it .disabled Indicates a disabled (unclickable) tab/pill Try it Navigation tabs with dropdown menu Try it Navigation pills with dropdown menu Try it .tab-content Together with .tab-pane and data-toggle=”tab” (data-toggle=”pill” for pills), it makes the tab/pill toggable Try it .tab-pane Together with .tab-content and data-toggle=”tab” (data-toggle=”pill” for pills), it makes the tab/pill toggable Try it Breadcrumb and Pagination
Class Description Example .breadcrumb Makes a breadcrumb Try it .pager Provides simple pagination links (Previous/Next) Try it .previous Aligns the .pager previous button to the left Try it .next Aligns the .pager next button to the right Try it .disabled Indicates an unclickable link Try it .pagination Provides pagination links Try it .pagination-lg Used together with the .pagination class to provide larger pagination links Try it .pagination-sm Used together with the .pagination class to provide smaller pagination links Try it .disabled Indicates an unclickable link Try it .active Indicates the current page Try it Labels
Class Description Example .label label-default Indicates a default grey label Try it .label label-primary Indicates a blue label of type “primary” Try it .label label-success Indicates a green label of type “success” Try it .label label-info Indicates a light blue label of type “info” Try it .label label-warning Indicates a yellow label of type “warning” Try it .label label-danger Indicates a red label of type “danger” Try it .badge Indicates new or unread items Try it .jumbotron Indicates a big box for calling extra attention to featured content or information Try it .jumbotron (extra) To let the .jumbotron box span the full width, and without rounded corners, place it outside the .container class Bootstrap JS Alert
JS Alert (alert.js)
The alert plugin include options and methods to close alert messages.
For a tutorial about Alerts, read our Bootstrap Alerts Tutorial.
The Alert Plugin Classes
Class Description Example .alert Creates an alert message box Try it .alert-success Indicates a successful or positive action Try it .alert-info Contextual button for informational alert messages Try it .alert-warning Indicates caution should be taken with this action Try it .alert-danger Indicates a dangerous or potentially negative action Try it .close Styles the close button for the alert message (floats right with a specified font-size, color, etc.) Try it Close Alerts Via data-* Attributes
Add data-dismiss=”alert” to a link or a button element to close the alert message.
<a href=”#” class=”close” data-dismiss=”alert” aria-label=”close”>×</a>Try it
Close Alerts Via JavaScript
Close manually with:
$(‘.close’).alert();Try it
Alert Options
None Alert Methods
The following table lists all available alert methods.
Method Description Try it .alert(“close”) Closes the alert message Try it Alert Events
The following table lists all available alert events.
Event Description Try it close.bs.alert Occurs when the alert message is about to be closed Try it closed.bs.alert Occurs when the alert message has been closed Bootstrap JS Button
JS Button (button.js)
Use this plugin if you want to have more control over your buttons.
For a tutorial about Buttons, read our Bootstrap Buttons Tutorial.
The Button Plugin Classes
The classes below can be used to style any <a>, <button>, or <input> element:
Class Description Example .btn Adds basic styling to any button Try it .btn-default Indicates a default/standard button Try it .btn-primary Provides extra visual weight and identifies the primary action in a set of buttons Try it .btn-success Indicates a successful or positive action Try it .btn-info Contextual button for informational alert messages Try it .btn-warning Indicates caution should be taken with this action Try it .btn-danger Indicates a dangerous or potentially negative action Try it .btn-link Makes a button look like a link (will still have button behavior) Try it .btn-lg Makes a large button Try it .btn-sm Makes a small button Try it .btn-xs Makes an extra small button Try it .btn-block Makes a block-level button (spans the full width of the parent element) Try it .active Makes the button appear pressed Try it .disabled Makes the button disabled Try it Via JavaScript
Enable manually with:
$(‘.btn’).button();
Button Options
None Button Methods
The following table lists all available button methods.
Note: For this plugin, methods can also be passed via data attributes; append the method name to data-, as in data-toggle or data-loading.
Method Description Try it .button(“toggle”) Makes the button look pressed Try it .button(“loading”) Disables the button and changes the button text to “loading…” Try it .button(“reset”) Changes the button text to original text (if changed) Try it .button(“string”) Specifies a new button text Bootstrap JS Carousel
JS Carousel (carousel.js)
The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).
For a tutorial about Carousels, read our Bootstrap Carousel Tutorial.
Note: Carousels are not supported properly in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve the slide effect). The Carousel Plugin Classes
Class Description .carousel Creates a carousel .slide Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect .carousel-indicators Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing) .carousel-inner Adds slides to the carousel .item Specifies the content of each slide .left carousel-control Adds a left button to the carousel, which allows the user to go back between the slides .right carousel-control Adds a right button to the carousel, which allows the user to go forward between the slides .carousel-caption Specifies a caption for the carousel Via data-* Attributes
The data-ride=”carousel” activates the carousel.
The data-slide and data-slide-to attributes specifies which slide to go to.
The data-slideattribute accepts two values: prev or next, while data-slide-to accept numbers.
<!– Carousel –>
Via JavaScript
Enable manually with:
// Activate Carousel
$(“#myCarousel”).carousel();// Enable Carousel Indicators
$(“.item”).click(function(){
$(“#myCarousel”).carousel(1);
});// Enable Carousel Controls
$(“.left”).click(function(){
$(“#myCarousel”).carousel(“prev”);
});Try itCarousel Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval=””.
Name Type Default Description Try it interval number, or the boolean false 5000 Specifies the delay (in milliseconds) between each slide. Note: Set interval to false to stop the items from automatically sliding
Using JSUsing data pause string, or the boolean false “hover” Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel Note: Set pause to false to stop the ability to pause on hover
Using JSUsing data wrap boolean true Specifies whether the carousel should go through all slides continuously, or stop at the last slide - true – cycle continuously
- false – stop at the last item
Using JSUsing data Carousel Methods
The following table lists all available carousel methods.
Method Description Try it .carousel(options) Activates the carousel with an option. See options above for valid values Try it .carousel(“cycle”) Goes through the carousel items from left to right Try it .carousel(“pause”) Stops the carousel from going through items Try it .carousel(number) Goes to a specified item (zero-based: first item is 0, second item is 1, etc..) Try it .carousel(“prev”) Goes to the previous item Try it .carousel(“next”) Goes to the next item Try it Carousel Events
The following table lists all available carousel events.
Event Description Try it slide.bs.modal Occurs when the carousel is about to slide from one item to another Try it slid.bs.modal Occurs when the carousel has finished sliding from one item to another Try it Examples
Captions to Slides
Add
within eachto create a caption for each slide:Example
Chania
The atmosphere in Chania has a touch of Florence and Venice.
Chania
The atmosphere in Chania has a touch of Florence and Venice.
</div>
Chania
The atmosphere in Chania has a touch of Florence and Venice.
</div>
Flowers
Beatiful flowers in Kolymbari, Crete.
</div>
Flowers
Beatiful flowers in Kolymbari, Crete.
</div>
</div><!– Left and right controls –>
<a class=”left carousel-control” href=”#myCarousel” role=”button” data-slide=”prev”>
<span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span>
<span class=”sr-only”>Previous</span>
</a>
<a class=”right carousel-control” href=”#myCarousel” role=”button” data-slide=”next”>
<span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
<span class=”sr-only”>Next</span>
</a>
</div>
Try it Yourself »Bootstrap JS Collapse
JS Collapse (collapse.js)
Get base styles and flexible support for collapsible components like accordions and navigation.
Plugin dependency: Collapse requires the transitions plugin to be included in your version of Bootstrap.
The Collapse Plugin Classes
Class Description Example .collapse Hides the content Try it .collapse in Shows the content Try it .collapsing Added when the transition starts, and removed when it finishes Via data-* Attributes
Just add data-toggle=”collapse” and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you’d like it to default open, add the additional class in.
To add accordion-like group management to a collapsible control, add the data attribute data-parent=”#selector”.
Via JavaScript
Enable manually with:
$(‘.collapse’).collapse()
Collapse Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent=””.
Name Type Default Description parent selector false If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior – this dependent on the panel class) toggle boolean true Toggles the collapsible element on invocation Collapse Methods
The following table lists all available collapse methods.
Method Description Try it .collapse(options) Activates the collapsible element with an option. See options above for valid values .collapse(“toggle”) Toggles the collapsible element Try it .collapse(“show”) Shows the collapsible element Try it .collapse(“hide”) Hides the collapsible element Try it Collapse Events
The following table lists all available collapse events.
Event Description Try it show.bs.collapse Occurs when the collapsible element is about to be shown Try it shown.bs.collapse Occurs when the collapsible element is fully shown (after CSS transitions have completed) Try it hide.bs.collapse Occurs when the collapsible element is about to be hidden Try it hidden.bs.collapse Occurs when the collapsible element is fully hidden (after CSS transitions have completed) Try it Examples
Simple Collapsible
The following example makes a button toggle the expanding and collapsing content of another element:
Example
<button type=”button” class=”btn btn-info” data-toggle=”collapse” data-target=”#demo”>
Simple collapsible
</button>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.Accordion
The following example shows a simple accordion by extending the panel component:
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
Try it Yourself »Expand and Collapse Toggle Icon & Text
The following example changes the open/close text and icon when opening and closing the collapsible content:
Example
$(document).ready(function(){
$(“#demo”).on(“hide.bs.collapse”, function(){
$(“.btn”).html(‘<span class=”glyphicon glyphicon-collapse-down”></span> Open’);
});
$(“#demo”).on(“show.bs.collapse”, function(){
$(“.btn”).html(‘<span class=”glyphicon glyphicon-collapse-up”></span> Close’);
});
});Bootstrap JS Dropdown
JS Dropdown (dropdown.js)
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.
For a tutorial about Dropdowns, read our Bootstrap Dropdowns Tutorial.
The Dropdown Plugin Classes
Class Description Example .dropdown Indicates a dropdown menu Try it .dropdown-menu Builds the dropdown menu Try it .dropdown-menu-right Right-aligns a dropdown menu Try it .dropdown-header Adds a header inside the dropdown menu Try it .dropup Indicates a dropup menu Try it .disabled Disables an item in the dropdown menu Try it .divider Separates items inside the dropdown menu with a horizontal line Try it Via data-* Attributes
Add data-toggle=”dropdown” to a link or a button to toggle a dropdown menu.
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>Dropdown Example</a>Try it
Via JavaScript
Enable manually with:
$(‘.dropdown-toggle’).dropdown();Try it
Note: The data-toggle=”dropdown” attribute is required regardless of whether you call the dropdown() method.
Dropdown Options
None Dropdown Methods
The following table lists all available dropdown methods.
Method Description Try it .dropdown(“toggle”) Toggles the dropdown Try it Dropdown Events
The following table lists all available dropdown events.
Event Description Try it show.bs.dropdown Occurs when the dropdown is about to be shown. Try it shown.bs.dropdown Occurs when the dropdown is fully shown (after CSS transitions have completed) Try it hide.bs.dropdown Occurs when the dropdown is about to be hidden Try it hidden.bs.dropdown Occurs when the dropdown is fully hidden (after CSS transitions have completed) Try it Tip: Use jQuery’s event.relatedTarget to get the element which triggered the dropdown:
Example
$(“.dropdown”).on(“show.bs.dropdown”, function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});Bootstrap JS Modal
JS Modal (modal.js)
The Modal plugin is a dialog box/popup window that is displayed on top of the current page.
For a tutorial about Modals, read our Bootstrap Modal Tutorial.
The Modal Plugin Classes
Class Description .modal Creates a modal .modal-content Styles the modal properly with border, background-color, etc. Use this class to add the modal’s header, body, and footer. .modal-header Defines the style for the header of the modal .modal-body Defines the style for the body of the modal .modal-footer Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, overwrite CSS with text-align:left|center .modal-sm Specifies a small modal .modal-lg Specifies a large modal .fade Adds an animation/transition effect which fades the modal in and out Trigger the Modal Via data-* Attributes
Add data-toggle=”modal” and data-target=”#modalID” to any element.
Note: For <a> elements, omit data-target, and use href=”#modalID” instead:
<!– Buttons –>
<button type=”button” data-toggle=”modal” data-target=”#myModal”>Open Modal</button><!– Links –>
<a data-toggle=”modal” href=”#myModal”>Open Modal</a><!– Other elements –>
<p data-toggle=”modal” data-target=”#myModal”>Open Modal</p>Try itTrigger Via JavaScript
Enable manually with:
$(“#myModal”).modal()Try it
Modal Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop=””.
Name Type Default Description Try it backdrop boolean or the string “static” true Specifies whether the modal should have a dark overlay: - true – dark overlay
- false – no overlay (transparent)
If you specify the value “static”, it is not possible to close the modal when clicking outside of it
Using JSUsing data keyboard boolean true Specifies whether the modal can be closed with the escape key (Esc): - true – the modal can be closed with Esc
- false – the modal cannot be closed with Esc
Using JSUsing data show boolean true Specifies whether to show the modal when initialized Using JSUsing data Modal Methods
The following table lists all available modal methods.
Method Description Try it .modal(options) Activates the content as a modal. See options above for valid values Try it .modal(“toggle”) Toggles the modal Try it .modal(“show”) Opens the modal Try it .modal(“hide”) Hides the modal Try it Modal Events
The following table lists all available modal events.
Event Description Try it show.bs.modal Occurs when the modal is about to be shown Try it shown.bs.modal Occurs when the modal is fully shown (after CSS transitions have completed) Try it hide.bs.modal Occurs when the modal is about to be hidden Try it hidden.bs.modal Occurs when the modal is fully hidden (after CSS transitions have completed) Try it Examples
Login Modal
The following example creates a modal for login:
Example
Modal Login Example
Login×Login
UsernamePasswordRemember me<button type=”submit” class=”btn btn-default btn-success btn-block”><spanclass=”glyphicon glyphicon-off”></span> Login</button>
</form>
</div></div>
</div>
</div>
</div>Bootstrap JS Popover
JS Popover (popover.js)
The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.
Plugin dependency: Popovers require the tooltip plugin (tooltip.js) to be included in your version of Bootstrap.
For a tutorial about Popovers, read our Bootstrap Popover Tutorial.
Via data-* Attributes
The data-toggle=”popover” activates the popover.
The title attribute specifies the header text of the popover.
The data-content attribute specifies the text that should be displayed inside the popover’s body.
<a href=”#” data-toggle=”popover” title=”Popover Header” data-content=”Some content inside the popover”>Toggle popover</a>Try it
Via JavaScript
Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the popover() method.
// Select all elements with data-toggle=”popover” in the document
$(‘[data-toggle=”popover”]’).popover();// Select a specified element
$(‘#myPopover’).popover();Try itPopover Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-placement=””.
Name Type Default Description Try it animation boolean true Specifies whether to add a CSS fade transition effect when opening and closing the popover - true – Add a fading effect
- false – Do not add a fading effect
Try it container string, or the boolean false false Appends the popover to a specific element.
Example: container: ‘body’Try it content string “” Specifies the text inside the popover’s body Try it delay number, or object 0 Specifies the number of milliseconds it will take to open and close the popover. To specify a delay for opening and another one for closing, use the object structure:
delay: {show: 500, hide: 100} – which will take 500 ms to open the popover, but only 100 ms to close it
Try it html boolean false Specifies whether to accept HTML tags in the popover: - true – Accept HTML tags
- false – Do not accept HTML tags
Note: The HTML must be inserted in the title attribute (or using the title option).
When set to false (default), jQuery’s text() method will be used. Use this if you are worried about XSS attacks
Try it placement string “right” Specifies the popover position. Possible values: - “top” – Popover on top
- “bottom” – Popover on bottom
- “left” – Popover on left
- “right” – Popover on right
- “auto” – Lets the browser decide the position of the popover. For example, if the value is “auto left”, the popover will display on the left side when possible, otherwise on the right. If the value is “auto bottom”, the popover will display at the bottom when possible, otherwise on the top
Try it selector string, or the boolean false false Adds the popover to a specified selector Try it template string Base HTML to use when creating the popover. The popover’s title will be injected into the .popover-title.
The popover’s content will be injected into the .popover-content.
.arrow will become the popover’s arrow.
The outermost wrapper element should have the .popover class.
title string “” Specifies the header text of the popover Try it trigger string “click” Specifies how the popover is triggered. Possible values: - “click” – Trigger the popover with a click
- “hover” – Trigger the popover on hover
- “focus” – Trigger the popover when it gets focus (by tabbing or clicking .e.g)
- “manual” – Trigger the popover manually
Tip: To pass multiple values, separate them with a space
Try it viewport string, or object {selector: “body”, padding: 0} Keeps the popover within the bounds of this element. Example: viewport: ‘#viewport’ or {selector: ‘#viewport’, padding: 0}
Popover Methods
The following table lists all available popover methods.
Method Description Try it .popover(options) Activates the popover with an option. See options above for valid values Try it .popover(“show”) Shows the popover Try it .popover(“hide”) Hides the popover Try it .popover(“toggle”) Toggles the popover Try it .popover(“destroy”) Hides and destroys the popover Try it Popover Events
The following table lists all available popover events.
Event Description Try it show.bs.popover Occurs when the popover is about to be shown Try it shown.bs.popover Occurs when the popover is fully shown (after CSS transitions have completed) Try it hide.bs.popover Occurs when the popover is about to be hidden Try it hidden.bs.popover Occurs when the popover is fully hidden (after CSS transitions have completed) Try it Examples
Custom Popover Design
Use CSS to customize the look of the popover:
Example
/* Popover */
.popover {
border: 2px dotted red;
}/* Popover Header */
.popover-title {
background-color: #8AC007;
color: #FFFFFF;
font-size: 28px;
text-align:center;
}/* Popover Body */
.popover-content {
background-color: coral;
color: #FFFFFF;
padding: 25px;
}/* Popover Arrow */
.arrow {
border-right-color: red !important;
}Bootstrap JS Scrollspy
JS Scrollspy (scrollspy.js)
The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.
For a tutorial about Scrollspy, read our Bootstrap Scrollspy Tutorial.
Via data-* Attributes
Add data-spy=”scroll” to the element you want to spy on, and the data-target=”id|class” to connect with the navigation list.
<!– The navbar: used to jump to a section in the scrollable area –>
<nav class=”navbar navbar-inverse navbar-fixed-top”>
…
<ul class=”nav navbar-nav”>
<li><a href=”#section1″>Section 1</a></li>
…
</nav><!– The scrollable area –>
Section 1
Try to scroll this page and look at the navigation bar while scrolling!
…
</div>Via JavaScript
Enable manually with:
$(‘#myScrollspy’).scrollspy({target: “.navbar”})
Scrollspy Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset=””.
Name Type Default Description offset number 10 Specifies the number of pixels to offset from top when calculating the position of scroll Scrollspy Methods
The following table lists all available scrollspy methods.
Method Description Try it .scrollspy(“refresh”) When adding and removing elements from the scrollspy, this method can be used to refresh the document Try it Scrollspy Events
The following table lists all available scrollspy events.
Event Description Try it activate.bs.scrollspy Occurs when a new item becomes activated by the scrollspy Try it Bootstrap JS Tab
JS Tab (tab.js)
Tabs are used to separate content into different panes where each pane is viewable one at a time.
For a tutorial about Tabs, read our Bootstrap Tabs/Pills Tutorial.
The Tab Plugin Classes
Class Description Example .nav nav-tabs Creates navigation tabs Try it .nav-justified Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs are stacked Try it .tab-content Together with .tab-pane and data-toggle=”tab”, it makes the tab toggable Try it .tab-pane Together with .tab-content and data-toggle=”tab”, it makes the tab toggable Try it Via data-* Attributes
Add data-toggle=”tab” to each tab, and add a .tab-pane class with a unique ID for every tab and wrap them in a.tab-content class.
<ul class=”nav nav-tabs”>
<li class=”active”><a data-toggle=”tab” href=”#home”>Home</a></li>
<li><a data-toggle=”tab” href=”#menu1″>Menu 1</a></li>
</ul>HOME
Some content.
Menu 1
Some content in menu 1.
</div>
Via JavaScript
Enable manually with:
// Select all tabs
$(‘.nav-tabs a’).click(function(){
$(this).tab(‘show’);
})// Select tab by name
$(‘.nav-tabs a[href=”#home”]’).tab(‘show’)// Select first tab
$(‘.nav-tabs a:first’).tab(‘show’)// Select last tab
$(‘.nav-tabs a:last’).tab(‘show’)// Select fourth tab (zero-based)
$(‘.nav-tabs li:eq(3) a’).tab(‘show’)Tab Options
None Tab Methods
The following table lists all available tab methods.
Method Description Try it .tab(“show”) Shows the tab Try it Tab Events
The following table lists all available tab events.
Event Description Try it show.bs.tab Occurs when the tab is about to be shown. Try it shown.bs.tab Occurs when the tab is fully shown (after CSS transitions have completed) Try it hide.bs.tab Occurs when the tab is about to be hidden Try it hidden.bs.tab Occurs when the tab is fully hidden (after CSS transitions have completed) Try it Tip: Use jQuery’s event.target and event.relatedTarget to get the active tab and the previous active tab:
Example
$(‘.nav-tabs a’).on(‘shown.bs.tab’, function(event){
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
});Bootstrap JS Tooltip
JS Tooltip (tooltip.js)
The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element.
For a tutorial about Tooltips, read our Bootstrap Tooltip Tutorial.
Via data-* Attributes
The data-toggle=”tooltip” activates the tooltip.
The title attribute specifies the text that should be displayed inside the tooltip.
<a href=”#” data-toggle=”tooltip” title=”Hooray!”>Hover over me</a>
Via JavaScript
Tooltips are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the tooltip() method.
// Select all elements with data-toggle=”tooltips” in the document
$(‘[data-toggle=”tooltip”]’).tooltip();// Select a specified element
$(‘#myTooltip’).tooltip();Tooltip Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-placement=””.
Name Type Default Description Try it animation boolean true Specifies whether to add a CSS fade transition effect when showing and hiding the tooltip - true – Add a fading effect
- false – Do not add a fading effect
Try it container string, or the boolean false false Appends the tooltip to a specific element.
Example: container: ‘body’Try it delay number, or object 0 Specifies the number of milliseconds it will take to show and hide the tooltip. To specify a delay for showing and another one for hiding, use the object structure:
delay: {show: 500, hide: 100} – which will take 500 ms to show the tooltip, but only 100 ms to hide it
Try it html boolean false Specifies whether to accept HTML tags in the tooltip: - true – Accept HTML tags
- false – Do not accept HTML tags
Note: The HTML must be inserted in the title attribute (or using the title option).
When set to false (default), jQuery’s text() method will be used. Use this if you are worried about XSS attacks
Try it placement string “top” Specifies the tooltip position. Possible values: - “top” – Tooltip on top
- “bottom” – Tooltip on bottom
- “left” – Tooltip on left
- “right” – Tooltip on right
- “auto” – Lets the browser decide the position of the tooltip. For example, if the value is “auto left”, the tooltip will display on the left side when possible, otherwise on the right. If the value is “auto bottom”, the tooltip will display at the bottom when possible, otherwise on the top
Try it selector string, or the boolean false false Adds the tooltip to a specified selector Try it template string Base HTML to use when creating the tooltip. The tooltip’s title will be inserted into the element having the class .tooltip-inner and the element with the class .tooltip-arrow will become the tooltip’s arrow.
The outermost wrapper element should have the .tooltip class.
title string “” Specifies the text that should be displayed inside the tooltip Try it trigger string “hover focus” Specifies how the tooltip is triggered. Possible values: - “click” – Trigger the tooltip with a click
- “hover” – Trigger the tooltip on hover
- “focus” – Trigger the tooltip when it gets focus (by tabbing or clicking .e.g)
- “manual” – Trigger the tooltip manually
Tip: To pass multiple values, separate them with a space
Try it viewport string, or object {selector: “body”, padding: 0} Keeps the tooltip within the bounds of this element. Example: viewport: ‘#viewport’ or {selector: ‘#viewport’, padding: 0}
Tooltip Methods
The following table lists all available tooltip methods.
Method Description Try it .tooltip(options) Activates the tooltip with an option. See options above for valid values Try it .tooltip(“show”) Shows the tooltip Try it .tooltip(“hide”) Hides the tooltip Try it .tooltip(“toggle”) Toggles the tooltip Try it .tooltip(“destroy”) Hides and destroys the tooltip Try it Tooltip Events
The following table lists all available tooltip events.
Event Description Try it show.bs.tooltip Occurs when the tooltip is about to be shown Try it shown.bs.tooltip Occurs when the tooltip is fully shown (after CSS transitions have completed) Try it hide.bs.tooltip Occurs when the tooltip is about to be hidden Try it hidden.bs.tooltip Occurs when the tooltip is fully hidden (after CSS transitions have completed) Try it Examples
Custom Tooltip Design
Use CSS to customize the look of the tooltip:
Example
/* Tooltip */
.test + .tooltip > .tooltip-inner {
background-color: #8AC007;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
border-top: 5px solid green;
}/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
border-bottom: 5px solid blue;
}/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
border-left: 5px solid red;
}/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
border-right: 5px solid black;
}
- Create a row inside it with
…
Section 1
Try to scroll this page and look at the navigation bar while scrolling!
…
</div>
Try it Yourself »Example Explained
Add data-spy=”scroll” to the element that should be used as the scrollable area (often this is the <body>element).
Then add the data-target attribute with a value of the id or the class name of the navigation bar (<nav>). This is to make sure that the navbar is connected with the scrollable area.
Note that scrollable elements must match the ID of the links inside the navbar’s list items (
matches ).The optional data-offset attribute specifies the number of pixels to offset from top when calculating the position of scroll. This is useful when you feel that the links inside the navbar changes the active state too soon or too early when jumping to the scrollable elements. Default is 10 pixels.
Requires relative positioning: The element with data-spy=”scroll” requires the CSS position property, with a value of “relative” to work properly. Scrollspy Vertical Menu
In this example, we use the element as the scrollable area, and vertical navigation pills as menu:
Example
Section 1
Try to scroll this page and look at the navigation list while scrolling!
…
</div>
</div>
</div></body>
Bootstrap Grid System
Bootstrap Grid System
Bootstrap’s grid system allows up to 12 columns across the page.
If you do not want to use all 12 column individually, you can group the columns together to create wider columns:
span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 4 span 4 span 4 span 4 span 8 span 6 span 6 span 12 Bootstrap’ grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items where stacked on top of each other.
Tip: Remember that grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport. Grid Classes
The Bootstrap grid system has four classes:
The classes above can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.
Grid System Rules
Some Bootstrap grid system rules:
Basic Structure of a Bootstrap Grid
The following is a basic structure of a Bootstrap grid:
</div>
</div>
…</div>
So, to create the layout you want, create a container (
). Next, create a row (). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.Grid Options
The following table summarizes how the Bootstrap grid system works across multiple devices:
Extra small devices
Phones (Small devices
Tablets (>=768px)Medium devices
Desktops (>=992px)Large devices
Desktops (>=1200px)Grid behaviour Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Container width None (auto) 750px 970px 1170px Class prefix .col-xs- .col-sm- .col-md- .col-lg- Number of columns 12 12 12 12 Column width Auto ~62px ~81px ~97px 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 Bootstrap Grid – Stacked-to-horizontal
Bootstrap Grid Example: Stacked-to-horizontal
We will create a basic grid system that starts out stacked on mobiles/tablets (small devices), before becoming horizontal on desktops (medium/large devices).
The following example shows a simple “stacked-to-horizontal” two-column layout:
Example: Stacked-to-horizontal
Hello World!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>
</div>
Try it Yourself »Tip: The numbers in the .col-sm-* classes indicates how many columns the div should span (out of 12). So,.col-sm-1 spans 1 column, .col-sm-4 spans 4 columns, .col-sm-6 spans 6 columns, etc. Note: Make sure that the sum always adds up to 12!
Tip: You can turn any fixed-width layout into a full-width layout by changing the .container class to .container-fluid:
Example: Fluid container
Hello World!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>
</div>
Try it Yourself »Bootstrap Grid – Small Devices
Bootstrap Grid Example: Small Devices
Assume we have a simple layout with two columns. We want the columns to be split 25%/75% for small devices.
Tip: Small devices are defined as having a screen width from 768 pixels to 991 pixels.
For small devices we will use the .col-sm-* classes.
We will add the following classes to our two columns:
….….Now Bootstrap is going to say “at the small size, look for classes with -sm- in them and use those”.
The following example will result in a 25%/75% split on small devices:
Example
Hello World!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>
</div>Bootstrap Grid – Medium Devices
Bootstrap Grid Example: Medium Devices
In the previous chapter, we presented a grid example with classes for small devices. We used two divs (columns) and we gave them a 25%/75% split:
….….But on medium devices the design may be better as a 50%/50% split.
Tip: Medium devices are defined as having a screen width from 992 pixels to 1199 pixels.
For medium devices we will use the .col-md-* classes.
Now we will add the column widths for medium devices:
….….Now Bootstrap is going to say “at the small size, look at classes with -sm- in them and use those. At the medium size, look at classes with -md- in them and use those”.
The following example will result in a 25%/75% split on small devices and a 50%/50% split on medium devices:
Example
Hello World!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>
</div>Bootstrap Grid – Large Devices
Bootstrap Grid Example: Large Devices
In the previous chapter, we presented a grid example with classes for small and medium devices. We used two divs (columns) and we gave them a 25%/75% split on small devices, and a 50%/50% split on medium devices:
….….But on large devices the design may be better as a 33%/66% split.
Tip: Large devices are defined as having a screen width from 1200 pixels and above.
For large devices we will use the .col-lg-* classes.
So now we will add the column widths for large devices:
….….Now Bootstrap is going to say “at the small size, look at classes with -sm- in them and use those. At the medium size, look at classes with -md- in them and use those. At the large size, look at classes with the word -lg- in them and use those”.
The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large devices:
Example
Hello World!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>
</div>Bootstrap Grid Examples
Below we have collected some examples of basic Bootstrap grid layouts.
Three Equal Columns
.col-sm-4
.col-sm-4
.col-sm-4
The following example shows how to get a three equal-width columns starting at tablets and scaling to large desktops. On mobile phones, the columns will automatically stack:
Example
.col-sm-4.col-sm-4.col-sm-4</div>
Try it Yourself »Three Unequal Columns
.col-md-3
.col-md-6
.col-md-3
The following example shows how to get a three various-width columns starting at tablets and scaling to large desktops:
Example
.col-md-3.col-md-6.col-md-3</div>
Try it Yourself »Two Unequal Columns
.col-sm-4
.col-sm-8
The following example shows how to get two various-width columns starting at tablets and scaling to large desktops:
Example
.col-sm-4.col-sm-8</div>
Try it Yourself »Two Columns With Two Nested Columns
The following example shows how to get two columns starting at tablets and scaling to large desktops, with another two columns (equal widths) within the larger column (at mobile phones, these columns and their nested columns will stack):
Example
.col-sm-8.col-sm-6.col-sm-6</div>
</div>.col-sm-4</div>
Try it Yourself »Mixed: Mobile And Desktop
The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.
Example
.col-xs-12 .col-md-8.col-xs-6 .col-md-4</div>
.col-xs-6 .col-md-4.col-xs-6 .col-md-4.col-xs-6 .col-md-4</div>
.col-xs-6.col-xs-6</div>
Try it Yourself »Tip: Remember that grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport. Mixed: Mobile, Tablet And Desktop
Example
.col-xs-12 .col-sm-6 .col-lg-8.col-xs-6 .col-lg-4</div>
.col-xs-6 .col-sm-4.col-xs-6 .col-sm-4.col-xs-6 .col-sm-4</div>
Try it Yourself »Clear Floats
Clear floats (with the .clearfix class) at specific breakpoints to prevent strange wrapping with uneven content:
Example
Column 1
Resize the browser window to see the effect.Column 2<!– Add clearfix for only the required viewport –>
Column 3Column 4</div>
Try it Yourself »Offsetting Columns
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns:
Example
.col-sm-5 .col-md-6.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
Try it Yourself »Push And Pull – Change Column Ordering
Change the order of the grid columns with .col-md-push-* and .col-md-pull-* classes:
Example
.col-sm-4 .col-sm-push-8.col-sm-8 .col-sm-pull-4</div>
Bootstrap Case: My First Bootstrap Website
Build a Bootstrap Web Page From Scratch
The following pages will show how to build a Bootstrap website from scratch.
We will start with a simple HTML page, and then add more and more components, until we have a fully functional and responsive website.
We will start with the following HTML page:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Case</title>
<meta charset=”utf-8″>
</head><body>
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap…</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>Add Bootstrap CDN and Put Elements in Containers
The first thing we will do is to add the Bootstrap CDN and a link to jQuery.
Next, we put all the HTML elements in the <body> element inside a container (
):Example
Bootstrap Case
My first Bootstrap website!
This page will grow as we add more and more components from Bootstrap…
This is another paragraph.
This is a paragraph.
This is another paragraph.
</body>
</html>
Try it Yourself »Tip: To let the page fill the whole screen, change .container to .container-fluid:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Case</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”></head>
<body>My first Bootstrap website!
This page will grow as we add more and more components from Bootstrap…
This is another paragraph.
This is a paragraph.
This is another paragraph.
</body>
</html>Bootstrap Case: Adding a Jumbotron
Jumbotron
A jumbotron indicates a big box for calling extra attention to some special content or information.
A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.
Use a
element with class .jumbotron to create a jumbotron.The following example places the heading and the first paragraph inside a jumbotron:
Example
My first Bootstrap website!
This page will grow as we add more and more components from Bootstrap…
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>Bootstrap Case: Adding Button and Icon
Adding a Button
Button classes can be used in <a>, <button>, or <input> elements.
The following example puts a large and light-blue “Search” button in the Jumbotron. To achieve this effect, we will use the .btn-lg and .btn-info classes:
Example
My first Bootstrap website!
This page will grow as we add more and more components from Bootstrap…
Why do we put a # in the href attribute of the link?
Since we do not have any page to link it to, and we do not want to get a “404” message, we put # as the link. In real life it should of course been a real URL to the “Search” page.Adding an Icon
Bootstrap also provides 200 glyphicons.
To display a glyphicon, simply write:
<span class=”glyphicon glyphicon-print”></span>
The code line above will display a Print icon like this:
The following example adds a Search icon on the “Search” button:
Example
My first Bootstrap website!
This page will grow as we add more and more components from Bootstrap…
Bootstrap Case: Multicolumn Layout
Multicolumn Layout
With Bootstrap it is easy to create a multicolumn layout.
Bootstrap provides a responsive, mobile-first 12-column grid system.
The columns will rearrange themselves when viewed on different screen sizes.
Some grid rules:
Fsoft Web Engineernig Institute 