0% found this document useful (0 votes)

174 views

Bootstrap 2

This document provides an overview and introduction to Bootstrap, a popular front-end framework for building responsive and mobile-first websites. It includes examples of basic Bootstrap pages and components, explains how to include Bootstrap via a CDN or download, and provides resources for learning more about Bootstrap templates, CSS classes, and JavaScript plugins.

Uploaded by

hiwot kebede

Available Formats

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

0% found this document useful (0 votes)

174 views

Bootstrap 2

Uploaded by

hiwot kebede

Available Formats

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

You are on page 1/ 328

Try it Yourself Examples

This Bootstrap 4 tutorial contains hundreds of Bootstrap 4 examples.

With our online editor, you can edit the code, and click on a button to view the
result.

Bootstrap 4 Example
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>
Try it Yourself »
Click on the "Try it Yourself" button to see how it works.

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, new features will
NOT be added to it.
Go To Bootstrap 3 »

Bootstrap 4 Basic Template

We have created a responsive starter template with Bootstrap 4. You are free to
modify, save, share, and use it in your projects:
Demo
Try it Yourself

Bootstrap References
A complete list of all Bootstrap 4 CSS classes with description and examples:

Bootstrap All CSS Classes Popular

If you want to do more with Bootstrap components, see our complete Bootstrap
4 JavaScript/jQuery reference - all with "Try it Yourself" examples:

Bootstrap JS AlertBootstrap JS ButtonBootstrap JS CarouselBootstrap JS

CollapseBootstrap JS DropdownBootstrap JS ModalBootstrap JS
PopoverBootstrap JS ScrollspyBootstrap JS TabBootstrap JS ToastsBootstrap JS
Tooltip

Bootstrap 4 Exercises
Test Yourself With Exercises
Exercise:
Use a Bootstrap class to center the following text:

<p class=" "> Hello World!</p>

Submit Answer »

Start the Exercise

Bootstrap 4 Quiz Test

Test your Bootstrap 4 skills at W3Schools!

Start Bootstrap 4 Quiz!

Did You Know?

W3.CSS is an excellent alternative to Bootstrap 4.

W3.CSS is smaller, faster, and easier to use.

If you want to learn W3.CSS, go to our W3.CSS Tutorial.

Bootstrap 4 Get Started

❮ PreviousNext ❯

What is Bootstrap?
 Bootstrap is a free front-end framework for faster and easier web
development
 Bootstrap includes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels and many
other, as well as optional JavaScript plugins
 Bootstrap also gives you the ability to easily create responsive designs

What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops.

Bootstrap 4 Example
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
<div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
</div>
</div>

Try it Yourself »

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.

Droppped icon support: Bootstrap 4 does not support BS3 Glyphicons.

Use Font-Awesome or other icon libraries instead.

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:

MaxCDN:

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

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.

Show components that require jQuery »

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

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:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

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:

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

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

of the device (which will vary depending on the device).

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

3. Containers

Bootstrap 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

.container
.container-fluid

Two Basic Bootstrap 4 Pages

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

Container Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 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.5.2/css/bootstrap.min.c
ss">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></
script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.m
in.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
></script>
</head>
<body>

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

</body>
</html>

Try it Yourself »

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

Container Fluid Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 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.5.2/css/bootstrap.min.c
ss">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></
script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.m
in.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
></script>
</head>
<body>

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

</body>
</html>

Bootstrap 4 Containers
❮ PreviousNext ❯

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

.container
.container-fluid

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:

Extra small Small Medium Large Extra large

<576px ≥576px ≥768px ≥992px ≥1200px

max-width 100% 540px 720px 960px 1140px

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

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

Try it Yourself »

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%):
Example
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

Try it Yourself »

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

Example
<div class="container pt-3"></div>

Try it Yourself »

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

Container Border and Color

Other utilities, such as borders and colors, are also often used together with
containers:

Example

My First Bootstrap Page

This container has a border and some extra padding and margins.
My First Bootstrap Page
This container has a dark background color and a white text, and some extra
padding and margins.

My First Bootstrap Page

This container has a blue background color and a white text, and some extra
padding and margins.

<div class="container p-3 my-3 border"></div>

<div class="container p-3 my-3 bg-dark text-white"></div>

<div class="container p-3 my-3 bg-primary text-white"></div>

Try it Yourself »

You will learn much more about colors and border utilities, in our BS4 Colors
Chapter and BS4 Utilities Chapter.

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:

Class Extra small Small Medium Large Extra large

<576px ≥576px ≥768px ≥992px ≥1200px

.container-sm 100% 540px 720px 960px 1140px

Class Extra small Small Medium Large Extra large
<576px ≥576px ≥768px ≥992px ≥1200px

.container-md 100% 100% 720px 960px 1140px

.container-lg 100% 100% 100% 960px 1140px

.container-xl 100% 100% 100% 100% 1140px

Example
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>

Bootstrap 4 Grids
❮ PreviousNext ❯

Bootstrap 4 Grid System

Bootstrap's grid system is built with flexbox and allows up to 12 columns across
the page.

If you do not want to use all 12 columns individually, you can group the columns
together to create wider columns:
span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1

span 4 span 4 span 4

span 4 span 8

span 6 span 6

span 12

The grid system is responsive, and the columns will re-arrange automatically
depending on the screen size.

Make sure that the sum adds up to 12 or fewer (it is not required that you use
all 12 available columns).

Grid Classes
The Bootstrap 4 grid system has five classes:

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

 .col-sm- (small devices - screen width equal to or greater than 576px)
 .col-md- (medium devices - screen width equal to or greater than 768px)
 .col-lg- (large devices - screen width equal to or greater than 992px)
 .col-xl- (xlarge devices - screen width equal to or greater than 1200px)

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:

<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

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

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

Three Equal Columns

.col

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

Example
<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Try it Yourself »

Responsive Columns
.col-sm-3

.col-sm-3
.col-sm-3

.col-sm-3

The following example shows how to create four equal-width columns starting at
tablets and scaling to extra large desktops. On mobile phones or screens
that are less than 576px wide, the columns will automatically stack on
top of each other:

Example
<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

Try it Yourself »

Two Unequal Responsive Columns

.col-sm-4
.col-sm-8

The following example shows how to get two various-width columns starting at
tablets and scaling to large extra desktops:

Example
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>

Bootstrap 4 Text/Typography
❮ PreviousNext ❯

Bootstrap 4 Default Settings

Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.

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

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

default).

<h1> - <h6>
Bootstrap 4 styles HTML headings (<h1> to <h6>) with a bolder font-weight and
an increased font-size:

Example
h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)
h4 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)
Try it Yourself »

Display Headings
Display headings are used to stand out more than normal headings (larger font-
size and lighter font-weight), and there are four classes to choose
from: .display-1, .display-2, .display-3, .display-4

Example
Display 1
Display 2
Display 3
Display 4
Try it Yourself »

<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
Try it Yourself »

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

Example
Use the mark element to highlight text.
Try it Yourself »

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

Example
The WHO was founded in 1948.
Try it Yourself »

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

Example
For 50 years, WWF has been protecting the future of nature. The world's leading
conservation organization, WWF works in 100 countries and is supported by 1.2 million
members in the United States and close to 5 million globally.

From WWF's website

Try it Yourself »

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

Example
Coffee

- black hot drink

Milk

- white cold drink

Try it Yourself »
<code>
Bootstrap 4 will style the HTML <code> element in the following way:

Example
The following HTML elements: span, section, and div defines a section in a document.
Try it Yourself »

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

Example
Use ctrl + p to open the Print dialog box.
Try it Yourself »

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

Example
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.

Try it Yourself »
More Typography Classes
The Bootstrap 4 classes below can be added to style HTML elements further:

Class Description Example

.font- Bold text Try it

weight-bold

.font- Bolder text Try it

weight-
bolder

.font-italic Italic text Try it

.font- Light weight text Try it

weight-light

.font- Lighter weight text Try it

weight-
lighter

.font- Normal text Try it

weight-
normal

.lead Makes a paragraph stand out Try it

.small Indicates smaller text (set to 80% of the size of the Try it
parent)

.text-left Indicates left-aligned text Try it

.text-*-left Indicates left-aligned text on small, medium, large or Try it

xlarge screens

.text-break Prevents long text from breaking layout Try it

.text-center Indicates center-aligned text Try it

.text-*- Indicates center-aligned text on small, medium, large or Try it

center xlarge screens

.text- Removes the underline from a link Try it

decoration-
none

.text-right Indicates right-aligned text Try it

.text-*- Indicates right-aligned text on small, medium, large or Try it

right xlarge screens

.text- Indicates justified text Try it

justify

.text- Monospaced text Try it

monospace

.text-nowrap Indicates no wrap text Try it

.text- Indicates lowercased text Try it

lowercase

.text-reset Resets the color of a text or a link (inherits the color Try it
from its parent)

.text- Indicates uppercased text Try it

uppercase

.text- Indicates capitalized text Try it

capitalize

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

smaller font size

.list- Removes the default list-style and left margin on list Try it
unstyled items (works on both <ul> and <ol>). This class only
applies to immediate children list items (to remove the
default list-style from any nested lists, apply this class to
any nested lists as well)

.list-inline Places all list items on a single line (used together Try it
with .list-inline-item on each <li> elements)

.pre- Makes a <pre> element scrollable Try it

scrollable

Complete Bootstrap 4 CSS Reference

For a complete reference of all CSS classes available in Bootstrap 4, visit
our Bootstrap 4 All Classes Reference.

Bootstrap 4 Colors
❮ PreviousNext ❯

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:

Example
This text is muted.
This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

Dark grey text.

Body text.

Light grey text.

Try it Yourself »

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

Example
Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary
link. Dark grey link. Body/black link. Light grey link.

Try it Yourself »

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

Example
Black text with 50% opacity on white background

White text with 50% opacity on black background

Try it Yourself »

Background Colors
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-
warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that background colors do not set the text color, so in some cases you'll
want to use them together with a .text-* class.

Example
This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Bootstrap 4 Tables
❮ PreviousNext ❯

Bootstrap 4 Basic Table

A basic Bootstrap 4 table has a light padding and horizontal dividers.

The .table class adds basic styling to a table:

Example
Firstname Lastname Email

John Doe [email protected]

Firstname Lastname Email

Mary Moe [email protected]

July Dooley [email protected]

Try it Yourself »

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

Example
Firstname Lastname Email

John Doe [email protected]

Mary Moe [email protected]

July Dooley [email protected]

Try it Yourself »

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

Example
Firstname Lastname Email

John Doe [email protected]

Mary Moe [email protected]

July Dooley [email protected]

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

Example
Firstname Lastname Email

John Doe [email protected]

Mary Moe [email protected]

July Dooley [email protected]

Try it Yourself »

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

Example
Firstname Lastname Email

John Doe [email protected]

Mary Moe [email protected]

July Dooley [email protected]

Try it Yourself »

Dark Striped Table

Combine .table-dark and .table-striped to create a dark, striped table:

Example
Firstname Lastname Email

John Doe [email protected]

Mary Moe [email protected]

July Dooley [email protected]

Try it Yourself »

Hoverable Dark Table

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

Example
Firstname Lastname Email

John Doe [email protected]

Mary Moe [email protected]

July Dooley [email protected]

Try it Yourself »

Borderless Table
The .table-borderless class removes borders from the table:

Example
Firstname Lastname Email

John Doe [email protected]

Mary Moe [email protected]

July Dooley [email protected]

Try it Yourself »
Contextual Classes
Contextual classes can be used to color the whole table (<table>), the table
rows (<tr>) or table cells (<td>).

Example
Firstname Lastname Email

Default Defaultson [email protected]

Primary Joe [email protected]

Success Doe [email protected]

Danger Moe [email protected]

Info Dooley [email protected]

Warning Refs [email protected]

Active Activeson [email protected]

Secondary Secondson [email protected]

Light Angie [email protected]

Dark Bo [email protected]

Try it Yourself »

The contextual classes that can be used are:

Class Description

.table-primary Blue: Indicates an important action

.table-success Green: Indicates a successful or positive action

.table-danger Red: Indicates a dangerous or potentially negative action

.table-info Light blue: Indicates a neutral informative change or action

.table-warning Orange: Indicates a warning that might need attention

.table-active Grey: Applies the hover color to the table row or table cell
Class Description

.table-secondary Grey: Indicates a slightly less important action

.table-light Light grey table or table row background

.table-dark Dark grey table or table row background

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:

Example
Firstname Lastname Email

John Doe [email protected]

Mary Moe [email protected]

July Dooley [email protected]

Firstname Lastname Email

John Doe [email protected]

Mary Moe [email protected]

July Dooley [email protected]

Try it Yourself »

Small table
The .table-sm class makes the table smaller by cutting cell padding in half:

Example
Firstname Lastname Email

John Doe [email protected]

Firstname Lastname Email

Mary Moe [email protected]

July Dooley [email protected]

Try it Yourself »

Responsive Tables
The .table-responsive class adds a scrollbar to the table when needed (when it is
too big horizontally):

Example
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Try it Yourself »

You can also decide when the table should get a scrollbar, depending on screen width:
Class Screen width

.table-responsive-sm < 576px

.table-responsive-md < 768px

.table-responsive-lg < 992px

.table-responsive-xl < 1200px

Example
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

Bootstrap 4 Images
❮ PreviousNext ❯

Bootstrap 4 Image Shapes

Rounded Corners:
Circle:

Thumbnail:
Rounded Corners
The .rounded class adds rounded corners to an image:

Example
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Try it Yourself »

Circle
The .rounded-circle class shapes the image to a circle:

Example
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

Try it Yourself »
Thumbnail
The .img-thumbnail class shapes the image to a thumbnail (bordered):

Example
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Try it Yourself »

Aligning Images
Float an image to the right with the .float-right class or to the left with .float-
left:
Example
<img src="paris.jpg" class="float-left">
<img src="paris.jpg" class="float-right">

Try it Yourself »

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

Example
<img src="paris.jpg" class="mx-auto d-block">

Try it Yourself »

Responsive Images
Images come in all sizes. So do screens. Responsive images automatically
adjust to fit the size of the screen.

Create responsive images by adding an .img-fluid class to the <img> tag. The

image will then scale nicely to the parent element.

The .img-fluid class applies max-width: 100%; and height: auto; to the image:

Example
<img class="img-fluid" src="img_chania.jpg" alt="Chania">
Bootstrap 4 Jumbotron
❮ PreviousNext ❯

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.

Bootstrap Tutorial
Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.

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

Example
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>

Try it Yourself »

Full-width Jumbotron
If you want a full-width jumbotron without rounded borders, add the .jumbotron-
fluid class and a .container or .container-fluid inside of it:
Example
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS...</p>
  </div>
</div>

Bootstrap 4 Alerts
❮ PreviousNext ❯

Bootstrap 4 Alerts
Bootstrap 4 provides an easy way to create predefined alert messages:

×Success! This alert box indicates a successful or positive action.

×Info! This alert box indicates a neutral informative change or action.
×Warning! This alert box indicates a warning that might need attention.
×Danger! This alert box indicates a dangerous or potentially negative action.
×Primary! This alert box indicates an important action.
×Secondary! This alert box indicates a less important action.
×Dark! Dark grey alert box.
×Light! Light grey alert box.

Alerts are created with the .alert class, followed by one of the contextual

classes .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .al
ert-secondary, .alert-light or .alert-dark:
Example
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>

Try it Yourself »

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

Success! You should read this message.

Info! You should read this message.

Warning! You should read this message.

Danger! You should read this message.

Primary! You should read this message.

Secondary! You should read this message.

Dark! You should read this message.
Light! You should read this message.

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

Try it Yourself »
Closing Alerts
×Click on the "x" symbol to the right to close me.

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

Example
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>

Try it Yourself »

Tip: × (×) is an HTML entity that is the preferred icon for close buttons,
rather than the letter "x".

For a list of all HTML Entities, visit our HTML Entities Reference.

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

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

Example
<div class="alert alert-danger alert-dismissible fade show">

Try it Yourself »

Complete Bootstrap 4 Alert Reference

For a complete reference of all alert options, methods and events, go to
our Bootstrap 4 JS Alert Reference.

Bootstrap 4 Buttons
❮ PreviousNext ❯

Button Styles
Bootstrap 4 provides different styles of buttons:

Basic Primary Secondary Success Info Warning Danger Dark Light Link

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

Try it Yourself »

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

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

Try it Yourself »
Why do we put a # in the href attribute of the link?

Since we do not have any page to link it to, and we do not want to get a "404"
message, we put # as the link. In real life it should of course been a real URL to
the "Search" page.

Button Outline
Bootstrap 4 provides eight outline/bordered buttons:

Primary Secondary Success Info Warning Danger Dark Light

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

Try it Yourself »

Button Sizes
Use the .btn-lg class for large buttons or .btn-sm class for small buttons:

Large Default Small

Example
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

Try it Yourself »

Block Level Buttons

Add class .btn-block to create a block level button that spans the entire width of
the parent element.

Full-Width Button

Example
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>

Try it Yourself »

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

Active Primary Disabled Primary

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

makes a button unclickable. Note that <a> elements do not support the
disabled attribute and must therefore use the .disabled class to make it visually
appear disabled.

Example
<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>
Try it Yourself »

Spinner Buttons
You can also add "spinners" to a button, which you will learn more about in
our BS4 Spinners Tutorial:

Loading.. Loading.. Loading..

Example
<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>
Loading..
</button>

<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>

<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>

Bootstrap 4 Button Groups

❮ PreviousNext ❯

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

AppleSamsungSony

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

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

Try it Yourself »

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:

Large Buttons:
AppleSamsungSony

Default Buttons:
AppleSamsungSony

Small Buttons:
AppleSamsungSony

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

Try it Yourself »

Vertical Button Groups

Bootstrap 4 also supports vertical button groups:

AppleSamsungSony

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

Try it Yourself »

Nesting Button Groups & Dropdown Menus

AppleSamsung

Sony

Nest button groups to create dropdown menus (you will learn more about
dropdowns in a later chapter):

Example
<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

Try it Yourself »

Split Button Dropdowns

Sony

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

Try it Yourself »

Vertical Button Group w/ Dropdown

AppleSamsung

Sony

Example
<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

Try it Yourself »

Button Groups Side by Side

Button groups are "inline" by default, which makes them appear side by side
when you have multiple groups:

AppleSamsungSony

BMWMercedesVolvo

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

Bootstrap 4 Badges
❮ PreviousNext ❯
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New

Badges are used to add additional information to any content. Use

the .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):

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

Try it Yourself »

Contextual Badges
Primary Secondary Success Danger Warning Info Light Dark

Use any of the contextual classes (.badge-*) to change the color of a badge:

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

Try it Yourself »

Pill Badges
Primary Secondary Success Danger Warning Info Light Dark

Use the .badge-pill class to make the badges more round:

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

Try it Yourself »

Badge inside an Element

An example of using a badge inside a button:

Messages 4

Example
<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light">4</span>
</button>

Bootstrap 4 Progress Bars

❮ PreviousNext ❯

Basic Progress Bar

A progress bar can be used to show a user how far along he/she is in a process.

25% Complete

50% Complete

100% Complete

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:

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

Try it Yourself »

Progress Bar Height

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:

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

Try it Yourself »

Progress Bar Labels

Add text inside the progress bar to show the visible percentage:

70%

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

Try it Yourself »

Colored Progress Bars

By default, the progress bar is blue (primary). Use any of the Bootstrap 4
contextual background classes to its color:

Example

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

Try it Yourself »

Striped Progress Bars

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

Example
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

Try it Yourself »

Animated Progress Bar

Add the .progress-bar-animated class to animate the progress bar:

Example
<div class="progress-bar progress-bar-striped progress-bar-
animated" style="width:40%"></div>

Try it Yourself »

Multiple Progress Bars

Progress bars can also be stacked:

Free Space

Warning

Danger

Example
<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Warning
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Danger
  </div>
</div>

Bootstrap 4 Spinners
❮ PreviousNext ❯
Spinners
To create a spinner/loader, use the .spinner-border class:

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

Try it Yourself »

Colored Spinners
Use any text color utilites to add a color to the spinner:

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

Try it Yourself »

Growing Spinners
Use the .spinner-grow class if you want the spinner/loader to grow instead of
"spin":

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

Try it Yourself »

Spinner Size
Use .spinner-border-sm or .spinner-grow-sm to create a smaller spinner:

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

Try it Yourself »

Spinner Buttons
You can also add spinners to a button, with or without text:

Loading.. Loading.. Loading..

Example
<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>
Loading..
</button>

<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>

<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>

Bootstrap 4 Pagination
❮ PreviousNext ❯

Basic Pagination
If you have a web site with lots of pages, you may wish to add some sort of
pagination to each page.

 Previous
 1

 2
 3

 Next

To create a basic pagination, add the .pagination class to an <ul> element. Then

add the .page-item to each <li> element and a .page-link class to each link
inside <li>:

Example
<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">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>

Try it Yourself »

Active State
The .active class is used to "highlight" the current page:

 Previous
 1

 2

 3

 Next

Example
<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item 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>
Try it Yourself »

Disabled State
The .disabled class is used for un-clickable links:

 Previous
 1

 2

 3

 Next

Example
<ul class="pagination">
  <li class="page-item disabled"><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>

Try it Yourself »

Pagination Sizing
Pagination blocks can also be sized to a larger or a smaller size:

 Previous
 1

 2
 3

 Next

 Previous

 1

 2

 3

 Next

Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:

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

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

Try it Yourself »

Pagination Alignment
Use utility classes to change the alignment of the pagination:

 Previous
 1
 2

 3

 Next

 Previous

 1

 2

 3

 Next

 Previous

 1

 2

 3

 Next

Example

<ul class="pagination" style="margin:20px 0">
<li class="page-item">...</li>
</ul>

Try it Yourself »

Tip: Read more about Bootstrap 4 Utility/Helper classes in our BS4 Utilities

Chapter.
Breadcrumbs
Another form for pagination, is breadcrumbs:

 Photos
 Summer 2017
 Italy
 Rome

The .breadcrumb and .breadcrumb-item classes indicates the current page's location

within a navigational hierarchy:

Example
<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Photos</a></li>
  <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
  <li class="breadcrumb-item"><a href="#">Italy</a></li>
  <li class="breadcrumb-item active">Rome</li>
</ul>

Bootstrap 4 List Groups

❮ PreviousNext ❯

Basic List Groups

The most basic list group is an unordered list with list items:

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

Example
<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Try it Yourself »

Active State
 Active item
 Second item
 Third item

Use the .active class to highlight the current item:

Example
<ul class="list-group">
  <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>

Try it Yourself »

List Group With Linked Items

First itemSecond itemThird item
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:

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

Try it Yourself »

Disabled Item
The .disabled class adds a lighter text color to the disabled item. And when used
on links, it will remove the hover effect:

Disabled itemDisabled itemThird item

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

Try it Yourself »

Flush / Remove Borders

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

 First item
 Second item
 Third item

 Fourth item

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

Try it Yourself »

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:

 First item
 Second item
 Third item
 Fourth item

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

Try it Yourself »
Contextual Classes
Contextual classes can be used to color list items:

 Success item
 Secondary item
 Info item
 Warning item
 Danger item
 Primary item
 Dark item
 Light item

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

secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .lis
t-group-item-primary, list-group-item-dark and list-group-item-light,:

Example
<ul class="list-group">
  <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>

Try it Yourself »

Link items with Contextual Classes

Action itemSuccess itemSecondary itemInfo itemWarning itemDanger
itemPrimary itemDark itemLight item
Example
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action
item</a>
  <a href="#" class="list-group-item list-group-item-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>

Try it Yourself »

List Group with Badges

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

 Inbox12
 Ads50
 Junk99

Example
<ul class="list-group">
  <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>

Bootstrap 4 Cards
❮ PreviousNext ❯

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

Some example text some example text. John Doe is an architect and engineer

See Profile

Basic Card
A basic card is created with the .card class, and content inside the card has
a .card-body class:

Basic card

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

Try it Yourself »

If you are familiar with Bootstrap 3, cards replace old panels, wells, and
thumbnails.

Header and Footer

Header
Content

Footer

The .card-header class adds a heading to the card and the .card-footer class adds

a footer to the card:

Example
<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

Try it Yourself »

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.

Example
Basic card
Primary card

Success card

Info card

Warning card

Danger card

Secondary card

Dark card

Light card

Try it Yourself »

Titles, text, and links

Card title
Some example text. Some example text.

Card link Another link

Use .card-title to add card titles to any heading element. The .card-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.
Example
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text. Some example text.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Try it Yourself »

Card Images
John Doe

Some example text some example text. John Doe is an architect and engineer

See Profile

Jane Doe

Some example text some example text. Jane Doe is an architect and engineer

See Profile

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:
Example
<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

Try it Yourself »

Stretched Link
Add the .stretched-link class to a link inside the card, and it will make the whole
card clickable and hoverable (the card will act as a link):
John Doe

Some example text some example text. John Doe is an architect and engineer

See Profile

Jane Doe

Some example text some example text. Jane Doe is an architect and engineer

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

Try it Yourself »

Card Image Overlays

John Doe

Some example text some example text. Some example text some example text.
Some example text some example text. Some example text some example text.

See Profile

Turn an image into a card background and use .card-img-overlay to add text on

top of the image:

Example
<div class="card" style="width:500px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

Try it Yourself »

Card Columns
Some text inside the first card

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

Some text inside the fifth card

Some text inside the sixth card

The .card-columns class creates a masonry-like grid of cards (like pinterest). The

layout will automatically adjust as you insert more cards.

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

Example
<div class="card-columns">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </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>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </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>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the sixth card</p>
    </div>
  </div>
</div>

Try it Yourself »

Card Deck
Some text inside the first card

Some more text to increase the height

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

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):
Example
<div class="card-deck">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </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>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </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>

Try it Yourself »

Card Group
Some text inside the first card

Some more text to increase the height

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

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:

Example
<div class="card-group">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </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>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </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>

Bootstrap 4 Dropdowns
❮ PreviousNext ❯

Basic Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one
value from a predefined list:

Dropdown button

Example
<div class="dropdown">
  <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" href="#">Link 3</a>
  </div>
</div>

Try it Yourself »

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.

Dropdown Divider
Dropdown button

The .dropdown-divider class is used to separate links inside the dropdown menu

with a thin horizontal border:

Example
<div class="dropdown-divider"></div>
Try it Yourself »

Dropdown Header
Dropdown button

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

Example
<div class="dropdown-header">Dropdown header 1</div>

Try it Yourself »

Disable and Active items

Dropdown button

Highlight a specific dropdown item with the .active class (adds a blue

background color).

To disable an item in the dropdown menu, use the .disabled class (gets a light-

grey text color and a "no-parking-sign" icon on hover):

Example
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>

Try it Yourself »

Dropdown Position
Dropright
Dropleft

You can also create a "dropright" or "dropleft" menu, by adding

the .dropright or .dropleft class to the dropdown element. Note that the
caret/arrow is added automatically:

Dropright
<div class="dropdown dropright">

Try it Yourself »

Dropleft
<div class="dropdown dropleft">

Try it Yourself »

Dropdown Menu Right

Wide dropdown button to demonstrate this example

To right-align the dropdown menu, add the .dropdown-menu-right class to the

element with .dropdown-menu:

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

Try it Yourself »

Dropup
Dropdown button

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

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

Try it Yourself »

Dropdown Text
Dropdown button

The .dropdown-item-text class is used to add plain text to a dropdown item, or

used on links for default link styling.

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

Try it Yourself »

Grouped Buttons with a Dropdown

AppleSamsung
Sony

Try it Yourself »

Split Button Dropdowns

Primary

Secondary

Success

Info

Warning

Danger

Example
<div class="btn-group">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-
toggle-split" data-toggle="dropdown">
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
  </div>
</div>

Try it Yourself »
Vertical Button Group w/ Dropdown
AppleSamsung
Sony

Bootstrap 4 Collapse
❮ PreviousNext ❯

Basic Collapsible
Collapsibles are useful when you want to hide and show large amount of
content:

Click Me

Example
<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

Try it Yourself »

Example Explained
The .collapse class indicates a collapsible element (a <div> in our example);
this is the content that will be shown or hidden with a click of a button.

To control (show/hide) the collapsible content, add the data-

toggle="collapse" attribute to an <a> or a <button> element. Then add the data-
target="#id" attribute to connect the button with the collapsible content (<div
id="demo">).

Note: For <a> elements, you can use the href attribute instead of the data-

target attribute:

Example
<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

Try it Yourself »

By default, the collapsible content is hidden. However, you can add

the .show class to show the content by default:

Example
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>

Try it Yourself »

ADVERTISEMENT
Accordion
Collapsible Group Item #1
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.

Collapsible Group Item #2

Collapsible Group Item #3

The following example shows a simple accordion by extending the card

component.

Note: Use the data-parent attribute to make sure that all collapsible elements

under the specified parent will be closed when one of the collapsible item is
shown.

Example
<div id="accordion">

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

Try it Yourself »

Complete Bootstrap 4 Collapse Reference

For a complete reference of all collapse options, methods and events, go to
our Bootstrap 4 JS Collapse Reference.

Bootstrap 4 Navs
❮ PreviousNext ❯
Nav Menus
LinkLinkLinkDisabled

If you want to create a simple horizontal menu, add the .nav class to

a <ul> element, followed by .nav-item for each <li> and add the .nav-link class to
their links:

Example
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Try it Yourself »

Aligned Nav
LinkLinkLinkDisabledLinkLinkLinkDisabled

Add the .justify-content-center class to center the nav, and the .justify-content-

end class to right-align the nav.

Example

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

<ul class="nav justify-content-end">
Try it Yourself »

Vertical Nav
LinkLinkLinkDisabled

Add the .flex-column class to create a vertical nav:

Example
<ul class="nav flex-column">

Try it Yourself »

Tabs
Active LinkLinkDisabled

Turn the nav menu into navigation tabs with the .nav-tabs class. Add
the .active class to the active/current link. If you want the tabs to be togglable,
see the last example on this page.

Example
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Try it Yourself »

Pills
ActiveLinkLinkDisabled

Turn the nav menu into navigation pills with the .nav-pills class. If you want the
pills to be togglable, see the last example on this page.

Example
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Try it Yourself »

Justified Tabs/pills
Justify the tabs/pills with the .nav-justified class (equal width):

 Active
 Link

 Link
 Disabled

 Active
 Link
 Link
 Disabled

Example
<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

Try it Yourself »

Pills with Dropdown

 Active
 Dropdown
 Link
 Disabled

Example
<ul class="nav nav-pills">
  <li class="nav-item">
    <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>
    <div class="dropdown-menu">
      <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>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Try it Yourself »

Tabs with Dropdown

 Active
 Dropdown
 Link
 Disabled

Example
<ul class="nav nav-tabs">
  <li class="nav-item">
    <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>
    <div class="dropdown-menu">
      <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>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Try it Yourself »
Toggleable / Dynamic Tabs
 Home
 Menu 1
 Menu 2

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

To make the tabs toggleable, add the data-toggle="tab" attribute to each link.

Then add a .tab-pane class with a unique ID for every tab and wrap them inside
a <div> element with class .tab-content.

If you want the tabs to fade in and out when clicking on them, add
the .fade class to .tab-pane:

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>

<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>
Try it Yourself »

Toggleable / Dynamic Pills

 Home
 Menu 1
 Menu 2

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

The same code applies to pills; only change the data-toggle attribute to data-
toggle="pill":

Example

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
  </li>
</ul>

Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page:

Logo

 Link
 Link
 Disabled

Basic Navbar
With Bootstrap, a navigation bar can extend or collapse, depending on the
screen size.

A standard navigation bar is created with the .navbar class, followed by a

responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar
vertically on extra large, large, medium or small screens).

To add links inside the navbar, use a <ul> element with class="navbar-nav". Then

add <li> elements with a .nav-item class followed by an <a> element with a .nav-
link class:

 Link 1
 Link 2
 Link 3

Example

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

</nav>

Try it Yourself »

Vertical Navbar
Remove the .navbar-expand-xl|lg|md|sm class to create a vertical navigation bar:

 Link 1
 Link 2
 Link 3

Example

<nav class="navbar bg-light">

</nav>

Try it Yourself »

Centered Navbar
Add the .justify-content-center class to center the navigation bar.

The following example will center the navigation bar 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):

 Link 1
 Link 2
 Link 3

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

Try it Yourself »

Colored Navbar
 Active
 Link
 Link
 Disabled
 Active
 Link
 Link
 Disabled

 Active
 Link
 Link
 Disabled

Use any of the .bg-color classes to change the background color of the navbar

(.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark a
nd .bg-light)

Tip: Add a white text color to all links in the navbar with the .navbar-dark class,

or use the .navbar-light class to add a black text color.

Example

<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>

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

Try it Yourself »

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.

Brand / Logo
The .navbar-brand class is used to highlight the brand/logo/project name of your
page:

Logo

 Link 1
 Link 2
 Link 3

Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
...
</nav>

Try it Yourself »

When using the .navbar-brand class on images, Bootstrap 4 will automatically

style the image to fit the navbar vertically.
 Link 1
 Link 2
 Link 3

Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">
    <img src="bird.jpg" alt="Logo" style="width:40px;">
  </a>
...
</nav>

Try it Yourself »

Collapsing The Navigation Bar

Navbar

Very often, especially on small screens, you want to hide the navigation links
and replace them with a button that should reveal them when clicked on.
To create a collapsible navigation bar, use a button with class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget". Then wrap the navbar
content (links, etc) inside a div element with class="collapse navbar-collapse",
followed by an id that matches the data-target of the button: "thetarget".

Example
<nav class="navbar navbar-expand-md bg-dark navbar-dark">

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

Try it Yourself »

Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar
links and display the toggler button.

Navbar With Dropdown

Logo

 Link 1
 Link 2
 Dropdown link

Navbars can also hold dropdown menus:

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

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

    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-
toggle="dropdown">
        Dropdown link
      </a>
      <div class="dropdown-menu">
        <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>

Try it Yourself »

Navbar Forms and Buttons

Search
Add a <form> element with class="form-inline" to group inputs and buttons side-
by-side:

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

Try it Yourself »

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.

Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="/action_page.php">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </form>
</nav>

Try it Yourself »

Navbar Text
 Link 1
 Link 2

Navbar text
Use the .navbar-text class to vertical align any elements inside the navbar
that are not links (ensures proper padding and text color).

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

  <span class="navbar-text">
    Navbar text
  </span>

</nav>

Bootstrap 4 Forms
❮ PreviousNext ❯

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

Bootstrap 4 Stacked Form

Email:

Password:

Remember me
Submit

The following example creates a stacked form with two input fields, one
checkbox, and a submit button.

Add a wrapper element with .form-group, around each form control, to ensure

proper margins:

Example
<form action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" placeholder="Enter
email" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" placeholder="Enter
password" id="pwd">
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Try it Yourself »

Bootstrap Inline Form

Email: Password:

Remember me

Submit

In an inline form, all of the elements are inline and left-aligned.

Note: This only applies to forms within viewports that are at least
576px wide. On screens smaller than 576px, it will stack horizontally.

Additional rule for an inline form:

 Add class .form-inline to the <form> element

The following example creates an inline form with two input fields, one
checkbox, and one submit button:

Example
<form class="form-inline" action="/action_page.php">
  <label for="email">Email address:</label>
  <input type="email" class="form-control" placeholder="Enter
email" id="email">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" placeholder="Enter
password" id="pwd">
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
Try it Yourself »

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

Email: Password:

Remember me
Submit

Example
<form class="form-inline" action="/action_page.php">
  <label for="email" class="mr-sm-2">Email address:</label>
  <input type="email" class="form-control mb-2 mr-sm-
2" placeholder="Enter email" id="email">
  <label for="pwd" class="mr-sm-2">Password:</label>
  <input type="password" class="form-control mb-2 mr-sm-
2" placeholder="Enter password" id="pwd">
  <div class="form-check mb-2 mr-sm-2">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Try it Yourself »

You will learn more about spacing and other "helper" classes in our Bootstrap 4
Utilities Chapter.

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.

Example
<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" id="email" placeholde
r="Enter email" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Enter
password" name="pswd">
    </div>
  </div>
</form>

Try it Yourself »

If you want less grid margins (override default column gutters), use .form-
row instead of .row:

Example
<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" id="email" placeholde
r="Enter email" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Enter
password" name="pswd">
    </div>
  </div>
</form>

