Rel Href

<!
-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.
4.1/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.mi
n.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap
.min.js"></script>
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.
min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstr
ap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.
min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstr
ap.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 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 1 span span 1 span 1 span 1 span 1 span spa span span span span 1
1 1 n1 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.
Grid Classes
The Bootstrap grid system has four classes:
 xs (for phones - screens less than 768px wide)

 sm (for tablets - screens equal to or greater than 768px wide)
 md (for small laptops - screens equal to or greater than 992px wide)
 lg (for laptops and desktops - screens equal to or greater than 1200px
wide)
The classes above can be combined to create more dynamic and flexible
layouts.
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</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.
.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 or screens that are
less than 768px wide, the columns will automatically stack
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
</div>
.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
<div class="row">
</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> 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.
<h1> - <h6>
By default, Bootstrap will style the HTML headings (<h1> to <h6>) in the following
way
h1 Bootstrap heading (36px)
<small>
In Bootstrap the HTML <small> element is used to create a lighter, secondary
text in any heading
h1 heading secondary text
<mark>
Bootstrap will style the HTML <mark> element in the following way
Use the mark element to highlight text.

<abbr>
Bootstrap will style the HTML <abbr> element in the following way
The WHO was founded in 1948.
<blockquote>
Bootstrap will style the HTML <blockquote> element in the following way
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></scrip
t>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"><
/script>
</head>
<body>
<h1>Blockquotes</h1>
<p>To show the quote on the right use the class .blockquote-reverse:</p>
<blockquote class="blockquote-reverse">
<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>
</body>
</html>
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
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
<head>
">
<script
t>
<script
/script>
</head>
<body>
<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>
</body>
</html>
Coffee
- black hot drink
Milk
- white cold drink
<code>
Bootstrap will style the HTML <code> element in the following way
<!DOCTYPE html>
<html lang="en">
<head>
">
<script
t>
<script
/script>
</head>
<body>
<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>
</body>
</html>
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
<!DOCTYPE html>
<html lang="en">
<head>
">
<script
t>
<script
/script>
</head>
<body>
<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>
</body>
</html>
Use ctrl + p to open the Print dialog box.
<pre>
Bootstrap will style the HTML <pre> element in the following way
<!DOCTYPE html>
<html lang="en">
<head>
">
<script
t>
<script
/script>
</head>
<body>
<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>
</body>
</html>
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
<!DOCTYPE html>
<html lang="en">
<head>
">
<script
t>
<script
/script>
</head>
<body>
<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>
</body>
</html>
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
<!DOCTYPE html>
<html lang="en">
<head>
">
<script
t>
<script
/script>
</head>
<body>
<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>
</body>
</html>
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
VV IMP:
Bootstrap Basic Table

A basic Bootstrap table has a light padding and only horizontal dividers.
The .table class adds basic styling to a table
<!DOCTYPE html>
<html lang="en">
<head>
">
<script
t>
<script
/script>
</head>
<body>
<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>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

The .table-striped class adds zebra-stripes to a table
<!DOCTYPE html>
<html lang="en">
<head>
">
<script
t>
<script
/script>
</head>
<body>
<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>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Bordered Table
The .table-bordered class adds borders on all sides of the table and cells
<!DOCTYPE html>
<html lang="en">
<head>
">
<script
t>
<script
/script>
</head>
<body>
<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>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hover Rows
The .table-hover class adds a hover effect (grey background color) on table rows
<!DOCTYPE html>
<html lang="en">
<head>
">
<script
t>
<script
/script>
</head>
<body>
<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>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Contextual Classes
Contextual classes can be used to color table rows (<tr>) or table cells (<td>)
<!DOCTYPE html>
<html lang="en">
<head>

">
<script
t>
<script
/script>
</head>
<body>
<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>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
</tr>
<tr class="success">
<td>Success</td>
<td>Doe</td>
</tr>
<tr class="danger">
<td>Danger</td>
<td>Moe</td>
</tr>
<tr class="info">
<td>Info</td>
<td>Dooley</td>
</tr>
<tr class="warning">
<td>Warning</td>
<td>Refs</td>
</tr>
<tr class="active">
<td>Active</td>
<td>Activeson</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

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
<!DOCTYPE html>
<html>
<head>
">
<script
t>
<script
/script>
</head>
<body>
<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">
<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>
</body>
</html>

Rel Href

Uploaded by

Copyright:

Available Formats

Rel Href

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Rel Href

Uploaded by

Copyright:

Available Formats

<!

-- Latest compiled and minified CSS -->

Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles

To ensure proper rendering and touch zooming, add the following <meta> tag

The width=device-width part sets the width of the page to follow the screen-

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

Bootstrap Grid System

span 4 span 4 span 4

Bootstrap's grid system is responsive, and the columns will re-arrange

 xs (for phones - screens less than 768px wide)

Below we have collected some examples of basic Bootstrap grid layouts.

Bootstrap's Default Settings

This is applied to the <body> element and all paragraphs (<p>).

In addition, all <p> elements have a bottom margin that equals half their

Bootstrap vs. Browser Defaults

Use the mark element to highlight text.

The WHO was founded in 1948.

<meta name="viewport" content="width=device-width, initial-scale=1">

<footer>From WWF's website</footer>

From WWF's website

To show the quote on the right, use the .blockquote-reverse class

From WWF's website

<meta name="viewport" content="width=device-width, initial-scale=1">

<p>The dl element indicates a description list:</p>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

Use ctrl + p to open the Print dialog box.

Text in a pre element

Contextual Colors and Backgrounds

The classes for text colors are:.text-muted, .text-primary, .text-success, .text-

<meta name="viewport" content="width=device-width, initial-scale=1">

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

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-

<p>Use the contextual background classes to provide "meaning through

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

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.