Bootstrap 4

Bootstrap 4
Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and
JavaScript framework for developing responsive, mobile-first web sites.
Try it Yourself Examples

This Bootstrap 4 tutorial contains hundreds of Bootstrap 4 examples.
With our online editor, you can edit the code, and click on a button to view the result.
<!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/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<h3>Column 2</h3>
</div>
<h3>Column 3</h3>
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 Get Started
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 4 Grids
Bootstrap 4 Grid System
Bootstrap's grid system is built with flexbox and 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 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
The grid system is responsive, and the columns will re-arrange automatically
depending on the screen size.
Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12
available columns).
Grid Classes
The Bootstrap 4 grid system has five classes:
 .col- (extra small devices - screen width less than 576px)

 .col-sm- (small devices - screen width equal to or greater than 576px)
 .col-md- (medium devices - screen width equal to or greater than 768px)
 .col-lg- (large devices - screen width equal to or greater than 992px)
 .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
Three Equal Columns
.col
.col
.col
The following example shows how to create three equal-width columns, on all devices
and screen widths:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Three equal width columns! Try to add a new div with class="col" inside the row class - this will create four
equal-width columns.</p>
<div class="row">
<div class="col" style="background-color:lavender;">.col</div>
<div class="col" style="background-color:orange;">.col</div>
<div class="col" style="background-color:lavender;">.col</div>
</div>
</div>
</body>
</html>
Responsive Columns
The following example shows how to create four equal-width columns starting at
tablets and scaling to extra large desktops. On mobile phones or screens that are
less than 576px wide, the columns will automatically stack on top of each
other:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
</div>
</div>
</body>
</html>
Two Unequal Responsive Columns
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
</div>
</div>
</body>
</html>
Bootstrap 4 Text/Typography
Bootstrap 4 Default Settings
Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.
The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.
In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem(16px by

default).
<h1> - <h6>
Bootstrap 4 styles HTML headings (<h1> to <h6>) with a bolder font-weight and an
increased font-size:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>h1 Bootstrap heading (2.5rem = 40px)</h1>
<h2>h2 Bootstrap heading (2rem = 32px)</h2>
<h6>h6 Bootstrap heading (1rem = 16px)</h6>
</div>
</body>
</html>
h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)
h6 Bootstrap heading (1rem = 16px)
Display Headings
Display headings are used to stand out more than normal headings (larger font-size
and lighter font-weight), and there are four classes to choose from: .display-
1, .display-2, .display-3, .display-4
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Display Headings</h1>
<p>Display headings are used to stand out more than normal headings (larger font-size and lighter font-
weight):</p>
<h1 class="display-1">Display 1</h1>
</div>
</body>
</html>
Display Headings
Display headings are used to stand out more than normal headings (larger font-size and lighter
font-weight):
Display 1
Display 2
Display 3
Display 4
<small>
In Bootstrap 4 the HTML <small> element is used to create a lighter, secondary text in
any heading:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Lighter, Secondary Text</h1>
<p>The small element is used to create a lighter, secondary text in any heading:</p>
<h1>h1 heading <small>secondary text</small></h1>
</div>
</body>
</html>
<mark>
Bootstrap 4 will style the HTML <mark> element with a yellow background color and
some padding:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Highlight Text</h1>
<p>Use the mark element to <mark>highlight</mark> text.</p>
</div>
</body>
</html>
Highlight Text
Use the mark element to highlight text.
<abbr>
Bootstrap 4 will style the HTML <abbr> element with a dotted border bottom:
Example
<!DOCTYPE html>
<html lang="en">
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>
Abbreviations
The abbr element is used to mark up an abbreviation or acronym:
The WHO was founded in 1948.

<blockquote>
Add the .blockquote class to a <blockquote> when quoting blocks of content from
another source:
Example
<!DOCTYPE html>
<html lang="en">
<head>

<script
</head>
<body>
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>

<blockquote class="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 class="blockquote-footer">From WWF's website</footer>
</blockquote>
</div>
</body>
</html>
Blockquotes
The blockquote element is used to present content from another source:
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 4 will style the HTML <dl> element in the following way:
Example
<!DOCTYPE html>
<html lang="en">
<head>

<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>
Description Lists
The dl element indicates a description list:
Coffee
- black hot drink
Milk
- white cold drink
<code>
Bootstrap 4 will style the HTML <code> element in the following way:
Example
<!DOCTYPE html>
<html lang="en">
<head>

<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>
Code Snippets
Inline snippets of code should be embedded in the code element:
The following HTML elements: span, section, and div defines a section in a document.
<kbd>
Bootstrap 4 will style the HTML <kbd> element in the following way:
Example
<!DOCTYPE html>
<html lang="en">
<head>

<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>
Keyboard Inputs
To indicate input that is typically entered via the keyboard, use the kbd element:
Use ctrl + p to open the Print dialog box.
<pre>
Bootstrap 4 will style the HTML <pre> element in the following way:
Example
<!DOCTYPE html>
<html lang="en">
<head>

<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>
Multiple Code Lines

For multiple lines of code, use the pre element:
Text in a pre element

both spaces and
line breaks.
Bootstrap 4 Colors
More Typography Classes
The Bootstrap 4 classes below can be added to style HTML elements further:
Class Description
.font- Bold text

weight-bold
.font- Normal text

weight-
normal
.font- Light weight text

weight-light
.font-italic Italic text
.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- Indicates justified text

justify
.text-nowrap Indicates no wrap text
.text- Indicates lowercased text

lowercase
.text- Indicates uppercased text

uppercase
.text- Indicates capitalized text

capitalize
.initialism Displays the text inside an <abbr> element in a slightly

smaller font size
.list- Removes the default list-style and left margin on list
unstyled 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 (used together

with .list-inline-item on each <li> elements)
.pre- Makes a <pre> element scrollable

scrollable
.font-weight-bold Bold text
<!DOCTYPE html>
<html lang="en">
<head>

<script
</head>
<body>
<h1>Font weight and italics</h1>
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>
</div>
</body>
</html>
Font weight and italics

Bold text.
Normal weight text.
Light weight text.
Italic text.
.font-weight-normal Normal text
<!DOCTYPE html>
<html lang="en">
<head>

<script
</head>
<body>

</div>
</body>
</html>
Font weight and italics

Bold text.
Normal weight text.
Light weight text.
Italic text.
.font-weight-light Light weight text
<!DOCTYPE html>
<html lang="en">
<head>

<script
</head>
<body>
</div>
</body>
</html>
.font-italic Italic text
<!DOCTYPE html>
<html lang="en">
<head>

<script
</head>
<body>
</div>
</body>
</html>
.lead Makes a paragraph stand out

<!DOCTYPE html>
<html>
<head>

<script
</head>
<body>
<h2>Typography</h2>
<p>Use the .lead class to make a paragraph "stand out":</p>
<p class="lead">This paragraph stands out.</p>
<p>This is a regular paragraph.</p>
</div>
</body>
</html>
.small Indicates smaller text (set to 85% of the size of the parent)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Typography</h2>
<p>Use the .small class to make the text smaller:</p>
<p class="small">This paragraph is smaller.</p>
<p>This is a regular paragraph.</p>
</div>
</body>
</html>
.text-left Indicates left-aligned text
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Typography</h2>
<p class="text-left">Left-aligned text.</p>

<p class="text-right">Right-aligned text.</p>
<p class="text-center">Center-aligned text.</p>
<p class="text-justify">Justified text. Justified text. Justified text. Justified text. Justified text. Justified text.</p>
<p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>
<p><strong>Tip:</strong> Try to resize the browser window to see the behaviour of justify and nowrap.</p>
</div>
</body>
</html>
.text-center Indicates center-aligned text
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Typography</h2>
</div>
</body>
</html>
.text-right Indicates right-aligned text
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Typography</h2>
</div>
</body>
</html>
.text-justify Indicates justified text
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Typography</h2>

</div>
</body>
</html>
.text-nowrap Indicates no wrap text
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Typography</h2>
</div>
</body>
</html>
.text-lowercase Indicates lowercased text
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Typography</h2>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
</div>
</body>
</html>
.text-uppercase Indicates uppercased text
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Typography</h2>

</div>
</body>
</html>
.text-capitalize Indicates capitalized text
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Typography</h2>
</div>
</body>
</html>
. Displays the text inside an <abbr> element in a slightly

