Bootstrap Cheat Sheet

By | September 21, 2019

Through this article you will get a complete list of Bootstrap Cheat Sheet which will guide how you need to start with, This will also help you while facing interview and you will prepare for the interview.

  • Bootstrap is an Open source framework of CSS
  • Bootstrap is used to create mobile-friendly front-end pages.
  • It contains CSS, jQuery, and JavaScript
  • It also contains JavaScript Plugins
  • The newest version of Bootstrap is Bootstrap 4
  • It has the 3rd highest starred open project on GitHub.
  • It provides prebuild tools which we can insert in our HTML web pages.
  • It uses 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.

ADD 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

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

Alerts

Alerts provide feedback messages, and they often use after the user done 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 Bootstrap Cheat Sheet

Badges are used to count the total elements and label elements.

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>

 

Breadcrumb Bootstrap Cheat Sheet

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 Bootstrap Cheat Sheet

We often use the button 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 two 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 Bootstrap Cheat Sheet

In Bootstrap we have buttons modifiers in case if you want to modify your buttons, buttons modifiers can small and large the size of buttons and can make it disable.

btn Description
btn-lg For large buttons
btn-small For small buttons
btn-block A block button
active button It provides an active link to the button
disable button It makes a button disable, so cannot click it

Cards

In bootstrap we have cards which are simple containers, that can hold images and its description. There are various functionalities associated with a card.

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

Carousel provides buttons which help to scroll images, cards or containers.

Carousel Code
Carosel-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 content. It creates buttons when you click on it the content of that button appears.

Type 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

Dropdowns are used to show a list of links as options, and they can toggle the content. It provides an interactive form of list. Often, we create 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 the form to collect data from the user, so 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 show 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

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 used to display the different page numbers of 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 use to 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>

You may also Interested in:

Leave a Reply

Your email address will not be published. Required fields are marked *