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