0% found this document useful (0 votes)

357 views444 pages

Bootstrap 4

Bootstrap is a popular free and open-source front-end framework for developing responsive, mobile-first websites and web applications. It contains HTML and CSS templates for common user interface elements like buttons, navigation, forms, and other interface components, as well as optional JavaScript extensions. Bootstrap is easy to use, mobile-friendly, and compatible with all major browsers.

Uploaded by

viru991

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

357 views444 pages

Bootstrap 4

Uploaded by

viru991

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 444

What is Bootstrap

 Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a responsive
and mobile friendly website.
 It is absolutely free to download and use.
 It is a front-end framework used for easier and faster web development.
 It includes HTML and CSS based design templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many others.
 It can also use JavaScript plug-ins.
 It facilitates you to create responsive designs.

History of Bootstrap
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter.It was released as an open source
product in August 2011 on GitHub.

In June 2014 Bootstrap was the No.1 project on GitHub.

Why use Bootstrap

Following are the main advantage of Bootstrap:

 It is very easy to use. Anybody having basic knowledge of HTML and CSS can use Bootstrap.
 It facilitates users to develop a responsive website.
 It is compatible on most of browsers like Chrome, Firefox, Internet Explorer, Safari and Opera etc.

What is a responsive website

A website is called responsive website which can automatically adjust itself to look good on all devices,
from smart phones to desktops etc.

What Bootstrap package contains

Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, and background.

CSS: Bootstrap comes with the feature of global CSS settings, fundamental HTML elements style and an
advanced grid system.

Components: Bootstrap contains a lot of reusable components built to provide iconography, dropdowns,
navigation, alerts, pop-overs, and much more.
JavaScript Plugins: Bootstrap also contains a lot of custom jQuery plugins. You can easily include them all,
or one by one.

Customize: Bootstrap components are customizable and you can customize Bootstrap's components, LESS
variables, and jQuery plugins to get your own style.

What is Bootstrap 4?
Bootstrap is the newest and latest version of Bootstrap. It is the most popular HTML, CSS, JavaScript
framework for developing responsive, mobile first websites.

Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 has some new components, faster stylesheet, more buttons, effects and more responsiveness.

Bootstrap 4 supports some the latest, stable releases of all major browsers and platforms.

Note: Internet Explorer 9 and down is not supported by Bootstrap 4. Although Internet Explorer 8-
9 supported Bootstrap 3. So, if you have Internet Explorer 8-9, you should use Bootstrap 3.
Bootstrap 3 is the most stable version of Bootstrap, and it is still supported by the team for
critical bugfixes and documentation changes.

Is Bootstrap Best?
Bootstrap is more than efficient to create a responsive and mobile first website but it is not the best in the
industry. There is an alternative of Bootstrap named W3.CSS which is smaller, faster, and easier to use.

Bootstrap 4 Tutorial
Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and
JavaScript framework for developing responsive, mobile-first websites.

Bootstrap 4 is completely free to download and use!

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

<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>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>

</body>
</html>

Output
Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 is the newest version of Bootstrap; with new components, faster stylesheet and more
responsiveness.

Bootstrap 4 supports the latest, stable releases of all major browsers and platforms. However, Internet
Explorer 9 and down is not supported.

If you require IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap, and it is still
supported by the team for critical bugfixes and documentation changes. However, no new features will be
added to it.X

Droppped icon support: Bootstrap 4 does not support BS3 Glyphicons. Use Font-Awesome or other icon
libraries instead.X

Why Use Bootstrap?

Advantages of Bootstrap:

 Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
 Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
 Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework
 Browser compatibility: Bootstrap 4 is compatible with all modern browsers (Chrome, Firefox,
Internet Explorer 10+, Edge, Safari, and Opera)

Where to Get Bootstrap 4?

There are two ways to start using Bootstrap 4 on your own web site.

You can:

 Include Bootstrap 4 from a CDN

 Download Bootstrap 4 from getbootstrap.com

Bootstrap 4 CDN
If you don't want to download and host Bootstrap 4 yourself, you can include it from a CDN (Content
Delivery Network).
MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:

One advantage of using the Bootstrap 4 CDN:

Many users already have downloaded Bootstrap 4 from MaxCDN when visiting another site. As a
result, it will be loaded from cache when they visit your site, which leads to faster loading time.
Also, most CDN's will make sure that once a user requests a file from it, it will be served from the
server closest to them, which also leads to faster loading time.

jQuery and Popper?

Bootstrap 4 use jQuery and Popper.js for JavaScript components (like modals, tooltips, popovers
etc). However, if you just use the CSS part of Bootstrap, you don't need them.

 Closable alerts
 Buttons and checkboxes/radio buttons for toggling states
 Carousel for slides, controls, and indicators
 Collapse for toggling content
 Dropdowns (also requires Popper.js for perfect positioning)
 Modals (open and close)
 Navbar (for collapsible menus)
 Tooltips and popovers (also requires Popper.js for perfect positioning)
 Scrollspy for scroll behavior and navigation updates

First Bootstrap Example

Add the HTML 5 doctype: Bootstrap uses HTML elements and CSS properties, so you have to add the
HTML 5 doctype at the beginning of the page with lang attribute and correct character set.
Bootstrap is mobile friendly: Bootstrap 3 is designed to be responsive to mobile devices.

Mobile-first styles are part of the core framework of Bootstrap.You have to add the following <meta> tag
inside the <head> element for proper rendering and touch zooming:

Note: The "width=device-width" part is used to set the width of the page to follow the screen-
width of the device (vary according to the devices).

The initial-scale=1 part is used to set the initial zoom level when the page is first loaded by the
browser.

Containers: container is used to wrap the site contents. There are two container classes.

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

 The .container-fluid class provides a full width container, spanning the entire width of the
viewport.

Downloading Bootstrap 4
If you want to download and host Bootstrap 4 yourself, go to https://getbootstrap.com/, and follow the
instructions there.X

Create First Web Page With Bootstrap 4

1. Add the HTML5 doctype

Bootstrap 4 uses HTML elements and CSS properties that require the HTML5 doctype.

Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the
correct character set:
2. Bootstrap 4 is mobile-first

Bootstrap 4 is designed to be responsive to mobile devices. Mobile-first styles are part of the core
framework.

To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element:

The width=device-width part sets the width of the page to follow the screen-width of the device
(which will vary depending on the device).

The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

3. Containers

Bootstrap 4 also requires a containing element to wrap site contents.

There are two container classes to choose from:

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

2. The .container-fluid class provides a full width container, spanning the entire width of
the viewport

Two Basic Bootstrap 4 Pages

The following example shows the code for a basic Bootstrap 4 page (with a responsive fixed width
container):
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h1>My First Bootstrap Page</h1>

<p>This part is inside a .container class.</p>

<p>The .container class provides a responsive fixed width container.</p>

</div>

</body>

</html>

Output

The following example shows the code for a basic Bootstrap 4 page (with a full width container):

Output
Bootstrap 4 Containers

Containers
You learned from the previous chapter that Bootstrap requires a containing element to wrap site contents.

Containers are used to pad the content inside of them, and there are two container classes available:

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

2. The .container-fluid class provides a full width container, spanning the entire width of the
viewport

Fixed Container
Use the .container class to create a responsive, fixed-width container.

Note that its width (max-width) will change on different screen sizes:

Open the example below and resize the browser window to see that the container width will change
at different breakpoints:

Fluid Container
Use the .container-fluid class to create a full width container, that will always span the entire width of the
screen (width is always 100%):
Container Padding
By default, containers have 15px left and right padding, with no top or bottom padding. Therefore, we
often use spacing utilities, such as extra padding and margins to make them look even better. For example,
.pt-3 means "add a top padding of 16px":

Output

You will learn much more about spacing utilities, in our BS4 Utilities Chapter.X

Container Border and Color

Other utilities, such as borders and colors, are also often used together with containers:
Output
You will learn much more about colors and border utilities, in our BS4 Colors Chapter and BS4 Utilities
Chapter.X

Responsive Containers
You can also use the .container-sm|md|lg|xl classes to create responsive containers.

The max-width of the container will change on different screen sizes/viewports:

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

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)

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.

Basic Structure of a Bootstrap 4 Grid

The following is a basic structure of a Bootstrap 4 grid:
First example: create a row (<div class="row">). Then, add the desired number of columns (tags with
appropriate .col-*-* classes). The first star (*) represents the responsiveness: sm, md, lg or xl, while the
second star represents a number, which should add up to 12 for each row.

Second example: instead of adding a number to each col, let bootstrap handle the layout, to create equal
width columns: two "col" elements = 50% width to each col. three cols = 33.33% width to each col. four cols
= 25% width, etc. You can also use .col-sm|md|lg|xl to make the columns responsive.

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

Three Equal Columns

The following example shows how to create three equal-width columns, on all devices and screen widths:
Output

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:

Two Unequal Responsive Columns

Tip: You will learn more about Bootstrap 4 grids later in this tutorial.

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:

Output
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

Output

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

h1 heading secondary text

h2 heading secondary text
h3 heading secondary text

h4 heading secondary text

h5 heading secondary text

h6 heading secondary text

Full code

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

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

</div>

</body>

</html>

Output

<mark>
Bootstrap 4 will style the HTML <mark> element with a yellow background color and some padding:
Output

<abbr>
Bootstrap 4 will style the HTML <abbr> element with a dotted border bottom:

Output
<blockquote>
Add the .blockquote class to a <blockquote> when quoting blocks of content from another source:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h1>Blockquotes</h1>

<p>The blockquote element is used to present content from another source:</p>

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

Output

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

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<h1>Description Lists</h1>

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

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

</div>

</body>

</html>

Output

<code>
Bootstrap 4 will style the HTML <code> element in the following way:
Output

<kbd>
Bootstrap 4 will style the HTML <kbd> element in the following way:
Output

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

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

Output

More Typography Classes

The Bootstrap 4 classes below can be added to style HTML elements further:
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, .text-body (default body color/often black) and .text-light:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</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-body">Default body color (often black).</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>

Output
Contextual text classes can also be used on links, which will add a darker hover color:

You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

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.
Output
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:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Basic Table</h2>

<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>
</thead>

<tbody>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>Dooley</td>

<td>[email protected]</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Striped Rows
The .table-striped class adds zebra-stripes to a table:
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</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>[email protected]</td>

</tr>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>Dooley</td>

<td>[email protected]</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Bordered Table
The .table-bordered class adds borders on all sides of the table and cells:
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</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>[email protected]</td>

</tr>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>Dooley</td>

<td>[email protected]</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Hover Rows
The .table-hover class adds a hover effect (grey background color) on table rows:
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Hover Rows</h2>

<p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>

<table class="table table-hover">

<thead>

<tr>

<th>Firstname</th>
<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>Dooley</td>

<td>[email protected]</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>
Black/Dark Table
The .table-dark class adds a black background to the table:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>Dooley</td>

<td>[email protected]</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>
Dark Striped Table
Combine .table-dark and .table-striped to create a dark, striped table:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</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>[email protected]</td>

</tr>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>Dooley</td>

<td>[email protected]</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Hoverable Dark Table

The .table-hover class adds a hover effect (grey background color) on table rows:
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</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>[email protected]</td>

</tr>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>Dooley</td>

<td>[email protected]</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Borderless Table
The .table-borderless class removes borders from the table:
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Borderless Table</h2>

<p>The .table-borderless class removes borders from the table:</p>

<table class="table table-borderless">

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>
</thead>

<tbody>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>Dooley</td>

<td>[email protected]</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>).
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</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>
<table class="table">

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>Default</td>

<td>Defaultson</td>

<td>[email protected]</td>

</tr>

<td>Primary</td>

<td>[email protected]</td>

</tr>

<td>Success</td>

<td>[email protected]</td>

</tr>

<td>Danger</td>

<td>[email protected]</td>

</tr>
<tr class="table-info">

<td>Dooley</td>

<td>[email protected]</td>

</tr>

<td>Warning</td>

<td>[email protected]</td>

</tr>

<td>Active</td>

<td>Activeson</td>

<td>[email protected]</td>

</tr>

<td>Secondary</td>

<td>Secondson</td>

<td>[email protected]</td>

</tr>

<td>Light</td>

<td>Angie</td>

<td>[email protected]</td>

</tr>

<tr class="table-dark text-dark">

<td>[email protected]</td>
</tr>

</tbody>

</table>

</div>

</body>

</html>

The contextual classes that can be used are:

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>

<head>

<title>Bootstrap Example</title>

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

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

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

<tr>
<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>Dooley</td>

<td>[email protected]</td>

</tr>

</tbody>

</table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>
</tr>

</thead>

<tbody>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>Dooley</td>

<td>[email protected]</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Small table
The .table-sm class makes the table smaller by cutting cell padding in half:
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</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>[email protected]</td>

