Bootstrap 5 Classes

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

2. Active



Add .active to items to style them as active


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>

3. Alert


Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.


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>












4. Align


Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.


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>




























5. Badge



Documentation and examples for badges, our small count and labeling component.


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



Used to add background styling in an element.


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>













7. Blockquote



For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.


<blockquote class="blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>


8. Border



Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.


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>


















9. Breadcrumb



Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.


<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>

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

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


10. bs.Popover (Jawascript)



A hidden Popover

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('', function () {
  // do something...








12. Button



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


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




























13. Caption



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


<table class="table table-sm">
  <caption>List of users</caption>


14. Card



Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.


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>















15. Carousel


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.


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 class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">















16. Clearfix



Quickly and easily clear floated content within a container by adding a clearfix utility.


<div class="clearfix">...</div>

17. Column



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.


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 class="col-4">
      One of two columns
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    <div class="col-4">
      One of two columns
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    <div class="col-4">
      One of two columns
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    <div class="col-4">
      One of two columns
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    <div class="col-4">
      One of two columns
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    <div class="col-4">
      One of two columns



.col- ( 1, 2, 3, 4, 5, 6, 7, ….)

.col- ( sm, lg, md, xl, xxl ,auto)







.col-form-label-( sm, md, lg, xl, xxl, auto)

18. Collapse



Toggle the visibility of content across your project with a few classes and our JavaScript plugins.


  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
<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.


19. Containers


Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.


Our default .container class is a responsive, fixed-width container, meaning its max-width changes at each breakpoint.

<div class="container">
  <!-- Content here -->


.container-{ Breakpoint}







20. Diaplay

















































20. Disabled


Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.



<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    <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 class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>

21. Dropdown


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.


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
























22. Ratio Helper


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.


<div class="ratio ratio-16x9">
  <iframe src="" title="YouTube video" allowfullscreen></iframe>

Default ratio-


Aspect ratio-


Custom ratios-

–aspect-ratio: 50%

Sass Map-


23. Fade Effect



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>

24. Figures


Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>.


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>




25. Flex


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.


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>


































26. Float


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.


<div class="float-left">Float left on viewports sized SM (small) or wider</div>

















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


Text with bold font-style-

<p class="fw-bold">Bold text.</p>








28. Font-size

Changes font size from 1 to 6 in decreasing order.


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


  <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 class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  <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>
  <button type="submit" class="btn btn-primary">Submit</button>

Form Controls


Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.


<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="">
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>











29. Fixed (Position)


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.


<div class="fixed-top">...</div>



30. Gutter



Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.


.gx – horizontal gutter width

.gy – vertical gutter width

.gx-1 (any number)

.gy-1 (any numbrer)

31. Heading


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


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







32. Height







33. Images


Images are opted into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.


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 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 src="..." class="img-thumbnail" alt="...">


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.


  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">

34. Initialism



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


Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.


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



36. Justify Content ( Flex )


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), endcenterbetweenaround, or evenly.


<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-(size)-start => (Size) – sm, md, lg, xl, xxl






37. Lead



Make a paragraph stand out by adding .lead.


<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

38. Line height



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>





39. Links ( Colored)


You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state.


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









40. List group


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.


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



.list-group-item active

.list-group-item disabled




.list-group-horizontal- { sm | md | lg | xl | xxl }









41. Lists


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




42. Margin ( Spacing)


Assign responsive-friendly margin  values to an element or a subset of its sides with shorthand classes.





.m-n1 ( Negative Margin)












.mt-n1 {
  margin-top: -0.25rem !important;

43. Modal


Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.


<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 class="modal-body">
        <p>Modal body text goes here.</p>
      <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>





















44. Navbar


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.


<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>



.navbar-expand { -sm | -md | -lg | -xl | -xxl }








45. Navs




.nav justify-content-end

.nav-link active | disabled

.nav flex-column





46. Offset


You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities.


<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 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 class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>


.offset-{ sm | md | lg | xl | xxl } -4

47. Ordering (Reordering)



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.


<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    <div class="col order-5">
      Second in DOM, with a larger order
    <div class="col order-1">
      Third in DOM, with an order of 1




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



Used to give inner spacing inside a border .








.px- ( left – right )

.py- ( top – bottom )

49. Pointer events




Bootstrap provides .pe-none and .pe-auto classes to prevent or add element interactions.


<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






We use base html and jawascript to create a popover.


<div class=”popover” role=”tooltip”><div

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('', function () {
  // do something...

51. Position

Definition: –

Quick positioning classes are available, though they are not responsive.


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






52. Rounded (Border-radius)









<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-cols-{ sm | md | lg | xl | xxl } -2

54. Shadows


Add or remove shadows to elements with box-shadow utilities



.shadow p-3 mb-5

.shadow-{ sm | md | lg | xl | xxl }


<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


56. Spinners


Bootstrap “spinners” can be used to show the loading state in your projects.



.spinner-border-{ sm | md | lg | xl | xxl }

56. Sticky


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-{ sm | md | lg | xl | xxl } -top

57. Stretched Link


Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.


50. Tooltip ( includes css and js)


Bootstrap tooltips are used with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.


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 type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left






59. Tables













.table-border{ primary | secondary | success | danger | warning | info | dark | light }

.table-{ sm | md | lg | xl | xxl }


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


Responsive tables


Always responsive


tabel-responsive{ sm | md | lg | xl | xxl }

60. Text

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.


<p class="text-left">Left aligned text on all viewport sizes.</p>




.text { sm | md | lg| xl | xxl }-left/ right












61. Toast


Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.


<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 class="toast-body">
    Hello, world! This is a toast message.




62. Validation


Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.









63. Width



64. Visually Hidden


Use these helpers to visually hide elements but keep them accessible to assistive technologies.


<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>



65. Gap


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


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




61. Next



Cycles to the next item.


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

62. Previous



cycles to the previous item.


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