initialism smaller font size
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Typography</h2>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. (normal abbr)</p>
<p>The <abbr title="World Health Organization" class="initialism">WHO</abbr> was founded in 1948. (slightly
smaller abbr)</p>
</div>
</body>
</html>
.list- Removes the default list-style and left margin on list items
unstyled (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)
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h2>Typography</h2>
<p>The class .list-unstyled removes the default list-style and left margin on list items (immediate children
only):</p>
<ul class="list-unstyled">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</div>
</body>
</html>
.list- Places all list items on a single line (used together with .list-
inline inline-item on each <li> elements)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Typography</h2>
<p>The class .list-inline places all list items on a single line, when used together with the .list-inline-item:</p>
<ul class="list-inline">
<li class="list-inline-item">Coffee</li>
<li class="list-inline-item">Tea</li>
<li class="list-inline-item">Milk</li>
</ul>
</div>
</body>
</html>
.pre-scrollable Makes a <pre> element scrollable
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Code</h2>
<p>For multiple lines of code, use the pre element:</p>
<pre>Text in a pre element
both spaces and
line breaks.</pre>
<p>If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-axis
scrollbar:</p>
<pre class="pre-scrollable">Text in a pre element
both spaces and
line breaks.</pre>
</div>
</body>
</html>
Bootstrap 4 Colors
Text Colors
Bootstrap 4 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, .text-danger, .text-secondary, .text-white, .text-dark an
d .text-light:
Example
<!DOCTYPE html>
<html lang="en">
<head>

</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>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-light">This text is light grey (on white background).</p>
<p class="text-white">This text is white (on white background).</p>
</div>
</body>
</html>
Contextual text classes can also be used on links, which will add a darker hover color:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Contextual Link Colors</h2>
<p>Hover over the links.</p>
<a href="#" class="text-muted">Muted link.</a>
<a href="#" class="text-primary">Primary link.</a>
<a href="#" class="text-success">Success link.</a>
<a href="#" class="text-info">Info link.</a>
<a href="#" class="text-warning">Warning link.</a>
<a href="#" class="text-danger">Danger link.</a>
<a href="#" class="text-secondary">Secondary link.</a>
<a href="#" class="text-dark">Dark grey link.</a>
<a href="#" class="text-light">Light grey link.</a>
</div>
</body>
</html>
Background Colors
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-
warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Note that background colors do not set the text color, so in some cases you'll want to
use them together with a .text-* class.
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors".</p>
<p>Note that you can also add a .text-* class if you want a different text color:</p>
<p class="bg-primary text-white">This text is important.</p>
<p class="bg-success text-white">This text indicates success.</p>

<p class="bg-info text-white">This text represents some information.</p>
<p class="bg-warning text-white">This text represents a warning.</p>
<p class="bg-danger text-white">This text represents danger.</p>
<p class="bg-secondary text-white">Secondary background color.</p>
<p class="bg-dark text-white">Dark grey background color.</p>
<p class="bg-light text-dark">Light grey background color.</p>
</div>
</body>
</html>
Bootstrap 4 Tables
Bootstrap 4 Basic Table
A basic Bootstrap 4 table has a light padding and horizontal dividers.
The .table class adds basic styling to a table:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and 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>
Basic Table
The .table class adds basic styling (light padding and horizontal dividers) to a table:
Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Striped Rows
The .table-striped class adds zebra-stripes to a table:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</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:
Example
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders on all sides of the table and the cells:</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>
Bordered Table
The .table-bordered class adds borders on all sides of the table and the cells:
Hover Rows
The .table-hover class adds a hover effect (grey background color) on table rows:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Hoverable Dark Table</h2>
<p>The .table-hover class adds a hover effect (grey background color) on table rows:</p>
<table class="table table-dark 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>
Hoverable Dark Table

Black/Dark Table
The .table-dark class adds a black background to the table:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Black/Dark Table</h2>
<p>The .table-dark class adds a black background to the table:</p>

<table class="table table-dark">
<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>
Black/Dark Table
The .table-dark class adds a black background to the table:
Dark Striped Table

Combine .table-dark and .table-striped to create a dark, striped table:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Dark Striped Table</h2>
<p>Combine .table-dark and .table-striped to create a dark, striped table:</p>
<table class="table table-dark 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>

Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Hoverable Dark Table</h2>
<p>The .table-hover class adds a hover effect (grey background color) on table rows:</p>
<table class="table table-dark 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 the whole table (<table>), the table rows
(<tr>) or table cells (<td>).
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color the table, table rows or table cells. The classes that can be used
are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary,
.table-light and .table-dark:</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="table-primary">
<td>Primary</td>
<td>Joe</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>Bo</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Default Defaultson [email protected]
Primary Joe [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]
Secondary Secondson [email protected]
Light Angie [email protected]
Dark Bo [email protected]
Contextual Classes
Contextual classes can be used to color the table, table rows or table cells. The classes that can
be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-
active, .table-secondary, .table-light and .table-dark:
Table Head Colors

The .thead-dark class adds a black background to table headers, and the .thead-
light class adds a grey background to table headers:
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h2>Table Head Colors</h2>
<p>The .thead-dark class adds a black background to table headers, and the .thead-light class adds a grey
background to table headers:</p>
<thead class="thead-dark">
<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>
<thead class="thead-light">
<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>
Table Head Colors

The .thead-dark class adds a black background to table headers, and the .thead-light class adds
a grey background to table headers:

Small table
The .table-sm class makes the table smaller by cutting cell padding in half:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Small Table</h2>
<p>The .table-sm class makes the table smaller by cutting cell padding in half:</p>
<table class="table table-bordered table-sm">
<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>
Small Table
The .table-sm class makes the table smaller by cutting cell padding in half:
Responsive Tables
The .table-responsive class creates a responsive table: an horizontal scrollbar is
added to the table on screens that are less than 992px wide (if needed). When viewing
on anything larger than 992px wide, there is no difference:
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Responsive Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally on screens that are less
than 992px wide (if needed). When viewing on anything larger than 992px, 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>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Responsive Table
The .table-responsive class creates a responsive table which will scroll horizontally on screens
that are less than 992px wide (if needed). When viewing on anything larger than 992px, there is
no difference:
# Firstname Lastname Age City Country Sex Example Example Example Example
1 Anna Pitt 35 New USA Female Yes Yes Yes Yes

York
You can also decide when the table should get a scrollbar, depending on screen width:
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h2>Responsive Table</h2>
<p>The .table-responsive-sm class creates a responsive table which will scroll horizontally on screens that are
less than 576px wide.</p>
<div class="table-responsive-sm">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Responsive Table
The .table-responsive-sm class creates a responsive table which will scroll horizontally on
screens that are less than 576px wide.
Resize the browser window to see the effect.
# Firstname Lastname Age City Country Sex Example Example Example Example
1 Anna Pitt 35 New USA Female Yes Yes Yes Yes

York
Bootstrap 4 Images
Rounded Corners
The .rounded class adds rounded corners to an image:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Rounded Corners</h2>
<p>The .rounded class adds rounded corners to an image:</p>
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
Rounded Corners
The .rounded class adds rounded corners to an image:
Circle
The .rounded-circle class shapes the image to a circle:
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h2>Circle</h2>
<p>The .rounded-circle class shapes the image to a circle:</p>
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
Thumbnail
The .img-thumbnail class shapes the image to a thumbnail (bordered):
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Thumbnail</h2>
<p>The .img-thumbnail class creates a thumbnail of the image:</p>
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
Aligning Images
Float an image to the right with the .float-right class or to the left with .float-
left:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Aligning images</h2>
<p>Use the float classes to float the image to the left or to the right:</p>
<img src="paris.jpg" class="float-left" alt="Paris" width="304" height="236">
<img src="paris.jpg" class="float-right" alt="Paris" width="304" height="236">
</div>
</body>
</html>
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-fluid class to the <img> tag. The image

will then scale nicely to the parent element.
The .img-fluid class applies max-width: 100%; and height: auto; to the image:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Image</h2>
<p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see
the effect):</p>
<img class="img-fluid" src="img_chania.jpg" alt="Chania" width="460" height="345">
</div>
</body>
</html>
Bootstrap 4 Jumbotron
Bootstrap 4 Jumbotron
A jumbotron indicates a big grey box for calling extra attention to some special content
or information.
Use a <div> element with class .jumbotron to create a jumbotron:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<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>
</body>
</html>
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.
Full-width Jumbotron
If you want a full-width jumbotron without rounded borders, add the .jumbotron-
fluid class and a .container or .container-fluid inside of it:
Example
<!DOCTYPE html>
<html lang="en">
<head>

<script
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<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>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
</html>
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.
Bootstrap 4 Alerts
Bootstrap 4 Alerts
Bootstrap 4 provides an easy way to create predefined alert messages:
Alerts are created with the .alert class, followed by one of the contextual

classes .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-
primary, .alert-secondary, .alert-light or .alert-dark:
<!DOCTYPE html>
<html lang="en">
<head>

<script
</head>
<body>
<h2>Alerts</h2>
<p>Alerts are created with the .alert class, followed by a contextual color classes:</p>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need
attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative

action.
</div>
<div class="alert alert-primary">
<strong>Primary!</strong> Indicates an important action.
</div>
<div class="alert alert-secondary">

<strong>Secondary!</strong> Indicates a slightly less important action.
</div>
<div class="alert alert-dark">
<strong>Dark!</strong> Dark grey alert.
</div>
<div class="alert alert-light">
<strong>Light!</strong> Light grey alert.
</div>
</div>
</body>
</html>
Alert Links
Add the alert-link class to any links inside the alert box to create "matching colored
links":
<!DOCTYPE html>
<html lang="en">
<head>

