Download Bootstrap Cheat Sheet PDF & Help Guide [Updated]

Adding Bootstrap in Your HTML File (Bootstrap Cheat Sheet)
Bootstrap Components
Alerts
Badges
Breadcrumbs
Buttons
Button Groups
Buttons Modifiers
Cards
Carousel
Collapse
Dropdowns
Forms
Jumbotron
Navbar
Pagination
Tables
That's All!

Through this Bootstrap cheat sheet, you will get a complete list of topics that will guide you while working with the popular CSS framework. The Bootstrap cheat sheet will also help you prepare for a front-end development interview.

Before proceeding further, let us know some important things about Bootstrap:

It is an open-source framework of CSS .
Bootstrap is used to create mobile-friendly front-end pages.
It contains CSS, jQuery, and JavaScript.
Bootstrap also contains JavaScript plugins.
The newest version of Bootstrap is Bootstrap 4.
It has the 3 ^rd highest starred open project on GitHub.
It provides prebuild tools that we can insert into HTML web pages.
Bootstrap uses a cache system in which we do not have to install it on our system. It requires internet only one time and after that, it makes a cache of its file and store in a web browser.

Adding Bootstrap in Your HTML File (Bootstrap Cheat Sheet)

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h2>BootStrap</h2>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap Components

In this Bootstrap cheat sheet, we are going to cover the following Bootstrap components:

Alert
Badges
Breadcrumbs
Buttons
Buttons Group
Card
Carousel
Collapse
Dropdowns
Forms
Navbar
Paginators
Table

Alerts

Alerts provide feedback messages, and they are often used after the user has performed some action on the web pages.

Alert Type	Code
alert-success	`<div class="alert alert-success" role="alert"> <strong>Success! </strong> Alert Message </div>`
alert-info	`<div class="alert alert-info" role="alert"> <strong> INFO <strong> Info Message. </div>`
alert-warning	`<div class="alert alert-warning" role="alert"> Warning Message </div>`
alert-danger	`<div class="alert alert-danger" role="alert"> Danger Message </div>`
alert-link	`<div class="alert alert-danger" role="alert"> <a href="#" class="alert-link">Click Here To resubmit</a> </div>`
alert-dismissible	`<div class="alert alert-warning alert-dismissible fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> Dismiss it</div>`
alert-heading	`<div class="alert alert-success" role="alert"> <h4 class="alert-heading">UserName</h4> You are Logged in </div>`

Badges

These are used to count the total elements and label them.

Badges Type	Code
badge-default	`<h2>Badges Heading <span class="badge badge-secondary">Go</span></h2>`
badge-pill	`<span class="badge badge-pill badge-default">Pills</span>`
badge-primary	`<span class="badge badge-primary">Primary</span>`
badge-success	`<span class="badge badge-success">Success</span>`
badge-info	`<span class="badge badge-info">Info</span>`
badge-warning	`<span class="badge badge-warning">Warning</span>`
badge-danger	`<span class="badge badge-warning">Warning</span>`
Links with badges	`<a href="#" class="badge badge-primary"> Link </a>`

Breadcrumbs

Breadcrumbs provide a mini-navigation, and it is used to tell us on which folder we are right now.

Breadcrumb Code

breadcrumbs

<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item active" aria-current="page">Index</li> </ol> </nav>   <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Index</a></li> <li class="breadcrumb-item active" aria-current="page">Sub Folder</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Index</a></li> <li class="breadcrumb-item"><a href="#">Sub Folder</a></li> <li class="breadcrumb-item active" aria-current="page">Mini Folder</li> </ol> </nav>

Buttons

We often use buttons on our webpage because they provide an attractive look to the links. With Bootstrap, we can style button tags.

Button Type	Code
btn-primary	`<button type="button" class="btn btn-primary">Button</button>`
btn-secondary	`<button type="button" class="btn btn-secondary">Button</button>`
btn-success	`<button type="button" class="btn btn-success">Button</button>`
btn-info	`<button type="button" class="btn btn-info">Button</button>`
btn-warning	`<button type="button" class="btn btn-warning"> Button</button>`
btn-danger	`<button type="button" class="btn btn-danger">Button</button>`
btn-link	`<button type="button" class="btn btn-link">Link Button</button>`
btn-outline-primary	`<button type="button" class="btn btn-outline-primary">Primary</button>`
btn-outline-secondary	`<button type="button" class="btn btn-outline-secondary">Secondary</button>`
btn-outline-success	`<button type="button" class="btn btn-outline-success">Success</button>`
btn-outline-info	`<button type="button" class="btn btn-outline-info">Info</button>`
btn-outline-warning	`<button type="button" class="btn btn-outline-warning">Warning</button>`
btn-outline-danger	`<button type="button" class="btn btn-outline-danger">Danger</button>`