</tr>

<tr>

<td>[email protected]</td>

</tr>

<tr>

<td>Dooley</td>

<td>[email protected]</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

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:
<!DOCTYPE html>

<html>

<head>

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

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

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

<table class="table table-bordered">

<thead>

<th>Firstname</th>

<th>Lastname</th>

<th>Country</th>

<th>Example</th>

</tr>

</thead>

<tbody>

<tr>

<td>USA</td>
<td>Female</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

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

<html>

<head>

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

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

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

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

<table class="table table-bordered">

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Country</th>

<th>Example</th>

</tr>

</thead>

<tbody>

<tr>

<td>Female</td>

</tr>

</tbody>

</table>

</div>

</body>
</html>

Bootstrap 4 Images
Rounded Corners
The .rounded class adds rounded corners to an image:

<div class="container">
<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>

Circle
The .rounded-circle class shapes the image to a circle:
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<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):

<!DOCTYPE html>

<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.4.1/css/bootstrap.min.css">

</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>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

Centered Image
Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the
image:
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Centered Image</h2>

<p>Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the
image:</p>
<img src="paris.jpg" class="mx-auto d-block" style="width:50%">

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

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

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

Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.

Use a <div> element with class .jumbotron to create a jumbotron:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

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

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:
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

<p>This is some text.</p>

<p>This is another text.</p>

</div>

</body>

</html>

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:

Alert Links
Add the alert-link class to any links inside the alert box to create "matching colored links":
Closing Alerts

To close the alert message, add a .alert-dismissible 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).
Animated Alerts

The .fade and .show classes adds a fading effect when closing the alert message:

Bootstrap 4 Buttons

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</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>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

Output
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

<!DOCTYPE html>

<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.4.1/css/bootstrap.min.css">

</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>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</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-success btn-block">Button 2</button>

<br>

<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-success btn-lg btn-block">Button 2</button>

<br>

<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-success btn-sm btn-block">Button 2</button>

</div>

</body>

</html>

Ouput

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.
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

<!DOCTYPE html>

<html>

<head>
<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Spinner Buttons</h2>

<p>Add spinners to buttons:</p>

<button class="btn btn-primary">

<span class="spinner-border spinner-border-sm"></span>

</button>

<button class="btn btn-primary">

<span class="spinner-border spinner-border-sm"></span>

</button>

<button class="btn btn-primary" disabled>

<span class="spinner-border spinner-border-sm"></span>

</button>

<button class="btn btn-primary" disabled>

<span class="spinner-grow spinner-grow-sm"></span>

</button>

</div>

</body>

</html>

Bootstrap 4 Button Groups

Tip: Instead of applying button sizes to every button in a group, use class .btn-group-lg for a large button
group or the .btn-group-sm for a small button group:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Button Group</h2>

<p>The .btn-group class creates a button group:</p>

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

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

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

<h3>Default Buttons:</h3>

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

<h3>Small Buttons:</h3>

<div class="btn-group btn-group-sm">

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

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<h2>Nesting Button Groups</h2>

<p>Nest button groups to create dropdown menus:</p>

<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 dropdown-toggle" data-toggle="dropdown">

Sony

</button>

<a class="dropdown-item" href="#">Tablet</a>

<a class="dropdown-item" href="#">Smartphone</a>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Split Buttons</h2>

<button type="button" class="btn btn-primary">Sony</button>

</button>

<a class="dropdown-item" href="#">Tablet</a>

<a class="dropdown-item" href="#">Smartphone</a>

</div>

</body>

</html>

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

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Vertical Button Group with Dropdown</h2>

<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 dropdown-toggle" data-toggle="dropdown">

Sony

</button>

<a class="dropdown-item" href="#">Tablet</a>

<a class="dropdown-item" href="#">Smartphone</a>

</div>

</div>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Button Group</h2>
<p>Button groups are "inline" by default, which makes them appear side by side when you have multiple
groups:</p>

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

<button type="button" class="btn btn-primary">BMW</button>

<button type="button" class="btn btn-primary">Mercedes</button>

<button type="button" class="btn btn-primary">Volvo</button>

</div>

</body>

</html>

Badges are used to add additional information to any content. Use the .badge class 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):
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Badges</h2>

<h1>Example heading <span class="badge badge-secondary">New</span></h1>

<h2>Example heading <span class="badge badge-secondary">New</span></h2>

<h3>Example heading <span class="badge badge-secondary">New</span></h3>

<h4>Example heading <span class="badge badge-secondary">New</span></h4>

<h5>Example heading <span class="badge badge-secondary">New</span></h5>

<h6>Example heading <span class="badge badge-secondary">New</span></h6>

</div>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</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>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

Output

Bootstrap 4 Progress Bars

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:
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</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-bar" style="width:70%"></div>

</div>

</body>

</html>
The height of the progress bar is 16px by default. Use the CSS height property to change it. Note that you
must set the same height for the progress container and the progress bar:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</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 class="progress" style="height:20px">

<div class="progress-bar" style="width:50%;height:20px"></div>

</div>

<br>

<div class="progress" style="height:30px">

<div class="progress-bar" style="width:60%;height:30px"></div>

</div>

</body>

</html>

<!DOCTYPE html>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Progress Bar With Label</h2>

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

</div>

</body>

</html>
Example

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

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

<title>Bootstrap Example</title>

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

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

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

</body>

</html>
Bootstrap 4 Spinners

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Spinners</h2>

<p>To create a spinner/loader, use the <code>.spinner-border</code> class:</p>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

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

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

</head>
<body>

<h2>Colored Spinners</h2>

<p>Use any <strong>text color utilites</strong> to add a color to the spinner:</p>

<div class="spinner-border text-muted"></div>

<div class="spinner-border text-primary"></div>

<div class="spinner-border text-success"></div>

<div class="spinner-border text-info"></div>

<div class="spinner-border text-warning"></div>

<div class="spinner-border text-danger"></div>

<div class="spinner-border text-secondary"></div>

<div class="spinner-border text-dark"></div>

<div class="spinner-border text-light"></div>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Growing Spinners</h2>

<p>Use the <code>.spinner-grow</code> class if you want the spinner/loader to grow instead of
"spin":</p>
<div class="spinner-grow text-muted"></div>

<div class="spinner-grow text-primary"></div>

<div class="spinner-grow text-success"></div>

<div class="spinner-grow text-info"></div>

<div class="spinner-grow text-warning"></div>

<div class="spinner-grow text-danger"></div>

<div class="spinner-grow text-secondary"></div>

<div class="spinner-grow text-dark"></div>

<div class="spinner-grow text-light"></div>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

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

</head>

<body>

<h2>Spinner Size</h2>

<p>Use <code>.spinner-border-sm</code> or <code>.spinner-grow-sm</code> to create a smaller

spinner:</p>

<div class="spinner-border spinner-border-sm"></div>

<div class="spinner-grow spinner-grow-sm"></div>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<div class="container">
<h2>Spinner Buttons</h2>

<p>Add spinners to buttons:</p>

<button class="btn btn-primary">

<span class="spinner-border spinner-border-sm"></span>

</button>

<button class="btn btn-primary">

<span class="spinner-border spinner-border-sm"></span>

</button>

<button class="btn btn-primary" disabled>

<span class="spinner-border spinner-border-sm"></span>

</button>

<button class="btn btn-primary" disabled>

<span class="spinner-grow spinner-grow-sm"></span>

</button>

</div>

</body>

</html>
Bootstrap 4 Pagination
Basic Pagination
If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.

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>:
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

<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="#">2</a></li>

<li class="page-item"><a class="page-link" href="#">3</a></li>

</ul>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</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"><a class="page-link" href="#">Previous</a></li>

<li class="page-item"><a class="page-link" href="#">1</a></li>

<li class="page-item active"><a class="page-link" href="#">2</a></li>

<li class="page-item"><a class="page-link" href="#">3</a></li>

<li class="page-item"><a class="page-link" href="#">Next</a></li>

</ul>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

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

<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="#">2</a></li>

<li class="page-item"><a class="page-link" href="#">3</a></li>

<li class="page-item"><a class="page-link" href="#">Next</a></li>

</ul>

<p>Default:</p>

<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="#">2</a></li>

<li class="page-item"><a class="page-link" href="#">3</a></li>

<li class="page-item"><a class="page-link" href="#">Next</a></li>

</ul>

<p>Small:</p>

<ul class="pagination pagination-sm">

<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="#">2</a></li>

<li class="page-item"><a class="page-link" href="#">3</a></li>

</ul>

</div>

</body>

</html>

Output
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<div class="container">
<h2>Pagination</h2>

<p>Use utilitiy classes to change the alignment of the pagination:</p>

<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>

<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>

<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>

<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>

</ul>

<ul class="pagination justify-content-center">

<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>

<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>

<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>

<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>

</ul>

<ul class="pagination justify-content-end">

<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>

<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>

<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>

<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>

</ul>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

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

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

</head>

<body>

<h2>Breadcrumbs</h2>

<p>The .breadcrumb class indicates the current page's location within a navigational hierarchy:</p>

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

</ul>

</div>

</body>

</html>

To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-
group-item:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Basic List Group</h2>

<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>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Active Item in a List Group</h2>

<li class="list-group-item active">Active item</li>

<li class="list-group-item">Second item</li>

<li class="list-group-item">Third item</li>

</ul>

</div>

</body>

</html>

To create a list group with linked items, use <div> instead of <ul> and <a> instead of <li>. Optionally, add
the .list-group-item-action class if you want a grey background color on hover:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>List Group With Linked Items</h2>

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

</body>

</html>

<!DOCTYPE html>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>List Group With a Disabled Item</h2>

<p>The disabled class adds a lighter text color to the disabled item. And if used on links, it will remove the
default hover effect.</p>

<a href="#" class="list-group-item disabled">Disabled item</a>

<a href="#" class="list-group-item">Third item</a>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Flush / Remove Borders</h2>

<p>Use the .list-group-flush class to remove some borders and rounded corners:</p>

</div>

<ul class="list-group list-group-flush">

<li class="list-group-item">First item</li>

<li class="list-group-item">Second item</li>

<li class="list-group-item">Third item</li>

<li class="list-group-item">Fourth item</li>

</ul>

</div>

</body>

</html>

Horizontal List Groups

If you want the list items to display horizontally instead of vertically (side by side instead of on top of each
other), add the .list-group-horizontal class to .list-group:
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Horizontal List Groups</h2>

<p>The .list-group-horizontal class displays the list items horizontally instead of vertically:</p>

<ul class="list-group list-group-horizontal">

<li class="list-group-item">First item</li>

<li class="list-group-item">Second item</li>

<li class="list-group-item">Third item</li>

<li class="list-group-item">Fourth item</li>

</ul>

</div>

</body>

</html>
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-primary, list-group-item-dark
and list-group-item-light,:

<!DOCTYPE html>

<head>
<title>Bootstrap Example</title>

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

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

</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>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<h2>Linked Items With Contextual Classes</h2>

<p>Move the mouse over the linked items to see the hover effect:</p>

<a href="#" class="list-group-item list-group-item-action">Action item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<h2>List Group With Badges</h2>

<p>Combine .badge classes with utility/helper classes to add badges inside the list group:</p>

<li class="list-group-item d-flex justify-content-between align-items-center">

Inbox

<span class="badge badge-primary badge-pill">12</span>

</li>

<li class="list-group-item d-flex justify-content-between align-items-center">

Ads

<span class="badge badge-primary badge-pill">50</span>

</li>

<li class="list-group-item d-flex justify-content-between align-items-center">

Junk

<span class="badge badge-primary badge-pill">99</span>

</li>

</ul>

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

<!DOCTYPE html>

<head>

<title>Bootstrap Card</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.4.1/css/bootstrap.min.css">

</head>

<body>

<h2>Basic Card</h2>

<div class="card-body">Basic card</div>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

</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-dark and .bg-light.
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Cards with Contextual Classes</h2>

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

</body>

</html>

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 (or the only one) inside .card-body. The .card-link class adds
a blue color to any link, and a hover effect.
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</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 (or the only one) in card-body. The .card-link class adds a blue
color to any link, and a hover effect.</p>

<h4 class="card-title">Card title</h4>

<p class="card-text">Some example text. Some example text.</p>

<a href="#" class="card-link">Another link</a>

</div>

</body>

</html>

Add .card-img-top or .card-img-bottom to an <img> to place the image at the top or at the bottom inside
the card. Note that we have added the image outside of the .card-body to span the entire width:
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

<br>

<p>Image at the bottom (card-img-bottom):</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>

<a href="#" class="btn btn-primary">See Profile</a>

</div>

<img class="card-img-bottom" src="img_avatar6.png" alt="Card image" style="width:100%">

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<h2>Stretched Link in Card</h2>