<script
</head>
<body>
<h2>Alert Links</h2>
<p>Add the alert-link class to any links inside the alert box to create "matching colored
links".</p>
<div class="alert alert-success">

<strong>Success!</strong> You should <a href="#" class="alert-link">read this
message</a>.
</div>
<div class="alert alert-info">
<strong>Info!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> You should <a href="#" class="alert-link">read this

message</a>.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> You should <a href="#" class="alert-link">read this

message</a>.
</div>
<div class="alert alert-primary">
<strong>Primary!</strong> You should <a href="#" class="alert-link">read this

message</a>.
</div>
<div class="alert alert-secondary">
<strong>Secondary!</strong> You should <a href="#" class="alert-link">read this

message</a>.
</div>
<div class="alert alert-dark">
<strong>Dark!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>
<div class="alert alert-light">
<strong>Light!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
</div>
</body>
</html>
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
<!DOCTYPE html>
<html lang="en">
<head>

<script
</head>
<body>
<h2>Alerts</h2>
<p>The button with class="close" and data-dismiss="alert" is used to close the alert box.</p>
<p>The alert-dismissible class adds some extra padding to the close button.</p>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
<div class="alert alert-info alert-dismissable">
</div>
<div class="alert alert-warning alert-dismissable">
attention.
</div>
<div class="alert alert-danger alert-dismissable">

action.
</div>
<div class="alert alert-primary alert-dismissable">
</div>
<div class="alert alert-secondary alert-dismissable">

</div>
<div class="alert alert-dark alert-dismissable">
</div>
<div class="alert alert-light alert-dismissable">
</div>
</div>
</body>
</html>
Animated Alerts
×Click on the "x" symbol to the right to close me. I will "fade" out.
The .fade and .show classes adds a fading effect when closing the alert message:
Example
<!DOCTYPE html>
<html lang="en">
<head>

<script
</head>
<body>
<h2>Animated Alerts</h2>
<p>The .fade and .show classes adds a fading effect when closing the alert message.</p>
<div class="alert alert-success alert-dismissable fade show">
</div>
<div class="alert alert-info alert-dismissable fade show">
</div>
<div class="alert alert-warning alert-dismissable fade show">

attention.
</div>
<div class="alert alert-danger alert-dismissable fade show">

action.
</div>
<div class="alert alert-primary alert-dismissable fade show">
</div>
<div class="alert alert-secondary alert-dismissable fade show">
</div>
<div class="alert alert-dark alert-dismissable fade show">
</div>
<div class="alert alert-light alert-dismissable fade show">

</div>
</div>
</body>
</html>
Bootstrap 4 Buttons
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>
The button classes can be used on an <a>, <button>, or <input> element:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Button Elements</h2>
<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">
</div>
</body>
</html>
Button Outline
Bootstrap 4 provides eight outline/bordered buttons:
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h2>Button Outline</h2>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
</div>
</body>
</html>
Button Sizes
Bootstrap 4 provides different button sizes:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Button Sizes</h2>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

</div>
</body>
</html>
Block Level Buttons

Add class .btn-block to create a block level button that spans the entire width of the
parent element.
Button 1Button 2
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-block">Button 2</button>
<h2>Large Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>
<h2>Small Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>
</div>
</body>
</html>
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 disabled attribute makes

a button unclickable. Note that <a> elements do not support the disabled attribute and
must therefore use the .disabled class to make it visually appear disabled.
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Button States</h2>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
</div>
</body>
</html>
Bootstrap 4 Button Groups

Button Groups
Bootstrap 4 allows you to group a series of buttons together (on a single line) in a
button group:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Button Group</h2>
<p>The .btn-group class creates a button group:</p>
<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>
</div>
</body>
</html>
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:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Button Groups Sizes</h2>
<p>Add class .btn-group-* to size all buttons in a button group.</p>
<h3>Large Buttons:</h3>
<div class="btn-group btn-group-lg">

</div>
<h3>Default Buttons:</h3>
</div>
<h3>Small Buttons:</h3>
<div class="btn-group btn-group-sm">
</div>
</div>
</body>
</html>
Vertical Button Groups
Bootstrap 4 also supports vertical button groups:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Vertical Button Group</h2>
<p>Use the .btn-group-vertical class to create a vertical button group:</p>
<div class="btn-group-vertical">
</div>
</div>
</body>
</html>
Nesting Button Groups & Dropdown Menus

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Nesting Button Groups</h2>
<p>Nest button groups to create dropdown menus:</p>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
</div>
</body>
</html>
Split Button Dropdowns

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Split Buttons</h2>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-

toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
</div>
</body>
</html>
Vertical Button Group w/ Dropdown
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Vertical Button Group with Dropdown</h2>
<div class="btn-group-vertical">
<button type=”button” class=”btn btn-primary”>Apple</button>
<button type=”button “ class=”btn btn-primary”>Samsung</button>
Sony
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 Badges
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Badges are used to add additional information to any content. Use the .badgeclass
together with a contextual class (like .badge-secondary) within <span>elements to
create rectangular badges. Note that badges scale to match the size of the parent
element (if any):
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Badges</h2>
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
</div>
</body>
</html>
Badges
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Contextual Badges
Primary Secondary Success Danger Warning Info Light Dark
Use any of the contextual classes (.badge-*) to change the color of a badge:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Contextual Badges</h2>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
</div>
</body>
</html>
Contextual Badges
Primary Secondary Success Danger Warning Info Light Dark
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Pill Badges</h2>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>

<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
</div>
</body>
</html>
Badge inside an Element

An example of using a badge inside a button:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Badge inside a Button</h2>
<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light">4</span>
</button>
<button type="button" class="btn btn-danger">
Notifications <span class="badge badge-light">7</span>
</button>
</div>
</body>
</html>
Bootstrap 4 Progress Bars

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Basic Progress Bar</h2>
<p>To create a default progress bar, add a .progress class to a container element and add the progress-bar class
to its child element. Use the CSS width property to set the width of the progress bar:</p>
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Progress Bar Height</h2>
<p>The height of the progress bar is 1rem (16px) by default. Use the CSS height property to change the
height:</p>
<div class="progress" style="height:10px">
<div class="progress-bar" style="width:40%;height:10px"></div>
</div>
<br>
</div>
<br>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Progress Bar With Label</h2>
<div class="progress-bar" style="width:70%">70%</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Colored Progress Bars</h2>
<p>Use any of the contextual color classes to change the color of the progress bar:</p>

<div class="progress-bar" style="width:10%"></div>
</div><br>

<div class="progress-bar bg-success" style="width:20%"></div>
</div><br>


<div class="progress-bar bg-info" style="width:30%"></div>
</div><br>

<div class="progress-bar bg-warning" style="width:40%"></div>
</div><br>

<div class="progress-bar bg-danger" style="width:50%"></div>
</div><br>

<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div><br>

<div class="progress-bar bg-secondary" style="width:70%"></div>
</div><br>


<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div><br>

<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
</div>
</body>
</html>
Use the .progress-bar-striped class to add stripes to the progress bars:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Striped Progress Bars</h2>
<p>The .progress-bar-striped class adds stripes to the progress bars:</p>

<div class="progress-bar progress-bar-striped" style="width:30%"></div>
</div>
<br>
<div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
</div>
<br>
<div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
</div>
<br>
<div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
</div>
<br>
<div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Animated Progress Bar</h2>

<p>Add the .progress-bar-animated class to animate the progress bar:</p>
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Multiple Progress Bars</h2>
<p>Create a stacked progress bar by placing multiple bars into the same div with class="progress":</p>
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 Pagination
If you have a web site with lots of pages, you may wish to add some sort of pagination
to each page.
Previous 1 2 3 Next
To create a basic pagination, add the .pagination class to an <ul> element. Then add

the .page-item to each <li> element and a .page-link class to each link inside <li>:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Pagination</h2>
<p>To create a basic pagination, add the .pagination class to an ul element. Then add the .page-item to each li
element and a .page-link class to each link inside li:</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
</body>
</html>
Pagination
To create a basic pagination, add the .pagination class to an ul element. Then add the .page-
item to each li element and a .page-link class to each link inside li:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Pagination - Active State</h2>
<p>Add class .active to let the user know which page he/she is on:</p>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Pagination - Disabled State</h2>
<p>Add class .disabled if a page for some reason is disabled:</p>
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Pagination - Sizing</h2>
<p>Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.</p>
<p>Large:</p>
<ul class="pagination pagination-lg">
</ul>
<p>Default:</p>
</ul>
<p>Small:</p>
<ul class="pagination pagination-sm">

</ul>
</div>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Breadcrumbs</h2>
<p>The .breadcrumb class indicates the current page's location within a navigational hierarchy:</p>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
</div>
</body>
</html>
Bootstrap 4 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
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Basic List Group</h2>
<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>
</div>
</body>
</html>
Basic List Group
First item
Second item
Third item
Active State
Active item
Second item
Third item
Use the .active class to highlight the current item:
Example
<!DOCTYPE html>
<html lang="en">
<head>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></s
cript>
</head>
<body>
<h2>Active Item in a List Group</h2>
<li class="list-group-item active">Active item</li>
</ul>
</div>
</body>
</html>
Active Item in a List Group
Active item
Second item
Third item
To disable an item, add the .disabled class:
Example
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h2>List Group With a Disabled Item</h2>
<li class="list-group-item disabled">Disabled item</li>
</ul>
</div>
</body>
</html>
List Group With Linked Items
First item
Second item
Third item
To create a list group with linked items, use <div> instead of <ul> and <a>instead

