Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
173 views

Bootstrap Tutorial

Bootstrap is a popular free and open-source front-end framework for developing responsive mobile-first websites and web applications. It includes HTML and CSS templates for common user interface elements like typography, forms, buttons, navigation, and other interface components as well as optional JavaScript plugins. Bootstrap has a 12-column responsive grid system for building layouts of various sizes and was originally developed by developers at Twitter in 2011.

Uploaded by

Hatta Hary
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
173 views

Bootstrap Tutorial

Bootstrap is a popular free and open-source front-end framework for developing responsive mobile-first websites and web applications. It includes HTML and CSS templates for common user interface elements like typography, forms, buttons, navigation, and other interface components as well as optional JavaScript plugins. Bootstrap has a 12-column responsive grid system for building layouts of various sizes and was originally developed by developers at Twitter in 2011.

Uploaded by

Hatta Hary
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 46

1 Bootstrap Tutorial

Get Started
Bootstrap is the most popular HTML, CSS, and JavaScript framework
for developing responsive, mobile-first web sites. Bootstrap is completely
free to download and use!

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

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

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 provides CDN support for Bootstrap's CSS and JavaScript. You must
also include jQuery:

MaxCDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.co
m/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3
.7/js/bootstrap.min.js"></script>

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.
jQuery
Bootstrap uses jQuery for JavaScript plugins (like modals, tooltips, etc).
However, if you just use the CSS part of Bootstrap, you don't need jQuery.

Create First Web Page With Bootstrap


1. 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>

2. 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.

3. Containers
Bootstrap also requires a containing element to wrap site contents.
There are two container classes to choose from:

1. The .container class provides a responsive fixed width container


2. 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.
3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.m
in.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstra
p.min.js"></script>
</head>
<body>

<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

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="https://maxcdn.bootstrapcdn.com/bootst
rap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jq
uery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bo
otstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</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 columns individually, you can group the
columns together to create wider columns:

span span span span span span span span span span span span
1 1 1 1 1 1 1 1 1 1 1 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.
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:

 xs (for phones)
 sm (for tablets)
 md (for xdesktops)
 lg (for larger desktops)

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:
 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

Basic Structure of a Bootstrap Grid