<p>Add the .stretched-link class to a link inside the card, and it will make the whole card clickable (the
card will act as a link):</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 stretched-link">See Profile</a>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

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

<a href="#" class="btn btn-primary">See Profile</a>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Card</title>

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

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

</head>

<body>

<h2>Cards Columns</h2>

<p>The .card-columns class creates a masonry-like grid of cards. The layout will automatically adjust as
you insert more cards.</p>

<p><strong>Note:</strong> The cards are displayed vertically on small screens (less than 576px):</p>

<div class="card bg-primary">

<div class="card-body text-center">

<p class="card-text">Some text inside the first card</p>

</div>

<div class="card bg-warning">

<div class="card-body text-center">

<p class="card-text">Some text inside the second card</p>

</div>

<div class="card bg-success">

<div class="card-body text-center">

<p class="card-text">Some text inside the third card</p>

</div>

<div class="card bg-danger">

<div class="card-body text-center">

<p class="card-text">Some text inside the fourth card</p>

</div>

</div>
<div class="card bg-light">

<div class="card-body text-center">

<p class="card-text">Some text inside the fifth card</p>

</div>

<div class="card bg-info">

<div class="card-body text-center">

<p class="card-text">Some text inside the sixth card</p>

</div>

</body>

</html>
The .card-deck class creates a grid of cards that are of equal height and width. The layout will
automatically adjust as you insert more cards.

Note: The cards are displayed vertically on small screens (less than 576px):

<!DOCTYPE html>

<head>

<title>Bootstrap Card</title>

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

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

</head>

<p>The .card-deck class creates an <strong>equal height and width</strong> grid of cards. The layout will
automatically adjust as you insert more cards.</p>

<p>In this example we have added extra content to the first card, to make it taller. Notice how the other
cards follow.</p>

<p><strong>Note:</strong> The cards are displayed vertically on small screens (less than 576px):</p>

<div class="card bg-primary">

<div class="card-body text-center">

<p class="card-text">Some text inside the first card</p>

<p class="card-text">Some more text to increase the height</p>

</div>

<div class="card bg-warning">

<div class="card-body text-center">

<p class="card-text">Some text inside the second card</p>

</div>

<div class="card bg-success">

<div class="card-body text-center">

<p class="card-text">Some text inside the third card</p>

</div>

<div class="card bg-danger">

<div class="card-body text-center">

<p class="card-text">Some text inside the fourth card</p>

</div>

</body>

</html>

The .card-group class is similar to .card-deck. The only difference is that the .card-group class removes left
and right margins between each card.

Note: The cards are displayed vertically on small screens (less than 576px), WITH top and bottom margin:
<!DOCTYPE html>

<head>

<title>Bootstrap Card</title>

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

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

</head>

<body>

<h2>Card Group</h2>
<p>The .card-group class is similar to .card-deck, which creates an <strong>equal height and
width</strong> grid of cards.</p>

<p>However, the .card-group class removes left and right margins between each card.</p>

<p>In this example we have added extra content to the first card, to make it taller. Notice how the other
cards follow.</p>

<p><strong>Note:</strong> The cards are displayed vertically on small screens (less than 576px),
<strong>WITH</strong> top and bottom margin:</p>

<div class="card bg-primary">

<div class="card-body text-center">

<p class="card-text">Some text inside the first card</p>

<p class="card-text">Some more text to increase the height</p>

</div>

<div class="card bg-warning">

<div class="card-body text-center">

<p class="card-text">Some text inside the second card</p>

</div>

<div class="card bg-success">

<div class="card-body text-center">

<p class="card-text">Some text inside the third card</p>

</div>

<div class="card bg-danger">

<div class="card-body text-center">

<p class="card-text">Some text inside the fourth card</p>

</div>
</div>

</div>

</body>

</html>

Bootstrap 4 Dropdowns

<!DOCTYPE html>

<title>Bootstrap Example</title>

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

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

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

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

Dropdown button

</button>

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

<a class="dropdown-item" href="#">Link 3</a>

</div>

</body>

</html>
Example Explained
The .dropdown class indicates a dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-
toggle="dropdown" attribute.

Add the .dropdown-menu class to a <div> element to actually build the dropdown menu. Then add the
.dropdown-item class to each element (links or buttons) inside the dropdown menu.

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

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

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

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

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

Dropdown button

</button>

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

<a class="dropdown-item" href="#">Link 3</a>

<a class="dropdown-item" href="#">Another link</a>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Dropdowns</h2>
<p>The .dropdown-header class is used to add headers inside the dropdown menu:</p>

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

Dropdown button

</button>

<h5 class="dropdown-header">Dropdown header</h5>

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

<a class="dropdown-item" href="#">Link 3</a>

<h5 class="dropdown-header">Dropdown header</h5>

<a class="dropdown-item" href="#">Another link</a>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

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

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

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

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

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>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Dropdowns</h2>
<p>Add the .dropright class next to the dropdown menu to right-align the dropdown. Note that the
caret/arrows is added automatically:</p>

<div class="dropdown dropright">

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

Dropright button

</button>

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

<a class="dropdown-item" href="#">Link 3</a>

</div>

</body>

</html>

<!DOCTYPE html>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Dropdowns</h2>

<p>Add the .dropleft class next to the dropdown menu to left-align the dropdown. Note that the
caret/arrow is added automatically. Also note that we float the dropdown to the right:</p>

<div class="dropdown dropleft float-right">

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

Dropleft button

</button>

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

<a class="dropdown-item" href="#">Link 3</a>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Dropdowns</h2>

<p>Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu.</p>

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

Wide dropdown button to demonstrate this example

</button>

<div class="dropdown-menu dropdown-menu-right">

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

<a class="dropdown-item" href="#">Link 3</a>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

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

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

<body>

<br>

<h2>Dropdowns</h2>

<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

Dropup button

</button>

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Dropdowns</h2>

<p>The .dropdown-item-text class is used to add plain text to a dropdown, or used on links for default link
styling.</p>

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

Dropdown button

</button>
<div class="dropdown-menu">

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

<a class="dropdown-item-text" href="#">Text Link</a>

<span class="dropdown-item-text">Just Text</span>

</div>

</body>

</html>

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

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Nesting Button Groups</h2>

<p>Nest button groups to create dropdown menus:</p>

<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 dropdown-toggle" data-toggle="dropdown">

Sony

</button>

<a class="dropdown-item" href="#">Tablet</a>

<a class="dropdown-item" href="#">Smartphone</a>

</div>

</div>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

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

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

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

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

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

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

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

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

</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 class="dropdown-menu">

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

</div>

</body>

</html>

<!DOCTYPE html>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Vertical Button Group with Dropdown</h2>

<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 dropdown-toggle" data-toggle="dropdown">

Sony

</button>

<a class="dropdown-item" href="#">Tablet</a>

<a class="dropdown-item" href="#">Smartphone</a>

</div>

</body>
</html>

Bootstrap 4 Collapse

<!DOCTYPE html>

<html>

<head>

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<h2>Simple Collapsible</h2>

<a href="#demo" class="btn btn-primary" data-toggle="collapse">Simple collapsible</a>

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

</body>

</html>

<!DOCTYPE html>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Show Collapsible Content By Default</h2>

<p>Add the show class next to the collapse class to show the content by default.</p>

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

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>

</body>

</html>
Example

<div class="card">
    <div class="card-header">
      <a class="card-link" data-toggle="collapse" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
</div>

</div>

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

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<p>Basic horizontal menu:</p>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>
</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<p>Left-aligned nav (default):</p>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

<p class="text-center">Centered nav:</p>

<ul class="nav justify-content-center">

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

<p class="text-right">Right-aligned nav:</p>

<ul class="nav justify-content-end">

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Vertical Nav</h2>

<p>Use the .flex-column class to create a vertical nav:</p>

<ul class="nav flex-column">

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<h2>Navigation Tabs</h2>

<p>Turn the nav menu into navigation tabs with the .nav 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 the tutorial page.</p>

<ul class="nav nav-tabs">

<a class="nav-link active" href="#">Active</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<div class="container">
<h2>Navigation Pills</h2>

<p>Turn the nav menu into navigation pills with the .nav nav-pills class:</p>

<ul class="nav nav-pills">

<a class="nav-link active" href="#">Active</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

<a class="nav-link active" href="#">Active</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul><br>

<p>Justified tabs:</p>

<ul class="nav nav-tabs nav-justified">

<a class="nav-link active" href="#">Active</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</div>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

<body>

<h2>Pills with Dropdown</h2>

<ul class="nav nav-pills">

<a class="nav-link active" href="#">Active</a>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

<a class="dropdown-item" href="#">Link 3</a></div>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<h2>Tabs with Dropdown</h2>

<ul class="nav nav-tabs">

<a class="nav-link active" href="#">Active</a>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

<a class="dropdown-item" href="#">Link 3</a></div>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<br>

<h2>Toggleable Tabs</h2>

<br>

<ul class="nav nav-tabs" role="tablist">

<a class="nav-link active" data-toggle="tab" href="#home">Home</a>

</li>

<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>

</li>

<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>

</li>

</ul>

<div id="home" class="container tab-pane active"><br>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
</div>

<div id="menu1" class="container tab-pane fade"><br>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>

</div>

<div id="menu2" class="container tab-pane fade"><br>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam.</p>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<br>

<h2>Toggleable Pills</h2>
<br>

<ul class="nav nav-pills" role="tablist">

<a class="nav-link active" data-toggle="pill" href="#home">Home</a>

</li>

<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>

</li>

<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>

</li>

</ul>

<div id="home" class="container tab-pane active"><br>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>

</div>

<div id="menu1" class="container tab-pane fade"><br>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>

</div>

<div id="menu2" class="container tab-pane fade"><br>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam.</p>
</div>

</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:
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<a class="nav-link" href="#">Link 1</a>

</li>

<a class="nav-link" href="#">Link 2</a>

</li>

<a class="nav-link" href="#">Link 3</a>

</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>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<nav class="navbar bg-light">

<a class="nav-link" href="#">Link 1</a>

</li>

<a class="nav-link" href="#">Link 2</a>

</li>

<a class="nav-link" href="#">Link 3</a>

</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>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<nav class="navbar navbar-expand-sm bg-light justify-content-center">

<a class="nav-link" href="#">Link 1</a>

</li>

</li>

<a class="nav-link" href="#">Link 3</a>

</li>

</ul>

</nav>

<br>

<h3>Centered Navbar</h3>

<p>Use the .justify-content-center class to center the navigation bar.</p>

<p>In this example, the navbar will be centered on medium, large and extra large screens. On small
screens it will be displayed vertically and left-aligned (because of the .navbar-expand-sm class).</p>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

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

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

</li>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<nav class="navbar navbar-expand-sm bg-success navbar-dark">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<nav class="navbar navbar-expand-sm bg-info navbar-dark">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<nav class="navbar navbar-expand-sm bg-warning navbar-dark">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<nav class="navbar navbar-expand-sm bg-danger navbar-dark">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>
<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

</body>

</html>
Output

Active/disabled state: Add the .active class to an <a> element to highlight the current link, or the
.disabled class to indicate that the link is un-clickable.

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

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

<a class="nav-link" href="#">Link 1</a>

</li>

<a class="nav-link" href="#">Link 2</a>

</li>

<a class="nav-link" href="#">Link 3</a>

</li>

</ul>

</nav>

<h3>Brand / Logo</h3>

<p>The .navbar-brand class is used to highlight the brand/logo/project name of your page.</p>
</div>

</body>

</html>

When using the .navbar-brand class on images, Bootstrap 4 will automatically style the image to fit the
navbar vertically.

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

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

<img src="bird.jpg" alt="logo" style="width:40px;">

</a>

<a class="nav-link" href="#">Link 1</a>

</li>

<a class="nav-link" href="#">Link 2</a>

</li>

<a class="nav-link" href="#">Link 3</a>

</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>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

</button>

<div class="collapse navbar-collapse" id="collapsibleNavbar">

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

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

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

Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler
button.
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

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

<a class="nav-link" href="#">Link 1</a>

</li>

<a class="nav-link" href="#">Link 2</a>

</li>

<li class="nav-item dropdown">

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

Dropdown link

</a>

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

<a class="dropdown-item" href="#">Link 3</a>

</div>

</li>

</ul>

</nav>

<h3>Navbar With Dropdown</h3>

<p>This example adds a dropdown menu in the navbar.</p>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<form class="form-inline" action="/action_page.php">

<input class="form-control mr-sm-2" 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-prepend or .input-group-append 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>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<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>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<a class="nav-link" href="#">Link 1</a>

</li>

<a class="nav-link" href="#">Link 2</a>

</li>

</ul>

Navbar text

</span>

</nav>

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

<!DOCTYPE html>

<title>Bootstrap Example</title>

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

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

</head>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

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

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

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

<head>