of <li>. Also add the .list-group-item-action class if you want a grey background
color on hover:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>List Group With Linked Items</h2>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">First item</a>

<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
</div>
</body>
</html>
List Group With Linked Items

First item
Second item
Third item
Contextual Classes
Contextual classes can be used to color list items:
 Success item
 Secondary item
 Info item
 Warning item
 Danger item
 Primary item
 Dark item
 Light item
The classes for coloring list-items are: .list-group-item-success, list-group-
item-secondary, list-group-item-info, list-group-item-warning, .list-group-
item-danger, list-group-item-dark and list-group-item-light,:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>List Group With Contextual Classes</h2>
<li class="list-group-item list-group-item-success">Success item</li>
<li class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li class="list-group-item list-group-item-light">Light item</li>
</ul>
</div>
</body>
</html>
List Group With Contextual Classes
 Success item
 Secondary item
 Info item
 Warning item
 Danger item
 Primary item
 Dark item
 Light item
Link items with Contextual Classes
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Linked Items With Contextual Classes</h2>
<p>Move the mouse over the linked items to see the hover effect:</p>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Action item</a>
<a href="#" class="list-group-item list-group-item-success">Success item</a>
<a href="#" class="list-group-item list-group-item-secondary">Secondary item</a>
<a href="#" class="list-group-item list-group-item-info">Info item</a>
<a href="#" class="list-group-item list-group-item-warning">Warning item</a>
<a href="#" class="list-group-item list-group-item-danger">Danger item</a>
<a href="#" class="list-group-item list-group-item-primary">Primary item</a>
<a href="#" class="list-group-item list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-light">Light item</a>
</div>
</div>
</body>
</html>
Bootstrap 4 Cards
Cards
A card in Bootstrap 4 is a bordered box with some padding around its content. It
includes options for headers, footers, content, colors, etc.
Basic Card
A basic card is created with the .card class, and content inside the card has a .card-
body class:
Basic card
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
</head>
<body>
<h2>Basic Card</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
</div>
</body>
</html>
Basic Card
Basic card
The .card-header class adds a heading to the card and the .card-footer class adds a
footer to the card:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Card Header and Footer</h2>

<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
</body>
</html>
Contextual Cards
To add a background color the card, use contextual classes (.bg-primary, .bg-
success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkand .bg-
light.
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Panels with Contextual Classes</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
<br>
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
<br>
<div class="card bg-success text-white">
<div class="card-body">Success card</div>
</div>
<br>
<div class="card bg-info text-white">
<div class="card-body">Info card</div>

</div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">Warning card</div>
</div>
<br>
<div class="card bg-danger text-white">
<div class="card-body">Danger card</div>
</div>
<br>
<div class="card bg-secondary text-white">
<div class="card-body">Secondary card</div>
</div>
<br>
<div class="card bg-dark text-white">
<div class="card-body">Dark card</div>
</div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">Light card</div>
</div>
</div>
</body>
</html>
Titles, text, and links
Card title
Some example text. Some example text.
Card link Another link
Use .card-title to add card titles to any heading element. The .card-textclass is

used to remove bottom margins for a <p> element if it is the last child in the card-
block. The .card-link class adds a blue color to any link, and a hover effect.
Example
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h2>Card titles, text, and links</h2>
<p>Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom
margins for a p element if it is the last child in the card-body. The .card-link class adds a blue color to any link, and
a hover effect.</p>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</body>
</html>
Card titles, text, and links

Use .card-title to add card titles to any heading element. The .card-text class is used to remove
bottom margins for a p element if it is the last child in the card-body. The .card-link class adds a
blue color to any link, and a hover effect.
Card title
Some example text. Some example text.
Card link Another link
Card Images
Add .card-image-top or .card-image-bottom to an <img> to place it at the top or at

the bottom inside the card. Note that we have added the image outside of the card-
block to span the entire width:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Card Image</h2>
<p>Image at the top (card-img-top):</p>
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
<br>
<p>Image at the bottom (card-img-top):</p>
<div class="card" style="width:400px">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p>
</div>
<img class="card-img-bottom" src="img_avatar6.png" alt="Card image" style="width:100%">
</div>
</div>
</body>
</html>
Card Image
Image at the top (card-img-top):
Image at the bottom (card-img-top):
Card Image Overlays
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Card Image Overlay</h2>
<p>Turn an image into a card background and use .card-img-overlay to overlay the card's text:</p>
<div class="card img-fluid" style="width:500px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. Some example text some example text. Some
example text some example text. Some example text some example text.</p>
</div>
</div>
</div>
</body>
</html>
Card Image Overlay

Turn an image into a card background and use .card-img-overlay to overlay the card's text:
Bootstrap 4 Dropdowns
Basic Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value from
a predefined list:
Dropdown button
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-
toggle="dropdown".</p>
<div class="dropdown">
Dropdown button
</button>
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
</div>
</body>
</html>
Dropdown Divider
The .dropdown-divider class is used to separate links inside the dropdown menu with
a thin horizontal border:
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Dropdowns</h2>
<p>The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal
line:</p>
Dropdown button
</button>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
</div>
</body>
</html>
Dropdown Header
The .dropdown-header class is used to add headers inside the dropdown menu:
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Dropdowns</h2>
<p>The .dropdown-header class is used to add headers inside the dropdown menu:</p>
Dropdown button
</button>
<h5 class="dropdown-header">Dropdown header</h5>

<h5 class="dropdown-header">Dropdown header</h5>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
</div>
</body>
</html>
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):
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Dropdowns</h2>
<p>The .active class adds a blue background color to the active link.</p>
<p>The .disabled class disables a dropdown item (grey text color and a no-parking-sign on hover).</p>
Dropdown button
</button>
<a class="dropdown-item" href="#">Normal</a>

<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
</div>
</div>
</div>
</body>
</html>
Dropdown Position
To right-align the dropdown, add the .dropdown-menu-right class to the element with
.dropdown-menu:
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Dropdowns</h2>
<p>Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu:</p>
Dropdown button
</button>
<div class="dropdown-menu dropdown-menu-right">
</div>
</div>
</div>
</body>
</html>
Dropup
If you want the dropdown menu to expand upwards instead of downwards, change the
<div> element with class="dropdown" to "dropup":
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br>
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
<div class="dropup">
Dropdown button
</button>
</div>
</div>
</div>
</body>
</html>
Split Button Dropdowns
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Dropdown Split Buttons</h2>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-

toggle="dropdown">
</button>

</div>
</div>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-

toggle="dropdown">
</button>
</div>
</div>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-

toggle="dropdown">
</button>
</div>
</div>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
</div>
</div>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-

toggle="dropdown">
</button>
</div>
</div>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-

toggle="dropdown">
</button>
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 Collapse
Basic Collapsible
Collapsibles are useful when you want to hide and show large amount of content:
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple

collapsible</button>
<div id="demo" class="collapse">
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>
</body>
</html>
Example Explained
The .collapse class indicates a collapsible element (a <div> in our example); this is
the content that will be shown or hidden with a click of a button.
To control (show/hide) the collapsible content, add the data-

toggle="collapse"attribute to an <a> or a <button> element. Then add the data-
target="#id"attribute to connect the button with the collapsible content (<div
id="demo">).
Note: For <a> elements, you can use the href attribute instead of the data-

target attribute:
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#demo" class="btn btn-primary" data-toggle="collapse">Simple collapsible</a>
<div id="demo" class="collapse">
</div>
</div>
</body>
</html>
By default, the collapsible content is hidden. However, you can add the .show class to
show the content by default:
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple

collapsible</button>
<div id="demo" class="collapse show">
</div>
</div>
</body>
</html>
Accordion
The following example shows a simple accordion by extending the card component.
Note: Use the data-parent attribute to make sure that all collapsible elements under

the specified parent will be closed when one of the collapsible item is shown.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible

elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show">
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>
<div class="card">
<a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
</a>
</div>
<div id="collapseTwo" class="collapse">
commodo consequat.
</div>
</div>
</div>
<div class="card">
<a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
</a>
</div>
<div id="collapseThree" class="collapse">
commodo consequat.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 Navs
Nav Menus
If you want to create a simple horizontal menu, add the .nav class to a <ul>element,
followed by .nav-item for each <li> and add the .nav-link class to their links:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Nav</h2>
<p>Basic horizontal menu:</p>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</li>
</li>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</body>
</html>
Nav
Basic horizontal menu:
Link Link Link Disabled
Aligned Nav
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h2>Nav</h2>
<p>Left-aligned nav (default):</p>