Try it Yourself »

Form Validation
Username:
Please fill out this field.

Password:
Please fill out this field.

I agree on blabla.
Check this checkbox to continue.

You can use different validation classes to provide valuable feedback to users.
Add either .was-validated or .needs-validation to the <form> element, depending on
whether you want to provide validation feedback before or after submitting the
form. The input fields will have a green (valid) or red (invalid) border to indicate
what's missing in the form. You can also add a .valid-feedback or .invalid-
feedback message to tell the user explicitly what's missing, or needs to be done
before submitting the form.

Example
In this example, we use .was-validated to indicate what's missing before
submitting the form:

<form action="/action_page.php" class="was-validated">
  <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" placeholde
r="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" req
uired> 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>

Try it Yourself »

Example
In this example, we use .needs-validation, which will add the validation effect
AFTER the form has been submitting (if there's anything missing). Note that you
will also have to add some jQuery code for this example to work properly:

<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" placeholde
r="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" req
uired> 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>

Bootstrap 4 Form Inputs

❮ PreviousNext ❯

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!

Name:

Password:

The following example contains two input elements; one of type="text" and one
of type="password". As we mentioned in the Forms chapter, we use the .form-
control class to style inputs with full-width and proper padding, etc:

Example
<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

Try it Yourself »

Bootstrap Textarea
Comment:

The following example contains a textarea:

Example
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>

Try it Yourself »

Bootstrap Checkboxes
Option 1

Option 2

Option 3

Checkboxes are used if you want the user to select any number of options from
a list of preset options.

The following example contains three checkboxes. The last option is disabled:

Example
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disable
d>Option 3
  </label>
</div>

Try it Yourself »

Example explained
Use a wrapper element with class="form-check" to ensure proper margins for
labels and checkboxes.

Add the .form-check-label class to label elements, and .form-check-input to style

checkboxes properly inside the .form-check container.

Inline Checkboxes
Use the .form-check-inline class if you want the checkboxes to appear on the
same line:

Option 1

Option 2

Option 3

Example
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disable
d>Option 3
  </label>
</div>

Try it Yourself »

Bootstrap Radio Buttons

Option 1

Option 2

Option 3

Radio buttons are used if you want to limit the user to just one selection from a
list of preset options.

The following example contains three radio buttons. The last option is disabled:

Example
<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
</div>
<div class="form-check disabled">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disable
d>Option 3
  </label>
</div>

Try it Yourself »

As with checkboxes, use the .form-check-inline class if you want the radio

buttons to appear on the same line:

Option 1

Option 2

Option 3

Example
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
</div>
<div class="form-check-inline disabled">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disable
d>Option 3
  </label>
</div>

Try it Yourself »
Bootstrap Select List
Select list (select one):
Multiple select list (hold ctrl or shift (or drag with the mouse) to select more
than one):

Select lists are used if you want to allow the user to pick from multiple options.

The following example contains a dropdown list (select list):

Example
<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

Try it Yourself »

Form Control Sizing

Change the size of the form control with .form-control-sm or .form-control-lg:

Example
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">

Try it Yourself »
Form Control with Plain Text
Use the .form-control-plaintext if you want to style the input field as plain text:

Example
<input type="text" class="form-control-plaintext">

Try it Yourself »

Form Control File and Range

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:

Example
<input type="range" class="form-control-range">
<input type="file" class="form-control-file border">

Bootstrap 4 Input Groups

❮ PreviousNext ❯

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.

@example.com

Example
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username">
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Your Email">
    <div class="input-group-append">
      <span class="input-group-text">@example.com</span>
    </div>
  </div>
</form>

Try it Yourself »

Tip: We use the .mb-3 utility class to ensure that the input group gets a proper
margin bottom. Read more about utility classes in our BS4 Utilities Chapter.

Input Group Sizing

Use the .input-group-sm class for small input groups and .input-group-lg for large
inputs groups:

Small
Default

Large

Example
<form>
  <div class="input-group mb-3 input-group-sm">
     <div class="input-group-prepend">
       <span class="input-group-text">Small</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <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">
    <div class="input-group-prepend">
      <span class="input-group-text">Large</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>

Try it Yourself »

Multiple Inputs and Helpers

Add multiple inputs or addons:

Person

OneTwoThree

Example

<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <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">
    <div class="input-group-prepend">
      <span class="input-group-text">One</span>
      <span class="input-group-text">Two</span>
      <span class="input-group-text">Three</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>

Try it Yourself »

Input Group with Checkboxes and Radios

You can also use checkboxes or radio buttons instead of text:
Example
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox">
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>

Try it Yourself »

Input Group Buttons

Basic Button

OKCancel

Example
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <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="Something
clever..">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">OK</button>
    <button class="btn btn-danger" type="button">Cancel</button>
  </div>
</div>

Try it Yourself »

Input Group with Dropdown Button

Add a dropdown button in the input group. Note that you don't need the
.dropdown wrapper, as you normally would.

Dropdown button

Example
<div class="input-group mt-3 mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary 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" href="#">Link 3</a>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>

Try it Yourself »

Input Group Labels

Put labels outside of the input group, and remember that the value of the for
attribute should match the id of the input.

Click on the label and it will bring focus to the input:

Write your email here:

@example.com

Example
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Email" id="demo" n
ame="email">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>

Bootstrap 4 Custom Forms

❮ PreviousNext ❯
Bootstrap 4 Custom Forms
Bootstrap 4 comes with customized form elements, that are meant to replace
browser defaults:

Custom checkbox

Default checkbox

Custom radio

Default radio

Custom Range:

Default Range:

Custom file upload

Toggle this custom switch

Custom Checkbox
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 input with type="checkbox".

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

Custom checkbox
Default checkbox

Example
<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck"
name="example1">
    <label class="custom-control-label" for="customCheck">Check this
custom checkbox</label>
  </div>
</form>

Try it Yourself »

Custom Switch
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:

Toggle me

Example
<form>
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="switch1">
    <label class="custom-control-label" for="switch1">Toggle me</label>
  </div>
</form>

Try it Yourself »

Custom Radio buttons

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 input with type="radio".

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

Custom radio

Default radio

Example
<form>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio" nam
e="example1" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom
radio</label>
  </div>
</form>

Try it Yourself »

Inline Custom Form Controls

If you want the custom form controls to sit side by side (inline), add the .custom-
control-inline to the wrapper/container:

Custom radio

Example
<form>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" nam
e="example" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio
1</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" na
me="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">Custom radio
2</label>
  </div>
</form>

Try it Yourself »

Custom Select Menu

To create a custom select menu, add the .custom-select class to the <select>
element:

Example
<form>
  <select name="cars" class="custom-select">
    <option selected>Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

Try it Yourself »

Custom Select Menu Size

Use the .custom-select-sm class to create a small select menu and the .custom-
select-lg class for a large one:

Example
<form>
  
  <select name="cars" class="custom-select-sm">
    <option selected>Small Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>

  <select name="cars" class="custom-select-lg">
    <option selected>Large Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

Try it Yourself »

Custom Range
To create a custom range menu, add the .custom-range class to an input with
type="<range>":

Custom range

Default range

Example
<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" nam
e="points1">
</form>

Try it Yourself »

Custom File Upload

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

Tip: If you use labels for accompanying text, add the .custom-file-label class to

it. Note that the value of the for attribute should match the id of the checkbox:

Choose file
Default file:

Note that you also have to include some jQuery code if you want the name of
the file to appear when you select a specific file:

Example
<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>

Bootstrap 4 Carousel
The Carousel is a slideshow for cycling through elements.
How To Create a Carousel
The following example shows how to create a basic carousel with indicators and
controls:

Example
<div id="demo" class="carousel slide" data-ride="carousel">

</div>

Try it Yourself »
Example explained
A description of what each class from the example above do:

Class Description

.carousel Creates a carousel

.carousel- Adds indicators for the carousel. These are the little dots at the
indicators bottom 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- Adds a left (previous) button to the carousel, which allows the
control-prev user to go back between the slides

.carousel- Adds a right (next) button to the carousel, which allows the user
control-next to go forward between the slides

.carousel- Used together with .carousel-control-prev to create a "previous"

control-prev- button
icon

.carousel- Used together with .carousel-control-next to create a "next"

control-next- button
icon

.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

Add Captions to Slides

Los Angeles
We had such a great time in LA!

Add elements inside <div class="carousel-caption"> within each <div

class="carousel-item"> to create a caption for each slide:

Example
<div class="carousel-item">
  <img src="la.jpg" alt="Los Angeles">
  <div class="carousel-caption">
    <h3>Los Angeles</h3>
    <p>We had such a great time in LA!</p>
  </div>
</div>

Bootstrap 4 Modal
❮ PreviousNext ❯

Bootstrap 4 Modal
The Modal component is a dialog box/popup window that is displayed on top of
the current page:

Open modal

How To Create a Modal

The following example shows how to create a basic modal:

Example

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

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

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

      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-
dismiss="modal">Close</button>
      </div>

</div>
</div>
</div>

Try it Yourself »

Add animation
Use the .fade class to add a fading effect when opening and closing the modal:

Example

<div class="modal fade"></div>

Try it Yourself »

Modal Size
Change the size of the modal by adding the .modal-sm class for small
modals, .modal-lg class for large modals, or .modal-xl for extra large modals.
Add the size class to the <div> element with class .modal-dialog:

Small Modal
<div class="modal-dialog modal-sm">

Try it Yourself »

Large Modal
<div class="modal-dialog modal-lg">

Try it Yourself »

Extra Large Modal

Try it Yourself »

By default, modals are "medium" in size.

Centered Modal
Center the modal vertically and horizontally within the page, with the .modal-
dialog-centered class:

Example
<div class="modal-dialog modal-dialog-centered">

Try it Yourself »

Scrolling Modal
When you have alot of content inside the modal, a scrollbar is added to the
page. See the examples below to understand it:

Example
<div class="modal-dialog">

Try it Yourself »

However, it is possible to only scroll inside the modal, instead of the page itself,
by adding .modal-dialog-scrollable to .modal-dialog:

Example
<div class="modal-dialog modal-dialog-scrollable">

Bootstrap 4 Tooltip
❮ PreviousNext ❯

Bootstrap 4 Tooltip
The Tooltip component is small pop-up box that appears when the user moves
the mouse pointer over an element:

Hover over me Hover over me

How To Create a Tooltip

To create a tooltip, add the data-toggle="tooltip" attribute to an element.

Use the title attribute to specify the text that should be displayed inside the
tooltip:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

Note: Tooltips must be initialized with jQuery: select the specified element and
call the tooltip() method.

The following code will enable all tooltips in the document:

Example
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

Try it Yourself »

Positioning Tooltips
By default, the tooltip will appear on top of the element.

Use the data-placement attribute to set the position of the tooltip on top, bottom,

left or the right side of the element:

Example
<a href="#" data-toggle="tooltip" data-placement="top" titl
e="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" titl
e="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" titl
e="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" titl
e="Hooray!">Hover</a>

Bootstrap 4 Popover
❮ PreviousNext ❯

Bootstrap 4 Popover
The Popover component is similar to tooltips; it is a pop-up box that appears
when the user clicks on an element. The difference is that the popover can
contain much more content.

Toggle popover Toggle popover

How To Create a Popover

To create a popover, add the data-toggle="popover" attribute to an element.

Use the title attribute to specify the header text of the popover, and use
the data-content attribute to specify the text that should be displayed inside the
popover's body:

<a href="#" data-toggle="popover" title="Popover Header" data-
content="Some content inside the popover">Toggle popover</a>

Note: Popovers must be initialized with jQuery: select the specified element

and call the popover() method.

The following code will enable all popovers in the document:

Example
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>

Try it Yourself »

Positioning Popovers
By default, the popover will appear on the right side of the element.
Use the data-placement attribute to set the position of the popover on top,
bottom, left or the right side of the element:

Example
<a href="#" title="Header" data-toggle="popover" data-placement="top" dat
a-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom"
data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" da
ta-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" d
ata-content="Content">Click</a>

Try it Yourself »

Note: The placement attributes do not work as you expect if it is not enough

room for them. For example: if you use the top placement at the top of a page
(where it is no room for it), it will instead display the popover below the
element or to the right (wherever it is room for it).

Closing Popovers
By default, the popover is closed when you click on the element again.
However, you can use the data-trigger="focus" attribute which will close the
popover when clicking outside the element:

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

Try it Yourself »

Tip: If you want the popover to be displayed when you move the mouse pointer
over the element, use the data-trigger attribute with a value of "hover":

Example
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" dat
a-content="Some content">Hover over me</a>
-

Bootstrap 4 Toast
❮ PreviousNext ❯

Bootstrap 4 Toast
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.).

Toast Header5 mins ago×

Some text inside the toast body

How To Create a Toast

To create a toast, use the .toast class, and add a .toast-header and a .toast-
body inside of it:

<div class="toast">
  <div class="toast-header">
    Toast Header
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

Note: Toasts must be initialized with jQuery: select the specified element and
call the toast() method.

The following code will show all "toasts" in the document:

Example
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>

Try it Yourself »

Show and Hide a Toast

Toasts are hidden by default. Use the data-autohide="false" attribute to show it
by default. To close it, use a <button> element and add data-dismiss="toast":

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

Try it Yourself »

Notice the mr-auto, ml-2 and mb-1 classes? They are used to add specific margins.

You will learn more about them in the Bootstrap 4 Utilities Chapter.

Complete Bootstrap Toast Reference

For a complete reference of all toast options, methods and events, go to
our Bootstrap JS Toast Reference.

-
Bootstrap 4 Scrollspy
(Advanced)
❮ PreviousNext ❯

Bootstrap 4 Scrollspy
Scrollspy is used to automatically update links in a navigation list based
on scroll position.

How To Create a Scrollspy

The following example shows how to create a scrollspy:

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><a href="#section1">Section 1</a></li>
    ...
</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>

Try it Yourself »

Example Explained
Add data-spy="scroll" to the element that should be used as the scrollable area
(often this is the <body> element).

Then add the data-target attribute with a value of the id or the class name of the
navigation bar (.navbar). This is to make sure that the navbar is connected with
the scrollable area.

Note that scrollable elements must match the ID of the links inside the navbar's
list items (<div id="section1"> matches <a href="#section1">).

The optional data-offset attribute specifies the number of pixels to offset from

Requires relative positioning: The element with data-spy="scroll" requires

the CSS position property, with a value of "relative" to work properly.

Scrollspy Vertical Menu

In this example, we use Bootstrap's vertical navigation pills as menu:

Example
<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>
          ...
        </ul>
      </nav>
      <div class="col-sm-9 col-8">
        <div id="section1">
          <h1>Section 1</h1>
          <p>Try to scroll this page and look at the menu while
scrolling!</p>
        </div>
        ...
      </div>
    </div>
  </div>

</body>

Try it Yourself »

Complete Bootstrap Scrollspy Reference

For a complete reference of all scrollspy options, methods and events, go to
our Bootstrap JS Scrollspy Reference.

Bootstrap 4 Utilities
❮ PreviousNext ❯

Bootstrap 4 Utilities
Bootstrap 4 has a lot of utility/helper classes to quickly style elements without
using any CSS code.
Borders
Use the border classes to add or remove borders from an element:

Example

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

Try it Yourself »

Border Color
Add a color to the border with any of the contextual border color classes:

Example

Example
<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>
Try it Yourself »

Border Radius
Add rounded corners to an element with the rounded classes:

Example

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

Try it Yourself »

Float and Clearfix

Float an element to the right with the .float-right class or to the left with .float-
left, and clear floats with the .clearfix class:

Example
Float leftFloat right

Example
<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>

Try it Yourself »

Responsive Floats
Float an element to the left or to the right depending on screen width, with the
responsive float classes (.float-*-left|right - where *
is sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):

Example
Float right on small screens or wider

Float right on medium screens or wider

Float right on large screens or wider

Float right on extra large screens or wider

Float none

Example
<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>
Try it Yourself »

Center Align
Center an element with the .mx-auto class (adds margin-left and margin-right:
auto):

Example
Centered

Example
<div class="mx-auto bg-warning" style="width:150px">Centered</div>

Try it Yourself »

Width
Set the width of an element with the w-* classes (.w-25, .w-50, .w-75, .w-100, .mw-
100):

Example
Width 25%

Width 50%
Width 75%

Width 100%
Max Width 100%

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

Try it Yourself »

Height
Set the height of an element with the h-* classes ( .h-25, .h-50, .h-75, .h-100, .mh-
100):

Example
Height 25%

Height 50%

Height 75%

Height 100%

Max Height 100%

Example
<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Height 25%</div>
  <div class="h-50 bg-warning">Height 50%</div>
  <div class="h-75 bg-warning">Height 75%</div>
  <div class="h-100 bg-warning">Height 100%</div>
  <div class="mh-100 bg-warning" style="height:500px">Max Height
100%</div>
</div>

Try it Yourself »
Spacing
Bootstrap 4 has a wide range of responsive margin and padding utility classes.
They work for all
breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px)
or xl (>=1200px)):

The classes are used in the format: {property}{sides}-{size} for xs and {property}