<title>Bootstrap Example</title>

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

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

</head>

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

<a class="nav-link" href="javascript:void(0)">Link</a>

</li>

<a class="nav-link" href="javascript:void(0)">Link</a>

</li>

</ul>

</nav>

<h3>Bottom 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 .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>

<head>

<title>Bootstrap Example</title>

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

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

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

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

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

</ul>

</nav>

<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
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Stacked form</h2>

<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-group form-check">

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

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:
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

<label for="pwd">Password:</label>

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

Inline Form with Utilities

The inline form above feels "compressed", and will look much better with Bootstrap's spacing utilities. The
following example adds a right margin (.mr-sm-2) to each input on all devices (small and up). And a margin
bottom class (.mb-2) is used to style the input field when it breaks (goes from horizontal to vertical due to
not enough space/width):
Form Row/Grid
You can also use columns (.col) to control the width and alignment of form inputs without using spacing
utilities. Just remember to put them inside a .row container.

In the example below, we use two columns that will appear side by side. You will learn much more about
columns and rows in the Bootstrap Grids Chapter.X

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<p>Create two form elements that appear side by side with .row and .col:</p>

<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">

</div>

<input type="password" class="form-control" placeholder="Enter password" name="pswd">

</div>

<button type="submit" class="btn btn-primary mt-3">Submit</button>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<p>In this example we will demonstrate the differences between .row and .form-row.</p>

<p>Create two form elements that appear side by side with .row and .col:</p>

<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">

</div>

<input type="password" class="form-control" placeholder="Enter password" name="pswd">

</div>

</form>

<br>

<p>Create two form elements that appear side by side with .form-row and .col:</p>

<form>

<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">

</div>

<input type="password" class="form-control" placeholder="Enter password" name="pswd">

</div>

</form>

</div>

</body>

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

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Form Validation</h2>

<p>In this example, we use <code>.was-validated</code> to indicate what's missing before submitting the
form:</p>

<form action="/action_page.php" class="was-validated">

<label for="uname">Username:</label>

<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname"

required>

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Please fill out this field.</div>

</div>

<label for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd"

required>

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Please fill out this field.</div>

</div>

<div class="form-group form-check">

<input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Check this checkbox to continue.</div>

</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>

<form action="/action_page.php" class="needs-validation" novalidate>

<div class="form-group">
    <label for="uname">Username:</label>
    <input type="text" class="form-control" id="uname" placeholder="Enter username"
name="uname" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password"
name="pswd" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Check this checkbox to continue.</div>
    </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<h2>Form Validation</h2>