Button Groups

In Button Groups we can align 2 or more than 2 buttons together.

Button Group Type	Code
btn-group	`<div class="btn-group" role="group" aria-label=""> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> </div>`
btn-group-lg	`<div class="btn-group btn-group-lg" role="group" aria-label=" "> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> </div>`
btn-group-sm	`<div class="btn-group btn-group-sm" role="group" aria-label=" "> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> </div>`
btn-group-vertical	`<div class="btn-group btn-group-vertical" role="group" aria-label=" "> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> </div>`
btn-group (nested)	<div class="btn-group" role="group" aria-label="nesting"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <div class="btn-group" role="group"> <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div> </div> </div>
btn-toolbar	`<div class="btn-toolbar" role="toolbar" aria-label="Toolbar "> <div class="btn-group mr-2" role="group" aria-label="First group"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> </div> </div>`

Buttons Modifiers

In Bootstrap, we have buttons modifiers when you want to modify your buttons. Buttons modifiers can manipulate the size of buttons and can disable or enable the same.

Button Modifier	Description
btn-lg	Increases the size of the buttons.
btn-small	Decreases the size of the buttons.
btn-block	A block button.
active button	It provides an active link to the button.
disable button	It disables a button.

Cards

In Bootstrap we have cards that are simple containers. These can hold images and descriptions. There are various functionalities associated with a card as shown below.

Card types	Code
card	`<div class="card"> <img class="card-img-top" src=" " alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Title</h4> <p class="card-text"> Text </p> <a href="#" class="btn btn-primary">Link</a> </div> </div>`
card-group	`<div class="card-group"> <div class="card"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Text</p> </div> </div> <div class="card"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Text. </p> </div> </div>`
card-columns	`<div class="card-columns"> <div class="card"> <div class="card-block"> </div> </div> <div class="card p-3"> </div> <div class="card"> <div class="card-block"> </div> </div> <div class="card card-inverse card-primary p-3 text-center"> </div> </div>`
card-block	`<div class="card"> <div class="card-block"> Card Block </div> </div>`
card-titl	`<div class="card"> <div class="card-block"> <h4 class="card-title">Title</h4> <h6 class="card-subtitle mb-2 text-muted">Subtitle</h6> <p class="card-text"> Text </p> <a href="#" class="card-link">Link</a> <a href="#" class="card-link">Another link</a> </div> </div>`
card-subtitle
card-text
card-link
card-img-top	`<div class="card"> <img class="card-img-top" src="" > <div class="card-block"> Text </div> </div>`
card-img-bottom	`<div class="card"> <img class="card-img-bottom" src="" > <div class="card-block"> Text </div> </div>`
card-img-overlay	`<div class="card"> <img class="card-img-overlay" src="" > <div class="card-block"> Text </div> </div>`
middle-image	`<div class="card"> <div class="card-block"> <p class="card-text">Text</p> </div> <img src=" " alt="Card image"> <div class="card-block"> <p class="card-text">Text</p> </div> </div>`
list-group	`<div class="card"> <ul class="list-group list-group-flush"> <li class="list-group-item">One</li> <li class="list-group-item">two</li> <li class="list-group-item">Three</li> </ul> </div>`
card-header	`<div class="card"> <div class="card-header"> Head </div> <div class="card-block"> <h4 class="card-title">Title</h4> <p class="card-text">Text.</p> </div> </div>`
card-inverse	`<div class="card card-inverse"> <img class="card-img" src="" > <div class="card-img-overlay"> <p class="card-text">Text</p> </div> </div>`
card-primary	`<div class="card card-inverse card-primary text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Text.</p> <footer>Text <cite title="Source Title">Title</cite></footer> </blockquote> </div> </div>`
card-info	`<div class="card card-inverse card-info text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Text.</p> <footer>Text <cite title="Source Title">Title</cite></footer> </blockquote> </div> </div>`
card-success	`<div class="card card-inverse card-success text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Text.</p> <footer>Text <cite title="Source Title">Title</cite></footer> </blockquote> </div> </div>`
card-warning	`<div class="card card-inverse card-warning text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Text.</p> <footer>Text <cite title="Source Title">Title</cite></footer> </blockquote> </div> </div>`
card-danger	`<div class="card card-inverse card-danger text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Text.</p> <footer>Text <cite title="Source Title">Title</cite></footer> </blockquote> </div> </div>`