{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

 m - sets margin
 p - sets padding

Where sides is one of:

 t - sets margin-top or padding-top
 b - sets margin-bottom or padding-bottom
 l - sets margin-left or padding-left
 r - sets margin-right or padding-right
 x - sets both padding-left and padding-right or margin-
left and margin-right
 y - sets both padding-top and padding-bottom or margin-
top and margin-bottom
 blank - sets a margin or padding on all 4 sides of the element

Where size is one of:

 0 - sets margin or padding to 0
 1 - sets margin or padding to .25rem (4px if font-size is 16px)
 2 - sets margin or padding to .5rem (8px if font-size is 16px)
 3 - sets margin or padding to 1rem (16px if font-size is 16px)
 4 - sets margin or padding to 1.5rem (24px if font-size is 16px)
 5 - sets margin or padding to 3rem (48px if font-size is 16px)
 auto - sets margin to auto

Note: margins can also be negative, by adding an "n" in front of size:

 n1 - sets margin to -.25rem (-4px if font-size is 16px)
 n2 - sets margin to -.5rem (-8px if font-size is 16px)
 n3 - sets margin to -1rem (-16px if font-size is 16px)
 n4 - sets margin to -1.5rem (-24px if font-size is 16px)
 n5 - sets margin to -3rem (-48px if font-size is 16px)

Example
I only have a top padding (1.5rem = 24px)
I have a padding on all sides (3rem = 48px)

I have a margin on all sides (3rem = 48px) and a bottom padding (3rem =
48px)

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

Try it Yourself »
More Spacing Examples

.m-# / m-*-# margin on all sides Try it

.mt-# / mt-*-# margin top Try it

.mb-# / mb-*-# margin bottom Try it

.ml-# / ml-*-# margin left Try it

.mr-# / mr-*-# margin right Try it

.mx-# / mx-*-# margin left and right Try it

.my-# / my-*-# margin top and bottom Try it

.p-# / p-*-# padding on all sides Try it

.pt-# / pt-*-# padding top Try it

.pb-# / pb-*-# padding bottom Try it

.pl-# / pl-*-# padding left Try it

.pr-# / pr-*-# padding right Try it

.py-# / py-*-# padding top and bottom Try it

.px-# / px-*-# padding left and right Try it

Shadows
Use the shadow- classes to add shadows to an element:

Example
No shadow

Small shadow
Default shadow

Large shadow

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

Try it Yourself »

Vertical Align
Use the align- classes to change the alignment of elements (only works on
inline, inline-block, inline-table and table cell elements):

Example
baseline top middle bottom text-top text-bottom

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

Try it Yourself »
Responsive Embeds
Create responsive video or slideshow embeds based on the width of the parent.

Add the .embed-responsive-item to any embed elements (like <iframe> or

<video>) in a parent element with .embed-responsive and an aspect ratio of your
choice:

Example
Example

<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Try it Yourself »

Visibility
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:
Example
I am visible

Example
<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>

Try it Yourself »

Position
Use the .fixed-top class to make any element fixed/stay at the top of the page:

Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>

Try it Yourself »

Use the .fixed-bottom class to make any element fixed/stay at the bottom of the

page:

Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>

Try it Yourself »

Use the .sticky-top class to make any element 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).

Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>

Try it Yourself »

Close icon
Use the .close class to style a close icon. This is often used for alerts and
modals. Note that we use the × symbol to create the actual icon (a better
looking "x"). Also note that it floats right by default:

Example
×

Example
<button type="button" class="close">×</button>

Try it Yourself »

Screenreaders
Use the .sr-only class to hide an element on all devices, except screen readers:

Example
<span class="sr-only">I will be hidden on all screens except for screen
readers.</span>

Try it Yourself »

Colors
As described in the Colors chapter, here is a list of all text and background color
classes:

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:

Example
This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

Dark grey text.

Body text.

Light grey text.

Try it Yourself »

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

Example
Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary
link. Dark grey link. Body/black link. Light grey link.

Try it Yourself »

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

Example
Black text with 50% opacity on white background

White text with 50% opacity on black background

Try it Yourself »

Background Colors
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-
warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that background colors do not set the text color, so in some cases you'll
want to use them together with a .text-* class.

Example
This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Try it Yourself »

Typography/Text Classes
As described in the Typography chapter, here is a list of all typography/text classes:
Class Description Example

.display-* Display headings are used to stand out more than normal Try it
headings (larger font-size and lighter font-weight), and
there are four classes to choose from: .display-
1, .display-2, .display-3, .display-4

.font- Bold text Try it

weight-bold

.font- Bolder bold text Try it

weight-
bolder

.font- Normal text Try it

weight-
normal

.font- Light weight text Try it

weight-light

.font- Lighter weight text Try it

weight-
lighter

.font-italic Italic text Try it

.lead Makes a paragraph stand out Try it

.small Indicates smaller text (set to 85% of the size of the Try it
parent)

.text-break Prevents long text from breaking layout Try it

.text-center Indicates center-aligned text Try it

.text- Removes the underline from a link Try it

decoration-
none

.text-left Indicates left-aligned text Try it

.text- Indicates justified text Try it

justify

.text- Monospaced text Try it

monospace

.text-nowrap Indicates no wrap text Try it

.text- Indicates lowercased text Try it
lowercase

.text-reset Resets the color of a text or a link (inherits the color Try it
from its parent)

.text-right Indicates right-aligned text Try it

.text- Indicates uppercased text Try it

uppercase

.text- Indicates capitalized text Try it

capitalize

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

smaller font size

.list-inline Places all list items on a single line (used together Try it
with .list-inline-item on each <li> elements)

.pre- Makes a <pre> element scrollable Try it

scrollable

Block Elements
To make an element into 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:

Example
d-blockd-sm-blockd-md-blockd-lg-blockd-xl-block

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

Try it Yourself »

Other Display Classes

Other display classes are also available:

Class Description Example

.d-none Hides an element Try it

.d-*-none Hides an element on a specific screen size Try it

.d-inline Makes an element inline Try it

.d-*-inline Makes an element inline on a specific screen size Try it

.d-inline- Makes an element inline block Try it

block

.d-*-inline- Makes an element inline block on a specific screen Try it

block size

.d-table Makes an element display as a table Try it

.d-*-table Makes an element display as a table on a specific Try it

screen size

.d-table-cell Makes an element display as a table cell Try it

.d-*-table- Makes an element display as a table cell on a specific Try it

cell screen size

.d-table-row Makes an element display as a table row Try it

.d-*-table- Makes an element display as a table row on a specific Try it
row screen size

.d-flex Creates a flexbox container and transforms direct Try it

children into flex items

.d-*-flex Creates a flexbox container on a specific screen size Try it

.d-inline- Creates an inline flexbox container Try it

flex

.d-*-inline- Creates an inline flexbox container on a specific Try it

flex screen size

Flex
Use .flex-* classes to control the layout with flexbox.

Note: Flexbox is not supported in IE9 and earlier versions.

To create a flexbox container and to transform direct children into flex items,
use the d-flex class:

Example
Flex item 1

Flex item 2
Flex item 3

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

Try it Yourself »

To create an inline flexbox container, use the d-inline-flex class:

Example
Flex item 1
Flex item 2
Flex item 3

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

Try it Yourself »
Horizontal Direction
Use .flex-row to display the flex items horizontally (side by side). This is default.

Tip: Use .flex-row-reverse to right-align the horizontal direction:

Example
Flex item 1
Flex item 2

Flex item 3
Flex item 1

Flex item 2
Flex item 3

Example
<div class="d-flex flex-row 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 class="d-flex flex-row-reverse bg-secondary">

Try it Yourself »

Vertical Direction
Use .flex-column to display the flex items vertically (on top of each other),
or .flex-column-reverse to reverse the vertical direction:

Example
Flex item 1
Flex item 2

Flex item 3
Flex item 1

Flex item 2
Flex item 3

Example
<div class="d-flex flex-column">
  <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>

Try it Yourself »

Justify Content
Use the .justify-content-* classes to change the alignment of flex items. Valid
classes are start (default), end, center, between or around:

Example
Flex item 1

Flex item 2
Flex item 3

Flex item 1
Flex item 2
Flex item 3

Flex item 1
Flex item 2

Flex item 3
Flex item 1

Flex item 2
Flex item 3

Flex item 1
Flex item 2

Flex item 3

Example
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Try it Yourself »

Fill / Equal Widths

Use .flex-fill on flex items to force them into equal widths:

Example
Flex item 1

Flex item 2
Flex item 3

Example
<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Flex item 1</div>
  <div class="p-2 bg-warning flex-fill">Flex item 2</div>
  <div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>

Try it Yourself »

Grow
Use .flex-grow-1 on a flex item to take up the rest of the space. In the example
below, the first two flex items take up their necessary space, while the last item
takes up the rest of the available space:

Example
Flex item 1

Flex item 2
Flex item 3

Example
<div class="d-flex">
  <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-grow-1">Flex item 3</div>
</div>

Try it Yourself »

Tip: Use .flex-shrink-1 on a flex item to make it shrink if necessary.

Order
Change the visual order of a specific flex item(s) with the .order classes. Valid
classes are from 0 to 12, where the lowest number has highest priority (order-1
is shown before order-2, etc..):
Example
Flex item 1

Flex item 2
Flex item 3

Example
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Flex item 1</div>
  <div class="p-2 bg-warning order-2">Flex item 2</div>
  <div class="p-2 bg-primary order-1">Flex item 3</div>
</div>

Try it Yourself »

Auto Margins
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):

Example
Flex item 1
Flex item 2
Flex item 3
Flex item 1

Flex item 2
Flex item 3

Example
<div class="d-flex 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 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>

Try it Yourself »

Wrap
Control how flex items wrap in a flex container with .flex-nowrap (default), .flex-
wrap or .flex-wrap-reverse.

Click on the buttons below to see the difference between the three classes, by
changing the wrapping of the flex items in the example box:

flex-wrap flex-wrap-reverse flex-nowrap

Example
Flex item 1
Flex item 2

Flex item 3
Flex item 4

Flex item 5
Flex item 6

Flex item 7
Flex item 8

Flex item 9
Flex item 10

Flex item 11
Flex item 12

Flex item 13
Flex item 14
Flex item 15
Flex item 16

Flex item 17
Flex item 18

Flex item 19
Flex item 20

Flex item 21
Flex item 22

Flex item 23
Flex item 24

Flex item 25

Example
<div class="d-flex flex-wrap">..</div>

Try it Yourself »

Align Content
Control the vertical alignment of gathered flex items with the .align-content-
* classes. Valid classes are .align-content-start (default), .align-content-
end, .align-content-center, .align-content-between, .align-content-around and .align-
content-stretch.

Note: These classes have no effect on single rows of flex items.

Click on the buttons below to see the difference between the five classes, by
changing the vertical alignment of the flex items in the example box:

align-content-start align-content-end align-content-center align-content-around
align-content-stretch
Example
Flex item 1

Flex item 2
Flex item 3

Flex item 4
Flex item 5

Flex item 6
Flex item 7

Flex item 8
Flex item 9

Flex item 10
Flex item 11

Flex item 12
Flex item 13

Flex item 14
Flex item 15

Flex item 16
Flex item 17

Flex item 18
Flex item 19

Flex item 20
Flex item 21

Flex item 22
Flex item 23

Flex item 24
Flex item 25

Example
<div class="d-flex flex-wrap align-content-start">..</div>

<div class="d-flex flex-wrap align-content-end">..</div>

Try it Yourself »

Align Items
Control the vertical alignment of single rows of flex items with the .align-
items-* classes. Valid classes are .align-items-start, .align-items-end, .align-items-
center, .align-items-baseline, and .align-items-stretch (default).

Click on the buttons below to see the difference between the five classes:

align-items-start align-items-end align-items-center align-items-baseline align-
items-stretch

Example
Flex item 1

Flex item 2
Flex item 3

Example
<div class="d-flex align-items-start">..</div>

<div class="d-flex align-items-stretch">..</div>
Try it Yourself »

Align Self
Control the vertical alignment of a specified flex item with the .align-self-
* classes. Valid classes are .align-self-start, .align-self-end, .align-self-
center, .align-self-baseline, and .align-self-stretch (default).

Click on the buttons below to see the difference between the five classes:

align-self-start align-self-end align-self-center align-self-baseline align-self-
stretch

Example
Flex item 1
Flex item 2

Flex item 3

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

Try it Yourself »

Responsive Flex Classes

All flex classes comes with additional responsive classes, which makes it easy to
set a specific flex class on a specific screen size.

The * symbol can be replaced with sm, md, lg or xl, which represents small,
medium, large or xlarge screens.
Class Description Example

Flex Container

.d-*-flex Creates a flexbox container for different screens Try it

.d-*-inline-flex Creates an inline flexbox container for different screens Try it

Direction

.flex-*-row Display flex items horizontally on different screens Try it

.flex-*-row-reverse Display flex items horizontally, and right-aligned, on Try it

different screens

.flex-*-column Display flex items vertically on different screens Try it

.flex-*-column-reverse Display flex items vertically, with reversed order, on Try it

different screens screens

Justified Content
.justify-content-*-start Display flex items from the start (left-aligned) on different Try it
screens

.justify-content-*-end Display flex items at the end (right-aligned) on different Try it

screens

.justify-content-*-center Display flex items in the center of a flex container on Try it

different screens

.justify-content-*- Display flex items in "between" on different screens Try it

between

.justify-content-*-around Display flex items "around" on different screens Try it

Fill / Equal Width

.flex-*-fill Force flex items into equal widths on different screens Try it

Grow

.flex-*-grow-0 Don't make the items grow on different screens

.flex-*-grow-1 Make items grow on different screens

Shrink

.flex-*-shrink-0 Don't make the items shrink on diferent screens

.flex-*-shrink-1 Make items shrink on different screens

Order

.order-*-0-12 Change the order from 0 to 12 on small screens Try it

Wrap

.flex-*-nowrap Don't wrap items on different screens Try it

.flex-*-wrap Wrap items on different screens Try it

.flex-*-wrap-reverse Reverse the wrapping of items on different screens Try it

Align Content

.align-content-*-start Align gathered items from the start on different screens Try it
.align-content-*-end Align gathered items at the end on different screens Try it

.align-content-*-center Align gathered items in the center on different screens Try it

.align-content-*-around Align gathered items "around" on different screens Try it

.align-content-*-stretch Stretch gathered items on different screens Try it

Align Items

.align-items-*-start Align single rows of items from the start on different Try it
screens

.align-items-*-end Align single rows of items at the end on different screens Try it

.align-items-*-center Align single rows of items in the center on different Try it

screens

.align-items-*-baseline Align single rows of items on the baseline on different Try it

screens

.align-items-*-stretch Stretch single rows of items on different screens Try it

Align Self
.align-self-*-start Align a flex item from the start on different screens Try it

.align-self-*-end Align a flex item at the end on different screens Try it

.align-self-*-center Align a flex item in the center on different screens Try it

.align-self-*-baseline Align a flex item on the baseline on different screens Try it

.align-self-*-stretch Stretch a flex item on different screens Try it

Bootstrap 4 Icons
❮ PreviousNext ❯

Bootstrap 4 Icons
Bootstrap 4 does not have its own icon library (Glyphicons from Bootstrap 3 are
not supported in BS4). However, there are many free icon libraries to choose
from, such as Font Awesome and Google Material Design Icons.

To use Font Awesome icons, add the following to your HTML page (No
downloading or installation is required):
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/
css/all.css" integrity="sha384-
lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossor
igin="anonymous">

Then, add the name of the icon class to any inline HTML element
(like <i> or <span>):

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

Bootstrap 4 Media Objects

❮ PreviousNext ❯

Media Objects
Bootstrap provides an easy way to align media objects (like images or videos)
together with content. Media objects are often used to display blog comments,
tweets and so on:
John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
John Doe Posted on February 20, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.

Basic Media Object

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.

To create a media object, add the .media class to a container element, and place

media content inside a child container with the .media-body class. Add padding
and margins as needed, with the spacing utilities:

Try it Yourself »

Nested Media Objects

Media objects can also be nested (a media object inside a media object):

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Jane Doe Posted on February 20, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.

To nest media objects, place a new .media container inside the .media-

body container:

Example
<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...</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...</p>
      </div>
    </div>
  </div>
</div>

Try it Yourself »

Right-Aligned Media Image

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
To right-align the media image, add the image after the .media-body container:

Example
<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...</p>
  </div>
  <img src="img_avatar3.png" alt="John Doe" class="ml-3 mt-3 rounded-
circle" style="width:60px;">
</div>

Try it Yourself »
Top, Middle or Bottom Alignment
Use the flex utilities, align-self-* classes to place the media object on the top,
middle or at the bottom:

Media Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Media Middle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Media Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.

Example

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

<div class="media">
  <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...</p>
  </div>
</div>

<div class="media">
  <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...</p>
  </div>
</div>

Bootstrap 4 Filters (Advanced)

❮ PreviousNext ❯

Bootstrap 4 Filters
Bootstrap does not have a component that allows filtering. However, we can
use jQuery to filter / search for elements.
Filter Tables
Perform a case-insensitive search for items in a table:

Example
Type something in the input field to search the table for first names, last names
or emails:

Firstname Lastname Email

John Doe [email protected]

Mary Moe [email protected]

July Dooley [email protected]

Anja Ravendale [email protected]

jQuery
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

Try it Yourself »

Example explained: We use jQuery to loop through each table rows to check if
there are any text values that matches the value of the input field.
The toggle method hides the row (display:none) that does not match the search.
We use the toLowerCase() method to convert the text to lower case, which makes
the search case insensitive (allows "john", "John", and even "JOHN" on search).
Filter Lists
Perform a case-insensitive search for items in a list:

Example
Type something in the input field to search the list for items:

 First item
 Second item
 Third item
 Fourth

Try it Yourself »

Filter Anything
Perform a case-insensitive search for text inside a div element:

Example

I am a paragraph.

I am a div element inside div.

I am a buttonAnother button

Another paragraph
Bootstrap 4 Grid System
❮ PreviousNext ❯

Bootstrap 4 Grid System

Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 column individually, you can group the columns
together to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1

span 4 span 4 span 4

span 4 span 8

span 6 span 6

span 12

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

depending on the screen size: On a big screen it might look better with the
content organized in three columns, but on a small screen it would be better if
the content items were stacked on top of each other.

Grid Classes
The Bootstrap 4 grid system has five classes:

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

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.

Grid System Rules

Some Bootstrap 4 grid system rules:

 Rows must be placed within a .container (fixed-width) or .container-

fluid (full-width) for proper alignment and padding
 Use rows to create horizontal groups of columns
 Content should be placed within columns, and only columns may be
immediate children of rows
 Predefined classes like .row and .col-sm-4 are available for quickly
making grid layouts
 Columns create gutters (gaps between column content) via padding. That
padding is offset in rows for the first and last column via negative margin
on .rows
 Grid columns are created by specifying the number of 12 available
columns you wish to span. For example, three equal columns would use
three .col-sm-4
 Column widths are in percentage, so they are always fluid and sized
relative to their parent element
 The biggest difference between Bootstrap 3 and Bootstrap 4 is that
Bootstrap 4 now uses flexbox, instead of floats. One big advantage with
flexbox is that grid columns without a specified width will automatically
layout as "equal width columns" (and equal height). Example: Three
elements with .col-sm will each automatically be 33.33% wide from the
small breakpoint and up. Tip: If you want to learn more about Flexbox,
you can read our CSS Flexbox Tutorial.
Note that Flexbox is not supported in IE9 and earlier versions.