<p>In this example, we use <code>.needs-validation</code>, which will add the validation effect AFTER
the form has been submitting (if there's anything missing).</p>

<p>Try to submit this form before filling out the input fields, to see the effect.</p>

<form action="/action_page.php" class="needs-validation" novalidate>

<label for="uname">Username:</label>

<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname"

required>

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Please fill out this field.</div>

</div>

<label for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd"

required>

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Please fill out this field.</div>

</div>

<div class="form-group form-check">

<input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Check this checkbox to continue.</div>

</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>
<script>

// Disable form submissions if there are invalid fields

(function() {

'use strict';

window.addEventListener('load', function() {

// Get the forms we want to add validation styles to

var forms = document.getElementsByClassName('needs-validation');

// Loop over them and prevent submission

var validation = Array.prototype.filter.call(forms, function(form) {

form.addEventListener('submit', function(event) {

if (form.checkValidity() === false) {

event.preventDefault();

event.stopPropagation();

form.classList.add('was-validated');

}, false);

});

}, false);

})();

</script>

</body>

</html>

Bootstrap 4 Form Inputs

Supported Form Controls

Bootstrap supports the following form controls:
 input
 textarea
 checkbox
 radio
 select

Bootstrap Input
Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time,
week, number, email, url, search, tel, and color.

Note: Inputs will NOT be fully styled if their type is not properly declared!

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

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

<input type="text" class="form-control" id="usr" name="username">

</div>

<label for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd" name="password">

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Form control: textarea</h2>

<p>The form below contains a textarea for comments:</p>

<label for="comment">Comment:</label>

<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<h2>Form control: checkbox</h2>

<p>The form below contains three checkboxes. The first option is checked by default, and the last option
is disabled:</p>

<label class="form-check-label" for="check1">

<input type="checkbox" class="form-check-input" id="check1" name="option1" value="something"

checked>Option 1

</label>

</div>

<label class="form-check-label" for="check2">

<input type="checkbox" class="form-check-input" id="check2" name="option2"

value="something">Option 2

</label>

</div>

<input type="checkbox" class="form-check-input" disabled>Option 3

</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<h2>Form control: inline checkbox</h2>

<p>The form below contains three inline checkboxes:</p>

<label class="form-check-label" for="check1">

<input type="checkbox" class="form-check-input" id="check1" name="vehicle1" value="something"

checked>Option 1

</label>

</div>

<label class="form-check-label" for="check2">

<input type="checkbox" class="form-check-input" id="check2" name="vehicle2"

value="something">Option 2

</label>

</div>

<input type="checkbox" class="form-check-input" disabled>Option 3

</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<h2>Form control: radio buttons</h2>

<p>The form below contains three radio buttons. The first option is checked by default, and the last option
is disabled:</p>

<label class="form-check-label" for="radio1">

<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1"

checked>Option 1

</label>

</div>

<label class="form-check-label" for="radio2">

<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2

</label>

</div>

<input type="radio" class="form-check-input" disabled>Option 3

</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>
</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>
<body>

<h2>Form control: inline radio buttons</h2>

<p>The form below contains three inline radio buttons. The first option is checked by default, and the last
option is disabled:</p>

<label class="form-check-label" for="radio1">

<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1"

checked>Option 1

</label>

</div>

<label class="form-check-label" for="radio2">

<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2

</label>

</div>

<input type="radio" class="form-check-input" disabled>Option 3

</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<h2>Form control: select</h2>

<p>The form below contains two dropdown menus (select lists):</p>

<label for="sel1">Select list (select one):</label>

<select class="form-control" id="sel1" name="sellist1">

</select>

<br>

<label for="sel2">Mutiple select list (hold shift to select more than one):</label>

<select multiple class="form-control" id="sel2" name="sellist2">

</select>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Form Control Sizing</h2>

<p>Change the size of the form control with .form-control-sm or .form-control-lg:</p>

<input type="text" class="form-control form-control-sm" placeholder="Small form control"

name="text1">

</div>

<input type="text" class="form-control" placeholder="Default form control" name="text2">

</div>

<input type="text" class="form-control form-control-lg" placeholder="Large form control"

name="text3">

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>

<!DOCTYPE html>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Form Control Plain Text</h2>

<p>Use the .form-control-plaintext if you want to style the input field as plain text:</p>

<input type="text" class="form-control" placeholder="Default form control" name="text1">

</div>

<input type="text" class="form-control-plaintext" placeholder="Form control with plain text"

name="text2">

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Form Control Range and File</h2>

<p>Add the .form-control-range class to input type"range" or .form-control-file to input type"file" to style
a range control or a file field with full-width:</p>

<input type="range" class="form-control-range" name="range">

</div>

<input type="file" class="form-control-file border" name="file">

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>
Bootstrap 4 Inputs Group

Bootstrap 4 Input Groups

The .input-group class is a container to enhance an input by adding an icon, text or a button in front or
behind the input field as a "help text".

Use .input-group-prepend to add the help text in front of the input, and .input-group-append to add it
behind the input.

At last, add the .input-group-text class to style the specified help text.
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<div class="container mt-3">

<h3>Input Groups</h3>
<p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front
(.input-group-prepend) or behind (.input-group-append) the input field as a "help text".</p>

<p>Use the .input-group-text class to style the specified help text.</p>

<div class="input-group mb-3">

</div>

<input type="text" class="form-control" placeholder="Username" id="usr" name="username">

</div>

<div class="input-group mb-3">

<input type="text" class="form-control" placeholder="Your Email" id="mail" name="email">

<span class="input-group-text">@example.com</span>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<div class="container mt-3">

<h1>Input Group Size</h1>

<p>Use the .input-group-sm class for small input groups and .input-group-lg for large inputs groups:</p>

<form>

<div class="input-group mb-3 input-group-sm">

<span class="input-group-text">Small</span>

</div>

<input type="text" class="form-control">

</div>

</form>

<form>

<div class="input-group mb-3">

<span class="input-group-text">Default</span>

</div>

<input type="text" class="form-control">

</div>

</form>

<form>

<div class="input-group mb-3 input-group-lg">

<span class="input-group-text">Large</span>

</div>

<input type="text" class="form-control">

</div>

</form>

</div>

</body>

</html>

<!DOCTYPE html>

<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.4.1/css/bootstrap.min.css">

</head>

<body>

<div class="container mt-3">

<h3>Multiple Inputs and Addons</h3>

<form>

<div class="input-group mb-3">

<span class="input-group-text">Person</span>

</div>

<input type="text" class="form-control" placeholder="First Name">

<input type="text" class="form-control" placeholder="Last Name">

</div>

</form>

<form>

<div class="input-group mb-3">

<span class="input-group-text">Three</span>

</div>
<input type="text" class="form-control">

</div>

</form>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<div class="container mt-3">

<h3>Input Group with Checkboxes and Radios</h3>

<p>You can also use checkboxes or radio buttons instead of text:</p>

<form>

<div class="input-group mb-3">

</div>

<input type="text" class="form-control" placeholder="Some text">

</div>

</form>

<form>

<div class="input-group mb-3">

</div>

</div>
<input type="text" class="form-control" placeholder="Some text">

</div>

</form>

</div>

</body>

</html>

<!DOCTYPE html>

<head>
<title>Bootstrap Example</title>

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

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

</head>

<body>

<div class="container mt-3">

<h1>Input Group Buttons</h1>

<div class="input-group mb-3">

<button class="btn btn-outline-primary" type="button">Basic Button</button>

</div>

<input type="text" class="form-control" placeholder="Some text">

</div>

<div class="input-group mb-3">

<input type="text" class="form-control" placeholder="Search">

<button class="btn btn-success" type="submit">Go</button>

</div>

<div class="input-group mb-3">

<input type="text" class="form-control" placeholder="Something clever..">

<button class="btn btn-danger" type="button">Cancel</button>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<div class="container mt-3">

<h3>Input Groups with Dropdown Button</h3>

<p>Add a dropdown button in the input group. Note that you don't need the .dropdown wrapper, as you
normally would.</p>

<form>

<div class="input-group mt-3 mb-3">

<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">

Dropdown button

</button>

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

<a class="dropdown-item" href="#">Link 3</a>

</div>

<input type="text" class="form-control" placeholder="Username">

</div>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<div class="container mt-3">

<h2>Input Group Labels</h2>

<p>Put labels outside of the input group, and remember that the value of the for attribute should match
the id of the input.</p>
<p>Click on the label and it will bring focus to the input:</p>

<form>

<label for="demo">Write your email here:</label>

<div class="input-group mb-3">

<input type="text" class="form-control" placeholder="Email" id="demo" name="email">

<span class="input-group-text">@example.com</span>

</div>

</form>

</div>

</body>

</html>

Bootstrap 4 Custom Forms

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<div class="container mt-3">

<h2>Custom Checkbox</h2>

<p>To create a custom checkbox, wrap a container element, like div, with a class of .custom-control and
.custom-checkbox around the checkbox. Then add the .custom-control-input to the checkbox.</p>

<p><strong>Tip:</strong> If you use labels for accompanying text, add the .custom-control-label class to
it. Note that the value of the for attribute should match the id of the checkbox:</p>

<div class="custom-control custom-checkbox mb-3">

<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">

<label class="custom-control-label" for="customCheck">Custom checkbox</label>

</div>

<input type="checkbox" id="defaultCheck" name="example2">

<label for="defaultCheck">Default checkbox</label>

<br>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Custom Switch</h2>

<p>To create a custom "toggle switch", wrap a container element, like div, with a class of .custom-control
and .custom-switch around a checkbox. Then add the .custom-control-input class to the checkbox:</p>

<div class="custom-control custom-switch">

<label class="custom-control-label" for="switch1">Toggle me</label>

</div>

<br>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<div class="container mt-3">

<h2>Custom Radio Buttons</h2>

<p>To create a custom radio button, wrap a container element, like div, with a class of .custom-control
and .custom-radio around the radio button. Then add the .custom-control-input to the radio button.</p>

<p><strong>Tip:</strong> If you use labels for accompanying text, add the .custom-control-label class to
it. Note that the value of the for attribute should match the id of the radio:</p>

<div class="custom-control custom-radio">

<input type="radio" class="custom-control-input" id="customRadio" name="example1">

<label class="custom-control-label" for="customRadio">Custom radio</label>

</div>

<input type="radio" id="defaultRadio" name="example2">

<label for="defaultRadio">Default radio</label>

<br>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<div class="container mt-3">

<h2>Inline Custom Form Controls</h2>

<p>If you want the custom form controls to sit side by side (inline), add the .custom-control-inline to the
wrapper/container:</p>
<form action="/action_page.php">

<div class="custom-control custom-radio custom-control-inline">

<input type="radio" class="custom-control-input" id="customRadio1" name="example1">

<label class="custom-control-label" for="customRadio1">Custom radio</label>

</div>

<div class="custom-control custom-radio custom-control-inline">

<input type="radio" class="custom-control-input" id="customRadio2" name="example2">

<label class="custom-control-label" for="customRadio2">Custom radio</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>

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

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<div class="container mt-3">

<h2>Custom Select Menu</h2>

<p>To create a custom select menu, add the .custom-select class to the select element:</p>

<select name="cars" class="custom-select mb-3">

<option selected>Custom Select Menu</option>

<option value="volvo">Volvo</option>

</select>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<h2>Custom Select Menu Sizing</h2>

<p>Use the .custom-select-sm class to create a small select menu and the .custom-select-lg class for a
large one:</p>

<form>

<select class="custom-select custom-select-sm mb-3">

<option selected>Small Custom Select Menu</option>

<option value="volvo">Volvo</option>

</select>

<select name="cars" class="custom-select mb-3">

<option selected>Default Custom Select Menu</option>

<option value="volvo">Volvo</option>

</select>

<select name="cars" class="custom-select custom-select-lg mb-3">

<option selected>Large Custom Select Menu</option>

<option value="volvo">Volvo</option>

</select>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<div class="container mt-3">

<h2>Custom Range</h2>

<p>To create a custom range menu, add the .custom-range class to the input element with
type="range":</p>
<form action="/action_page.php">

<label for="customRange">Custom range</label>

<input type="range" class="custom-range" id="customRange" name="points1">

<label for="defaultRange">Default range</label>

<input type="range" id="defaultRange" name="points2">

<p><button type="submit" class="btn btn-primary">Submit</button></p>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<div class="container mt-3">

<h2>Custom File</h2>

<p>To create a custom file upload, wrap a container element with a class of .custom-file around the input
with type="file". Then add the .custom-file-input to the file input:</p>

<p>Custom file:</p>

<div class="custom-file mb-3">

<input type="file" class="custom-file-input" id="customFile" name="filename">

<label class="custom-file-label" for="customFile">Choose file</label>

</div>

<p>Default file:</p>

<input type="file" id="myFile" name="filename2">

<button type="submit" class="btn btn-primary">Submit</button>

</div>
</form>

</div>

// Add the following code if you want the name of the file appear on select

$(".custom-file-input").on("change", function() {

var fileName = $(this).val().split("\\").pop();

$(this).siblings(".custom-file-label").addClass("selected").html(fileName);

});

</script>

</body>

</html>

Bootstrap 4 Carousel
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

.carousel-inner img {

width: 100%;

height: 100%;

</style>

</head>

<body>

<div id="demo" class="carousel slide" data-ride="carousel">

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

<li data-target="#demo" data-slide-to="1"></li>

<li data-target="#demo" data-slide-to="2"></li>

</ul>

<div class="carousel-item active">

<img src="la.jpg" alt="Los Angeles" width="1100" height="500">

</div>

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

</a>

<a class="carousel-control-next" href="#demo" data-slide="next">

</a>

</div>

</body>

</html>
Bootstrap 4 Modal
<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<h2>Modal Example</h2>

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

Open modal

</button>

<div class="modal" id="myModal">

<h4 class="modal-title">Modal Heading</h4>

<button type="button" class="close" data-dismiss="modal">×</button>

</div>

Modal body..

</div>

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

</div>
</div>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>
<body>

<h2>Fading Modal</h2>

<p>Add the "fade" class to the modal container if you want the modal to fade in on open and fade out on
close.</p>

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

Open modal

</button>

<div class="modal fade" id="myModal">

<h4 class="modal-title">Modal Heading</h4>

<button type="button" class="close" data-dismiss="modal">×</button>

</div>

Modal body..

</div>

<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Small Modal</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 modal-sm">

<h4 class="modal-title">Modal Heading</h4>

<button type="button" class="close" data-dismiss="modal">×</button>

</div>

Modal body..

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<h2>Large Modal</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 modal-lg">

<h4 class="modal-title">Modal Heading</h4>

<button type="button" class="close" data-dismiss="modal">×</button>

</div>

Modal body..

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

</div>

</div>
</div>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Extra Large Modal</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 modal-xl">

<h4 class="modal-title">Modal Heading</h4>

<button type="button" class="close" data-dismiss="modal">×</button>

</div>

Modal body..

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

</div>

</div>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Centered Modal Example</h2>

<p>Center the modal vertically and horizontally within the page, with the .modal-dialog-centered
class.</p>

Open modal

</button>

<div class="modal fade" id="myModal">

<div class="modal-dialog modal-dialog-centered">

<h4 class="modal-title">Modal Heading</h4>

<button type="button" class="close" data-dismiss="modal">×</button>

</div>

Modal body..

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

</div>

</div>
</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Modal Scroll Example</h2>

Open modal

</button>

<div class="modal" id="myModal">

<h1 class="modal-title">Modal Heading</h1>

<button type="button" class="close" data-dismiss="modal">×</button>

</div>

<h3>Some text to enable scrolling..</h3>

<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing
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.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing
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.</p>

</div>

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

</div>

</body>

</html>

<!DOCTYPE html>

<title>Bootstrap Example</title>

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

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

</head>

<body>

<h2>Modal Scroll Example</h2>

<p>Use the .modal-dialog-scrollable class to enable scrolling inside the modal.</p>

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

Open modal

</button>

<div class="modal" id="myModal">

<div class="modal-dialog modal-dialog-scrollable">

<h1 class="modal-title">Modal Heading</h1>

<button type="button" class="close" data-dismiss="modal">×</button>

</div>

<h3>Some text to enable scrolling..</h3>

</div>

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

</div>

</div>
</div>

</body>

</html>

Bootstrap 4 Tooltip

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<h3>Tooltip Example</h3>

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

</div>

$(document).ready(function(){

$('[data-toggle="tooltip"]').tooltip();

});

</script>

</body>

</html>
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<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>

</body>
</html>
Bootstrap 4 Popover

<div class="container">
<h3>Popover Example</h3>
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the
popover">Toggle popover</a>
</div>

</body>
</html>

<div class="container">
<h3>Popover Example</h3>
<p>By default, the popover will appear on the right side of the element.</p>
<p>Use the data-placement attribute to set the position of the popover on top, bottom, left or the right
side of the element.</p>

<p>Note: The placement attributes do not work if it is not enough room for them. For example, try to
remove these paragraphs and click on the "Top" popover to understand how it works.</p>

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

</body>
</html>

<div class="container">
<h3>Popover Example</h3>
<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>

</body>
</html>

<div class="container">
<h3>Popover Example</h3>
<a href="#" title="Header" data-toggle="popover" data-content="Some content">Click Me</a><br>
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some
content">Hover over me</a>
</div>

</body>
</html>

Bootstrap 4 Toast
<!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.4.1/css/bootstrap.min.css">

</head>
<body>

<div class="container">
<h3>Toast Example</h3>
<p>A toast is like an alert box that is only shown for a couple of seconds when something happens (i.e.
when a user clicks on a button, submits a form, etc.).</p>
<p>In this example, we use a button to show the toast message.</p>

<button type="button" class="btn btn-primary" id="myBtn">Show Toast</button>

<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
</div>

</body>
</html>

<div class="container">
<h3>Toast Example</h3>
<p>In this example, we use data-autohide="false" to show the toast by default. You can close it by clicking
on the close (x) icon inside the toast header.</p>

<div class="toast" data-autohide="false">

<div class="toast-header">
<strong class="mr-auto text-primary">Toast Header</strong>
<small class="text-muted">5 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
</div>

</body>
</html>
Bootstrap 4 Scrollspy (Advanced)

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Section 4
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Link 1</a>
<a class="dropdown-item" href="#section42">Link 2</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>

<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>
<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>
<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="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">

<h1>Section 3</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>
<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="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">

<h1>Section 4 Submenu 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>
<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="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">

<h1>Section 4 Submenu 2</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>
<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>

</body>
</html>
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<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="container-fluid">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Link 1</a>
<a class="dropdown-item" href="#section42">Link 2</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>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section3" class="bg-secondary">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section41" class="bg-danger">
<h1>Section 4-1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section42" class="bg-info">
<h1>Section 4-2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
</div>
</div>
</div>

</body>
</html>
Bootstrap 4 Utilities

<div class="container">
<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>

<div class="container">
<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>

<div class="container">
<h2>Borders</h2>
<p>Round the corner of an element with the rounded classes:</p>
<span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
</div>

</body>
</html>

<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<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>

<div class="container">
<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>
<p>Resize the browser window to see the effect.</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>

<div class="container">
<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="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
</div>

<div class="container">
<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="h-50 d-inline-block p-2 bg-warning">Height 50%</div>
<div class="h-75 d-inline-block p-2 bg-warning">Height 75%</div>
<div class="h-100 d-inline-block p-2 bg-warning">Height 100%</div>
<div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">Max Height 100%</div>
</div>
</div>

<div class="container">
<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>

More Spacing Examples

<div class="container">
<h1>Shadows</h1>
<p>Use the shadow- classes to to add shadows to an element:</p>
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
</div>

</body>
</html>

<div class="container">
<h1>Vertical Align</h1>
<p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table
and table cell elements):</p>
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
</div>

<div class="container mt-3">

<h2>Responsive Embed</h2>
<p>Create a responsive video and scale it nicely to the parent element.</p>

<h2>Aspect ratio 1:1</h2>

<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<br>
<h2>Aspect ratio 4:3</h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<br>

<h2>Aspect ratio 16:9</h2>

<h2>Aspect ratio 21:9</h2>

</body>
</html>

<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Visibility</h1>
<p>Use the .visible or .invisible classes to control the visibility of elements. Note: These classes do not
change the CSS display value. They only add visibility:visible or visibility:hidden to an element:</p>
<div class="visible bg-success">I am visible</div>
<div class="invisible bg-warning">I am invisible</div>
</div>

</body>
</html>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

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

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">

<div class="container-fluid"><br>
<h3>Bottom 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>

<div class="container-fluid">
<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">

<div class="container-fluid"><br>
<p>Some example text. Some example text. Some example text. Some example text. Some example
text.</p>
<p>Some example text. Some example text. Some example text. Some example text. Some example
text.</p>
<p>Some example text. Some example text. Some example text. Some example text. Some example
text.</p>
<p>Some example text. Some example text. Some example text. Some example text. Some example
text.</p>
</div>

</body>
</html>

<div class="container">
<h1>Close Icon</h1>
<p>Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the
times; symbol to create the actual icon (a better lookiong "x"). Also note that it is right-aligned by
default:</p>
<div class="clearfix">
<button type="button" class="close">×</button>
</div>
</div>

</body>
</html>

<div class="container mt-3">

<h2>Screen readers</h2>
<p>Use the .sr-only class to hide an element on all devices, except screen readers:</p>
<span class="sr-only">I will be hidden on all screens except for screen readers.</span>
</div>

<div class="container">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</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>

<div class="container">
<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-body">Body/black link.</a>
<a href="#" class="text-light">Light grey link.</a>
</div>

</body>
</html>

<div class="container">
<h2>Opacity Text Colors</h2>
<p>Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:</p>
<p class="text-black-50">Black text with 50% opacity on white background</p>
<p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>
</div>

</body>
</html>

<div class="container">
<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>

Typography/Text Classes
As described in the Typography chapter, here is a list of all typography/text classes:X
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">

<h2>Display Utilities</h2>
<p>To create a block element, add the d-block class. Use any of the d-*-block classes to control WHEN the
element should be a block element on a specific screen width.</p>
<p>Resize the browser window to see the effect.</p>
<span class="d-block bg-success">d-block</span>
<span class="d-sm-block bg-success">d-sm-block</span>
<span class="d-md-block bg-success">d-md-block</span>
<span class="d-lg-block bg-success">d-lg-block</span>
<span class="d-xl-block bg-success">d-xl-block</span>
</div>

</body>
</html>

Other Display Classes

Other display classes are also available:
Bootstrap 4 Flex

<div class="container mt-3">

<h2>Flex</h2>
<p>To create a flexbox container and transform direct children into flex items, use the d-flex class:</p>
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>

</body>
</html>

<div class="container mt-3">

<h2>Inline Flex</h2>
<p>To create an inline flexbox container, use the d-inline-flex class:</p>
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>

</body>
</html>

<div class="container mt-3">

<h2>Horizontal Direction</h2>
<p>Use .flex-row to make the flex items appear side by side (default):</p>
<div class="d-flex flex-row bg-secondary mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<p>Use .flex-row-reverse to right-align the direction:</p>
<div class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>

</body>
</html>

<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Vertical Direction</h2>
<p>Use .flex-column to display the flex items vertically (on top of each other):</p>
<div class="d-flex flex-column mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<p>Use .flex-column-reverse to reverse the vertical direction:</p>
<div class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>

</body>
</html>

<div class="container mt-3">

<h2>Justify content</h2>
<p>Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default),
end, center, between or around:</p>
<div class="d-flex justify-content-start bg-secondary mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex justify-content-end bg-secondary mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex justify-content-center bg-secondary mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex justify-content-between bg-secondary mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex justify-content-around bg-secondary mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>

<div class="container mt-3">

<h2>Fill / Equal Widths</h2>
<p>Use .flex-fill on flex items to force them into equal widths:</p>
<div class="d-flex mb-3">
<div class="p-2 flex-fill bg-info">Flex item 1</div>
<div class="p-2 flex-fill bg-warning">Flex item 2</div>
<div class="p-2 flex-fill bg-primary">Flex item 3</div>
</div>
<p>Example without .flex-fill:</p>
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>

<div class="container mt-3">

<h2>Grow</h2>
<p>Use .flex-grow-1 on a flex item to take up the rest of the space:</p>
<div class="d-flex mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 flex-grow-1 bg-primary">Flex item 3</div>
</div>
<p>Example without .flex-grow-1:</p>
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>

<div class="container mt-3">

<h2>Order</h2>
<p>Change the visual order of a specific flex item(s) with the .order classes. Valid classes are from 0 to
12:</p>
<div class="d-flex mb-3">
<div class="p-2 order-3 bg-info">Flex item 1</div>
<div class="p-2 order-2 bg-warning">Flex item 2</div>
<div class="p-2 order-1 bg-primary">Flex item 3</div>
</div>
</div>

<div class="container mt-3">

<h2>Auto Margins</h2>
<p>Easily add auto margins to flex items with .mr-auto (push items to the right), or by using .ml-auto (push
items to the left):</p>
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 mr-auto bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 ml-auto bg-primary">Flex item 3</div>
</div>
</div>

</body>
</html>

<div class="container mt-3">

<h2>Wrap</h2>
<p>Control how flex items wrap in a flex container with .flex-nowrap (default), .flex-wrap or .flex-wrap-
reverse.</p>
<p><code>.flex-wrap:</code></p>
<div class="d-flex flex-wrap bg-light">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p><code>.flex-wrap-reverse:</code></p>
<div class="d-flex flex-wrap-reverse bg-light">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p><code>.flex-nowrap:</code></p>
<div class="d-flex flex-nowrap bg-light">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
<div class="p-2 border">Flex item 26</div>
<div class="p-2 border">Flex item 27</div>
<div class="p-2 border">Flex item 28</div>
<div class="p-2 border">Flex item 29</div>
<div class="p-2 border">Flex item 30</div>
<div class="p-2 border">Flex item 31</div>
<div class="p-2 border">Flex item 32</div>
<div class="p-2 border">Flex item 33</div>
<div class="p-2 border">Flex item 34</div>
<div class="p-2 border">Flex item 35</div>
</div>
<br>
</div>

<div class="container mt-3">

<h2>Align Content</h2>
<p>Control the vertical alignment of gathered flex items with the .align-content-* classes.</p>
<p><strong>Note:</strong> This example does not look good on a small devices. Also note that these
classes have no effect on single rows of flex items.</p>
<p>.align-content-start (default):</p>
<div class="d-flex flex-wrap align-content-start bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p>.align-content-end:</p>
<div class="d-flex flex-wrap align-content-end bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p>.align-content-center:</p>
<div class="d-flex flex-wrap align-content-center bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p>.align-content-around:</p>
<div class="d-flex flex-wrap align-content-around bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p>.align-content-stretch:</p>
<div class="d-flex flex-wrap align-content-stretch bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
</div>

<div class="container mt-3">

<h2>Align Items</h2>
<p>Control the vertical alignment of single rows of flex items with the .align-content-* classes.</p>
<p>.align-items-start:</p>
<div class="d-flex align-items-start bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-items-end:</p>
<div class="d-flex align-items-end bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-items-center:</p>
<div class="d-flex align-items-center bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-items-baseline:</p>
<div class="d-flex align-items-baseline bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-items-stretch (default):</p>
<div class="d-flex align-items-stretch bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
</div>

<div class="container mt-3">

<h2>Align Self</h2>
<p>Control the vertical alignment of a specific flex item with the .align-self-* classes.</p>
<p>.align-self-start:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-start">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-self-end:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-end">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-self-center:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-center">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-self-baseline:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-baseline">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-self-stretch (default):</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-stretch">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
</div>

</body>
</html>
<!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.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-
UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body>

<div class="container">
<h1>My Icons <i class="fas fa-heart"></i></h1>
<p>An icon along with some text: <i class="fas fa-thumbs-up"></i></p>
</div>
<div class="container">
<p>Others:</p>
<i class="fas fa-cloud"></i>
<i class="fas fa-coffee"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</div>

</body>
</html>

Output

The list of all Font Awesome icons can be found here: https://www.w3schools.com/icons/default.asp
Bootstrap 4 Media Objects

<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Media Object</h2>
<p>Create a media object with the .media and .media-body classes:</p>
<div class="media border p-3">
<img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
</div>
</div>
</div>

</body>
</html>

Output
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">

<h2>Nested Media Objects</h2>
<p>Media objects can also be nested (a media object inside a media object):</p><br>
<div class="media border p-3">
<img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
<div class="media p-3">
<img src="img_avatar2.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div class="media-body">
<h4>Jane Doe <small><i>Posted on February 20 2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

<div class="container mt-3">

<h2>Right-Aligned Media Image</h2>
<p>To right-align the media image, add the image after the .media-body container:</p>
<div class="media border p-3">
<div class="media-body">
<h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
</div>
<img src="img_avatar3.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
</div>

<div class="container mt-3">

<h2>Media Object</h2>
<p>Place the media object to the top, middle or at the bottom with the flex utilities, align-self-*
classes:</p><br>

<div class="media">
<img src="img_avatar1.png" class="align-self-start mr-3" style="width:60px">
<div class="media-body">
<h4>Media Top</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
</div>
</div>

<div class="media mt-3">
<img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>Media Middle</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
</div>
</div>

<div class="media mt-3">
<img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>Media Bottom</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
</div>
</div>
</div>

</body>
</html>
Bootstrap 4 Filters (Advanced)

<div class="container mt-3">

<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>

<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>

</body>
</html>

Output

<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Filterable List</h2>
<p>Type something in the input field to search the list for specific items:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<ul class="list-group" id="myList">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth</li>
</ul>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">

<h2>Filter Anything</h2>
<p>Type something in the input field to search for a specific text inside the div element with
id="myDIV":</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<div id="myDIV" class="mt-3">
<p>I am a paragraph.</p>
<div>I am a div element inside div.</div>
<button class="btn">I am a button</button>
<button class="btn btn-info">Another button</button>
<p>Another paragraph.</p>
</div>
</div>

</body>
</html>
Bootstrap 4 Class Reference
Complete List of All Bootstrap 4 Classes
Complete list of all Bootstrap 4 CSS classes with description and examples:

Bootstrap 4 JS Alert

Close Alerts Via data-* Attributes

Add data-dismiss="alert" to a link or a button element to close the alert message.

Example
<a href="#" class="close" data-dismiss="alert">×</a>

Close Alerts Via JavaScript

Close manually with:

Example
$('.close').alert("close");
Button CSS Classes

For a tutorial about Buttons, read our Bootstrap Buttons Tutorial.

The classes below can be used to style any <a>, <button>, or <input> element:
Via JavaScript
Enable manually with:

$('.btn').button();

Carousel CSS Classes

For a tutorial about Carousels, read our Bootstrap Carousel Tutorial.

Class Description
.carousel Creates a carousel
Adds indicators for the carousel. These are the little dots at the bottom
.carousel-indicators of each slide (which indicates how many slides there are in the
carousel, and which slide the user are currently viewing)
.carousel-inner Adds slides to the carousel
.carousel-item Specifies the content of each slide
.carousel-control-prev
Adds a left (previous) button to the carousel, which allows the user to
go back between the slides
.carousel-control-next
Adds a right (next) button to the carousel, which allows the user to go
forward between the slides
.carousel-control-prev- Used together with .carousel-control-prev to create a "previous"
icon button
.carousel-control-next-
icon Used together with .carousel-control-next to create a "next" button
.carousel-caption Specifies a caption for the carousel
.slide
Adds a CSS transition and animation effect when sliding from one
item to the next. Remove this class if you do not want this effect
Via data-* Attributes

The data-ride="carousel" attribute activates the carousel.

The data-slide and data-slide-to attributes specifies which slide to go to.

The data-slide attribute accepts two values: prev or next, while data-slide-to accept numbers.

Example

<div id="myCarousel" class="carousel slide" data-ride="carousel">

Via JavaScript
Enable manually with:
Example
// Activate Carousel
$("#myCarousel").carousel();

// Enable Carousel Indicators

$(".item").click(function(){
$("#myCarousel").carousel(1);
});

// Enable Carousel Controls

$(".carousel-control-prev").click(function(){
$("#myCarousel").carousel("prev");
});

Carousel Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name
to data-, as in data-interval="".
Name Type Default Description

number, or Specifies the delay (in milliseconds) between each slide.

interval the boolean 5000
false Note: Set interval to false to stop the items from automatically sliding

keyboard boolean true Specifies whether the carousel should react to keyboard events:

 true - the carousel can be navigated (next and previous) with

the keyboard left and right arrows

false - the carousel can NOT be navigated with the keyboard left and
right arrows

Pauses the carousel from going through the next slide when the mouse
string, or pointer enters the carousel, and resumes the sliding when the mouse
pause the boolean "hover" pointer leaves the carousel
false
Note: Set pause to false to stop the ability to pause on hover

Specifies whether the carousel should go through all slides

continuously, or stop at the last slide
wrap boolean true
 true - cycle continuously

false - stop at the last item

Carousel Methods

The following table lists all available carousel methods.

Method Description
.carousel(options) Activates the carousel with an option. See options above for valid values
.carousel("cycle") Goes through the carousel items from left to right
.carousel("pause") Stops the carousel from going through items
.carousel(number) Goes to a specified item (zero-based: first item is 0, second item is 1, etc..)
.carousel("prev") Goes to the previous item
.carousel("next") Goes to the next item
.carousel("dispose") Destroys a carousel

Carousel Events
The following table lists all available carousel events.
Event Description

slide.bs.carousel Occurs when the carousel is about to slide from one item to another

slid.bs.carousel Occurs when the carousel has finished sliding from one item to another

The slid and slide events also has additional properties:

Property Description
direction Returns the direction the carousel is sliding (left or right)

relatedTarget Returns the DOM element that is being slid into place as the active item

Returns the index of where the previous item came from, when moving on to the
from
next one

to Returns the index of the next item

Bootstrap 4 JS Collapse
Collapse CSS Classes
Class Description

.collapse Hides the content

.collapse show Shows the collapsible content by default

.collapsing Added when the transition starts, and removed when it finishes

Via data-* Attributes

Just add data-toggle="collapse" and a data-target to element to automatically assign control

of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be
sure to add the class collapse to the collapsible element. If you'd like it to default open, add the
additional class "show".

Example
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">

Some text..
</div>

Tip: To add accordion-like group management to a collapsible control, add the data attribute data-
parent="#selector".

Via JavaScript
Enable manually with:
$('.collapse').collapse()
Collapse Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name
to data-, as in data-parent="".

Name Type Default Description

All collapsible elements under the specified parent will be closed

parent selector false when this collapsible item is shown. (similar to traditional
accordion behavior)

toggle boolean true Toggles the collapsible element on invocation

Collapse Methods
The following table lists all available collapse methods.
Method Description

.collapse(options) Activates the collapsible element with an option. See options above for valid values

.collapse("toggle") Toggles the collapsible element

.collapse("show") Shows the collapsible element

.collapse("hide") Hides the collapsible element

.collapse("dispose") Destroys the collapsible element

Collapse Events
The following table lists all available collapse events.
Event Description

show.bs.collapse Occurs when the collapsible element is about to be shown

Occurs when the collapsible element is fully shown (after CSS transitions have
shown.bs.collapse
completed)

hide.bs.collapse Occurs when the collapsible element is about to be hidden

Occurs when the collapsible element is fully hidden (after CSS transitions have
hidden.bs.collapse
completed)

Bootstrap JS Dropdown
Dropdown CSS Classes

Class Description

.dropdown Indicates a dropdown menu

.dropdown-item Style links inside the dropdown menu with proper padding etc

.dropdown-item-text Style text or text links inside the dropdown menu with proper padding etc

.dropdown-menu Builds the dropdown menu

.dropdown-menu-right Right-aligns a dropdown menu

.dropdown-header Adds a header inside the dropdown menu

.dropup Indicates a dropup menu

.disabled Disables an item in the dropdown menu

.active Styles the active element in a dropdown menu

.divider Separates items inside the dropdown menu with a horizontal line

Via data-* Attributes

Add data-toggle="dropdown" to a link or a button to toggle a dropdown menu.

Example
<button type="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</button>

Via JavaScript
Enable manually with:
Example
$('.dropdown-toggle').dropdown();

Note: The data-toggle="dropdown" attribute is required regardless of whether you call the
dropdown() method.

Dropdown Methods
The following table lists all available dropdown methods.
Method Description
.dropdown("toggle") Toggles the dropdown. If set, it will open the dropdown menu by default

.dropdown("update") Updates the position of an element's dropdown

.dropdown("dispose") Destroys an element's dropdown

Dropdown Events
The following table lists all available dropdown events.
Event Description Try it

show.bs.dropdown Occurs when the dropdown is about to be shown.

Occurs when the dropdown is fully shown (after CSS transitions have
shown.bs.dropdown
completed)

hide.bs.dropdown Occurs when the dropdown is about to be hidden

Occurs when the dropdown is fully hidden (after CSS transitions have
hidden.bs.dropdown
completed)

Tip: Use jQuery's event.relatedTarget to get the element which triggered the dropdown:

Example
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});