The following is a basic structure of a Bootstrap grid:
The following is a basic structure of a Bootstrap grid:
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
First; create a row (<div class="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.
Below we have collected some examples of basic Bootstrap grid layouts.
Grid Options
The following table summarizes how the Bootstrap grid system works across
multiple devices:

Extra small Small devices Medium devices Large devices


devices Tablets Desktops (>=992px) Desktops (>=1200px)
Phones (>=768px)
(<768px)

Grid Horizontal at all Collapsed to start, Collapsed to start, Collapsed to start,


behaviour times horizontal above horizontal above horizontal above
breakpoints breakpoints breakpoints

Container None (auto) 750px 970px 1170px


width

Class prefix .col-xs- .col-sm- .col-md- .col-lg-

Number of 12 12 12 12
columns

Column Auto ~62px ~81px ~97px


width

Gutter width 30px (15px on 30px (15px on 30px (15px on each 30px (15px on each side
each side of a each side of a side of a column) of a column)
column) column)

Nestable Yes Yes Yes Yes

Offsets Yes Yes Yes Yes

Column Yes Yes Yes Yes


ordering
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 class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</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:

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, meaning it will result in a 50%/50% split on all screens, except for
extra small screens, which it will automatically stack (100%):
col-sm-6 col-sm-6

Example: Stacked-to-horizontal
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
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


<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

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:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

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 (and medium
and large) devices. On extra small devices, it will automatically stack
(100%):
col-sm-3 col-sm-9

Example
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

For a 33.3%/66.6% split, you would use .col-sm-4 and .col-sm-8:

col-sm-4 col-sm-8

Example
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

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:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

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:

Example
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3 col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

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:
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

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:

<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4" style="background color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

Using Only Large


In the example below, we only specify the .col-lg-6 class (without .col-
md-* and/or .col-sm-*). This means that large devices will split 50%/50%.
However, for medium AND small devices, it will stack vertically (100%
width):
Example
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-lg-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

Bootstrap Grid Examples


Below we have collected some examples of basic Bootstrap grid layouts.
1. 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
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>

2. Mixed: Mobile, Tablet 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 :
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>

<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</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> element and all paragraphs (<p>). 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 differently by Bootstrap than browser defaults.

1. <h1> - <h6>
By default, Bootstrap will style the HTML headings (<h1> to <h6>) in the
following way:

h1 Bootstrap heading (36px)


h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

2. <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
3. <mark>
Bootstrap will style the HTML <mark> element in the following way:

Example:
<div class="container">
<h1>Highlight Text</h1>
<p>Use the mark element to <mark>highlight</mark>
text.</p>
</div>

4. <abbr>
Bootstrap will style the HTML <abbr> element in the following way:
Example:
<div class="container">
<h1>Abbreviations</h1>
<p>The abbr element is used to mark up an abbreviation or
acronym:</p>
<p>The <abbr title="World Health Organization">WHO</abbr>
was founded in 1948.</p>
</div>

5. <blockquote>
Bootstrap will style the HTML <blockquote> element in the following
way:

Example:
<div class="container">
<h1>Blockquotes</h1>
<p>The blockquote element is used to
present content from another source:</p>
<blockquote>
<p>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.</p>
<footer>From WWF's website</footer>
</blockquote>
</div>

6. <dl>
Bootstrap will style the HTML <dl> element in the following way:

Example:
<div class="container">
<h1>Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>

7. <code>
Bootstrap will style the HTML <code> element in the following way:

Example:
<div class="container">
<h1>Code Snippets</h1>
<p>Inline snippets of code should be embedded in the code element:</p>
<p>The following HTML elements:
<code>span</code>, <code>section</code>,
and <code>div</code> defines a section in a document.</p>
</div>

8. <kbd>
Bootstrap will style the HTML <kbd> element in the following way:

Example:
<div class="container">
<h1>Keyboard Inputs</h1>
<p>To indicate input that is typically entered via the keyboard,
use the kbd element:</p>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

9. <pre>
Bootstrap will style the HTML <pre> element in the following way:

Example:
<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</div>
10. 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:
<div class="container">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through
colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
</div>

The classes for background colors are:.bg-primary, .bg-success, .bg-


info, .bg-warning, and .bg-danger:
Example:
<div class="container">
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide
"meaning through colors":</p>
<p class="bg-primary">This text is important.</p>
<p class="bg-success">This text indicates success.</p>
<p class="bg-info">This text represents some information.</p>
<p class="bg-warning">This text represents a warning.</p>
<p class="bg-danger">This text represents danger.</p>
</div>

11. More Typography Classes


The Bootstrap classes below can be added to style HTML elements
further:

Class Description
.lead Makes a paragraph stand out
.small Indicates smaller text (set to 85% of the size of the
parent)
.text-left Indicates left-aligned text
.text-center Indicates center-aligned text
.text-right Indicates right-aligned text
.text-justify Indicates justified text
.text-nowrap Indicates no wrap text
.text-lowercase Indicates lowercased text
.text-uppercase Indicates uppercased text
.text- Indicates capitalized text
capitalize
.initialism Displays the text inside an <abbr> element in a
slightly smaller font size
.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)
.list-inline Places all list items on a single line
.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
.pre-scrollable Makes a <pre> element scrollable

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:
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling
(light padding and only horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>

Striped Rows
The .table-striped class adds zebra-stripes to a table:

Example:
<div class="container">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
</tbody>
</table>
</div>

Bordered Table
The .table-bordered class adds borders on all sides of the table and cells:

Example:
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
</tbody>
</table>
</div>

Hover Rows
The .table-hover class adds a hover effect (grey background color) on table
rows:

Example:
<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p>
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
</tbody>
</table>
</div>

Contextual Classes
Contextual classes can be used to color table rows (<tr>) or table cells
(<td>):

Example:
<div class="container">
<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color table rows or table cells. The
classes that can be used are: .active, .success, .info, .warning, and .danger.</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def@somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr class="danger">
<td>Danger</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr class="info">
<td>Info</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr class="warning">
<td>Warning</td>
<td>Refs</td>
<td>bo@example.com</td>
</tr>
<tr class="active">
<td>Active</td>
<td>Activeson</td>
<td>act@example.com</td>
</tr>
</tbody>
</table>
</div>

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

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:
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll
horizontally on small devices (under 768px). When viewing on anything larger
than 768px wide, there is no difference:</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
Bootstrap Images
Bootstrap Image Shapes

Rounded Corners
The .img-rounded class adds rounded corners to an image (IE8 does not
support rounded corners):

Example:
<div class="container">
<h2>Rounded Corners</h2>
<p>The .img-rounded class adds rounded
corners to an image (not available in IE8):</p>
<img src="cinqueterre.jpg"
class="img-rounded" alt="Cinque Terre" width="304" height="236">
</div>

Circle
The .img-circle class shapes the image to a circle (IE8 does not support
rounded corners):

Example:
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque
Terre" width="304"height="236">

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">

Responsive Images
Images come 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 display: block; and max-width:
100%; and height: auto; to the image:
Example:
<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Image Gallery
You can also use Bootstrap's grid system in conjunction with
the .thumbnail class to create an image gallery.

Example:
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/lights.jpg">
<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/nature.jpg">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/fjords.jpg">
<img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
</div>
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 <div> element with class .jumbotron to
create a jumbotron:

Jumbotron Inside Container


Place the jumbotron inside the <div class="container"> if you want the
jumbotron to NOT extend to the edge of the screen:
Example:
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS,
and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>

Jumbotron Outside Container


Place the jumbotron outside the <div class="container"> if you want the
jumbotron to extend to the screen edges:
Example:
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS,
and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>

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 <div> element with class .page-header to create a page header:
<div class="page-header">
<h1>Example Page Header</h1>
</div>

Bootstrap Wells
Wells
The .well class adds a rounded border around an element with a gray
background color and some padding:
Example :
<div class="well">Basic Well</div>
<div class="well well-sm">Small Well</div>
<div class="well well-lg">Large Well</div>

Alerts
Bootstrap provides an easy way to create predefined alert messages:
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 :
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">


<strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">


<strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">


<strong>Danger!</strong> Indicates a dangerous or potentially negative
action.
</div>
Alert Links
Add the alert-link class to any links inside the alert box to create
"matching colored links":
Example :
<div class="alert alert-success">
<strong>Success!</strong>
You should <a href="#" class="alert-link">
read this message</a>.
</div>

Closing Alerts
Click on the "x" symbol to the right to close me.
To close the alert message, add a .alert-dismissable class to the alert
container. Then add class="close" and data-dismiss="alert" to a link or
a button element (when you click on this the alert box will disappear).

Example :
<div class="alert alert-success alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">&times;</a>
<strong>Success!</strong> Indicates a successful or positive
action.
</div>

Animated Alerts
Click on the "x" symbol to the right to close me. I will "fade" out.

The .fade and .in classes adds a fading effect when closing the alert
message:
Example :
<div class="alert alert-danger alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert"
aria-label="close">&times;</a>
<strong>Danger!</strong> This alert box could indicate a
dangerous or potentially negative action.
</div >

Buttons
Button Styles
Bootstrap provides different styles of buttons:
To achieve the button styles above, Bootstrap has the following classes:
To achieve the button styles above, Bootstrap has the following classes:
 .btn
 .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 :
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

The button classes can be used on an <a>, <button>, or <input> element:

Example :
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

Button Sizes
Bootstrap provides four button sizes:

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 :
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Block Level Buttons


A block level button spans the entire width of the parent element.

Add class .btn-block to create a block level button:

Example :
<button type="button" class="btn btn-primary btn-block">Button 1</button>

Active/Disabled Buttons
A button can be set to an active (appear pressed) or a disabled (unclickable)
state:

The class .active makes a button appear pressed, and the


class .disabled makes a button unclickable:
Example :
<button type="button" class="btn btn-primary active">Active
Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary</button>

Button Groups
Bootstrap allows you to group a series of buttons together (on a single
line) in a button group:

Use a <div> element with class .btn-group to create a button group:

Example :
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

Tip: Instead of applying button sizes to every button in a group, use


class .btn-group-lg|sm|xs to size all buttons in the group:
Example :
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

Vertical Button Groups


Bootstrap also supports vertical button groups:

Use the class .btn-group-vertical to create a vertical


button group:

Example :
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

Justified Button Groups


To span the entire width of the screen, use the .btn-group-justified class:

Example with <a> elements:

Example :
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>

Note: For <button> elements, you must wrap each button in a .btn-
group class:
Example :
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>

Nesting Button Groups & Dropdown Menus

Nest button groups to create dropdown menus:


Example :
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>

Split Button Dropdowns

Example :
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>

Glyphicons
Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.
Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.
Here are some examples of glyphicons:

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>
Badges and Labels
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>

Badges can also be used inside other elements, such as buttons:

The following example shows how to add badges to buttons:


<button type="button" class="btn btn-
primary">Primary <span class="badge">7</span></button>

Labels
Labels are used to provide additional information about something:

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>

The following example shows all contextual label classes:

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>

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:
To create a default progress bar, add a .progress class to a <div> element:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
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).