Basic Structure of a Bootstrap 4 Grid

The following is a basic structure of a Bootstrap 4 grid:

<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

Try it Yourself »

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.
Grid Options
The following table summarizes how the Bootstrap 4 grid system works across different screen
sizes:

Extra small Small (>=576px) Medium (>=768px) Large (>=992px) Extra Large
(<576px) (>=1200px)

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

Grid Horizontal at all Collapsed to start, Collapsed to start, Collapsed to start, Collapsed to start,
behaviour times horizontal above horizontal above horizontal above horizontal above
breakpoints breakpoints breakpoints breakpoints

Container None (auto) 540px 720px 960px 1140px

width

Suitable for Portrait phones Landscape phones Tablets Laptops Laptops and
Desktops

# of 12 12 12 12 12
columns

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

Nestable Yes Yes Yes Yes Yes

Offsets Yes Yes Yes Yes Yes

Column Yes Yes Yes Yes Yes

ordering

Examples
The next chapters shows examples of grid systems for different devices and
screen widths:

 Stacked-to-horizontal
 Auto Layout
 Small devices
 Medium devices
 Large devices
 Extra large devices
 More grid examples

Bootstrap 4 Grid Stacked-to-
horizontal
❮ PreviousNext ❯

Bootstrap 4 Grid Example: Stacked-to-

horizontal
We will create a basic grid system that starts out stacked on extra small
devices, before becoming horizontal on larger devices.

The following example shows a simple "stacked-to-horizontal" two-column

layout, meaning it will result in a 50%/50% split on all screens, except for extra
small screens, which it will automatically stack (100%):

col-sm-6
col-sm-6

Example: Stacked-to-horizontal
<div class="container">
  <div class="row">
    <div class="col-sm-6 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6 bg-warning">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Try it Yourself »

Tip: The numbers in the .col-sm-* classes indicates how many columns the div

should span (out of 12). So, .col-sm-1 spans 1 column, .col-sm-4 spans 4
columns, .col-sm-6 spans 6 columns, etc.

Note: Make sure that the sum adds up to 12 or fewer (it is not required that
you use all 12 available columns):

Tip: You can turn any fixed-width layout into a full-width layout by changing

the .container class to .container-fluid:

Example: Fluid container

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Try it Yourself »

Auto Layout Columns

In Bootstrap 4, there is an easy way to create equal width columns for all
devices: just remove the number from .col-size-* and only use the .col-
size class on a specified number of col elements. Bootstrap will recognize how
many columns there are, and each column will get the same width.
The size classes determines when the columns should be responsive:

<div class="row">
<div class="col-sm">1 of 2</div>
<div class="col-sm">2 of 2</div>
</div>

<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

1 of 2

2 of 2
1 of 4

2 of 4
3 of 4

4 of 4

Try it Yourself »

Bootstrap 4 Grid Small
❮ PreviousNext ❯

Small Grid Example

Extra small Small Medium Large Extra Large

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

Screen width <576px >=576px >=768px >=992px >=1200px

Assume we have a simple layout with two columns. We want the columns to be
split 25%/75% for small devices.
Small devices are defined as having a screen width from 576 pixels to 767
pixels.

For small devices we will use the .col-sm-* classes.

We will add the following classes to our two columns:

Now Bootstrap is going to say "at the small size, look for classes with -sm- in
them and use those".

The following example will result in a 25%/75% split on small (and medium,
large and xlarge) devices. On extra small devices, it will automatically stack
(100%):

.col-sm-3
.col-sm-9

Example
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 bg-warning">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Try it Yourself »

Note: Make sure that the sum adds up to 12 or fewer (it is not required that
you use all 12 available columns):

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

50%/50% split, you would use .col-sm-6 and .col-sm-6):

.col-sm-4
.col-sm-8

.col-sm-6
.col-sm-6

Example

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-8 bg-warning">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6 bg-warning">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Try it Yourself »

Auto Layout Columns

In Bootstrap 4, there is an easy way to create equal width columns for all
devices: just remove the number from .col-sm-* and only use the .col-sm class
on a specified number of col elements. Bootstrap will recognize how many
columns there are, and each column will get the same width.

If the screen size is less than 576px, the columns will stack horizontally:

<div class="row">
<div class="col-sm">1 of 2</div>
<div class="col-sm">2 of 2</div>
</div>

1 of 2
2 of 2

1 of 4
2 of 4

3 of 4
4 of 4

Try it Yourself »

Bootstrap 4 Grid - Large

❮ PreviousNext ❯

Large Grid Example

Extra small Small Medium Large Extra Large

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

Screen width <576px >=576px >=768px >=992px >=1200px

In the previous chapter, we presented a grid example with classes for small and
medium devices. We used two divs (columns) and we gave them a 25%/75%
split on small devices, and a 50%/50% split on medium devices:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

But on large devices the design may be better as a 33%/66% split.

Large devices are defined as having a screen width from 992 pixels to 1199
pixels.

For large devices we will use the .col-lg-* classes:

Now Bootstrap is going to say "at the small size, look at classes with -sm- in
them and use those. At the medium size, look at classes with -md- in them and
use those. At the large size, look at classes with the word -lg- in them and use
those".

The following example will result in a 25%/75% split on small devices, a

50%/50% split on medium devices, and a 33%/66% split on large and xlarge
devices. On extra small devices, it will automatically stack (100%):

.col-sm-3 .col-md-6 .col-lg-4

.col-sm-9 .col-md-6 .col-lg-8

Example
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Try it Yourself »

Note: Make sure that the sum adds up to 12 or fewer (it is not required that
you use all 12 available columns):
Using Only Large
In the example below, we only specify the .col-lg-6 class (without .col-md-
* and/or .col-sm-*). This means that large and xlarge devices will split
50%/50%. However, for medium, small AND extra small devices, it will stack
vertically (100% width):

Example
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-lg-6">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Try it Yourself »

Auto Layout Columns

In Bootstrap 4, there is an easy way to create equal width columns for all
devices: just remove the number from .col-lg-* and only use the .col-lg class
on a specified number of col elements. Bootstrap will recognize how many
columns there are, and each column will get the same width.

If the screen size is less than 992px, the columns will stack horizontally:

1 of 2
2 of 2

1 of 4
2 of 4

3 of 4
4 of 4

Bootstrap 4 Grid Examples

❮ PreviousNext ❯

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

Three Equal Columns

Use the .col class on a specified number of elements and Bootstrap will
recognize how many elements there are (and create equal-width columns). In
the example below, we use three col elements, which gets a width of 33.33%
each.

col
col

col

Example
<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Try it Yourself »

Three Equal Columns Using Numbers

You can also use numbers to control the column width. Just make sure that the
sum adds up to 12 or fewer (it is not required that you use all 12 available
columns):

col-4
col-4

col-4

Example
<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>

Try it Yourself »

Three Unequal columns

To create unequal columns, you have to use numbers. The following example
will create a 25%/50%/25% split:

col-3
col-6

col-3
Example
<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
</div>

Try it Yourself »

Setting One Column Width

However, it is enough to only set the width of one column, and have the sibling
columns automatically resize around it. The following example will create a
25%/50%/25% split:

col

col-6
col

Example
<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

Try it Yourself »

More Equal Columns

1 of 2

2 of 2
1 of 4
2 of 4

3 of 4
4 of 4

1 of 6
2 of 6

3 of 6
4 of 6

5 of 6
6 of 6

Example

<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>

Try it Yourself »
Row Cols
You can also control how many columns that should appear next to each other
(regardless of how many cols), with the .row-cols-* classes:

1 of 2

2 of 2
1 of 4

2 of 4
3 of 4
4 of 4
1 of 6

2 of 6
3 of 6

4 of 6
5 of 6

6 of 6

Example
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>

Try it Yourself »

More Unequal Columns

1 of 2
2 of 2

1 of 4
2 of 4

3 of 4
4 of 4

1 of 4
2 of 4

3 of 4
4 of 4

Example

<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>

Try it Yourself »

Equal Height
If one of the column is taller than the other (due to text or CSS height), the rest
will follow:

Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim
volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse
nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat
platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.

col
col

Example
<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Try it Yourself »

Nested Columns
col-8

col-6
col-6

col-4
The following example shows how to create a two column layout, with another
two columns inside one of the columns:

Example
<div class="row">
  <div class="col-8">
    .col-8
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
  <div class="col-4">.col-4</div>
</div>

Try it Yourself »

Responsive Classes
The Bootstrap 4 grid system has five classes:

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

The classes above can be combined to create more dynamic and flexible
layouts.

Tip: Each class scales up, so if you wish to set the same widths for sm and md,
you only need to specify sm.

Stacked to Horizontal
col-sm-9
col-sm-3
col-sm

col-sm
col-sm

The following example shows how to create a column layout that starts out
stacked on extra small devices, before becoming horizontal on larger devices
(sm, md, lg and xl):

Example
<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Try it Yourself »

Mix and Match

col-6 col-sm-9

col-6 col-sm-3
col-7 col-lg-8

col-5 col-lg-4
col-sm-3 col-md-6 col-lg-4

col-sm-9 col-md-6 col-lg-8

Example

<div class="row">
<div class="col-6 col-sm-9">col-6 col-sm-9</div>
<div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>

<div class="row">
<div class="col-7 col-lg-8">col-7 col-lg-8</div>
<div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>

<!-- 25%/75% split on small devices, a 50%/50% split on medium devices,

and a 33%/66% split on large and xlarge devices. On extra small devices,
it will automatically stack (100%) -->
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-
4</div>
<div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-
8</div>
</div>

Try it Yourself »

No Gutters
Add the .no-gutters class to the .row container to remove gutters (extra space):

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.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Example
<div class="row no-gutters">
Bootstrap 4 Templates
❮ PreviousNext ❯

Bootstrap 4 Basic Template

We have created a responsive starter template with Bootstrap 4.

You are free to modify, save, share, and use it in your projects:

Bootstrap 4 Class Reference
❮ PreviousNext ❯

Complete List of All Bootstrap 4 Classes

Complete list of all Bootstrap 4 CSS classes with description and examples:

Class Description Example Category

.active Adds a white text color to the active link in a navbar. Try it Navbar

.active Adds a blue background color to the active list item in a list Try it List Groups
Class Description Example Category

group

.active Adds a dark-blue background color to simulate a Try it Buttons

"pressed" button

.active Adds a blue background color to the active dropdown item in Try it Dropdowns
a dropdown

.active Adds a blue background color to the active pagination link (to Try it Pagination
highlight the current page)

.active Displays/shows the current carousel item Try it Carousel

.alert Creates an alert message box Try it Alerts

.alert- Red alert. Indicates a dangerous or potentially negative Try it Alerts

danger action

.alert-dark Dark alert. Dark grey alert box Try it Alerts

.alert- Indicates a closable alert box. Together with Try it Alerts

dismissible the .close class, this class is used to close the alert (adds
extra padding)
Class Description Example Category

.alert- Adds color:inherit to the specified element Try it Alerts

heading

.alert-info Teal alert. Indicates a neutral informative change or action Try it Alerts

.alert-light Light alert. Light grey alert box Try it Alerts

.alert-link Used on links inside alerts to provide matching colored links Try it Alerts

.alert- Blue alert. Indicates an important action Try it Alerts

primary

.alert- Grey alert. Indicates a "less" important action Try it Alerts

secondary

.alert- Green alert. Indicates a successful or positive action Try it Alerts

success

.alert- Yellow alert. Indicates caution should be taken with this Try it Alerts
warning action

.align- The element is aligned with the baseline of the parent. This is Try it Utilities
baseline default
Class Description Example Category

.align- The element is aligned with the lowest element on the line Try it Utilities
bottom

.align- The element is placed in the middle of the parent element Try it Utilities
middle

.align-top The element is aligned with the top of the tallest element on Try it Utilities
the line

.align-text- The element is aligned with the top of the parent element's Try it Utilities
top font

.align-text- The element is aligned with the bottom of the parent Try it Utilities
bottom element's font

.align- Align gathered items "around" Try it Flex

content-
around

.align- Align gathered items "around" on different screens Try it Flex

content-*-
around
Class Description Example Category

.align- Align gathered items in the center Try it Flex

content-
center

.align- Align gathered items in the center on different screens Try it Flex
content-*-
center

.align- Align gathered items at the end Try it Flex

content-end

.align- Align gathered items at the end on different screens Try it Flex
content-*-
end

.align- Align gathered items from the start Try it Flex

content-
start

.align- Align gathered items from the start on different screens Try it Flex
content-*-
start

.align- Stretch gathered items Try it Flex

content-
stretch
Class Description Example Category

.align- Stretch gathered items on different screens Try it Flex

content-*-
stretch

.align- Align single rows of items from the start Try it Flex
items-start

.align- Align single rows of items from the start on different screens Try it Flex
items-*-
start

.align- Align single rows of items at the end Try it Flex

items-end

.align- Align single rows of items at the end on different screens Try it Flex
items-*-end

.align- Align single rows of items in the center Try it Flex

items-center

.align- Align single rows of items in the center on different screens Try it Flex
items-*-
center

.align- Align single rows of items at the baseline Try it Flex

items-
Class Description Example Category

baseline

.align- Align single rows of items at the baseline on different screens Try it Flex
items-*-
baseline

.align- Stretch single rows of items Try it Flex

items-
stretch

.align- Stretch single rows of items on different screens Try it Flex

items-*-
stretch

.align-self- Align a flex item from the start Try it Flex

start

.align-self- Align a flex item from the start on different screens Try it Flex
*-start

.align-self- Align a flex item at the end Try it Flex

end

.align-self- Align a flex item at the end on different screens Try it Flex
*-end
Class Description Example Category

.align-self- Align a flex item in the center Try it Flex

center

.align-self- Align a flex item in the center on different screens Try it Flex
*-center

.align-self- Align a flex item at the baseline Try it Flex

baseline

.align-self- Align a flex item at the baseline on different screens Try it Flex
*-baseline

.align-self- Stretch a flex item Try it Flex

stretch

.align-self- Stretch a flex item on different screens Try it Flex

*-stretch

.badge Creates a circular badge (grey circle - often used as a Try it Badges
numerical indicator)

.badge- Red badge. Indicates a dangerous or potentially negative Try it Badges

danger action
Class Description Example Category

.badge-dark Dark badge. Dark grey alert box Try it Badges

.badge-info Teal badge. Indicates a neutral informative change or action Try it Badges

.badge-light Light badge. Light grey alert box Try it Badges

.badge-pill Makes a badge more round Try it Badges

.badge- Blue badge. Indicates an important action Try it Badges

primary

.badge- Grey badge. Indicates a "less" important action Try it Badges

secondary

.badge- Green badge. Indicates a successful or positive action Try it Badges

success

.badge- Yellow badge. Indicates caution should be taken with this Try it Badges
warning action

.bg-danger Adds a red background color to an element. Represents Try it Colors

danger or a negative action
Class Description Example Category

.bg-dark Adds a dark grey background color to an element Try it Colors

.bg-info Adds a teal background color to an element. Represents Try it Colors

some information

.bg-light Adds a light grey background color to an element Try it Colors

.bg-primary Adds a blue background color to an element. Represents Try it Colors

something important

.bg- Adds a grey background color to an element. Indicates a Try it Colors

secondary "less" important action

.bg-success Adds a green background color to an element. Indicates Try it Colors

success or a positive action

.bg-warning Adds a yellow/orange background color to an element. Try it Colors

Represents a warning or a negative action

.blockquote Styles quoted blocks of content from another source (adds a Try it Typography
larger font-size (1.25rem))
Class Description Example Category

.blockquote- Styles the source title inside the blockquote (light grey text Try it Typography
footer with indentation)

.border Adds a border to an element Try it Utilities

.border- Removes the bottom border from an element Try it Utilities

bottom-0

.border- Adds a red border to an element (indicates danger) Try it Utilities

danger

.border-dark Adds a dark border to an element Try it Utilities

.border-info Adds a teal border to an element (indicates information) Try it Utilities

.border- Removes the left border from an element Try it Utilities

left-0

.border- Adds a light grey border to an element Try it Utilities

light

.border- Adds a blue border to an element Try it Utilities

primary
Class Description Example Category

.border- Removes the right border from an element Try it Utilities

right-0

.border-top- Removes the top border from an element Try it Utilities

.border- Adds a grey border to an element Try it Utilities

secondary

.border- Adds a green border to an element (indicates success) Try it Utilities

success

.border- Adds a orange border to an element (indicates warning) Try it Utilities

warning

.border- Adds a white border to an element Try it Utilities

white

.border-0 Removes all borders from an element Try it Utilities

.breadcrumb A pagination. Indicates the current page's location within a Try it Pagination
navigational hierarchy

.breadcrumb- Styles list items or links inside the breadcrumb Try it Pagination
Class Description Example Category

item

.btn Creates a basic button (gray background and rounded Try it Buttons
corners)

.btn-block Creates a block level button that spans the entire width of Try it Buttons
the parent element

.btn-dark Dark grey button Try it Buttons

.btn-danger Red button. Indicates danger or a negative action Try it Buttons

.btn-group Groups buttons together on a single line Try it Button

Groups

.btn-group- Large button group (makes all buttons in a button group Try it Button
lg larger - increased font-size and padding) Groups

.btn-group- Small button group (makes all buttons in a button group Try it Button
sm smaller) Groups

.btn-group- Makes a button group appear vertically stacked Try it Button

vertical Groups
Class Description Example Category

.btn-info Teal button. Represents a neutral informative change or Try it Buttons

action

.btn-light Light grey button Try it Buttons

.btn-link Makes a button look like a link (get button behavior) Try it Buttons

.btn-lg Large button Try it Buttons

.btn- Dark grey bordered/outlined button Try it Buttons

outline-dark

.btn- Red bordered/outlined button. Indicates danger or a negative Try it Buttons

outline- action
danger

.btn- Teal bordered/outlined button. Represents a neutral Try it Buttons

outline-info informative change or action

.btn- Light grey bordered/outlined button Try it Buttons

outline-
light

.btn- Blue bordered/outlined button. Try it Buttons

Class Description Example Category

outline-
primary

.btn- Grey bordered/outlined button. Indicates a "less" important Try it Buttons

outline- action
secondary

.btn- Green bordered/outlined button. Indicates success or a Try it Buttons

outline- positive action
success