Carousel

It provides buttons that help to scroll images, cards or containers.

Types of Carousel	Code
Carousel-slide	<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
Carousel-indicators	<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
Carousel-caption	<div class="bd-example"> <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleCaptions" data-slide-to="1"></li> <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="..." class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>

Collapse

It is a JavaScript plugin, and it toggles the visibility of the content. When you click on it, the content of that button appears.

Collapse Types Code

collapse

<p> <a class="btn btn-primary" data-toggle="collapse" href="#X" role="button" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target </button> </p> <div class="collapse" id="X"> <div class="card card-body"> Content or Text </div> </div>

accordion

<div id="accordion" role="tablist"> <div class="card"> <div class="card-header" role="tab" id="first"> <h5 class="mb-0"> <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> First Collapse </a> </h5> </div> <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="first"> <div class="card-body"> This is the content for collapse one </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="second"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Second Collapse </a> </h5> </div> <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="second"> <div class="card-body"> This is the content for collapse 2 </div> </div> </div> </div>

Dropdowns

These are used to show a list of links as options, and they can toggle the content. It provides an interactive form of a list. Often, we create a dropdown as a button so when we click on it, give a slide of other links.

Dropdown Types	Code
dropdown	`<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="1"> <a class="dropdown-item" href="#!">Link1</a> <a class="dropdown-item" href="#!">Link2</a> </div> </div>`
dropdown (split)	`<div class="btn-group"> <button type="button" class="btn btn-secondary">Dropdown Split</button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#!">link1 </a> <a class="dropdown-item" href="#!">Link2 </a> </div> </div>`
dropup	`<div class="btn-group dropup"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> DROPUP </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#!">Link 1</a> <a class="dropdown-item" href="#!">Link 2</a> </div>`
dropup (split)	`<div class="btn-group dropup"> <button type="button" class="btn btn-secondary"> DROPUP SPLIT </button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#"> Link 1</a> <a class="dropdown-item" href="#"> Link 2</a> </div> </div>`
dropright	`<div class="btn-group dropright"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> DROP RIGHT Button </button> <div class="dropdown-menu" x-placement="right-start" style="position: absolute; transform: translate3d(111px, 0px, 0px); top: 0px; left: 0px; will-change: transform;"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> </div>`
dropleft	`<div class="btn-group dropleft"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> DROP LEFT </button> <div class="dropdown-menu" x-placement="right-start" style="position: absolute; transform: translate3d(111px, 0px, 0px); top: 0px; left: 0px; will-change: transform;"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> </div>`
dropdown-header	`<div class="dropdown open"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> DROPDOWN BUTTON </button> <div class="dropdown-menu"> <h6 class="dropdown-header">Links HEADER</h6> <a class="dropdown-item" href="#!">Link 1</a> <a class="dropdown-item" href="#!">Links 2</a> </div> </div>`
dropdown-item-text	`<div class="dropdown open"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> DROPDOWN BUTTON </button> <div class="dropdown-menu"> <span class="dropdown-item-text"> Text Content </span> <a class="dropdown-item" href="#!">Link 1</a> <a class="dropdown-item" href="#!">Link 2</a> </div> </div>`
dropdown-divider	`<div class="dropdown open"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> DROPDOWN BUTTON </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#!"> Other Links</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#!">Link 1</a> <a class="dropdown-item" href="#!">Link 2</a> </div> </div>`
dropdown-item-disable	`<div class="dropdown open"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> DROPDOWN BUTTON </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#!">Link 1</a> <a class="dropdown-item disabled" href="#!">No Action Link</a> </div> </div>`
dropdown-menu-right	`<div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> DROPDOWN BUTTON </button> <div class="dropdown-menu dropdown-menu-right"> <button class="dropdown-item" type="button">1st Button</button> <button class="dropdown-item" type="button">2nd Button</button> <button class="dropdown-item" type="button">3rd Button/button> </div> </div>`

Forms

Forms are the common tool of HTML. With Bootstrap, we can style the forms. We use a form to collect data from the user. Next, we can perform appropriate operations on that data.