Note: To help improve accessibility for people using screen readers, you
should include the aria-* attributes.

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:

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>

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

The following example shows how to create progress bars with the different
contextual classes:
Example :
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-
valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>

<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-
valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>

<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-
valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>

<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-
valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>

Striped Progress Bars


Progress bars can also be striped:

Add class .progress-bar-striped to add stripes to the progress bars:

Example :
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-
striped"role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-
valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>

<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-
striped"role="progressbar"
aria-valuenow="50" aria-valuemin="0" aria-
valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>

<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-
striped"role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-
valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>

<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-
striped"role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-
valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>

Animated Progress Bar

Add class .active to animate the progress bar:


Example :
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-
valuemax="100" style="width:40%">
40%
</div>
</div>

Stacked Progress Bars


Progress bars can also be stacked:

Create a stacked progress bar by placing multiple bars into the same <div
class="progress">:
Example :
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
style="width:40%">
Free Space
</div>
<div class="progress-bar progress-bar-warning" role="progressbar"
style="width:10%">
Warning
</div>
<div class="progress-bar progress-bar-danger" role="progressbar"
style="width:20%">
Danger
</div>
</div>
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>

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>

Disabled State
A disabled link cannot be clicked:

Add class .disabled if a link for some reason is disabled:


<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>
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>