.btn- Orange bordered/outlined button. Represents warning or a Try it Buttons

outline- negative action
warning

.btn-primary Blue button. Indicates a something important Try it Buttons

.btn-sm Small button Try it Buttons

.btn- Grey button. Indicates a "less" important action Try it Buttons

secondary

.btn-success Green button. Indicates success or a positive action Try it Buttons

Class Description Example Category

.btn-toolbar Combine sets of button groups into button toolbars for more Try it Button
complex components Groups

.btn-warning Orange button. Represents warning or a negative action Try it Buttons

.card Creates a card Try it Cards

.card-body Container for card content Try it Cards

.card- Container to create a masonry-like grid of cards Try it Cards

columns

.card-danger Adds a red background color to the card. Represents danger Try it Cards
or a negative action

.card-dark Adds a grey background color to the card Try it Cards

.card-deck Container to create a grid of cards that are of equal height Try it Cards
and width

.card-footer Card footer Try it Cards

Class Description Example Category

.card-group Container to create a grid of cards that are of equal height Try it Cards
and width, without side margins

.card-header Card header Try it Cards

.card- Styles navigation tabs inside the card header Try it Cards
header-tabs

.card- Styles navigation pills inside the card header Try it Cards
header-pills

.card-img- Place the image at the bottom inside a card Try it Cards
bottom

.card-img- Turns an image into a card background. Often used to add Try it Cards
overlay text on top of the image

.card-img- Place the image at the top inside a card Try it Cards
top

.card-info Adds a teal background color to the card. Represents some Try it Cards
information

.card-light Adds a light grey background color to the card Try it Cards
Class Description Example Category

.card-link Adds a blue color to any link and a hover effect inside the Try it Cards
card

.card- Adds a blue background color to the card. Represents Try it Cards
primary something important

.card- Adds a grey background color to the card. Represents Try it Cards
secondary something "less" important

.card- The .card-subtitle is used after a .card-title, Try it Cards

subtitle and adds the following to an element: margin-top:
-.375rem; margin-bottom: 0;

.card- Adds a green background color to the card. Indicates success Try it Cards
success or a positive action

.card-text Used to remove bottom margins for a p element if it is the Try it Cards
last child (or the only one), inside .card-body

.card-title Adds a title to any heading element inside the card Try it Cards

.card- Adds a yellow/orange background color to the card. Try it Cards

Class Description Example Category

warning Represents a warning or a negative action

.carousel Creates a carousel (slideshow) Try it Carousel

.carousel- Creates a caption text for each slide in the carousel Try it Carousel
caption

.carousel- Container for "next" carousel/item link Try it Carousel

control-next

.carousel- Used together with .carousel-control-next to Try it Carousel

control- create a "next" icon/button (right-pointed arrow)
next-icon

.carousel- Container for "previous" carousel/item link Try it Carousel

control-prev

.carousel- Used together with .carousel-control-prev to Try it Carousel

control- create a "previous" icon/button (left-pointed arrow)
prev-icon

.carousel- Adds little dots/indicators at the bottom of each slide (which Try it Carousel
indicators indicates how many slides there is in the carousel, and which
slide the user are currently viewing)
Class Description Example Category

.carousel- Container for slide items Try it Carousel

inner

.carousel- Specifies the content of each slide Try it Carousel

item

.clearfix Clears floats Try it Utilities

.close Styles a close icon. This is often used for alerts and modals. Try it Utilities
Often used together with the × symbol to create the
actual icon (a better looking "x"). It floats right by default

.col-auto Make form columns automatically size themselves based on Try it Forms
their content

.col-* Creates a column layout for extra small devices (and up/all Try it Grid System
devices, if not combined with other column classes).
The * can be a number between 1 and 12

.col-sm-* Creates a column layout for small devices (and up, if not Try it Grid System
combined with other column classes). The * can be a number
between 1 and 12

.col-md-* Creates a column layout for medium devices (and up, if not Try it Grid System
combined with other column classes). The * can be a number
Class Description Example Category

between 1 and 12

.col-lg-* Creates a column layout for large devices (and up, if not Try it Grid System
combined with other column classes). The * can be a number
between 1 and 12

.col-xl-* Creates a column layout for extra large devices. The * can be Try it Grid System
a number between 1 and 12

.collapse Indicates collapsible content - which can be hidden or shown Try it Collapse
on demand

.collapse Show the collapsible content by default Try it Collapse

show

.container Fixed width container with widths determined by screen Try it Containers
sites. Equal margin on the left and right.

.container- A container that spans the full width of the screen Try it Containers
fluid

.container-* Responsive containers Try it Containers

.custom- A wrapper/container for custom checkboxes Try it Custom Forms

Class Description Example Category

checkbox

.custom- A wrapper/container for custom forms Try it Custom Forms

control

.custom- Customized form control Try it Custom Forms

control-
input

.custom- Inline (horizontally - side by side) customized form controls Try it Custom Forms
control-
inline

.custom- Customized label, when used together with a custom form Try it Custom Forms
control- control
label

.custom-file Customized file upload Try it Custom Forms

.custom- Customized file upload Try it Custom Forms

file-input

.custom- Customized file label Try it Custom Forms

file-label
Class Description Example Category

.custom- A wrapper/container for custom radio buttons Try it Custom Forms

radio

.custom- Customized range control Try it Custom Forms

range

.custom- Customized select menu Try it Custom Forms

select

.custom- Large customized select menu Try it Custom Forms

select-lg

.custom- Small customized select menu Try it Custom Forms

select-sm

.custom- Customized toggle switch Try it Custom Forms

switch

.disabled Disables a button (adds opacity and a "no-parking-sign" icon Try it Buttons

on hover)