Form Types	Code
form-group	`<form> <div class="form-group"> <label for="form_input">Main Lable</label> <input type="text" class="form-control" id="form Input" placeholder="Please enter here"> </div> <div class="form-group"> <label for="form input 2">Label for 2nd input</label> <input type="text" class="form-control" id="Form_input_2" placeholder="Please enter data here"> </div> </form>`
form-inline	<form class="form-inline"> <label class="sr-only" for="inlineFormInputName2">Name</label> <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Name Here "> <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label> <div class="input-group mb-2 mr-sm-2"> <div class="input-group-prepend"> <div class="input-group-text">@</div> </div> <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username"> </div> <div class="form-check mb-2 mr-sm-2"> <input class="form-check-input" type="checkbox" id="inlineFormCheck"> <label class="form-check-label" for="inlineFormCheck"> Remember me </label> </div> <button type="submit" class="btn btn-primary mb-2">Submit</button> </form>
form using grid	`<form> <div class="form-group row"> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group row"> <div class="col-sm-10 offset-sm-2"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </div> </form>`
form-control	`<input class="form-control" type="text" placeholder="Default input">`
form-control-lg	`<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">`
form-control-sm	`<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">`
form-control-file	`<input type="file" class="form-control-file" id="exampleFormControlFile1">`
form-control-plaintext	`<input type="text" readonly="" class="form-control-plaintext" id="staticEmail" value="email@example.com">`
form-control-range	`<input type="range" class="form-control-range">`
form-check	`<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked=""> <label class="form-check-label" for="exampleRadios1"> Default radio </label> </div>`
form-check-inline	`<div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">2</label> </div>`
readonly	`<input class="form-control" type="text" placeholder="Enter here …" readonly="">`

Jumbotron

It is a type of container, which shows the hero unit style content.

Jumbotron Code

jumbotron

<div class="jumbotron"> <h2 class="display-3">Heading</h2> <p class="lead">Text 1.</p> <hr class="my-2"> <p>Text 2.</p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#!" role="button">Button</a> </p> </div>

jumbotron-fluid

<div class="jumbotron jumbotron-fluid"> <div class="container"> <h2 class="display-3">Heading</h2> <p class="lead">Text or content of the page.</p> </div> </div>

Navbar provides interactive navigation header to the website. With Navbar, we can easily visit any page.

Navbar Types	Code
navbar	<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Web Homepage</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Link 1 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled Link</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>
navbar-brand	`<nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#!">Homepage</a> </nav>`
navbar with form	`<nav class="navbar navbar-light bg-light"> <form class="form-inline"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </nav>`
navbar-text	`<nav class="navbar navbar-light bg-light"> <span class="navbar-text"> Content or text </span> </nav>`
navbar-dark bg-dark	`<nav class="navbar navbar-dark bg-dark"> </nav>`
navbar-light	`<nav class="navbar navbar-light" style="background-color: #e3f2fd;"> </nav>`
navbar fixed-top	`<nav class="navbar fixed-top navbar-dark bg-primary"> <a class="navbar-brand" href="#!"> Fix navbar</a> </nav>`
navbar fixed-bottom	`<nav class="navbar fixed-bottom navbar-dark bg-primary"> <a class="navbar-brand" href="#!">Bottom Navbar</a> </nav>`
navbar sticky-top	`<nav class="navbar sticky-top navbar-dark bg-primary"> <a class="navbar-brand" href="#!"> Sticky Navbar at top </a> </nav>`
collapse navbar-collapse	<nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#!">Homepage <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link " href="#!">Link </a> </li> </ul> </div> </nav>
navbar-toggler	<nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#!">Homepage</a> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav mr-auto mt-2 mt-md-0"> <li class="nav-item active"> <a class="nav-link" href="#!">Link 1 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#!">Link 2</a> </li> </ul> </div> </nav>
navbar-expand-*	<nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#!">Homepage</a> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav mr-auto mt-2 mt-md-0"> <li class="nav-item active"> <a class="nav-link" href="#!">Link 1 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#!">Link 2</a> </li> </ul> </div> </nav>

Pagination

Pagination helps to display the different page numbers of a website. With paginators, we can jump to any page of the website.

Paginator Types	Code
pagination	<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#!" aria-label="PRE"> <span aria-hidden="true">«</span> <span class="sr-only">previous</span> </a> </li> <li class="page-item"><a class="page-link" href="#!">page 1</a></li> <li class="page-item"><a class="page-link" href="#!">page 2</a></li> <li class="page-item"><a class="page-link" href="#!">page 3</a></li> <li class="page-item"> <a class="page-link" href="#!" aria-label="NEXT"> <span aria-hidden="true">»</span> <span class="sr-only">NEXT</span> </a> </li> </ul> </nav>
page-item disable	`<nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#!" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#!">Page 1</a></li> <li class="page-item active"> <a class="page-link" href="#!">Page 2 <span class="sr-only">(current)</span></a> </li> <li class="page-item"><a class="page-link" href="#!">Page 3</a></li> <li class="page-item"> <a class="page-link" href="#!">Next</a> </li> </ul> </nav>`
page-item active
pagination-lg	`<ul class="pagination pagination-lg">`
pagination-sm	`<ul class="pagination pagination-sm">`