<ul class="nav">
</li>
</li>
</li>
</li>
</ul>
<p class="text-center">Centered nav:</p>
<ul class="nav justify-content-center">
</li>
</li>
</li>
</li>
</ul>
<p class="text-right">Right-aligned nav:</p>
<ul class="nav justify-content-end">
</li>
</li>
</li>
</li>
</ul>
</div>
</body>
</html>
Nav
Left-aligned nav (default):
Centered nav:
Right-aligned nav:
Vertical Nav
Add the .flex-column class to create a vertical nav:
Example
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h2>Vertical Nav</h2>
<p>Use the .flex-column class to create a vertical nav:</p>
<ul class="nav flex-column">
</li>
</li>
</li>
</li>
</ul>
</div>
</body>
</html>
Vertical Nav
Use the .flex-column class to create a vertical nav:
Link
Link
Link
Disabled
Tabs
Turn the nav menu into navigation tabs with the .nav-tabs class. Add the active class
to the active/current link. If you want the tabs to be togglable, see the last example on
this page.
Example
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h2>Tabs</h2>
<p>Navigation tabs:</p>
<ul class="nav nav-tabs">
<a class="nav-link active" href="#">Active</a>
</li>
</li>
</li>

</li>
</ul>
</div>
</body>
</html>
Tabs
Navigation tabs:
Pills
Turn the nav menu into navigation pills with the .nav-pills class. If you want the pills
to be togglable, see the last example on this page.
Example
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h2>Pills</h2>
<p>Navigation pills:</p>
<ul class="nav nav-pills">
</li>
</li>
</li>
</li>
</ul>
</div>
</body>
</html>
Pills
Navigation pills:
Active Link Link Disabled
Justified Tabs/pills
Justify the tabs/pills with the .nav-justified class (equal width):
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Justified Tabs/Pills</h2>
<p>To justify tabs/pills (equal width), use the .nav-justified class:</p>

<ul class="nav nav-pills nav-justified">
</li>
</li>
</li>
</li>
</ul><br>
<p>Justified tabs:</p>
<ul class="nav nav-tabs nav-justified">
</li>
</li>

</li>
</li>
</ul>
</div>
</body>
</html>
Pills with Dropdown

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h2>Pills with Dropdown</h2>
<ul class="nav nav-pills">
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<a class="dropdown-item" href="#">Link 3</a></div>
</li>
</li>

</li>
</ul>
</div>
</body>
</html>
Tabs with Dropdown

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Tabs with Dropdown</h2>
<ul class="nav nav-tabs">
</li>
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<a class="dropdown-item" href="#">Link 3</a></div>
</li>
</li>
</li>
</ul>
</div>
</body>
</html>
Bootstrap 4 Navigation Bar

Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page:
Basic Navbar
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with the .navbar class, followed by a responsive

collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra
large, large, medium or small screens).
To add links inside the navbar, use a <ul> element with class="navbar-nav". Then

add <li> elements with a .nav-item class followed by an <a> element with a .nav-
link class:
Link 1 Link 2 Link 3
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<a class="nav-link" href="#">Link 1</a>
</li>
</li>
</li>
</ul>
</nav>
<br>
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
<p>The navbar-expand-xl|lg|md|sm class determines when the navbar should stack vertically (on extra large,
large, medium or small screens).</p>
</div>
</body>
</html>
Basic Navbar Example

A navigation bar is a navigation header that is placed at the top of the page.
The navbar-expand-xl|lg|md|sm class determines when the navbar should stack vertically (on
extra large, large, medium or small screens).
Vertical Navbar
Remove the .navbar-expand-xl|lg|md|sm class to create a vertical navigation bar:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav class="navbar bg-light">
</li>
</li>
</li>
</ul>
</nav>
<br>
<h3>Vertical Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
Link 1
Link 2
Link 3
Vertical Navbar Example

A navigation bar is a navigation header that is placed at the top of the page.
Colored Navbar
Use any of the .bg-color classes to change the background color of the navbar (.bg-
primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-
dark and .bg-light)
Tip: Add a white text color to all links in the navbar with the .navbar-dark class, or

use the .navbar-light class to add a black text color.
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h3>Colored Navbar</h3>
<p>Use any of the .bg-color classes to add a background color to the navbar.</p>
<p>Tip: Add a white text color to all links in the navbar with the .navbar-dark class, or use the .navbar-light class
to add a black text color.</p>
</div>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
</li>
</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
</li>
</li>
</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
</li>
</li>
</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
</li>
</li>
</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
</li>
</li>
</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
</li>

</li>
</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
</li>
</li>
</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
</li>
</li>
</li>
</li>
</ul>
</nav>
</body>
</html>
Colored Navbar
Use any of the .bg-color classes to add a background color to the navbar.
Tip: Add a white text color to all links in the navbar with the .navbar-dark class, or use the
.navbar-light class to add a black text color.
When using the .navbar-brand class on images, Bootstrap 4 will automatically style
the image to fit the navbar.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<a class="navbar-brand" href="#">
<img src="bird.jpg" alt="logo" style="width:40px;">
</a>

</li>
</li>
</li>
</ul>
</nav>
<h3>Brand / Logo</h3>
<p>When using the .navbar-brand class on images, Bootstrap 4 will automatically style the image to fit the
navbar.</p>
</div>
</body>
</html>
Collapsing The Navigation Bar

Very often, especially on small screens, you want to hide the navigation links and
replace them with a button that should reveal them when clicked on.
To create a collapsible navigation bar, use a button with class="navbar-toggle",

data-toggle="collapse" and data-target="#thetarget". Then wrap the navbar
content (links, etc) inside a div element with class="collapse navbar-collapse",
followed by an id that matches the data-target of the button: "thetarget".
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
</li>
</li>
</li>
</ul>
</div>
</nav>
<br>
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right
corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler
button.</p>
</div>
</body>
</html>
Navbar With Dropdown

Navbars can also hold dropdown menus:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<a class="navbar-brand" href="#">Logo</a>

</li>
</li>

<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">

Dropdown link
</a>
</div>
</li>
</ul>
</nav>
<br>
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the navbar.</p>
</div>
</body>
</html>
Navbar Forms and Buttons
Add a <form> element with class="form-inline" to group inputs and buttons side-
by-side:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<form class="form-inline" action="/action_page.php">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
<br>
<h3>Navbar Forms</h3>
<p>Use the .form-inline class to align form elements side by side inside the navbar.</p>
</div>
</body>
</html>
You can also use other input classes, such as .input-group-addon to attach an icon or
help text next to the input field. You will learn more about these classes in the
Bootstrap Inputs chapter.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<form class="form-inline">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
</form>
</nav>
<br>
<h3>Navbar Forms</h3>
<p>Use the .form-inline class to align form elements side by side inside the navbar.</p>
</div>
</body>
</html>
Navbar Text
Use the .navbar-text class to vertical align any elements inside the navbar that are
not links (ensures proper padding and text color).
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

</li>
</li>
</ul>

<span class="navbar-text">
Navbar text
</span>
</nav>
<br>
<h3>Navbar Text</h3>
<p>Use the .navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper
padding).</p>
</div>
</body>
</html>
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 .fixed-top class makes the navigation bar fixed at the top:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="height:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
</li>
</li>
</ul>
</nav>
<div class="container-fluid" style="margin-top:80px">
<h3>Top Fixed Navbar</h3>
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
<h1>Scroll this page to see the effect</h1>
</div>
</body>
</html>
Use the .fixed-bottom class to make the navbar stay at the bottom of the page:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
</nav>
<div class="container-fluid"><br>
<h3>Bottom Fixed Navbar</h3>
</div>
</body>
</html>
se the .sticky-top class to make the navbar fixed/stay at the top of the page when
you scroll past it. Note: This class does not work in IE11 and earlier (will treat it
as position:relative).
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<br>
<h3>Sticky Navbar</h3>
<p>A sticky navigation bar stays fixed at the top of the page when you scroll past it.</p>
<p>Scroll this page to see the effect. <strong>Note:</strong> sticky-top does not work in IE11 and earlier.</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
</li>
</li>
</ul>
</nav>
<div class="container-fluid"><br>
<p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
</div>
</body>
</html>
Bootstrap 4 Forms
Bootstrap 4'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 4 Form Layouts

Bootstrap provides two types of form layouts:
 Stacked (full-width) form

 Inline form
The following example creates a stacked form with two input fields, one checkbox, and
a submit button:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Stacked form</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Bootstrap Inline Form

In an inline form, all of the elements are inline and left-aligned.
Note: This only applies to forms within viewports that are at least 576px
wide. On screens smaller than 576px, it will stack horizontally.
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
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Inline form</h2>
<p>Make the viewport larger than 576px wide to see that all of the form elements are inline and left-aligned. On
small screens, the form groups will stack horizontally.</p>
<form class="form-inline" action="/action_page.php">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Bootstrap 4 Form Inputs

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!
The following example contains two input elements; one of type text and one of type
password:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Form control: input</h2>
<p>The form below contains two input elements; one of type text and one of type password:</p>
<form>
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<input type="password" class="form-control" id="pwd">

