Bootstrap
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
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)
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.2.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
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>
<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="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</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.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.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="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
</div>
<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.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
</div>
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
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>
<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.
Three Equal
Columns
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>
<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
The following example shows
how to get two various-width columns starting at tablets and scaling to large
desktops:
Example
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
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
<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.
<kbd>
Bootstrap will style the HTML
<kbd> element in the following way:
Example
Use ctrl
+ p to open the Print dialog box.
<pre>
Bootstrap will style the HTML
<pre> element in the following way:
Example
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
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.
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.
More
Typography Classes
The Bootstrap classes below
can be added to style HTML elements further:
|
Class
|
Description
|
Example
|
.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-capitalize |
Indicates
capitalized text
|
|
.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
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
|
Email
|
|
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
|
Email
|
|
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
|
Email
|
|
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
|
Email
|
|
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
|
Email
|
|
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
|
Email
|
|
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
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">
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">
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
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">
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">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="moustiers-sainte-marie.jpg" class="thumbnail">
<p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of France".</p>
<img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="cinqueterre.jpg" class="thumbnail">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p>
<img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
</a>
</div>
</div>
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="moustiers-sainte-marie.jpg" class="thumbnail">
<p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of France".</p>
<img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="cinqueterre.jpg" class="thumbnail">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p>
<img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
</a>
</div>
</div>
Responsive Embeds
Also
let videos or slideshows scale properly on any device.
Classes
can be applied directly to <iframe>, <embed>, <video>, and
<object> elements.
The
following example creates a responsive video by adding an
.embed-responsive-item class to an <iframe> tag (the video will then scale nicely to
the parent element). The containing <div> defines the aspect ratio of the video:
Example
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
 |
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 -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</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:
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
<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>
<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="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>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
<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>
<div class="container">
<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:
Example
<div class="page-header">
<h1>Example Page Header</h1>
</div>
<h1>Example Page Header</h1>
</div>