Breadcrumbs
Another form for pagination, is breadcrumbs:

The .breadcrumb class indicates the current page's location within a


navigational hierarchy:
Example :
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>

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>

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>

List Groups
Basic List Groups
The most basic list group is an unordered list with list items:

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>

List Group With Badges


You can also add badges to a list group. The badges will automatically be
positioned on the right:

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">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>

List Group With Linked Items


The items in a list group can also be hyperlinks. This will add a grey
background color on hover:

To create a list group with linked items, use <div> instead


of <ul> and <a> instead of <li>:
Example :
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>

Active State

Use the .active class to highlight the current item:

Example :
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>

Disabled Item
The following list group has a disabled item:

Example :
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>

To disable an item, add the .disabled class:

Contextual Classes
Contextual classes can be used to color list items:

The classes for coloring list-items are: .list-group-item-success, list-


group-item-info, list-group-item-warning, and .list-group-item-
danger:

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>

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 :
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item
Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>

Panels
A panel in bootstrap is a bordered box with some padding around its content:

Panels are created with the .panel class, and content inside the panel has
a .panel-body class:
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>

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

The .panel-heading class adds a heading to the panel:

Example :
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>

Panel Footer

The .panel-footer class adds a footer to the panel:

Panel Group
To group many panels together, wrap a <div> with class .panel-
group around them. The .panel-group class clears the bottom-margin of
each panel:
Example :
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
</div>
Panels with Contextual Classes
To color the panel, use contextual classes (.panel-default, .panel-
primary, .panel-success, .panel-info, .panel-warning, or .panel-
danger):

Dropdown
A dropdown menu is a toggleable menu that allows the user to choose
one value from a predefined list:
Example :
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-
toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>

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 with
a thin horizontal border:
<li class="divider"></li>

Dropdown Header
The .dropdown-header class is used to add headers inside the dropdown
menu:

<li class="dropdown-header">Dropdown header 1</li>

Disable and Active items


Highlight a specific dropdown item with the .active class (adds a blue
background color). To disable an item in the dropdown menu, use
the .disabled class (gets a light-grey text color and a "no-parking-sign" icon
on hover):
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
Dropdown Position
To right-align the dropdown, add the .dropdown-menu-right class to the
element with .dropdown-menu:
<ul class="dropdown-menu dropdown-menu-right">

Dropup

If you want the dropdown menu to expand upwards instead of downwards,


change the <div> element with class="dropdown" to "dropup":
<div class="dropup">

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:
<div class="dropdown">
<button class="btn btn-default dropdown-
toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">About Us</a></li>
</ul>
</div>

You might also like