</div>
</form>
</div>
</body>
</html>
Bootstrap Textarea
The following example contains a textarea:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Form control: textarea</h2>
<p>The form below contains a textarea for comments:</p>
<form>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</form>
</div>
</body>
</html>
Bootstrap Checkboxes
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
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Form control: checkbox</h2>
<p>The form below contains three checkboxes. The last option is disabled:</p>
<form>
<input type="checkbox" class="form-check-input" value="">Option 1

</label>
</div>
</label>
</div>
<div class="form-check disabled">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
</form>
</div>
</body>
</html>
Form control: checkbox

The form below contains three checkboxes. The last option is disabled:
Option 1
Option 2
Option 3
Use the .form-check-inline class if you want the checkboxes to appear on the same

line:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Form control: inline checkbox</h2>
<p>The form below contains three inline checkboxes:</p>
<form>
<div class="form-check form-check-inline">
</label>
</div>
</label>
</div>
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
</form>
</div>
</body>
</html>
Form control: inline checkbox

The form below contains three inline checkboxes:
Option 1 Option 2 Option 3
Bootstrap Radio Buttons

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:
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h2>Form control: radio buttons</h2>
<p>The form below contains three radio buttons. The last option is disabled:</p>
<form>
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
</form>
</div>
</body>
</html>
Form control: radio buttons
The form below contains three radio buttons. The last option is disabled:
Option 1
Option 2
Option 3
Use the .radio-inline class if you want the radio buttons to appear on the same line:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio">Option 1

</label>
</label>
</label>
</form>
</div>
</body>
</html>
Form control: inline radio buttons

The form below contains three inline radio buttons:
Option 1 Option 2 Option 3
Bootstrap Select List

Select 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
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Form control: select</h2>
<p>The form below contains two dropdown menus (select lists):</p>
<form>
<label for="sel1">Select list (select one):</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
<label for="sel2">Mutiple select list (hold shift to select more than one):</label>
<select multiple class="form-control" id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</div>
</body>
</html>
Bootstrap 4 Carousel
Bootstrap 4 Carousel
The Carousel is a slideshow for cycling through elements.
How To Create a Carousel
The following example shows how to create a basic carousel with indicators and
controls:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">


<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
</ul>

<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<img src="ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>

<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
Add Captions to Slides

Add elements inside <div class="carousel-caption"> within each <div
class="carousel-item"> to create a caption for each slide:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" width="1100" height="500">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<img src="chicago.jpg" alt="Chicago" width="1100" height="500">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<img src="ny.jpg" alt="New York" width="1100" height="500">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
Bootstrap 4 Modal
Bootstrap 4 Modal
The Modal component is a dialog box/popup window that is displayed on top of the
current page:
How To Create a Modal

The following example shows how to create a basic modal:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Modal Example</h2>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>

<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>

</div>

<div class="modal-body">
Modal body..
</div>

<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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 <div> element with class .modal-dialog:
Small Modal
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Small Modal</h2>
Open modal
</button>

<div class="modal-dialog modal-sm">
</div>

Modal body..
</div>

</div>
</div>
</div>
</div>
</div>
</body>
</html>
Large Modal
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Large Modal</h2>
Open modal
</button>

<div class="modal-dialog modal-lg">
</div>

Modal body..
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 Tooltip
Bootstrap 4 Tooltip
The Tooltip component is small pop-up box that appears when the user moves the
mouse pointer over an element:
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
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h3>Tooltip Example</h3>
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Positioning Tooltips
By default, the tooltip will appear on top of the element.
Use the data-placement attribute to set the position of the tooltip on top, bottom, left
or the right side of the element:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a>
</div>
<script>
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Bootstrap 4 Popover
Bootstrap 4 Popover
The Popover component 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.
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:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content

inside the popover">Toggle popover</a>
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
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h3>Popover Example</h3>
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the

popover">Toggle popover</a>
</div>
<script>
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
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
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-

content="Content">Bottom</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Left</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Right</a>
</div>
<script>
});
</script>
</body>
</html>
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
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click

anywhere in the document to close this popover">Click me</a>
</div>
<script>
});
</script>
</body>
</html>
Bootstrap 4 Scrollspy (Advanced)
Bootstrap 4 Scrollspy
Scrollspy is used to automatically update links in a navigation list based
on scrollposition.
How To Create a Scrollspy

The following example shows how to create a scrollspy:
Example
<!DOCTYPE html>
<html lang="en">
<head>