Bootstrap JS Modal

Modal CSS Classes

Class Description

.modal Creates a modal

.modal- Styles the modal properly with border, background-color, etc. Use this class to
content add the modal's header, body, and footer
.modal-
dialog- Centers the modal vertically and horizontally within the page
centered
.modal-
dialog- Adds a scrollbar inside the modal
scrollable
.modal-
header Defines the style for the header of the modal
.modal-
body Defines the style for the body of the modal
Defines the style for the footer in the modal. Note: This area is right-aligned
.modal-
footer by default. To change this, add the justify-content-start or justify-content-
center together with the .modal-footer class
.modal-sm Specifies a small modal
.modal-lg Specifies a large modal
.fade Adds an animation/transition effect which fades the modal in and out

Trigger the Modal Via data-* Attributes

Add data-toggle="modal" and data-target="#modalID" to any element.
Note: For <a> elements, omit data-target, and use href="#modalID" instead:
Example

<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<a data-toggle="modal" href="#myModal">Open Modal</a>

<p data-toggle="modal" data-target="#myModal">Open Modal</p>

Trigger Via JavaScript

Enable manually with:
Example
$("#myModal").modal()

Modal Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name
to data-, as in data-backdrop="".
Name Type Default Description

backdrop boolean or the true Specifies whether the modal should have a dark overlay:
string "static"
 true - dark overlay
 false - no overlay (transparent)