.disabled Disables a dropdown item (adds a grey text color and a "no- Try it Dropdowns
parking-sign" icon on hover)
Class Description Example Category

.disabled Disables a pagination link (cannot be clicked - adds a grey Try it Pagination

text color and a "no-parking-sign" icon on hover)

.disabled Disables a list item in a list group (cannot be clicked - adds a Try it List Groups
light grey color and removes the hover effect on list item
links)

.dropdown Creates a toggleable menu that allows the user to choose one Try it Dropdowns
value from a predefined list

.dropdown- Used to separate links in the dropdown menu with a thin Try it Dropdowns
divider horizontal border

.dropdown- Used to add headers inside the dropdown menu Try it Dropdowns
header

.dropdown- Creates a dropdown item (added to links or buttons inside Try it Dropdowns
item .dropdown-menu)

.dropdown- Used to add plain text to a dropdown item, or used on links Try it Dropdowns
item-text for default link styling

.dropdown- Adds the default styles for the dropdown menu container Try it Dropdowns
menu
Class Description Example Category

.dropdown- Right-aligns a dropdown menu Try it Dropdowns

menu-right

.dropdown- Used on the button that should hide and show (toggle) the Try it Dropdowns
toggle dropdown menu

.dropleft Left-aligns the dropdown Try it Dropdowns

.dropright Right-aligns the dropdown Try it Dropdowns

.dropup Indicates a dropup menu (upwards instead of downwards) Try it Dropdowns

.d-block Creates a block element (adds display:block) Try it Utilities

.d-*-block Creates a block element on a specific screen width Try it Utilities

.d-inline Makes an element inline Try it Utilities

.d-*-inline Makes an element inline on a specific screen size Try it Utilities

Class Description Example Category

.d-inline- Makes an element inline block Try it Utilities

block

.d-*-inline- Makes an element inline block on a specific screen size Try it Utilities
block

.d-flex Creates a flexbox container and transforms direct children Try it Flex
into flex items

.d-*-flex Creates a flexbox container on a specific screen size Try it Flex

.d-inline- Creates an inline flexbox container Try it Flex

flex

.d-*-inline- Creates an inline flexbox container on a specific screen size Try it Flex
flex

.d-none Hides an element Try it Utilities

.d-*-none Hides an element on a specific screen size Try it Utilities

.d-table Makes an element display as a table Try it Utilities

Class Description Example Category

.d-*-table Makes an element display as a table on a specific screen size Try it Utilities

.d-table- Makes an element display as a table cell Try it Utilities

cell

.d-*-table- Makes an element display as a table cell on a specific screen Try it Utilities
cell size

.d-table-row Makes an element display as a table row Try it Utilities

.d-*-table- Makes an element display as a table row on a specific screen Try it Utilities
row size

.embed- Container for embedded content. Makes videos or Try it Images

responsive slideshows scale properly on any device

.embed- Container for embedded content. Creates an 16:9 aspect Try it Images
responsive- ratio embedded content
16by9

.embed- Container for embedded content. Creates an 3:4 aspect ratio Try it Images
responsive- embedded content
3by4
Class Description Example Category

.embed- Used inside .embed-responsive. Scales the video Try it Images

responsive- nicely to the parent element
item

.fade Adds a fading effect when closing an alert box Try it Alerts

.fade Adds a fading effect when showing tab/pill content Try it Navs

.fade Adds a fading effect when opening a modal Try it Modal

.fixed- Makes an element stay at the bottom of the screen Try it Utilities
bottom (sticky/fixed)

.fixed-top Makes an element stay at the top of the screen (sticky/fixed) Try it Utilities

.flex-column Display flex items vertically Try it Flex

.flex-*- Display flex items vertically on different screen sizes: Try it Flex
column

.flex- Display flex items vertically, reversed Try it Flex

column-
reverse
Class Description Example Category

.flex-*- Display flex items vertically, reversed, on different screen Try it Flex
column- sizes
reverse

.flex-fill Used on flex items to force it/them into equal width columns Try it Flex

.flex-*-fill Force flex items into equal widths on different screens Try it Flex

.flex-grow- Used on a single flex item to take up the rest of the available Try it Flex
0|1 space

.flex-nowrap Don't wrap flex items Try it Flex

.flex-*- Don't wrap items on different screens Try it Flex

nowrap

.flex- Used on a single flex item to shrink it if necessary Flex

shrink-0|1

.flex-row Display flex items horizontally (side by side) Try it Flex

.flex-*-row Display flex items horizontally on a specific screen size Try it Flex
Class Description Example Category

.flex-row- Display flex items right-aligned and horizontally Try it Flex

reverse

.flex-*-row- Display flex items right-aligned and horizontally on a specific Try it Flex
reverse screen size

.flex-wrap Wrap flex items Try it Flex

.flex-*-wrap Wrap items on different screens Try it Flex

.flex-wrap- Wrap flex items, in reversed order Try it Flex

reverse

.flex-*- Wrap flex items, in reversed order on different screens Try it Flex
wrap-reverse

.float-left Floats an element to the left Try it Utilities

.float-*- Floats an element to the left on different screens Try it Utilities

left

.float-none Remove floats from an element Try it Utilities

Class Description Example Category

.float-right Floats an element to the right Try it Utilities

.float-*- Floats an element to the left on different screens Try it Utilities

right

.font-italic Italic text Try it Typography

.font- Bold text Try it Typography

weight-bold

.font- Bolder text (font-weight:bolder) Try it Typography

weight-
bolder

.font- Light weight text (font-weight:300) Try it Typography

weight-light

.font- Lighter weight text (font-weight:lighter) Try it Typography

weight-
lighter

.font- Normal text (font-weight:400) Try it Typography

weight-
normal
Class Description Example Category

.form-check Container for checkboxes. Adds proper padding Try it Forms

.form-check- Makes checkboxes appear on the same line (horizontally) Try it Forms
inline

.form-check- Styles checkboxes with proper margins Try it Forms

input

.form-check- Ensures proper margins for labels used together with Try it Forms
label checkboxes

.form- Used on input, textarea, and select elements to span the Try it Forms
control entire width of the page and make them responsive

.form- Adds display:block and width:100% to input filed Try it Forms

control-file with type="file"

.form- Large form control Try it Forms

control-lg

.form- Styles a form control as plain text Try it Forms

control-
plaintext
Class Description Example Category

.form- Adds display:block and width:100% to input filed Try it Forms

control- with type="range"
range

.form- Small form control Try it Forms

control-sm

.form-group Container for form input and label Try it Forms

.form-inline Makes a <form> left-aligned with inline-block controls (This Try it Forms
only applies to forms within viewports that are at least 768px
wide)

.form-row Container for responsive columns (less left and right margins Try it Forms
than .row/overrides default column gutters)

.h1 - .h6 Makes an element look like a heading of the chosen class (h1- Try it Typography
h6)

.h-25 Sets the height of an element to 25% Try it Utilities

.h-50 Sets the height of an element to 50% Try it Utilities

.h-75 Sets the height of an element to 75% Try it Utilities

Class Description Example Category

.h-100 Sets the height of an element to 100% Try it Utilities

.img-fluid Responsive image (adds max-width:100% and height:auto) Try it Images

.img- Shapes an image to a thumbnail (thin light grey borders) Try it Images
thumbnail

.initialism Displays the text inside an <abbr> element in a slightly Try it Typography

smaller font size

.input-group Container to enhance an input by adding an icon, text or a Try it Input Group
button in front or behind the input field as a "help text"

.input- Input group container for adding help text behind an input Try it Input Group
group-append field

.input- Large input group Try it Input Group

group-lg
Class Description Example Category

.input- Input group container for adding help text in front of an input Try it Input Group
group- field
prepend

.input- Small input group Try it Input Group

group-sm

.input- Styles the specified help text in an input group Try it Input Group
group-text

.input-lg Large input field Try it Input Sizing

.input-sm Small input field Try it Input Sizing

.invalid- Creates a custom validation message used in validated forms Try it Forms
feedback (red text color)

.invalid- Creates a custom validation message used in validated forms Try it Forms
tooltip (red tooltip)

.invisible Make an element invisible Try it Utilities

.is-invalid Validates a form element (adds a red border to input fields). Try it Forms
Class Description Example Category

Note: for server side

.is-valid Validates a form element (adds a green border to input Try it Forms
fields). Note: for server side

.jumbotron Creates a padded grey heading/box with rounded corners Try it Jumbotron
that enlarges the font sizes of the text inside it. Used for
calling extra attention to some special content or information

.jumbotron- Creates a full-width jumbotron (grey padded heading) Try it Jumbotron

fluid without rounded borders

.justify- Aligns flex items from the start, at the end, centered, Try it Flex

content-* in between and "around"

.justify- Aligns flex items "around" on different screen sizes Try it Flex
content-*-
around

.justify- Aligns flex items in "between" on different screen sizes Try it Flex
content-*-
between
Class Description Example Category

.justify- Aligns flex items in the center on different screen sizes Try it Flex
content-*-
center

.justify- Aligns flex items at the end on different screen sizes Try it Flex
content-*-
end

.justify- Aligns flex items from the start on different screen sizes Try it Flex
content-*-
start

.lead Increase the font size and line height of a paragraph Try it Typography

.list-group Creates a bordered list group for <li> elements Try it List Group

.list-group- Removes some borders and rounded corners from list items Try it List Group
flush in a list group

.list-group- Display list items horizontally instead of vertically (side-by- Try it List Group
horizontal side instead of on top of each other)

.list-group- Display list items horizontally instead of vertically on different Try it List Group
horizontal-* screen sizes
Class Description Example Category

.list-group- Added to each <li> element in the list group Try it List Group

item

.list-group- Added to links inside the list group to make them stand out Try it List Group
item-action on hover (darker background)

.list-group- Red background color for a list item in a list group Try it List Group
item-danger

.list-group- Dark grey background color for a list item in a list group Try it List Group
item-dark

.list-group- Light-blue background color for a list item in a list group Try it List Group
item-info

.list-group- Light grey background color for a list item in a list group Try it List Group
item-light

.list-group- Blue background color for a list item in a list group Try it List Group
item-primary

.list-group- Green background color for a list item in a list group Try it List Group
item-success
Class Description Example Category

.list-group- Yellow background color for a list item in a list group Try it List Group
item-warning

.list-inline Places all list items on a single line (used together Try it Typography
with .list-inline-item on each <li> elements)

.list- Places all list items on a single line (used together Try it Typography
inline-item with .list-inline on the parent <ul> element)

.list- Removes all default list-style (bullets, left margin, etc.) styling Try it Typography
unstyled from a <ul> or <ol> list

.mark Highlights text: Highlighted text Try it Typography

.media Aligns media objects together with content (like images or Try it Media Objects
videos - often used for comments in a blog post etc)

.media-body Container for media content Try it Media Objects

.modal Identifies the content as a modal and brings focus to it Try it Modals

.modal-body Defines the style for the body of the modal. Add any HTML Try it Modals
markup here (p, img, etc)
Class Description Example Category

.modal- Styles the modal (border, background-color, etc). Inside this, Try it Modals
content add the modal's header, body and footer, if needed

.modal- Centers the modal vertically and horizontally within the page Try it Modals
dialog-
centered

.modal- Adds a scrollbar inside the modal Try it Modals

dialog-
scrollable

.modal- The footer of the modal (often contains an action button and Try it Modals
footer a close button)

.modal- The header of the modal (often contains a title and a close Try it Modals
header button)

.modal-lg Large modal (wider than default) Try it Modals

.modal-sm Small modal (less width) Try it Modals

.modal-xl Extra large modal Try it Modals

.m-# / m-*-# Responsive margin classes. * can be sm, md, lg or xl. # can be Try it Utilities
Class Description Example Category

a number between 0 and 5

.mt-# / mt- Responsive top margin classes. * can be sm, md, lg or xl. # Try it Utilities
*-# can be a number between 0 and 5

.mb-# / mb- Responsive bottom margin classes. * can be sm, md, lg or xl. Try it Utilities
*-# # can be a number between 0 and 5

.ml-# / ml- Responsive left margin classes. * can be sm, md, lg or xl. # Try it Utilities
*-# can be a number between 0 and 5

.mr-# / mr- Responsive right margin classes. * can be sm, md, lg or xl. # Try it Utilities
*-# can be a number between 0 and 5

.mx-# / mx- Responsive left and right margin auto (horizontal) classes. * Try it Utilities
*-# can be sm, md, lg or xl. # can be a number between 0 and 5

.my-# / my- Responsive top and bottom margin auto (vertical) classes. * Try it Utilities
*-# can be sm, md, lg or xl. # can be a number between 0 and 5

.mx-auto Centers an element horizontally Try it Utilities

Class Description Example Category

.nav nav- Creates a tabbed menu Try it Tabs

tabs

.nav nav- Creates a pill menu Try it Tabs

pills

.nav- Justifies tab/pill links with an equal width Try it Tabs

justified

.navbar Creates a navigation bar Try it Navbar

.navbar-nav Container for navigation links inside the .navbar container Try it Navbar

.navbar- Added to a link or a header element inside the navbar to Try it Navbar
brand represent a logo or a header

.navbar- Collapses the navbar (hidden and replaced with a Try it Navbar
collapse menu/hamburger icon on mobile phones and small tablets)

.navbar- Responsive collapsible class - stacks the navbar vertically on Try it Navbar
expand-* small (sm), medium (md), large (lg) or extra large (xl) screens

.navbar-dark Adds a white text color to all links in the navbar Try it Navbar
Class Description Example Category

.navbar- Adds a black text color to all links in the navbar Try it Navbar
light

.navbar-text Vertically align any elements inside the navbar that are not Try it Navbar
links (ensures proper padding)

.navbar- Styles the button that should open the navbar on small Try it Navbar
toggler screens. Automatically styled as a hamburger/three bars

.nav-link Used to style links/anchors inside the navbar Try it Navbar

.nav-item Used to style list items inside the navbar Try it Navbar

.needs- Adds validation styles to a submitted form Try it Forms

validation

.no-gutters Remove gutters/extra space from columns Try it Grid System

.page-item Styles list items inside a pagination Try it Pagination

.page-link Styles links inside a pagination Try it Pagination

Class Description Example Category

.pagination Creates a pagination (Useful when you have a web site with Try it Pagination
lots of pages

.pagination- Large pagination (each pagination link gets a bigger font-size Try it Pagination
lg and more padding)

.pagination- Small pagination (each pagination link gets a smaller font size Try it Pagination
sm and less padding)

.pre- Makes a <pre> element scrollable (max-height of Try it Helpers

scrollable 350px and provide a y-axis scrollbar)

.progress Container for progress bars Try it Progress Bars

.progress- Creates a progress bar Try it Progress Bars

bar

.progress- Animates the progress bar (used together with stripes) Try it Progress Bars
bar-animated

.progress- Adds stripes to the progress bar Try it Progress Bars

bar-striped

.p-# / p-*-# Responsive padding classes. * can be sm, md, lg or xl. # can Try it Utilities
Class Description Example Category

be a number between 0 and 5

.pt-# / pt- Responsive top padding classes. * can be sm, md, lg or xl. # Try it Utilities
*-# can be a number between 0 and 5

.pb-# / pb- Responsive bottom padding classes. * can be sm, md, lg or xl. Try it Utilities
*-# # can be a number between 0 and 5

.pl-# / pl- Responsive left padding classes. * can be sm, md, lg or xl. # Try it Utilities
*-# can be a number between 0 and 5

.pr-# / pr- Responsive right padding classes. * can be sm, md, lg or xl. # Try it Utilities
*-# can be a number between 0 and 5

.py-# / py- Responsive top and bottom padding classes. * can be sm, md, Try it Utilities
*-# lg or xl. # can be a number between 0 and 5

.px-# / px- Responsive left and right padding classes. * can be sm, md, lg Try it Utilities
*-# or xl. # can be a number between 0 and 5

.rounded Adds rounded corners to an element Try it Utilities

Class Description Example Category

.rounded- Adds bottom rounded corners to an element Try it Utilities

bottom

.rounded- Shapes an element to a circle (not supported in IE8 and Try it Utilities
circle earlier)

.rounded- Adds left rounded corners of an element Try it Utilities

left

.rounded- Adds right rounded corners to an element Try it Utilities

right

.rounded-top Adds top rounded corners to an element Try it Utilities

.rounded-0 Removes rounded corners from an element Try it Utilities

.row Container for responsive columns Try it Grid System

.row-cols-* Set the number of columns that should appear next to each Try it Grid System
other

.shadow Adds a shadow to an element Try it Utilities

Class Description Example Category

.shadow-lg Adds a large shadow to an element Try it Utilities

.shadow-none Removes shadows from an element Try it Utilities

.shadow-sm Adds a small shadow to an element Try it Utilities

.small Creates a lighter, secondary text in any heading Try it Typography

.spinner- Creates a spinner/loader Try it Spinners

border

.spinner- Creates a smaller spinner/loader Try it Spinners

border-sm

.spinner- Creates a spinner/loader that "grows" Try it Spinners

grow

.spinner- Creates a smaller spinner/loader that "grows" Try it Spinners

grow-sm

.sr-only Hides an element on all devices except for screen readers Try it Utilities
Class Description Example Category

.sr-only- Hides an element on all devices except for screen readers Try it Utilities
focusable

.sticky-top Makes an element stay sticky/fixed at the top of the page Try it Utilities
when you scroll past it

.stretched- Added to a link to make its containing block (parent) clickable Try it Utilities
link (works only for parent elements with position:relative)

.tab-content Used together with .tab-pane to creates Try it Tabs

toggleable/dynamic tabs/pills

.tab-pane Used together with .tab-content to creates Try it Tabs

toggleable/dynamic tabs/pills

.table Adds basic styling to a table (padding, bottom borders, etc) Try it Tables

.table- Adds a grey background color to the table row (<tr> or Try it Tables

active table cell (<td>) (same color used on hover)

.table- Adds borders on all sides of the table and cells Try it Tables
bordered

.table- Remove borders from a table Try it Tables

Class Description Example Category

borderless

.table- Makes a table more compact by cutting cell padding in half Try it Tables
condensed

.table-dark Adds a black background with white text to the table Try it Tables

.table-hover Creates a hoverable table (adds a grey background color on Try it Tables
table rows on hover)

.table- Makes a table responsive (adds a horizontal scrollbar when Try it Tables
responsive-* needed). By default, the scrollbar is added to the table on
screens that are less than 992px wide (if needed). There's no
difference when viewing anything lager than 992px wide.
However, you can use sm|md|lg|xl to decide WHEN the
table should get a scrollbar, depending on the screen width

.table- Adds zebra-stripes to a table Try it Tables

striped

.text-break Prevents long text from breaking layout Try it Typography

.text- Indicates capitalized text Try it Typography

capitalize
Class Description Example Category

.text-center Center-aligns text Try it Typography

.text-*- Center-aligns text on different screens Try it Typography

center

.text-danger Red text color. Indicates danger Try it Colors

.text-dark Dark grey text color Try it Typography

.text- Removes the underline from a link Try it Typography

decoration-
none

.text-hide Hides text (helps replace an element's text content with a Try it Typography
background image)

.text-info Light-blue text color. Indicates information Try it Colors

.text-light Light grey text color Try it Colors

.text- Indicates justified text Try it Typography

justify
Class Description Example Category

.text-left Aligns the text to the left Try it Typography

.text-*-left Left-aligns text on different screens Try it Typography

.text- Changes text to lowercase Try it Typography

lowercase

.text-muted Grey text color Try it Colors

.text-nowrap Prevents the text from wrapping Try it Typography

.text- Blue text color. Indicates something important Try it Colors

primary

.text- Grey text color. Indicates something "less" important Try it Colors
secondary

.text-reset Resets the color of a text or a link (inherits the color from its Try it Typography
parent)

.text-right Aligns text to the right Try it Typography

Class Description Example Category

.text-*- Right-aligns text on different screens Try it Typography

right

.text- Green text color. Indicates success Try it Colors

success

.text- Makes text uppercase Try it Typography

uppercase

.text- Yellow/orange text color. Indicates warning Try it Colors

warning

.text-white White text color Try it Colors

.thead-dark Adds a black background color to table headers Try it Tables

.thead-light Adds a grey background color to table headers Try it Tables

.toast Creates a toast (alert box that disappears after a few Try it Toast
seconds)

.toast-body Toast body Try it Toast

Class Description Example Category

.toast- Toast header Try it Toast

header

.valid- Creates a custom validation message used in validated forms Try it Forms
feedback (green text color)

.valid- Creates a custom validation message used in validated forms Try it Forms
tooltip (green tooltip)

.visible Make an element visible Try it Utilities

.was- Adds validation styles to a form element Try it Forms

validated

.w-25 Sets the width of an element to 25% Try it Utilities

.w-50 Sets the width of an element to 50% Try it Utilities

.w-75 Sets the width of an element to 75% Try it Utilities

.w-100 Sets the width of an element to 100% Try it Utilities

The table above shows all available Bootstrap 4 classes.

Tip: To see the full list of all Bootstrap 3 classes, go to our All Bootstrap 3 CSS
Classes Reference.

Bootstrap 4 JS Alert

❮ PreviousNext ❯

Alert CSS Classes

For a tutorial about Alerts, read our Bootstrap Alerts Tutorial.

Class Description Example

.alert Creates an alert message box Try it

.alert-danger Red alert. Indicates a dangerous or potentially negative Try it

action

.alert-dark Dark alert. Dark grey alert box Try it

.alert- Indicates a closable alert box. Together with Try it

dismissible the .close class, this class is used to close the alert
(adds extra padding)
.alert- Adds color:inherit to the specified element Try it
heading

.alert-info Light-blue alert.Indicates a neutral informative change Try it

or action

.alert-light Light alert. Light grey alert box Try it

.alert-link Used on links inside alerts to provide matching colored Try it

links

.alert- Blue alert. Indicates an important action Try it

primary

.alert- Grey alert. Indicates a "less" important action Try it

secondary

.alert- Green alert. Indicates a successful or positive action Try it

success

.alert- Yellow alert. Indicates caution should be taken with this Try it
warning action

.close Styles the close button for the alert message (floats Try it
right with a specified font-size, color, etc.)
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>

Try it Yourself »

Close Alerts Via JavaScript

Close manually with:

Example
$('.close').alert("close");

Try it Yourself »

Alert Options

None

Alert Methods
The following table lists all available alert methods.

Method Description Try it

.alert("close") Closes the alert message Try it

.alert("dispose") Destroys an element's alert.

Alert Events
The following table lists all available alert events.

Event Description Try it

close.bs.alert Occurs when the alert message is about to be closed Try it

closed.bs.alert Occurs when the alert message has been closed (will wait for CSS transitions to Try it
complete)

Bootstrap 4 JS Button

❮ PreviousNext ❯

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:
Class Description Example

.btn Adds basic styling to any button Try it

.btn-block Makes a block-level button (spans the full width of the Try it
parent element)

.btn- Indicates a dangerous or potentially negative action Try it

danger

.btn-dark Dark grey button Try it

.btn- Indicates a default/standard button Try it

default

.btn-info Contextual button for informational alert messages Try it

.btn-lg Makes a large button Try it

.btn-light Light grey button Try it

.btn-link Makes a button look like a link (will still have button Try it
behavior)
.btn- Creates an outlined/bordered button. Use any of the Try it
outline-* contextual classes as * (btn-outline-primary, btn-outline-
success, etc)

.btn- Provides extra visual weight and identifies the primary Try it
primary action in a set of buttons

.btn-sm Makes a small button Try it

.btn- Indicates a successful or positive action Try it

success

.btn- Indicates a "less" important action Try it

secondary

.btn- Combine sets of button groups into button toolbars for Try it
toolbar more complex components

.btn- Indicates caution should be taken with this action Try it

warning

.active Makes the button appear pressed Try it

.disabled Makes the button disabled Try it

Via JavaScript
Enable manually with:

$('.btn').button();

Button Options

None

Button Methods
The following table lists all available button methods.

Note: Methods can also be passed via data attributes; append the method name to data-, as in
data-toggle or data-dispose.

Method Description Try it

.button("toggle") Makes the button look pressed Try it

.button("dispose") Destroys an element's button

Bootstrap 4 JS Carousel

❮ PreviousNext ❯
Carousel CSS Classes
For a tutorial about Carousels, read our Bootstrap Carousel Tutorial.

Class Description

.carousel Creates a carousel

.carousel-indicators Adds indicators for the carousel. These are the

little dots at the bottom 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-icon Used together with .carousel-control-prev to create

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

Try it Yourself »

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

Try it Yourself »

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");
});

Try it Yourself »

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 Try

interval number, or 5000 Specifies the delay (in milliseconds) Using

the between each slide. JSUsing
boolean data
false Note: Set interval to false to stop the
items from automatically sliding

Using
keyboard boolean true Specifies whether the carousel should JSUsing
react to keyboard events: data

 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

pause string, or "hover" Pauses the carousel from going through Using
the the next slide when the mouse pointer JSUsing
boolean enters the carousel, and resumes the data
false sliding when the mouse pointer leaves
the carousel

Note: Set pause to false to stop the

ability to pause on hover

wrap boolean true Specifies whether the carousel should go Using

through all slides continuously, or stop at JSUsing
the last slide data

 true - cycle continuously

 false - stop at the last item

Carousel Methods
The following table lists all available carousel methods.
Method Description Try it

.carousel(options) Activates the carousel with an option. See options Try it

above for valid values

.carousel("cycle") Goes through the carousel items from left to right Try it

.carousel("pause") Stops the carousel from going through items Try it

.carousel(number) Goes to a specified item (zero-based: first item is 0, Try it

second item is 1, etc..)

.carousel("prev") Goes to the previous item Try it

.carousel("next") Goes to the next item Try it

. Destroys a carousel
carousel("dispose")

Carousel Events
The following table lists all available carousel events.
Event Description Try it

slide.bs.carousel Occurs when the carousel is about to slide from one item Try it
to another

slid.bs.carousel Occurs when the carousel has finished sliding from one Try it
item to another

The slid and slide events also has additional properties:

Property Description Try it

direction Returns the direction the carousel is sliding (left or right)

relatedTarget Returns the DOM element that is being slid into place as the Try it
active item

from Returns the index of where the previous item came from, Try it
when moving on to the next one

to Returns the index of the next item Try it

Bootstrap 4 JS Collapse
❮ PreviousNext ❯

Collapse CSS Classes

For a tutorial about Collapsibles, read our Bootstrap Collapse Tutorial.

Class Description Example

.collapse Hides the content Try it

.collapse show Shows the collapsible content by default Try it

.collapsing Added when the transition starts, and removed when it Try 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>

Try it Yourself »

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

parent selector false All collapsible elements under the specified parent will be closed Try it
when this collapsible item is shown. (similar to
traditional accordion behavior)

toggle boolean true Toggles the collapsible element on invocation Try it

Collapse Methods
The following table lists all available collapse methods.

Method Description Try it

.collapse(options) Activates the collapsible element with an option. See options above for valid
values

.collapse("toggle") Toggles the collapsible element Try it

.collapse("show") Shows the collapsible element Try it

.collapse("hide") Hides the collapsible element Try it

.collapse("dispose") Destroys the collapsible element

Collapse Events
The following table lists all available collapse events.

Event Description Try it

show.bs.collapse Occurs when the collapsible element is about to be shown Try it

shown.bs.collapse Occurs when the collapsible element is fully shown (after CSS transitions have Try it
completed)

hide.bs.collapse Occurs when the collapsible element is about to be hidden Try it

hidden.bs.collapse Occurs when the collapsible element is fully hidden (after CSS transitions have
completed)

Bootstrap JS Dropdown
❮ PreviousNext ❯

Dropdown CSS Classes

For a tutorial about Dropdowns, read our Bootstrap Dropdowns Tutorial.

Class Description Example

.dropdown Indicates a dropdown menu Try it

.dropdown-item Style links inside the dropdown menu with Try it

proper padding etc
.dropdown-item-text Style text or text links inside the dropdown Try it
menu with proper padding etc

.dropdown-menu Builds the dropdown menu Try it

.dropdown-menu-right Right-aligns a dropdown menu Try it

.dropdown-header Adds a header inside the dropdown menu Try it

.dropup Indicates a dropup menu Try it

.disabled Disables an item in the dropdown menu Try it

.active Styles the active element in a dropdown menu Try it

.divider Separates items inside the dropdown menu Try it

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>

Try it Yourself »

Via JavaScript
Enable manually with:

Example
$('.dropdown-toggle').dropdown();

Try it Yourself »

Note: The data-toggle="dropdown" attribute is required regardless of whether

you call the dropdown() method.

Dropdown Options

None

Dropdown Methods
The following table lists all available dropdown methods.

Method Description Try it

.dropdown("toggle") Toggles the dropdown. If set, it will open the dropdown menu by Try it
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. Try it

shown.bs.dropdown Occurs when the dropdown is fully shown (after CSS transitions have Try it
completed)

hide.bs.dropdown Occurs when the dropdown is about to be hidden Try it

hidden.bs.dropdown Occurs when the dropdown is fully hidden (after CSS transitions have Try it
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
❮ PreviousNext ❯

Modal CSS Classes

For a tutorial about Modals, read our Bootstrap Modal Tutorial.

Class Description Example

.modal Creates a modal Try it

.modal-content Styles the modal properly with border, Try it

background-color, etc. Use this class to
add the modal's header, body, and footer

.modal-dialog-centered Centers the modal vertically and Try it

horizontally within the page

.modal-dialog-scrollable Adds a scrollbar inside the modal Try it

.modal-header Defines the style for the header of the Try it

modal
.modal-body Defines the style for the body of the modal Try it

.modal-footer Defines the style for the footer in the Try it

modal. Note: This area is right-aligned 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 Try it

.modal-lg Specifies a large modal Try it

.fade Adds an animation/transition effect which Try it

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>

Try it Yourself »

Trigger Via JavaScript

Enable manually with:

Example
$("#myModal").modal()

Try it Yourself »

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 Try

Using
backdrop boolean or true Specifies whether the modal should JSUsing
the string have a dark overlay: data
"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
keyboard boolean true Specifies whether the modal can be Using
closed with the escape key (Esc): JSUsing
data

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

when initialized JSUsing
data

Modal Methods
The following table lists all available modal methods.

Method Description Try it

.modal(options) Activates the content as a modal. See options above for Try it
valid values

.modal("toggle") Toggles the modal Try it

.modal("show") Opens the modal Try it

.modal("hide") Hides the modal Try it

Modal Events
The following table lists all available modal events.

Event Description Try it

show.bs.modal Occurs when the modal is about to be shown Try it

shown.bs.modal Occurs when the modal is fully shown (after CSS Try it
transitions have completed)

hide.bs.modal Occurs when the modal is about to be hidden Try it

hidden.bs.modal Occurs when the modal is fully hidden (after CSS

transitions have completed)

Bootstrap JS Popover
❮ PreviousNext ❯

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.

For a tutorial about Popovers, read our Bootstrap Popover Tutorial.

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>

Try it Yourself »

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();

Try it Yourself »

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

Try it
animation boolean true Specifies whether to add a CSS fade transition effect
when opening and closing the popover

 true - Add a fading effect

 false - Do not add a fading effect

container string, or false Appends the popover to a specific element. Try it

the Example: container: 'body'
boolean
false

content string "" Specifies the text inside the popover's body Try it

delay number, 0 Specifies the number of milliseconds it will take to Try it

or object open and close the popover.

To specify a delay for opening and another one for

closing, 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: Try it

 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

placement string "right" Specifies the popover position. Possible values: Try it

 "top" - Popover on top

 "bottom" - Popover on bottom
 "left" - Popover on left
 "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

selector string, or false Adds the popover to a specified selector Try it

the
boolean
false

template string 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-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 Try it

trigger string "click" Specifies how the popover is triggered. Possible values: Try it

 "click" - Trigger the popover with a click

 "hover" - Trigger the popover on hover
 "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

offset number or 0 Offset of the popover relative to its target

a string

fallbackPlacement string or "flip" Specifies which position Popper wil use on fallback
an aray

boundary string or "scrollParent" Overflow constraint boundary of the popover. Accepts

element the values "viewport", "window" or "scrollParent", or
an HTML element

Popover Methods
The following table lists all available popover methods.

Method Description Try it

.popover(options) Activates the popover with an option. See options above for valid Try it
values

.popover("show") Shows the popover Try it

.popover("hide") Hides the popover Try it

.popover("toggle") Toggles the popover Try it

.popover("dispose") Hides and destroys the popover Try it

.popover("enable") Enables the popover the ability to be shown. This is default

.popover("disable") Removes the ability to show a popover. The popover can only be
shown if it is 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 Try it

show.bs.popover Occurs when the popover is about to be shown Try it

shown.bs.popover Occurs when the popover is fully shown (after CSS transitions have Try it
completed)

hide.bs.popover Occurs when the popover is about to be hidden Try it

hidden.bs.popover Occurs when the popover is fully hidden (after CSS transitions have Try it
completed)
inserted.bs.popover Occurs after the show.bs.popover event when the
popover template has been added to the DOM

Bootstrap JS Scrollspy
❮ PreviousNext ❯

JS Scrollspy
Scrollspy is used to automatically update links in a navigation list based on
scroll position.

For a tutorial about Scrollspy, read our Bootstrap Scrollspy Tutorial.

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>

Try it Yourself »

Via JavaScript
Enable manually with:

Example
$('body').scrollspy({target: ".navbar"})

Try it Yourself »
Scrollspy Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option
name to data-, as in data-offset="".

Name Type Default Description Try it

offset number 10 Specifies the number of pixels to offset from Try it

top when calculating the position of scroll

Scrollspy Methods
The following table lists all available scrollspy methods.

Method Description

.scrollspy("refresh") When adding and removing elements from the scrollspy, this method can be used 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
❮ PreviousNext ❯

Tab CSS Classes

Tabs are used to separate content into different panes where each pane is
viewable one at a time.

For a tutorial about Tabs, read our Bootstrap Tabs/Pills Tutorial.

Class Description Example

.nav nav-tabs Creates navigation tabs Try it

.nav nav-pills Creates navigation pills Try it

.nav-item Creates tab items Try it

.nav-link Styles links inside the navigation tab Try it

.nav-justified Makes navigation tabs/pills equal widths of their Try it
parent, at screens wider than 768px. On smaller
screens, the nav tabs are stacked

.tab-content Together with .tab-pane and data-toggle="tab", it Try it

makes the tab toggleable

.tab-pane Together with .tab-content and data-toggle="tab", it Try 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.

Try it Yourself »

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

Try it Yourself »

Tab Options

None

Tab Methods
The following table lists all available tab methods.

Method Description Try it

.tab("show") Shows the tab Try it

Tab Events
The following table lists all available tab events.

Event Description Try it

show.bs.tab Occurs when the tab is about to be shown. Try it

shown.bs.tab Occurs when the tab is fully shown (after CSS transitions have completed) Try it

hide.bs.tab Occurs when the tab is about to be hidden Try it

hidden.bs.tab Occurs when the tab is fully hidden (after CSS transitions have completed) Try it

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
❮ PreviousNext ❯

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

For a tutorial about Toasts, read our Bootstrap Toast Tutorial.

Class Description Example

.toast Creates the toast Try it

.toast-header Creates the toast header Try it

.toast-body Creates the toast body Try it

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>

Try it Yourself »

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 Try

Try it
animation boolean true Specifies whether to add a CSS fade transition
effect when showing and hiding the toast.

 true - Add a fading effect

 false - Do not add a fading effect

autohide boolean true Specifies whether to hide the toast by default Try it

delay number 500 Specifies the number of milliseconds it will take Try it
to hide the toast once it is shown.

Toast Methods
The following table lists all available toast methods.
Method Description Try it

.toast(options) Activates the toast with an option. See options above for Try it
valid values

.toast("show") Shows the toast Try it

.toast("hide") Hides the toast Try it

.toast("dispose") Hides and destroys the toast Try it

Toast Events
The following table lists all available toast events.

Event Description Try it

show.bs.toast Occurs when the toast is about to be shown Try it

shown.bs.toast Occurs when the toast is fully shown (after CSS transitions Try it
have completed)

hide.bs.toast Occurs when the toast is about to be hidden Try it

hidden.bs.toast Occurs when the toast is fully hidden (after CSS transitions
have completed)

Bootstrap JS Tooltip
❮ PreviousNext ❯

JS Tooltip
The Tooltip is a small pop-up box that appears when the user moves the mouse
pointer over an element.

For a tutorial about Tooltips, read our Bootstrap Tooltip Tutorial.

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>

Try it Yourself »
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();

Try it Yourself »

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

Try it
animation boolean true Specifies whether to add a CSS
fade transition effect when
showing and hiding the tooltip

 true - Add a fading effect

 false - Do not add a fading

effect

container string, or false Appends the tooltip to a specific Try it

the element.
boolean Example: container: 'body'
false
delay number, 0 Specifies the number of Try it
or object milliseconds it will take to show
and hide the tooltip.

To specify a delay for showing and

another one for hiding, 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

html boolean false Specifies whether to accept HTML Try it

tags in the tooltip:

 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

placement string "top" Specifies the tooltip position. Try it

Possible values:

 "top" - Tooltip on top

 "bottom" - Tooltip on
bottom
 "left" - Tooltip on left
 "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 Try it

the selector
boolean
false

template string 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 .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 Try it

displayed inside the tooltip

trigger string "hover focus" Specifies how the tooltip is Try it

triggered. Possible values:

 "click" - Trigger the tooltip

with a click
 "hover" - Trigger the tooltip
on hover
 "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

offset number 0 Offset of the tooltip relative to its

or a target
string

fallbackPlacement string or "flip" Specifies which position Popper wil

an aray use on fallback

boundary string or "scrollParent" Overflow constraint boundary of

element the tooltip. Accepts the values
"viewport", "window" or
"scrollParent", or an HTML
element

Tooltip Methods
The following table lists all available tooltip methods.

Method Description Try it

.tooltip(options) Activates the tooltip with an option. See options above Try it
for valid values

.tooltip("show") Shows the tooltip Try it

.tooltip("hide") Hides the tooltip Try it

.tooltip("toggle") Toggles the tooltip Try it

. Hides and destroys the tooltip Try it

tooltip("dispose")

Tooltip Events
The following table lists all available tooltip events.

Event Description Try it

show.bs.tooltip Occurs when the tooltip is about to be shown Try it

shown.bs.tooltip Occurs when the tooltip is fully shown (after CSS Try it
transitions have completed)

hide.bs.tooltip Occurs when the tooltip is about to be hidden Try it

hidden.bs.tooltip Occurs when the tooltip is fully hidden (after CSS Try it
transitions have completed)

Geometric Dimensioning and Tolerancing by David A. Madsen
89% (9)
Geometric Dimensioning and Tolerancing by David A. Madsen
512 pages
Ford Figo B517 Electrical Wiring Diagrams: Group 1 - General Information
50% (6)
Ford Figo B517 Electrical Wiring Diagrams: Group 1 - General Information
1 page
Bootstrap 4
No ratings yet
Bootstrap 4
444 pages
Bootstrap3.3.7 Tutorial
No ratings yet
Bootstrap3.3.7 Tutorial
186 pages
Bootstrap Lecture 1
100% (1)
Bootstrap Lecture 1
16 pages
Cours Gratuit - Com Id 9973
No ratings yet
Cours Gratuit - Com Id 9973
26 pages
TI33031 Pemrograman Web I: M Rizki Fadhilah S.T., M.Eng. Prodi Teknik Informatika Fakultas Teknik Universitas Islam Riau
No ratings yet
TI33031 Pemrograman Web I: M Rizki Fadhilah S.T., M.Eng. Prodi Teknik Informatika Fakultas Teknik Universitas Islam Riau
63 pages
Bootstrap 4 - Quick Guide - Tutorialspoint PDF
No ratings yet
Bootstrap 4 - Quick Guide - Tutorialspoint PDF
25 pages
Web Lecture5
No ratings yet
Web Lecture5
29 pages
Lecture Bootstrap 17-18-19
No ratings yet
Lecture Bootstrap 17-18-19
67 pages
Bootstrap Notes
No ratings yet
Bootstrap Notes
146 pages
W3schools: Bootstrap Get Started
No ratings yet
W3schools: Bootstrap Get Started
5 pages
Section 2_Unit 1 Bootstrap
No ratings yet
Section 2_Unit 1 Bootstrap
55 pages
Bootstrap Questions
No ratings yet
Bootstrap Questions
88 pages
Bootstrap Tutorial
No ratings yet
Bootstrap Tutorial
154 pages
Bootstrap 3 Tutorial: Printed by
No ratings yet
Bootstrap 3 Tutorial: Printed by
33 pages
BS and JS
No ratings yet
BS and JS
157 pages
Introduction To BOOTSTRAP
No ratings yet
Introduction To BOOTSTRAP
48 pages
Bootstrap Manual
No ratings yet
Bootstrap Manual
217 pages
Introduction Bootstrap v4.6
No ratings yet
Introduction Bootstrap v4.6
3 pages
Web Development Lesson Nine
No ratings yet
Web Development Lesson Nine
12 pages
Experiment Number 1:: What Is Bootstrap?
No ratings yet
Experiment Number 1:: What Is Bootstrap?
45 pages
WP Ch7
No ratings yet
WP Ch7
26 pages
Module 3
No ratings yet
Module 3
16 pages
Tot Webdev - Bootstrap
No ratings yet
Tot Webdev - Bootstrap
108 pages
Bootstrap Quick Guide
No ratings yet
Bootstrap Quick Guide
27 pages
WordPress Theme Development Using Bootstrap
No ratings yet
WordPress Theme Development Using Bootstrap
24 pages
BootStrap 5
No ratings yet
BootStrap 5
148 pages
WE LAB 7 - 2k22
No ratings yet
WE LAB 7 - 2k22
28 pages
Exercise: Getting Started With Bootstrap: Index - HTML
No ratings yet
Exercise: Getting Started With Bootstrap: Index - HTML
3 pages
Python
No ratings yet
Python
12 pages
What Is Bootstrap?
No ratings yet
What Is Bootstrap?
166 pages
Bootstrap 4
No ratings yet
Bootstrap 4
376 pages
WP Ch7
No ratings yet
WP Ch7
27 pages
Bootstrap
No ratings yet
Bootstrap
15 pages
Module 4 Notes
No ratings yet
Module 4 Notes
41 pages
Bootstrap Wow Absolutely Insane
No ratings yet
Bootstrap Wow Absolutely Insane
7 pages
Bootstrap
No ratings yet
Bootstrap
17 pages
Bootstrap References
No ratings yet
Bootstrap References
23 pages
Intro To Bootstrap
No ratings yet
Intro To Bootstrap
27 pages
UNIT3newpptx 2023 10 13 10 47 03
No ratings yet
UNIT3newpptx 2023 10 13 10 47 03
190 pages
Course Notes
No ratings yet
Course Notes
39 pages
Cours Bosstrap Sas
No ratings yet
Cours Bosstrap Sas
102 pages
Unit-5(Bootstrap)
No ratings yet
Unit-5(Bootstrap)
21 pages
Introduction Bootstrap v4.6
No ratings yet
Introduction Bootstrap v4.6
5 pages
Get Started With Bootstrap Bootstrap v5.3
No ratings yet
Get Started With Bootstrap Bootstrap v5.3
6 pages
Apuntes Bootstrap
No ratings yet
Apuntes Bootstrap
30 pages
Introduction To Bootstrap
No ratings yet
Introduction To Bootstrap
16 pages
Responsive Web Design
No ratings yet
Responsive Web Design
29 pages
Exercise 5_Getting Started With Bootstrap
No ratings yet
Exercise 5_Getting Started With Bootstrap
7 pages
bootstrap1
No ratings yet
bootstrap1
7 pages
Bootstrap
No ratings yet
Bootstrap
28 pages
Bootstrap
No ratings yet
Bootstrap
77 pages
Lecture 12
No ratings yet
Lecture 12
27 pages
Bootstrap (1)
No ratings yet
Bootstrap (1)
21 pages
BootStrap Basics
No ratings yet
BootStrap Basics
30 pages
Bootstrap 5 Report
No ratings yet
Bootstrap 5 Report
21 pages
unit 3 sol uiux
No ratings yet
unit 3 sol uiux
12 pages
Introduction to Bootstrap (2)
No ratings yet
Introduction to Bootstrap (2)
21 pages
5.AWP Labmanual New
No ratings yet
5.AWP Labmanual New
93 pages
Lab Front-End Development II
No ratings yet
Lab Front-End Development II
7 pages
Your First Week With Bootstrap
From Everand
Your First Week With Bootstrap
Syed Fazle Rahman
No ratings yet
ASTE1
No ratings yet
ASTE1
52 pages
Courshiwot PDF
No ratings yet
Courshiwot PDF
1 page
JBOR3
No ratings yet
JBOR3
40 pages
Grade 11 Physics Notes Unit 5-8
100% (1)
Grade 11 Physics Notes Unit 5-8
85 pages
Grade 10 Physics Students Textbook
No ratings yet
Grade 10 Physics Students Textbook
261 pages
Gohbet
No ratings yet
Gohbet
6 pages
Physics Grade 9 Teacher Guide Final Version-June 2022
No ratings yet
Physics Grade 9 Teacher Guide Final Version-June 2022
112 pages
Knowledge Question For Hardware and Network Servicing - L - III - V1
100% (2)
Knowledge Question For Hardware and Network Servicing - L - III - V1
11 pages
Candidate's Package For Hardware and Network Servicing L III
No ratings yet
Candidate's Package For Hardware and Network Servicing L III
7 pages
GC Student Handbook
No ratings yet
GC Student Handbook
34 pages
DS-2XS6A25G0-I CH20S40 (No+battery) Datasheet V5.5.111 20220120
No ratings yet
DS-2XS6A25G0-I CH20S40 (No+battery) Datasheet V5.5.111 20220120
8 pages
GEOVIA Surpac UGMP BR 070413A4 LR
No ratings yet
GEOVIA Surpac UGMP BR 070413A4 LR
4 pages
Mcafee Mvision Mobile: Defend All Your Mobile Devices
No ratings yet
Mcafee Mvision Mobile: Defend All Your Mobile Devices
2 pages
Safari
No ratings yet
Safari
14 pages
Seminar On Cad/Cam
No ratings yet
Seminar On Cad/Cam
21 pages
Aybey Disply Dd2 - Eng
100% (2)
Aybey Disply Dd2 - Eng
7 pages
MANUAL CD26 CAUDALÍMETRO PORTÁTIL Ultrasonic Flowmeter User Manual Supmea
No ratings yet
MANUAL CD26 CAUDALÍMETRO PORTÁTIL Ultrasonic Flowmeter User Manual Supmea
89 pages
Assessment and Redesign of The Electrical System
No ratings yet
Assessment and Redesign of The Electrical System
21 pages
Unit 3 - Introduction To Computer Networks
No ratings yet
Unit 3 - Introduction To Computer Networks
7 pages
2021 - All New Isuzu D-Max
No ratings yet
2021 - All New Isuzu D-Max
2 pages
EN DOL 53 Hand Out PL 20180420
No ratings yet
EN DOL 53 Hand Out PL 20180420
8 pages
Datasheet-Datatron IFP 75inch
No ratings yet
Datasheet-Datatron IFP 75inch
4 pages
Participate and Assist: Learning Episode
No ratings yet
Participate and Assist: Learning Episode
4 pages
LSCM Chapter 6
No ratings yet
LSCM Chapter 6
31 pages
BTS2020 Exhibitors Directory Main
No ratings yet
BTS2020 Exhibitors Directory Main
247 pages
Deliverable 1
No ratings yet
Deliverable 1
10 pages
Customer Centric Strategy 1660091568
No ratings yet
Customer Centric Strategy 1660091568
166 pages
The Southbridge Is One of The Two Chips in The Core Logic Chipset On A Personal Computer
No ratings yet
The Southbridge Is One of The Two Chips in The Core Logic Chipset On A Personal Computer
9 pages
Relationship Marketing
No ratings yet
Relationship Marketing
10 pages
Frequency Converters: Instruction Manual (UL) R912004711
No ratings yet
Frequency Converters: Instruction Manual (UL) R912004711
68 pages
Personalization Ebook - SalesForce
No ratings yet
Personalization Ebook - SalesForce
19 pages
EC Centrifugal Fan: R3G630-AB06-03
No ratings yet
EC Centrifugal Fan: R3G630-AB06-03
5 pages
SD/ - (Controller of Examinations)
No ratings yet
SD/ - (Controller of Examinations)
28 pages
Cloud Computing Task
No ratings yet
Cloud Computing Task
11 pages
Blakeborough Software Manual WVC-BC010-R0
No ratings yet
Blakeborough Software Manual WVC-BC010-R0
17 pages
Introduction To Remote Sensing
No ratings yet
Introduction To Remote Sensing
11 pages
Chapter 1 Communication Processes, Principles and Ethics
No ratings yet
Chapter 1 Communication Processes, Principles and Ethics
4 pages
CCM Freedom
No ratings yet
CCM Freedom
92 pages