<style>
body {
position: relative;
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<a class="nav-link" href="#section1">Section 1</a>
</li>
</li>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Section 4
</a>
<a class="dropdown-item" href="#section41">Link 1</a>
</div>
</li>
</ul>
</nav>
<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
<h1>Section 2</h1>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
<h1>Section 3</h1>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 1</h1>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 2</h1>
</div>
</body>
</html>
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 (.navbar). 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 (<div id="section1"> matches <a href="#section1">).
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.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
position: relative;
ul.nav-pills {
top: 20px;
position: fixed;
div.col-8 div {
height: 500px;
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
</li>
</li>
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a>
</div>
</li>
</ul>
</nav>
<div class="col-sm-9 col-8">
<div id="section1" class="bg-success">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section2" class="bg-warning">
<h1>Section 2</h1>
</div>
<div id="section3" class="bg-secondary">
<h1>Section 3</h1>
</div>
<div id="section41" class="bg-danger">
<h1>Section 4-1</h1>
</div>
<div id="section42" class="bg-info">
<h1>Section 4-2</h1>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 Utilities
Bootstrap 4 Utilities
Bootstrap 4 has alot of utility/helper classes to quickly style elements without using
any CSS code.
Borders
Use the border classes to add or remove borders from an element:
<!DOCTYPE html>
<html lang="en">
<head>

<style>
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
</style>
</head>
<body>
<h2>Borders</h2>
<p>Use the border classes to add or remove borders from an element:</p>
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
</div>
</body>
</html>
Border Color
Add a color to the border with any of the contextual border color classes:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
</style>
</head>
<body>
<h2>Borders</h2>
<p>Use a contextual border color to add a color to the border:</p>
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
</div>
</body>
</html>
Border Radius
Add rounded corners to an element with the rounded classes:
Example
Float
Float an element to the right with the .float-right class or to the left with .float-
left, and clear floats with the .clearfix class:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Float</h2>
<p>Float an element to the right with the .float-right class or to the left with .float-left, and clear floats with
the .clearfix class.</p>
<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>
</div>
</body>
</html>
Float
Float an element to the right with the .float-right class or to the left with .float-left, and clear
floats with the .clearfix class.
Float left Float right
Responsive Floats
Float an element to the left or to the right depending on screen width, with the
responsive float classes (.float-*-left|right - where *
is sm (>=576px), md(>=768px), lg (>=992px) or xl (>=1200px)):
Example
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h2>Responsive Floats</h2>
<p>Float an element to the left or to the right depending on screen width, with the responsive float
classes .float-*-left|right (where * is sm, md, lg or xl).</p>
<div class="clearfix">
<div class="float-sm-right">Float right on small screens or wider</div><br>
<div class="float-md-right">Float right on medium screens or wider</div><br>
<div class="float-lg-right">Float right on large screens or wider</div><br>
<div class="float-xl-right">Float right on extra large screens or wider</div><br>
<div class="float-none">Float none</div>
</div>
</div>
</body>
</html>
Responsive Floats
Float an element to the left or to the right depending on screen width, with the responsive float
classes .float-*-left|right (where * is sm, md, lg or xl).
Resize the browser window to see the effect.
Float right on small screens or wider
Float right on medium screens or wider
Float right on large screens or wider
Float right on extra large screens or wider
Float none
Center Align
Center an element with the .mx-auto class:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Horizontal Centering</h1>
<p>Center an element with the .mx-auto class:</p>
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
</div>
</body>
</html>
Width
Set the width of an element with the w-* classes (.w-25, .w-50, .w-75, .w-100, .mw-
100):
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Width Utilities</h1>
<p>Set the width of an element with the w-* classes:</p>
<div class="w-25 bg-warning">Width 25%</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
</div>
</body>
</html>
Height
Set the height of an element with the h-* classes ( .h-25, .h-50, .h-75, .h-100, .mh-
100):
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Height Utilities</h1>
<p>Set the height of an element with the w-* classes:</p>
<div style="height:200px;background-color:#ddd">
<div class="h-25 d-inline-block p-2 bg-warning">Height 25%</div>
<div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">Max Height 100%</div>
</div>
</div>
</body>
</html>
Spacing
Bootstrap 4 has a wide range of responsive margin and padding utility classes. They
work for all breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg(>=992px)
or xl (>=1200px)):
The classes are used in the format: {property}{sides}-

{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
Where property is one of:
 m - sets margin
 p - sets padding
Where sides is one of:
 t - sets margin-top or padding-top
 b - sets margin-bottom or padding-bottom
 l - sets margin-left or padding-left
 r - sets margin-right or padding-right
 x - sets both padding-left and padding-right or margin-left and margin-
right
 y - sets both padding-top and padding-bottom or margin-top and margin-
bottom
 blank - sets a margin or padding on all 4 sides of the element
Where size is one of:
 0 - sets margin or padding to 0
 1 - sets margin or padding to .25rem (4px if font-size is 16px)
 2 - sets margin or padding to .5rem (8px if font-size is 16px)
 3 - sets margin or padding to 1rem (16px if font-size is 16px)
 4 - sets margin or padding to 1.5rem (24px if font-size is 16px)
 5 - sets margin or padding to 3rem (48px if font-size is 16px)
 auto - sets margin to auto
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Spacing Utilities</h1>
<p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you
want the padding or margin to work on all screen sizes.</p>
<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div>

<div class="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px) and a bottom padding (3rem =
48px)</div>
</div>
</body>
</html>
Position
Use the .fixed-top class to make any element fixed/stay at the top of the page:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
</li>
</li>
</ul>
</nav>
<div class="container-fluid" style="margin-top:80px">
<h3>Top Fixed Navbar</h3>

</div>
</body>
</html>

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:
Grid System Rules

Some Bootstrap 4 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
 Column widths are in percentage, so they are always fluid and sized relative to
their parent element
 The biggest difference between Bootstrap 3 and Bootstrap 4 is that
Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox
is that grid columns without a specified width will automatically layout as equal
width columns. Example: Three elements with .col-sm will each automatically
be 33.33% wide from the small breakpoint and up. Tip: If you want to learn
more about Flexbox, you can read our CSS Flexbox Tutorial
Basic Structure of a Bootstrap 4 Grid

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Basic Grid Structure</h1>
<p>The first, second and third row will automatically stack on top of each other when the screen is less than
576px wide.</p>

<div class="row">
<div class="col-sm-6" style="background-color:yellow;">50%</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
<div class="col-sm-4" style="background-color:orange;">33.33%</div>
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
</div>
<br>

<div class="row">
<div class="col-sm" style="background-color:yellow;">25%</div>
<div class="col-sm" style="background-color:orange;">25%</div>
<div class="col-sm" style="background-color:yellow;">25%</div>
<div class="col-sm" style="background-color:orange;">25%</div>

</div>
<br>
<div class="row">
<div class="col" style="background-color:yellow;">25%</div>
<div class="col" style="background-color:orange;">25%</div>
<div class="col" style="background-color:yellow;">25%</div>
<div class="col" style="background-color:orange;">25%</div>
</div>
</div>
</div>
</body>
</html>
Grid Options
The following table summarizes how the Bootstrap 4 grid system works across different
screen sizes:
Bootstrap 4 Grid Stacked-to-horizontal
Bootstrap 4 Grid Example: Stacked-to-horizontal
We will create a basic grid system that starts out stacked on extra small devices,
before becoming horizontal on larger 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%):
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Grid Example</h1>
<p>This example demonstrates a 50%/50% split on small, medium, large and xlarge devices. On extra small
devices, it will stack (100% width).</p>
<div class="row">
<div class="col-sm-6 bg-success">
dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<div class="col-sm-6 bg-warning">
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.
</div>
</div>
</div>
</div>
</body>
</html>
Tip: You can turn any fixed-width layout into a full-width layout by changing
the .container class to .container-fluid:
Example: Fluid container

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Grid Example</h1>
<div class="row">
consequat.
</div>
rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
</div>
</div>
</div>
</div>
</body>
</html>
Auto Layout Columns
In Bootstrap 4, there is an easy way to create equal width columns for all devices: just
remove the number from .col-size-* and only use the .col-size class on a specified
number of col elements. Bootstrap will recognize how many columns there are, and
each column will get the same width. The size classes determines when the columns
should be responsive:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Auto Layout Columns</h1>
<p>In Bootstrap 4, there is an easy way to create equal width columns: just use the <code>.col-size</code> class
on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column
will get the same width.</p>
<p>Two columns: 50% width on all screens, except for extra small (100% width on screens less than
<strong>576px</strong> wide)</p>
<div class="row">
<div class="col-sm bg-success">1 of 2</div>
<div class="col-sm bg-warning">2 of 2</div>
</div>
</div>
<br>
<p>Four columns: 25% width on all screens, except for extra small (100% width on screens less than
<strong>576px</strong> wide)</p>
<div class="row">
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 Grid Extra Small

Extra Small Grid Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Extra Small Grid</h1>
<p>The following example will result in a 25%/75% split on all devices.</p>
<div class="row">
<div class="col-3 bg-success">
consequat.
</div>
<div class="col-9 bg-warning">
rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
</div>
</div>
</body>
</html>
For a 33.3%/66.6% split, you would use .col-4 and .col-8 (and for a 50%/50% split,
you would use .col-6 and .col-6):
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Extra Small Grid</h1>
<p>The following example will result in a 33.3%/66.6% split on all devices.</p>
<div class="row">
consequat.
</div>
</div>
</div>
</div>
<br>
<p>This example will result in a 50%/50% split on all devices.</p>
<div class="row">
consequat.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Auto Layout Columns
remove the number from .col-* and only use the .col class on a specified number
of col elements. Bootstrap will recognize how many columns there are, and each
column will get the same width:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Auto Layout Columns</h1>
<p>In Bootstrap 4, there is an easy way to create equal width columns for all devices: just use the
<code>.col</code> class on a specified number of col elements. Bootstrap will recognize how many columns
there are, and each column will get the same width.</p>
<div class="row">
<div class="col bg-success">1 of 2</div>
<div class="col bg-warning">2 of 2</div>

</div>
</div>
<br>
<div class="row">
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 Grid Small
Small Grid Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Small Grid</h1>
<p>The following example will result in a 25%/75% split on small, medium, large and xlarge devices
(<strong>576px and above</strong>). On extra small devices, it will stack (100% width).</p>
<div class="row">
consequat.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
For a 33.3%/66.6% split, you would use .col-sm-4 and .col-sm-8 (and for a

50%/50% split, you would use .col-sm-6 and .col-sm-6):
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Small Grid</h1>
<p>The following example will result in a 33.3%/66.6% split on small, medium, large and xlarge devices
(<strong>576px and above</strong>). On extra small devices, it will stack (100% width).</p>
<div class="row">
consequat.
</div>

</div>
</div>
</div>
<br>
<p>This example will result in a 50%/50% split on small, medium, large and xlarge devices (<strong>576px and
above</strong>). On extra small devices, it will stack (100% width).</p>
<div class="row">
consequat.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Auto Layout Columns
remove the number from .col-sm-* and only use the .col-sm class on a specified
each column will get the same width.
If the screen size is less than 576px, the columns will stack horizontally:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Responsive Auto Layout Columns</h1>
<p>In Bootstrap 4, there is an easy way to create equal width columns: just use the <code>.col-sm</code> class
<p>On extra small screens (<strong>less than 576px</strong>), the columns will stack horizontally.</p>
<div class="row">
</div>
</div>
<br>
<div class="row">
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 Grid Medium
Medium Grid Example
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Medium Grid</h1>
<p>The following example will result in a 25%/75% split on small devices and a 50%/50% split on medium (and
large and xlarge) devices. On extra small devices, it will automatically stack (100%).</p>
<div class="row">
<div class="col-sm-3 col-md-6 bg-success">
consequat.
</div>
<div class="col-sm-9 col-md-6 bg-warning">
</div>
</div>
</div>
</div>
</body>
</html>
Using Only Medium

In the example below, we only specify the .col-md-6 class (without .col-sm-*). This
means that medium, large and extra large devices will split 50%/50% - because the
class scales up. However, for small and extra small devices, it will stack vertically
(100% width):
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Medium Grid</h1>
<p>The following example will result in a 50%/50% split on medium, large and xlarge devices (<strong>768px
and above</strong>). On small (and extra small) devices, it will automatically stack (100%).</p>
<div class="row">
<div class="col-md-6 bg-success">
consequat.
</div>
<div class="col-md-6 bg-warning">
</div>
</div>
</div>
</div>
</body>
</html>
Auto Layout Columns
remove the number from .col-md-* and only use the .col-md class on a specified
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>In Bootstrap 4, there is an easy way to create equal width columns: just use the <code>.col-md</code> class
<p>If the screen size is <strong>less than 768px</strong>, the columns will stack horizontally.</p>
<div class="row">
<div class="col-md bg-success">1 of 2</div>
<div class="col-md bg-warning">2 of 2</div>
</div>
</div>
<br>
<div class="row">
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 Grid – Large
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
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 992 pixels to 1199
pixels.
For large devices we will use the .col-lg-* classes:
<div class="col-sm-3 col-md-6 col-lg-4">....</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 and xlarge devices. On extra
small devices, it will automatically stack (100%):
Large Grid Example
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Large Grid</h1>
<p>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 and xlarge devices. On extra small devices, it will automatically stack (100%).</p>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 bg-success">
dolore magna aliqua.
consequat.
</div>
<div class="col-sm-9 col-md-6 col-lg-8 bg-warning">
</div>
</div>
</div>
</div>
</body>
</html>
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 and xlarge devices will split 50%/50%.
However, for medium, small AND extra small devices, it will stack vertically (100%
width):
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Large Grid</h1>
<p>The following example will result in a 50%/50% split on large and xlarge devices (<strong>992px and
above</strong>). On medium, small and extra small devices, it will automatically stack (100%).</p>
<div class="row">
<div class="col-lg-6 bg-success">
consequat.
</div>
<div class="col-lg-6 bg-warning">
</div>
</div>
</div>
</div>
</body>
</html>
Auto Layout Columns

remove the number from .col-lg-* and only use the .col-lg class on a specified
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>In Bootstrap 4, there is an easy way to create equal width columns: just use the <code>.col-lg</code> class
<div class="row">
<div class="col-lg bg-success">1 of 2</div>
<div class="col-lg bg-warning">2 of 2</div>
</div>
</div>
<br>
<div class="row">
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 Grid - Extra Large

XLarge Grid Example
But on xlarge devices the design may be better as a 20%/80% split.

Extra large devices are defined as having a screen width from 1200 pixels and
above.
For xlarge devices we will use the .col-xl-* classes:
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>

<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>
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 and a 20%/80% split on
xlarge devices. On extra small devices, it will automatically stack (100%):
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>XLarge Grid</h1>
<p>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 and a 20%/80% on xlarge devices. On extra small devices, it will
automatically stack (100%).</p>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success">
dolore magna aliqua.
consequat.
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning">
</div>
</div>
</div>
</div>
</body>
</html>
Using Only XLarge
In the example below, we only specify the .col-xl-6 class (without .col-lg-*, .col-
md-* and/or .col-sm-*). This means that xlarge devices will split 50%/50%. However,
for large, medium, small AND extra small devices, it will stack vertically (100% width):
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>XLarge Grid</h1>
<p>The following example will result in a 50%/50% split on xlarge devices (<strong>1200px and
above</strong>). On large, medium, small and extra small devices, it will automatically stack (100%).</p>
<div class="row">
<div class="col-xl-6 bg-success">

consequat.
</div>
<div class="col-xl-6 bg-warning">
</div>
</div>
</div>
</div>
</body>
</html>
Auto Layout Columns

remove the number from .col-xl-* and only use the .col-xl class on a specified
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>In Bootstrap 4, there is an easy way to create equal width columns: just use the <code>.col-xl</code> class
<div class="row">
<div class="col-xl bg-success">1 of 2</div>
<div class="col-xl bg-warning">2 of 2</div>
</div>
</div>
<br>
<div class="row">
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 Grid Examples

Three Equal Columns
Use the .col class on a specified number of elements and Bootstrap will recognize how
many elements there are (and create equal-width columns). In the example below, we
use three col elements, which gets a width of 33.33% each.
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Three Equal Columns</h2>
<p>Use the .col class on a specified number of elements and Bootstrap will recognize how many elements there
are (and create equal-width columns). In the example below, we use three col elements, which gets a width of
33.33% each.</p>
<div class="row">
<div class="col bg-success">.col</div>
<div class="col bg-warning">.col</div>

</div>
</div>
</body>
</html>
Three Equal Columns Using Numbers

You can also use numbers to control the column width. Just make sure that the sum
adds up to 12 or fewer (it is not required that you use all 12 available columns):
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Three Equal Columns</h2>
<p>You can also use numbers to control the column width. Just make sure that the sum always adds up to
12:</p>
<div class="row">
<div class="col-4 bg-success">.col-4</div>
<div class="col-4 bg-warning">.col-4</div>
</div>
</div>
</body>
</html>
Three Unequal columns

To create unequal columns, you have to use numbers. The following example will
create a 25%/50%/25% split:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Three Unequal Columns</h2>
<p>To create unequal columns, you have to use numbers. The following example will create a 25%/50%/25%
split:</p>
<div class="row">
</div>
</div>
</body>
</html>
Setting One Column Width

However, it is enough to only set the width of one column, and have the sibling
columns automatically resize around it. The following example will create a
25%/50%/25% split:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Three Unequal Columns</h2>
<p>It is enough to only set the width of one column, and have the sibling columns automatically resize around it.
The following example will create a 25%/50%/25% split:</p>
<div class="row">
</div>
</div>
</body>
</html>
More Equal Columns

Example
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h2>More Equal Columns</h2>
<div class="row">
</div>
<br>
<div class="row">
</div>
<br>
<div class="row">

</div>
</div>
</body>
</html>
More Unequal Columns

Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>More Unequal Columns</h2>
<div class="row">
<div class="col-8 bg-success">1 of 2</div>
<div class="col-4 bg-warning">2 of 2</div>
</div>
<br>
<div class="row">
</div>
<br>
<div class="row">
</div>
</div>
</body>
</html>
Equal Height
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Equal Height</h2>
<p>If one of the column is taller than the other, the rest will follow.</p>
</div>
<div class="row">
<div class="col bg-success">Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim
volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem
legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu
vel.</div>
<div class="col bg-warning">.col</div>
</div>
</div>
</body>
</html>
Nested Columns
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Nested Columns</h2>
<p>Add columns inside other columns:</p>
</div>
<div class="row">
.col-8
<div class="row">
<div class="col-6 bg-light">.col-6</div>
<div class="col-6 bg-secondary">.col-6</div>
</div>
</div>
</div>
</div>
</body>
</html>
Responsive Classes
The Bootstrap 4 grid system has five classes:
 .col- (extra small devices - screen width less than 576px)

 .col-sm- (small devices - screen width equal to or greater than 576px)
 .col-md- (medium devices - screen width equal to or greater than 768px)
 .col-lg- (large devices - screen width equal to or greater than 992px)
 .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
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 sm and md, you only
need to specify sm.
Stacked to Horizontal
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Stacked to Horizontal</h1>
<div class="row">
<div class="col-sm-9 bg-success">col-sm-9</div>
<div class="col-sm-3 bg-warning">col-sm-3</div>
</div>
</div>
<br>
<p>This example demonstrates a 33% split on small, medium, large and xlarge devices. On extra small devices, it
will stack (100% width).</p>
<div class="row">
<div class="col-sm bg-success">col-sm</div>
<div class="col-sm bg-warning">col-sm</div>
<div class="col-sm bg-success">col-sm</div>
</div>
</div>
</div>
</body>
</html>
Mix and Match

Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Mix and Match</h1>
<p>This example demonstrates a 50%/50% split on extra small devices and 75%/25% split on larger devices.</p>
<div class="row">
<div class="col-6 col-sm-9 bg-success">col-6 col-sm-9</div>
<div class="col-6 col-sm-3 bg-warning">col-6 col-sm-3</div>
</div>
</div>
<br>
<p>This example demonstrates a 58%/42% split on extra small, small and medium devices and 66.3%/33.3%
split on large and xlarge devices.</p>
<div class="row">
<div class="col-7 col-lg-8 bg-success">col-7 col-lg-8</div>
<div class="col-5 col-lg-4 bg-warning">col-5 col-lg-4</div>
</div>
</div>
<br>
<p>This example demonstrates a 25%/75% split on small devices, a 50%/50% split on medium devices, and a
33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%).</p>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 bg-success">col-sm-3 col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6 col-lg-8 bg-warning">col-sm-9 col-md-6 col-lg-8</div>
</div>
</div>
</div>
</body>
</html>