If you specify the value "static", it is not possible to close the
modal when clicking outside of it

Specifies whether the modal can be closed with the escape key
(Esc):
keyboard boolean True  true - the modal can be closed with Esc
 false - the modal cannot be closed with Esc

show boolean true Specifies whether to show the modal when initialized

Modal Methods
The following table lists all available modal methods.
Method Description

.modal(options) Activates the content as a modal. See options above for valid values

.modal("toggle") Toggles the modal

.modal("show") Opens the modal

.modal("hide") Hides the modal

Modal Events
The following table lists all available modal events.
Event Description

show.bs.modal Occurs when the modal is about to be shown

shown.bs.modal Occurs when the modal is fully shown (after CSS transitions have completed)

hide.bs.modal Occurs when the modal is about to be hidden

hidden.bs.modal Occurs when the modal is fully hidden (after CSS transitions have completed)

Bootstrap JS Popover

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

Enable via data-* Attributes

The data-toggle="popover" activates the popover.
The title attribute specifies the header text of the popover.
The data-content attribute specifies the text that should be displayed inside the popover's body.
Example
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the
popover">Toggle popover</a>

Via JavaScript
Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the
specified element and call the popover() method.
Example
// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();

// Select a specified element

$('#myPopover').popover();

Popover Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name
to data-, as in data-placement="".
Name Type Default Description

Specifies whether to add a CSS fade transition effect

when opening and closing the popover
animation boolean true
 true - Add a fading effect

false - Do not add a fading effect

string, or
Appends the popover to a specific element.
container the boolean false
Example: container: 'body'
false

content string "" Specifies the text inside the popover's body

Specifies the number of milliseconds it will take to open and

close the popover.

number, or To specify a delay for opening and another one for closing,
delay 0
object use the object structure:

delay: {show: 500, hide: 100} - which will take 500 ms to

open the popover, but only 100 ms to close it

html boolean false Specifies whether to accept HTML tags in the popover:

 true - Accept HTML tags

 false - Do not accept HTML tags
Note: The HTML must be inserted in the title attribute (or
using the title option).

When set to false (default), jQuery's text() method will be

used. Use this if you are worried about XSS attacks

Specifies the popover position. Possible values:

 "top" - Popover on top

 "bottom" - Popover on bottom
 "left" - Popover on left
placement string "right"  "right" - Popover on right
 "auto" - Lets the browser decide the position of the
popover. For example, if the value is "auto left", the
popover will display on the left side when possible,
otherwise on the right. If the value is "auto bottom",
the popover will display at the bottom when
possible, otherwise on the top

string, or
selector the boolean false Adds the popover to a specified selector
false

Base HTML to use when creating the popover.

The popover's title will be injected into the .popover-header.
The popover's content will be injected into the .popover-
template string body.
.arrow will become the popover's arrow.
The outermost wrapper element should have the .popover
class.
title string "" Specifies the header text of the popover

Specifies how the popover is triggered. Possible values:

 "click" - Trigger the popover with a click

 "hover" - Trigger the popover on hover
trigger string "click"  "focus" - Trigger the popover when it gets focus (by
tabbing or clicking .e.g)
 "manual" - Trigger the popover manually

Tip: To pass multiple values, separate them with a space

number or a
offset 0 Offset of the popover relative to its target
string

string or an
fallbackPlacement "flip" Specifies which position Popper wil use on fallback
aray

Overflow constraint boundary of the popover. Accepts the

string or
boundary "scrollParent" values "viewport", "window" or "scrollParent", or an HTML
element
element
Popover Methods

The following table lists all available popover methods.

Method Description Try it

Activates the popover with an option. See options above for

.popover(options)
valid values

.popover("show") Shows the popover

.popover("hide") Hides the popover

.popover("toggle") Toggles the popover

.popover("dispose") Hides and destroys the popover

.popover("enable") Enables the popover the ability to be shown. This is default

Removes the ability to show a popover. The popover can only be shown if it is
.popover("disable")
re-enabled again

.popover("toggleEnabled") Toggles the ability for the popover to be shown or hidden

.popover("update") Updates the position of the popover

Popover Events
The following table lists all available popover events.
Event Description

show.bs.popover Occurs when the popover is about to be shown

Occurs when the popover is fully shown (after CSS transitions have
shown.bs.popover
completed)

hide.bs.popover Occurs when the popover is about to be hidden

Occurs when the popover is fully hidden (after CSS transitions have
hidden.bs.popover
completed)

Occurs after the show.bs.popover event when the popover template has
inserted.bs.popover
been added to the DOM
Bootstrap JS Scrollspy

JS Scrollspy
Scrollspy is used to automatically update links in a navigation list based on scroll position.

Via data-* Attributes

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.

Requires relative positioning: The element with data-spy="scroll" requires the CSS position
property, with a value of "relative" to work properly.

Example

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#section1">Section 1</a>
    </li>
....
</ul>
</nav>

<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body>
Via JavaScript
Enable manually with:
Example
$('body').scrollspy({target: ".navbar"})

Scrollspy Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name
to data-, as in data-offset="".

Description
Name Type Default
Try it

Specifies the number of pixels to offset from top when

offset number 10
calculating the position of scroll

Scrollspy Methods
The following table lists all available scrollspy methods.

Method Description

When adding and removing elements from the scrollspy, this method can be used
.scrollspy("refresh")
to refresh the document

.scrollspy("dispose") Destroys the scrollspy

Scrollspy Events
The following table lists all available scrollspy events.

Event Description

activate.bs.scrollspy Occurs when a new item becomes activated by the scrollspy

Bootstrap JS Tab

Tab CSS Classes

Tabs are used to separate content into different panes where each pane is viewable one at a time.
Class Description

.nav nav-tabs Creates navigation tabs

.nav nav-pills Creates navigation pills

.nav-item Creates tab items

.nav-link Styles links inside the navigation tab

Makes navigation tabs/pills equal widths of their parent, at screens wider than
.nav-justified
768px. On smaller screens, the nav tabs are stacked

.tab-content Together with .tab-pane and data-toggle="tab", it makes the tab toggleable

.tab-pane Together with .tab-content and data-toggle="tab", it makes the tab toggleable

Via data-* Attributes

Add data-toggle="tab" to each tab, and add a .tab-pane class with a unique ID for every tab
and wrap them in a .tab-content class.
Example

<ul class="nav nav-tabs">
<li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>

Via JavaScript
Enable manually with:
Example
// Select all tabs
$('.nav-tabs a').click(function(){
$(this).tab('show');
})

// Select tab by name

$('.nav-tabs a[href="#home"]').tab('show')

// Select first tab

$('.nav-tabs a:first').tab('show')

// Select last tab

$('.nav-tabs a:last').tab('show')

// Select fourth tab (zero-based)

$('.nav-tabs li:eq(3) a').tab('show')

Tab Options
None

Tab Methods
The following table lists all available tab methods.
Method DescriptioN

.tab("show") Shows the tab

Tab Events
The following table lists all available tab events.
Event Description

show.bs.tab Occurs when the tab is about to be shown.

shown.bs.tab Occurs when the tab is fully shown (after CSS transitions have completed)

hide.bs.tab Occurs when the tab is about to be hidden

hidden.bs.tab Occurs when the tab is fully hidden (after CSS transitions have completed)

Tip: Use jQuery's event.target and event.relatedTarget to get the active tab and the previous active
tab:

Example
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
});

Bootstrap JS Toasts

Toast CSS Classes

The Toast component is like an alert box that is only shown for a couple of seconds when
something happens (i.e. when the user clicks on a button, submits a form, etc.).

Class Description

.toast Creates the toast

.toast-header Creates the toast header

.toast-body Creates the toast body

Activate Via JavaScript

Toasts must be initialized with jQuery: select the specified element and call the toast() method.
Example
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>

Toast Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name
to data-, as in data-animation="".

Name Type Default Description

Specifies whether to add a CSS fade transition effect when

showing and hiding the toast.
animation boolean true
 true - Add a fading effect
 false - Do not add a fading effect
autohide boolean true Specifies whether to hide the toast by default

Specifies the number of milliseconds it will take to hide the

delay number 500
toast once it is shown.

Toast Methods
The following table lists all available toast methods.
Method Description

.toast(options) Activates the toast with an option. See options above for valid values

.toast("show") Shows the toast

.toast("hide") Hides the toast

.toast("dispose") Hides and destroys the toast

Toast Events
The following table lists all available toast events.
Event Description

show.bs.toast Occurs when the toast is about to be shown

shown.bs.toast Occurs when the toast is fully shown (after CSS transitions have completed)

hide.bs.toast Occurs when the toast is about to be hidden

hidden.bs.toast Occurs when the toast is fully hidden (after CSS transitions have completed)

Bootstrap JS Tooltip

JS Tooltip

The Tooltip is a small pop-up box that appears when the user moves the mouse pointer over an
element.

Via data-* Attributes

The data-toggle="tooltip" activates the tooltip.

The title attribute specifies the text that should be displayed inside the tooltip.

Example
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

Via JavaScript
Tooltips are not CSS-only plugins, and must therefore be initialized with jQuery: select the
specified element and call the tooltip() method.
Example
// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element

$('#myTooltip').tooltip();
Tooltip Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name
to data-, as in data-placement="".
Description
Name Type Default
Try it

Specifies whether to add a CSS fade transition effect

when showing and hiding the tooltip
animation boolean true  true - Add a fading effect
 false - Do not add a fading effect

string, or
Appends the tooltip to a specific element.
container the boolean false
Example: container: 'body'
false

Specifies the number of milliseconds it will take to show and

hide the tooltip.

number, or To specify a delay for showing and another one for hiding,
delay 0
object use the object structure:

delay: {show: 500, hide: 100} - which will take 500 ms to

show the tooltip, but only 100 ms to hide it

Specifies whether to accept HTML tags in the tooltip:

 true - Accept HTML tags

 false - Do not accept HTML tags

