1. Accordin
.accordin
Definition :-
Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
Example :-
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
2. Active
.active
Definition:-
Add .active
to items to style them as active.
Example:-
Styling item in dropdown as active.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
3. Alert
Definition:-
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Example:-
Using the alert JavaScript plugin, it’s possible to dismiss any alert inline.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>
.alert-danger
.alert-dark
.alert-dismissible
.alert-heading
.alert-info
.alert-light
.alert-link
.alert-primary
.alert-secondary
.alert-success
.alert-warning
4. Align
Definition:-
Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
Example:-
Vertical Align with inline elements:
<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>
.align-baseline
.align-bottom
.align-middle
.align-top
Align-Content
.align-content-around
.align-content-between
.align-content-center
.align-content-end
.align-content-start
.align-content-stretch
Align-items
.align-items-baseline
.align-items-center
.align-items-end
.align-items-start
.align-items-stretch
Align-Self
.align-self-auto
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
Align-text
.align-text-bottom
.align-text-top
5. Badge
.badge
Definition:-
Documentation and examples for badges, our small count and labeling component.
Example:-
Badges scale to match the size of the immediate parent element by using relative font sizing and em
units. As of v5, badges no longer have focus or hover styles for links.
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
6. Background
.bg
Definition:-
Used to add background styling in an element.
Example:-
Adding background color in content.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
.bg-body
.bg-danger
.bg-dark
.bg-gradient
.bg-info
.bg-light
.bg-primary
.bg-secondary
.bg-success
.bg-transparent
.bg-warning
.bg-white
7. Blockquote
.blockquote
Definition:-
For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote">
around any HTML as the quote.
Example:-
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
.blockquote-footer
8. Border
.border
Definition:-
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
Example:-
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
.border-0
.border-bottom
.border-bottom-0
.border-danger
.border-dark
.border-info
.border-left
.border-light
.border-primary
.border-right
.border-right-0
.border-secondary
.border-successs
.border-top
.border-top-0
.border-warning
.border-white
9. Breadcrumb
.breadcrumb
Definition:-
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Example:-
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
.breadcrumb-item
10. bs.Popover (Jawascript)
Definition:-
Example:-
A hidden Popover
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})
Events
show.bs.popover
show.bs.popover
hide.bs.popover
hidden.bs.popover
inserted.bs.popover
Alignment
.bs-popover-auto
.bs-popover-bottom
.bs-popover-left
.bs-popover-right
.bs-popover-top
12. Button
.btn
Defination:-
The .btn
classes are designed to be used with the <button>
element. However, you can also use these classes on <a>
or <input>
elements (though some browsers may apply a slightly different rendering).
Example:-
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
.btn-block
.btn-check
.btn-danger
.block-dark
.btn-group
.btn-group-lg
.btn-group-sm
.btn-group-vertical
.btn-info
.btn-lg
.btn-light
.btn-link
.btn-outline-danger
.btn-outline-dark
.btn-outline-info
.btn-outline-light
.btn-outline-primary
.btn-outline-secondary
.btn-outline-success
.btn-outline-warning
.btn-primary
.btn-secondary
.btn-sm
.btn-success
.btn-toolbar
.btn-warning
.btn-close
13. Caption
.caption
Definition:-
A <caption>
functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
Example:-
<table class="table table-sm">
<caption>List of users</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
.caption-top
14. Card
.card
Definition:-
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
example:-
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
.card-body
.card-footer
.card-group
.card-header
.card-header-pills
.card-header-tabs
.card-img
.card-img-botton
.card-img-overlay
.card-img-top
.card-link
.card-subtitle
.card-text
.card-title
15. Carousel
Definition:-
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
The .active
class needs to be added to one of the slides otherwise the carousel will not be visible. Also be sure to set a unique id on the .carousel
for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a data-target
attribute (or href
for links) that matches the id of the .carousel
element.
Example:-
Here’s a carousel with slides only. Note the presence of the .d-block
and .w-100
on carousel images to prevent browser default image alignment.
<div id="carouselExampleSlidesOnly" 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>
</div>
.carousel
.carousel-caption
.carousel-control-next
.carousel-control-next-icon
.carousel-control-prev
.carousel-prev-icon
.carousel-fade
.carousel-indicators
.carousel-inner
.carousel-item
.carousel-item-left
.carousel-item-next
.carousel-item-prev
.carousel-item-right
16. Clearfix
.clearfix
Definition:-
Quickly and easily clear floated content within a container by adding a clearfix utility.
Example:-
<div class="clearfix">...</div>
17. Column
.col
Definition:-
Modify columns with a handful of options for alignment, ordering, and offsetting using flexbox grid system. Use column classes to manage widths of non-grid elements.
Example:-
Use flexbox alignment utilities to vertically and horizontally align columns.
Horizontal Alignment-
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
.col
.col-auto
.col- ( 1, 2, 3, 4, 5, 6, 7, ….)
.col- ( sm, lg, md, xl, xxl ,auto)
.col-sm-1
.col-md-1
.col-lg-1
.col-xl-1
.col-xxl-1
.col-form-label
.col-form-label-( sm, md, lg, xl, xxl, auto)
18. Collapse
.collapse
Definition:-
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Example:-
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" 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="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
.collapsing
19. Containers
Definition:-
Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
Example:-
Our default .container
class is a responsive, fixed-width container, meaning its max-width
changes at each breakpoint.
<div class="container">
<!-- Content here -->
</div>
.container
.container-{ Breakpoint}
.container-fluid
.container-lg
.container-md
.container-sm
.container-xl
.container-xxl
20. Diaplay
.d
.d-block
.d-flex
.d-inline
.d-inline-block
.d-inline-flex
.d-lg-none
.d-lg-table
.d-lg-table-cell
.d-lg-table-row
.d-md-block
.d-md-flex
.d-md-inline
.d-md-flex
.d-md-inline
.d-md-inline-block
.d-md-inline-flex
.d-md-none
.d-md-table
.d-md-table-cell
.d-md-table-row
.d-sm-block
.d-sm-flex
.d-sm-inline-block
.d-sm-inline-flex
.d-sm-table
.d-sm-table-cell
.d-sm-table-row
.d-tabel
.d-table-row
.d-xl-block
.d-xl-flex
.d-xl-inline
.d-xl-inline-block
.d-xl-inline-flex
.d-xl-none
.d-xl-table
.d-xl-table-cell
.d-xl-table-row
.d-xll-block
.d-xxl-flex
.d-xxl-inline
.d-xxl-inline-block
.d-xxl-inline-flex
.d-xxl-none
.d-xxl-table
.d-xxl-table-cell
.d-xxl-table-row
20. Disabled
Definition:-
Pagination links are customizable for different circumstances. Use .disabled
for links that appear un-clickable and .active
to indicate the current page.
.disabled
Example:-
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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>
21. Dropdown
Definition:-
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.
Example:-
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Dropdowns can be triggered from <a>
or <button>
elements to better fit your potential needs. The examples shown here use semantic <ul>
elements where appropriate, but custom markup is supported.
Single Button–
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
.dropdown
.dropleft
.dropright
.dropup
.dropdown-divider
.dropdown-header
.dropdown-item
.dropdown-item-text
.dropdown-menu
.dropdown-menu-left
.dropdown-menu-lg-left
.dropdown-menu-lg-right
.dropdown-menu-md-left
.dropdown-menu-md-right
.dropdown-menu-right
.dropdown-menu-sm-left
.dropdown-menu-sm-right
.dropdown-menu-xl-left
.dropdown-menu-xl-right
.dropdown-menu-xxl-left
.dropdow-menu-xxl-right
.dropdown-toggle
.dropdown-toggle-split
22. Ratio Helper
Definition:-
Use the ratio helper to manage the aspect ratios of external content like <iframe>
s, <embed>
s, <video>
s, and <object>
s. These helpers also can be used on any standard HTML child element (e.g., a <div>
or <img>
). Styles are applied from the parent .ratio
class directly to the child.
Example:-
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Default ratio-
.ratio
Aspect ratio-
.ratio-4×3
Custom ratios-
–aspect-ratio: 50%
Sass Map-
$ratio-aspect-ratios
23. Fade Effect
.fade
Example:-
To make tabs panel fade in, add .fade
to each .tab-pane
. The first tab pane must also have .show
to make the initial content visible.
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>
24. Figures
Definition:-
Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>
.
Example:-
Use the included .figure
, .figure-img
and .figure-caption
classes to provide some baseline styles for the HTML5 <figure>
and <figcaption>
elements. Images in figures have no explicit size, so be sure to add the .img-fluid
class to your <img>
to make it responsive.
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
.figure
.figure-caption
.figure-img
25. Flex
Definition:–
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
Example:-
Enable flex behaviors
Apply display
utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Display-
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
.d-xxl-flex
.d-xxl-inline-flex
Direction-
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-reverse-row
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-colmn-column
.flex-xl-column-reverse
26. Float
Definition:-
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float
property.
Example:-
<div class="float-left">Float left on viewports sized SM (small) or wider</div>
.float-left
.float-right
.float-none
.float-sm-left
.float-sm-right
.foat-sm-none
.float-md-left
.float-md-right
.float-lg-left
.float-lg-right
.float-xl-left
.float-xl-right
.foat-xl-none
.float-xxl-left
.float-xxl-right
.float-xxl-none
27. Font Weight and Italics
Quickly change the font-weight
or font-style
of text with these utilities. font-style
utilities are abbreviated as .fst-*
and font-weight
utilities are abbreviated as .fw-*
.
Example:-
Text with bold font-style-
<p class="fw-bold">Bold text.</p>
.fw-bold
.fw-bolder
.fw-normal
.fw-light
.fw-lighter
.fst-italic
.fst-normal
28. Font-size
Changes font size from 1 to 6 in decreasing order.
Example:-
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>
.fs-1 to .fs-6
2 9. Forms
Usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Example:-
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Form Controls
Definition:-
Give textual form controls like <input>
s and <textarea>
s an upgrade with custom styles, sizing, focus states, and more.
example:-
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
.form-control
.form-control-color
.form-control-large
.form-control-plaintext
.form-control-sm
.form-label
.form-range
.form-select
.form-switch
.form-text
29. Fixed (Position)
Definition:-
Position an element at the top and bottom of the viewport, from edge to edge. Be sure you understand the ramifications or complexities of fixed position in your project, you may need to add additional CSS.
Example:-
<div class="fixed-top">...</div>
.fixed-top
.fixed-bottom
30. Gutter
.g
Definition:-
Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.
.g-0
.gx – horizontal gutter width
.gy – vertical gutter width
.gx-1 (any number)
.gy-1 (any numbrer)
31. Heading
Definition:-
.h1
through .h6
classes are available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
Example:-
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
.h1
.h2
.h3
.h4
.h5
.h6
32. Height
.h-1
.h-2
.h-3
.h-4
.h-5
.h-6
33. Images
Definition:-
Images are opted into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
Examples:-
Responsive images
Images in Bootstrap are made responsive with .img-fluid
. This applies max-width: 100%;
and height: auto;
to the image so that it scales with the parent element.
.img-fluid
Example:-
<img src="..." class="img-fluid" alt="...">
Image thumbnails
In addition to our border-radius utilities, you can use .img-thumbnail
to give an image a rounded 1px border appearance.
.img-thumbnail
Example:-
<img src="..." class="img-thumbnail" alt="...">
Picture
If you are using the <picture>
element to specify multiple <source>
elements for a specific <img>
, make sure to add the .img-*
classes to the <img>
and not to the <picture>
tag.
Example:-
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
34. Initialism
.initialism
Definition:-
Add .initialism
to an abbreviation for a slightly smaller font-size.
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
35. Input group
Definition:-
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Example:-
Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>
s outside the input group.
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
.input-group
.input-group-text
36. Justify Content ( Flex )
Definition:-
Use justify-content
utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column
). Choose from start
(browser default), end
, center
, between
, around
, or evenly
.
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>
<div class="d-flex justify-content-evenly">...</div>
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
.justify-content-(size)-start => (Size) – sm, md, lg, xl, xxl
.justify-content-(size)-end
.justify-content-(size)-center
.justify-content-(size)-between
.justify-content-(size)-around
.justify-content-(size)-evenly
37. Lead
.lead
Definition:-
Make a paragraph stand out by adding .lead.
Example:-
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p>
38. Line height
.lh-*
Definition:-
Change the height of a line by adding .lh-* utilities.
Example :-
<p class="lh-1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermen. </p>
.lh-1
.lh-base
.lh-lg
.lh-sm
39. Links ( Colored)
Definition:-
You can use the .link-*
classes to colorize links. Unlike the .text-*
classes, these classes have a :hover
and :focus
state.
Example:-
<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-secondary">Secondary link</a>
<a href="#" class="link-success">Success link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>
<a href="#" class="link-info">Info link</a>
<a href="#" class="link-light">Light link</a>
<a href="#" class="link-dark">Dark link</a>
.link-primary
.link-secondary
.link-success
.link-danger
.link-warning
.link-info
.link-light
.link-dark
40. List group
Definition:-
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Example:-
<ul class="list-group">
<li class="list-group-item active" aria-current="true">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
.list-group
.list-group-item
.list-group-item active
.list-group-item disabled
.list-group-item-action
.list-group-item-flush
.list-group-horizontal
.list-group-horizontal- { sm | md | lg | xl | xxl }
.list-group-item-primary
.list-group-item-secondary
.list-group-item-success
.list-group-item-danger
.list-group-item-warning
.list-group-item-info
.list-group-item-light
.list-group-item-dark
41. Lists
Example:-
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
.list-unstyled
.list-inline
.list-inline-item
42. Margin ( Spacing)
Definition:-
Assign responsive-friendly margin
values to an element or a subset of its sides with shorthand classes.
.m
.m-auto
.m-0
.m-1
.m-n1 ( Negative Margin)
.mt-*
.mb-*
.ml-*
.mr-*
.mx
.my
.mx-*
.my-*
.mx-auto
.my-auto
Example:-
.mt-n1 {
margin-top: -0.25rem !important;
}
43. Modal
Definition:-
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Example:-
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
.modal
.modal-header
.modal-dialog
.modal-content
.modal-title
.modal-body
.modal-footer
.modal-dialog-scrollable
.modal-dialog-centered
.modal-sm
.modal-lg
.modal-xl
.modal-full-screen
.modal-full-screen-sm-down
.modal-full-screen-md-down
.modal-full-screen-lg-down
.modal-full-screen-xl-down
.modal-full-screen-xxl-down
.modal-open
.modal-backdrop
44. Navbar
Definition:-
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Example:-
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
.navbar
.navbar-nav
.navbar-expand { -sm | -md | -lg | -xl | -xxl }
.navbar-brand
.navbar-toggler
.navbar-toggler-icon
.navbar-text
.collapse.navbar-collapse
.navbar-light
.navbar-dark
45. Navs
.nav
.nav-link
.nav-item
.nav justify-content-end
.nav-link active | disabled
.nav flex-column
.nav-tabs
.nav-pills
.nav-fill
.nav-justified
46. Offset
Definition:-
You can offset grid columns in two ways: our responsive .offset-
grid classes and our margin utilities.
Example:-
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
.offset-1
.offset-{ sm | md | lg | xl | xxl } -4
47. Ordering (Reordering)
.order-*
Definition:-
Use .order-
classes for controlling the visual order of your content. These classes are responsive, so you can set the order
by breakpoint (e.g., .order-1.order-md-2
). Includes support for 1
through 5
across all six grid tiers.
Example:-
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
.order-1
.order-first
.order-last
.order-{ sm | md | lg | xl | xxl |} – 4 ( 1-5 only)
.order-{ sm | md | lg | xl | xxl |} – first
.order-{ sm | md | lg | xl | xxl |} -last
48. Padding (Spacing)
.p-*
Definition:-
Used to give inner spacing inside a border .
.p-2
.p-0
.p-auto
.pt-
.pb-
.pl-
.pr-
.px- ( left – right )
.py- ( top – bottom )
49. Pointer events
.pe-none
.pe-auto
Definition:-
Bootstrap provides .pe-none
and .pe-auto
classes to prevent or add element interactions.
Example:-
<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behaviour).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>
50. Popover
.popover
.poppver-header
.popover-arrow
.popover-body
Definition:-
We use base html and jawascript to create a popover.
Example:-
<div class=”popover” role=”tooltip”><div
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})
51. Position
Definition: –
Quick positioning classes are available, though they are not responsive.
Example:-
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
.position-static
.position:relative
.position-absolute
.position-fixed
.position-sticky
52. Rounded (Border-radius)
.rounded
.rounded-pill
.rounded-top
.rounded-bottom
.rounded-right
.rounded-left
.rounded-circle
Example:-
<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-right" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-left" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
53. Row
.row
.row-cols-2
.row-cols-{ sm | md | lg | xl | xxl } -2
54. Shadows
Definition:-
Add or remove shadows to elements with box-shadow utilities
.shadow-none
.shadow-sm
.shadow p-3 mb-5
.shadow-{ sm | md | lg | xl | xxl }
Example:-
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
55. Small
.sm
56. Spinners
Definition:-
Bootstrap “spinners” can be used to show the loading state in your projects.
.spinner-grow
.spinner-border
.spinner-border-{ sm | md | lg | xl | xxl }
56. Sticky
Definition:-
Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The .sticky-top
utility uses CSS’s position: sticky
, which isn’t fully supported in all browsers.
.sticky-top
.sticky-{ sm | md | lg | xl | xxl } -top
57. Stretched Link
Definition:-
Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.
.stretched-link
50. Tooltip ( includes css and js)
Definition:-
Bootstrap tooltips are used with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Example:-
Hover over the link below to see tooltip:-
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
.bs-tooltip-auto
.bs-tooltip-bottom
.bs-tooltip-left
.bs-tooltip-right
.bs-tooltip-top
59. Tables
.table
.table-primary
.table-secondary
.tabe-danger
.table-warning
.table-success
.table-info
.table-light
.table-dark
.table-striped
.table.hover
.table.active
.table-bordered
.table-border{ primary | secondary | success | danger | warning | info | dark | light }
.table-{ sm | md | lg | xl | xxl }
Captions
A <caption>
functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
.caption-top
Responsive tables
.table-responsive{-sm|-md|-lg|-xl|-xxl}
Always responsive
.table-responsive
tabel-responsive{ sm | md | lg | xl | xxl }
60. Text
Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
Example:-
<p class="text-left">Left aligned text on all viewport sizes.</p>
.text-left
text-center
.text-right
.text { sm | md | lg| xl | xxl }-left/ right
.text-wrap
.text-nowrap
.text-break
.text-lowercase
.text-uppercase
.text-capatalize
.text-reset
.tex-muted
.text-decoration-underline
.text-decoration-line-through
.text-decoration-none
61. Toast
Definition:-
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Example:-
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
.toast
.toast-header
.toast-body
62. Validation
Definition:-
Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
.was-validated
is.valid
is-invalid
.valid-feedback
.invalid-feedback
.has-validation
.valid-tooltip
.invalid-tooltip
63. Width
.w-4
.w-auto
64. Visually Hidden
Definition:-
Use these helpers to visually hide elements but keep them accessible to assistive technologies.
Example:-
<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
.visually-hidden
.visually-hidden-focusable
65. Gap
Definition:-
When using display: grid
, you can make use of gap
utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a display: grid
container).
Example:-
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
.gap-3
.gap-auto
.gap-0
61. Next
.next
Definition:-
Cycles to the next item.
Example:-
<a class="carousel-control-next" href="#carouselExampleDark" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
62. Previous
.prev
Definition:-
cycles to the previous item.
example:-
<a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
Figures
.figure
.figure-image
.figure-caption