Bootstrap 4

Uploaded by

Copyright:

Available Formats

Bootstrap 4

Uploaded by

Document Information

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

Bootstrap 4

Uploaded by

Copyright:

Available Formats

Bootstrap 4

Try it Yourself Examples

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<div class="jumbotron text-center">

<h1>My First Bootstrap Page</h1>

<p>Resize this responsive page to see the effect!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

What is Responsive Web Design?

span 4 span 4 span 4

 .col- (extra small devices - screen width less than 576px)

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<div class="col" style="background-color:orange;">.col</div>

<div class="col" style="background-color:lavender;">.col</div>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<p>Resize the browser window to see the effect.</p>

<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>

<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>

<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>

<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<p>Resize the browser window to see the effect.</p>

<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>

<div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>

The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.

In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem(16px by

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<h1>h1 Bootstrap heading (2.5rem = 40px)</h1>

<h2>h2 Bootstrap heading (2rem = 32px)</h2>

<h3>h3 Bootstrap heading (1.75rem = 28px)</h3>

<h4>h4 Bootstrap heading (1.5rem = 24px)</h4>

<h5>h5 Bootstrap heading (1.25rem = 20px)</h5>

<h6>h6 Bootstrap heading (1rem = 16px)</h6>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<h1 class="display-1">Display 1</h1>

<h1 class="display-2">Display 2</h1>

<h1 class="display-3">Display 3</h1>

<h1 class="display-4">Display 4</h1>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<h1>Lighter, Secondary Text</h1>

<h1>h1 heading <small>secondary text</small></h1>

<h2>h2 heading <small>secondary text</small></h2>

<h3>h3 heading <small>secondary text</small></h3>

<h4>h4 heading <small>secondary text</small></h4>

<h5>h5 heading <small>secondary text</small></h5>

<h6>h6 heading <small>secondary text</small></h6>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<p>Use the mark element to <mark>highlight</mark> text.</p>