html boolean false Note: The HTML must be inserted in the title attribute (or
using the title option).

When set to false (default), jQuery's text() method will be

used. Use this if you are worried about XSS attacks

Specifies the tooltip position. Possible values:

 "top" - Tooltip on top

 "bottom" - Tooltip on bottom
 "left" - Tooltip on left
placement string "top"  "right" - Tooltip on right
 "auto" - Lets the browser decide the position of the
tooltip. For example, if the value is "auto left", the
tooltip will display on the left side when possible,
otherwise on the right. If the value is "auto bottom",
the tooltip will display at the bottom when possible,
otherwise on the top

selector string, or false Adds the tooltip to a specified selector

the boolean
false

Base HTML to use when creating the tooltip.

The tooltip's title will be inserted into the element having

the class .tooltip-inner and the element with the class
template string
.tooltip-arrow will become the tooltip's arrow.

The outermost wrapper element should have the .tooltip

class.

title string "" Specifies the text that should be displayed inside the tooltip

Specifies how the tooltip is triggered. Possible values:

 "click" - Trigger the tooltip with a click

 "hover" - Trigger the tooltip on hover
trigger string "hover focus"  "focus" - Trigger the tooltip when it gets focus (by
tabbing or clicking .e.g)
 "manual" - Trigger the tooltip manually

Tip: To pass multiple values, separate them with a space

number or a
offset 0 Offset of the tooltip relative to its target
string

string or an
fallbackPlacement "flip" Specifies which position Popper wil use on fallback
aray

Overflow constraint boundary of the tooltip. Accepts the

string or
boundary "scrollParent" values "viewport", "window" or "scrollParent", or an HTML
element
element

Tooltip Methods
The following table lists all available tooltip methods.
Description
Method
Try it

.tooltip(options) Activates the tooltip with an option. See options above for valid values

.tooltip("show") Shows the tooltip

.tooltip("hide") Hides the tooltip

.tooltip("toggle") Toggles the tooltip

.tooltip("dispose") Hides and destroys the tooltip

Tooltip Events
The following table lists all available tooltip events.
Event Description

show.bs.tooltip Occurs when the tooltip is about to be shown

shown.bs.tooltip Occurs when the tooltip is fully shown (after CSS transitions have completed)

hide.bs.tooltip Occurs when the tooltip is about to be hidden

hidden.bs.tooltip Occurs when the tooltip is fully hidden (after CSS transitions have completed)

Tappi T411
100% (1)
Tappi T411
4 pages
Mahanakhon Structural Design Presentation
100% (1)
Mahanakhon Structural Design Presentation
42 pages
Bootstrap Lecture 1
100% (1)
Bootstrap Lecture 1
16 pages
Bootstrap3.3.7 Tutorial
No ratings yet
Bootstrap3.3.7 Tutorial
186 pages
CBSE Class 10 Biology MCQs - All Chapters PDF
90% (10)
CBSE Class 10 Biology MCQs - All Chapters PDF
7 pages
Scania Parts List
100% (4)
Scania Parts List
2 pages
Boo Strap
No ratings yet
Boo Strap
6 pages
What Is Bootstrap
No ratings yet
What Is Bootstrap
2 pages
What Is Bootstrap?
No ratings yet
What Is Bootstrap?
14 pages
Bootstrap Notes
No ratings yet
Bootstrap Notes
146 pages
Bootstrap 2
No ratings yet
Bootstrap 2
328 pages
Bootstrap
No ratings yet
Bootstrap
17 pages
Web Lecture5
No ratings yet
Web Lecture5
29 pages
Intro To Bootstrap
No ratings yet
Intro To Bootstrap
27 pages
19 Bootstrap Introduction
No ratings yet
19 Bootstrap Introduction
21 pages
Chapter 4 Bootstrap
No ratings yet
Chapter 4 Bootstrap
37 pages
CDBBB 4521711186739687
No ratings yet
CDBBB 4521711186739687
52 pages
Bootstrap
No ratings yet
Bootstrap
5 pages
Cours Gratuit - Com Id 9973
No ratings yet
Cours Gratuit - Com Id 9973
26 pages
Your First Week With Bootstrap
From Everand
Your First Week With Bootstrap
Syed Fazle Rahman
No ratings yet
Bootstrap 4 - Quick Guide - Tutorialspoint PDF
No ratings yet
Bootstrap 4 - Quick Guide - Tutorialspoint PDF
25 pages
Responsive Web Design Using Bootstrap
No ratings yet
Responsive Web Design Using Bootstrap
23 pages
T7 Bootstrap
No ratings yet
T7 Bootstrap
20 pages
Bootstrap 3 Tutorial: Printed by
No ratings yet
Bootstrap 3 Tutorial: Printed by
33 pages
Lecture 03
No ratings yet
Lecture 03
31 pages
W11S01 Bootstrap
No ratings yet
W11S01 Bootstrap
21 pages
Introduction To Bootstrap
No ratings yet
Introduction To Bootstrap
21 pages
Module1 Bootstrap
No ratings yet
Module1 Bootstrap
3 pages
W3schools: Bootstrap Get Started
No ratings yet
W3schools: Bootstrap Get Started
5 pages
BootStrap 5
No ratings yet
BootStrap 5
148 pages
Bootstrap (Front-End Framework)
No ratings yet
Bootstrap (Front-End Framework)
4 pages
Bootstrap Quick Guide
No ratings yet
Bootstrap Quick Guide
27 pages
Bootstrap
No ratings yet
Bootstrap
28 pages
What Is Bootstrap?
No ratings yet
What Is Bootstrap?
166 pages
Bootstrap in Enterprise Applications: Nikhil Chopra Madhuri Lad
No ratings yet
Bootstrap in Enterprise Applications: Nikhil Chopra Madhuri Lad
28 pages
Responsive Web Design
No ratings yet
Responsive Web Design
29 pages
Responsive Web Design
No ratings yet
Responsive Web Design
22 pages
Cours Bosstrap Sas
No ratings yet
Cours Bosstrap Sas
102 pages
Bootstrap Manual
No ratings yet
Bootstrap Manual
217 pages
Bootstrap 5 Report
No ratings yet
Bootstrap 5 Report
21 pages
Bootstrap1 (WAD Module2)
No ratings yet
Bootstrap1 (WAD Module2)
81 pages
Unit - 2 - 2 Bootstrap
No ratings yet
Unit - 2 - 2 Bootstrap
24 pages
Bootstrap Introduction
No ratings yet
Bootstrap Introduction
28 pages
Bootstrap and CSS
No ratings yet
Bootstrap and CSS
63 pages
Bootstrap 3
No ratings yet
Bootstrap 3
78 pages
Interview Ques & Ans For Bootstrap
No ratings yet
Interview Ques & Ans For Bootstrap
11 pages
Lecture Bootstrap 17-18-19
No ratings yet
Lecture Bootstrap 17-18-19
67 pages
Bootstrap
No ratings yet
Bootstrap
4 pages
Module 3
No ratings yet
Module 3
16 pages
Unit V
No ratings yet
Unit V
30 pages
Introduction To Bootsrap
No ratings yet
Introduction To Bootsrap
90 pages
Getting Started with Bootstrap 3.2
From Everand
Getting Started with Bootstrap 3.2
Ryan Flores
No ratings yet
Bootstrap
No ratings yet
Bootstrap
4 pages
What Is Bootstrap
No ratings yet
What Is Bootstrap
3 pages
WEEK 8 Introduction To Bootstrap 1577604054
No ratings yet
WEEK 8 Introduction To Bootstrap 1577604054
90 pages
UNIT3newpptx 2023 10 13 10 47 03
No ratings yet
UNIT3newpptx 2023 10 13 10 47 03
190 pages
Web Programming: Css Bootstrap
No ratings yet
Web Programming: Css Bootstrap
12 pages
05 Bootstrap
No ratings yet
05 Bootstrap
30 pages
Bootstrap Questions
No ratings yet
Bootstrap Questions
88 pages
Bootstrap by Example - Sample Chapter
100% (1)
Bootstrap by Example - Sample Chapter
22 pages
BOOTSTRAP
No ratings yet
BOOTSTRAP
22 pages
Module 4 Notes
No ratings yet
Module 4 Notes
41 pages
Web Technologies Week 05-06 (Bootstrap and JavaScript)
No ratings yet
Web Technologies Week 05-06 (Bootstrap and JavaScript)
47 pages
Mastering Bootstrap 4
From Everand
Mastering Bootstrap 4
Benjamin Jakobus
5/5 (1)
F22 RC Plane
No ratings yet
F22 RC Plane
1 page
Cherrypy Tutorial
50% (2)
Cherrypy Tutorial
53 pages
Coffeescript Tutorial
100% (1)
Coffeescript Tutorial
270 pages
Android Tutorial
100% (1)
Android Tutorial
836 pages
Cakephp Tutorial
100% (1)
Cakephp Tutorial
100 pages
AJAX Tutorial
No ratings yet
AJAX Tutorial
61 pages
Dynamic Dependent Select Box Using Jquery
No ratings yet
Dynamic Dependent Select Box Using Jquery
6 pages
Learn Dart Tutorial - W3adda PDF
No ratings yet
Learn Dart Tutorial - W3adda PDF
228 pages
Python Tutorial - W3school2 PDF
No ratings yet
Python Tutorial - W3school2 PDF
131 pages
Tkinter Javapoint PDF
No ratings yet
Tkinter Javapoint PDF
64 pages
Social Science Class 10 PDF
No ratings yet
Social Science Class 10 PDF
37 pages
PHP Tutorial - W3schools2 PDF
No ratings yet
PHP Tutorial - W3schools2 PDF
88 pages
Literature Review Last Edit
No ratings yet
Literature Review Last Edit
11 pages
BHS Inggris Xi Sem-1 TP 2021-2022
No ratings yet
BHS Inggris Xi Sem-1 TP 2021-2022
8 pages
FCIE V17a Sample Paper
No ratings yet
FCIE V17a Sample Paper
21 pages
Classification of Wildlife: Geography Project
No ratings yet
Classification of Wildlife: Geography Project
2 pages
CRM Section Two
No ratings yet
CRM Section Two
4 pages
Company Profile
No ratings yet
Company Profile
28 pages
Teaching Resume 2017
No ratings yet
Teaching Resume 2017
2 pages
Assisting Decision-Making On Age of Neutering For
No ratings yet
Assisting Decision-Making On Age of Neutering For
8 pages
Acyfar 3 Answer Key Q1andq2 T2ay2324
No ratings yet
Acyfar 3 Answer Key Q1andq2 T2ay2324
3 pages
Gsu100 6648-0.0
No ratings yet
Gsu100 6648-0.0
16 pages
Philips 37pfl7605h CH Q552.1e-La
No ratings yet
Philips 37pfl7605h CH Q552.1e-La
184 pages
Cost Volume Profit Analysis & Absorption Costing
0% (1)
Cost Volume Profit Analysis & Absorption Costing
21 pages
Machine Design, Vol.4 (2012) No.2, ISSN 1821-1259 Pp. 103-106
No ratings yet
Machine Design, Vol.4 (2012) No.2, ISSN 1821-1259 Pp. 103-106
4 pages
Lecture 1a
No ratings yet
Lecture 1a
22 pages
Kerry Anderson Resume 2017 Weebly
No ratings yet
Kerry Anderson Resume 2017 Weebly
3 pages
Query Optimization in Object Oriented Databases Through Detecting Independent Subqueries
No ratings yet
Query Optimization in Object Oriented Databases Through Detecting Independent Subqueries
5 pages
Xanthan Gum On Foam Concrete PDF
No ratings yet
Xanthan Gum On Foam Concrete PDF
8 pages
Action Reesearch Webinar CPD Certificate April 2025
No ratings yet
Action Reesearch Webinar CPD Certificate April 2025
5 pages
Effect of Feed Rate On The Generation of Surface Roughness in Turning
No ratings yet
Effect of Feed Rate On The Generation of Surface Roughness in Turning
7 pages
STC-NMB BANK - May 2020 PDF
No ratings yet
STC-NMB BANK - May 2020 PDF
13 pages
14 Hes
No ratings yet
14 Hes
2 pages
Balancing The Old With The New
No ratings yet
Balancing The Old With The New
4 pages
Rez Sisters Thesis
100% (3)
Rez Sisters Thesis
7 pages
Full Download The Future of HRD, Volume I: Innovation and Technology Mark Loon PDF
100% (2)
Full Download The Future of HRD, Volume I: Innovation and Technology Mark Loon PDF
76 pages
Balloon Tutorial
No ratings yet
Balloon Tutorial
19 pages
Peter Markus NGEM01
No ratings yet
Peter Markus NGEM01
63 pages
Aero Space Rivets
No ratings yet
Aero Space Rivets
16 pages