Tables

Tables represent a set of relational data. With Bootstrap, we can create a set of interactive tables.

Table Types	Code
Table	`<table class="table"> <thead> <tr> <th>#</th> <th>Name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>SAM</td> <td>1</td> </tr> <tr> <th scope="row">2</th> <td>Juli</td> <td>2</td> </tr> </tbody> </table>`
Thead-light	`<table class="table"> <thead class="thead-light"> <tr> <th>#</th> <th>Name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>SAM</td> <td>1</td> </tr> <tr> <th scope="row">2</th> <td>JULI</td> <td>2</td> </tr> </tbody> </table>`
Thead-dark	`<table class="table"> <thead class="thead-dark"> <tr> <th>#</th> <th>Name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>SAM</td> <td>1</td> </tr> <tr> <th scope="row">2</th> <td>JULI</td> <td>2</td> </tr> </tbody> </table>`
Table-striped	`<table class="table table-striped"> <thead> <tr> <th>#</th> <th>Name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>SAM</td> <td>1</td> </tr> <tr> <th scope="row">2</th> <td>JULI</td> <td>2</td> </tr> </tbody> </table>`
Table-bordered	`table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>SAM</td> <td>1</td> </tr> <tr> <th scope="row">2</th> <td>JULI</td> <td>2</td> </tr> </tbody> </table>`
Table-borderless	`table class="table table-borderless"> <thead> <tr> <th>#</th> <th>Name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>SAM</td> <td>1</td> </tr> <tr> <th scope="row">2</th> <td>JULI</td> <td>2</td> </tr> </tbody> </table>`
Table-hover	`table class="table table-hover"> <thead> <tr> <th>#</th> <th>Name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>SAM</td> <td>1</td> </tr> <tr> <th scope="row">2</th> <td>JULI</td> <td>2</td> </tr> </tbody> </table>`
Table-sm	`table class="table table-sm"> <thead> <tr> <th>#</th> <th>Name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>SAM</td> <td>1</td> </tr> <tr> <th scope="row">2</th> <td>JULI</td> <td>2</td> </tr> </tbody> </table>`
Table-*-responsive	`<table class="table table-responsive"> <!-- table content here --> </table> <table class="table table-sm-responsive"><!-- ... --></table> <table class="table table-md-responsive"><!-- ... --></table> <table class="table table-lg-responsive"><!-- ... --></table> <table class="table table-xl-responsive"><!-- ... --></table>`
Table-dark	`<table class="table"> <thead> <tr> <th>#</th> <th>Name</th> <th>ID</th> </tr> </thead> <tbody> <tr class="table-dark"> <th scope="row">1</th> <td>SAM</td> <td>1</td> </tr> <tr> <th scope="row">2</th> <td>JULI</td> <td>2</td> </tr> </tbody> </table>`

That's All!

The Bootstrap cheat sheet contains all the help you need while learning HTML and front-end development. Moreover, it can serve as your reference while developing a project using the Popular HTML framework .

Something wrong with the Bootstrap cheat sheet? Let us know via the comments so that we can mend it ASAP.

Thanks already!

People are also reading:

Download Bootstrap Cheat Sheet PDF & Help Guide

Adding Bootstrap in Your HTML File (Bootstrap Cheat Sheet)

Bootstrap Components

Alerts

Badges

Buttons

Button Groups

Buttons Modifiers

Cards

Carousel

Collapse

Dropdowns

Forms

Jumbotron

Navbar

Tables

That's All!

Related Blogs

Download VIM Cheat Sheet PDF to Enhance Productivity [Updated]

Linux Cheat Sheet: Download PDF for Quick Reference

Best Online jQuery Cheat Sheet for Web Developers

Leave a Comment on this Post

0 Comments

Download Bootstrap Cheat Sheet PDF & Help Guide

Table of Content

Adding Bootstrap in Your HTML File (Bootstrap Cheat Sheet)

Bootstrap Components

Alerts

Badges

Breadcrumbs

Buttons

Button Groups

Buttons Modifiers

Cards

Carousel

Collapse

Dropdowns

Forms

Jumbotron

Navbar

Pagination

Tables

That's All!

Related Blogs

Download VIM Cheat Sheet PDF to Enhance Productivity [Updated]

Linux Cheat Sheet: Download PDF for Quick Reference

Best Online jQuery Cheat Sheet for Web Developers

Leave a Comment on this Post

0 Comments