Bootstrap 5 Documentation

1. Container

Defines a responsive fixed-width or fluid-width container.

<div class="container">Content here</div>

2. Grid System

12-column responsive layout using rows and columns.


            <div class="row">

              <div class="col-6">Left</div>

              <div class="col-6">Right</div>

            </div>

3. Typography

Text formatting using classes like .display-1, .lead, etc.

4. Buttons

Interactive button elements with color and size classes.

<button class="btn btn-primary">Click Me</button>

5. Colors

Utility classes for text and background colors.

<p class="text-success bg-light">Success Text</p>

6. Alerts

Displays alert messages with contextual classes.

<div class="alert alert-warning">Warning!</div>

7. Cards

Used to display content in a boxed format.

8. Navbar

Navigation bar for linking to site pages.

9. Forms

Bootstrap-styled forms with validation, inputs, and more.

10. Form Controls

Styled input, select, and textarea elements.

11. Modals

Pop-up dialog boxes for alerts, confirmations, or forms.

12. Collapse

Toggle visibility of content using collapse class.

13. Accordion

Interactive collapsible item panels grouped together.

14. Carousel

Slideshow component for cycling through elements like images.

15. Tooltips

Displays small pop-up box when hovering over an element.

16. Popovers

Like tooltips but more content can be added (e.g., title + body).

17. Dropdowns

Toggles a dropdown menu from a button or link.

18. Spinners

Show loading state using animation icons.

19. Toasts

Non-blocking alert messages for quick feedback.

20. Pagination

Navigate through pages using .pagination class.

21. Breadcrumb

Indicates the current page’s location in a navigational hierarchy.

22. Badges

Small count or label next to elements like buttons or text.

23. List Groups

Flexible components for displaying series of content.

24. Jumbotron (deprecated in Bootstrap 5)

Replaced with utility classes and custom components.

25. Flex Utilities

Utility classes for flexbox (e.g., d-flex, justify-content-center).

26. Margin and Padding

Spacing utilities (e.g., m-3, p-2).

27. Display Utilities

Control display of elements (e.g., d-none, d-block).

28. Position Utilities

Helps in absolute, fixed, and relative positioning.

29. Sizing Utilities

Width and height utilities like w-25, h-100.

30. Z-Index

Controls stacking order using z-0 to z-3.

31. Responsive Breakpoints

Bootstrap includes six default breakpoints (xs, sm, md, lg, xl, xxl) for responsive design.

<div class="d-none d-md-block">Visible on md and
            larger</div>

32. Tables

Bootstrap provides classes to create responsive, styled tables.


            <table class="table table-striped">

              <tr><th>Name</th><th>Age</th></tr>

              <tr><td>John</td><td>25</td></tr>

            </table>

33. Images & Classes

Use .img-fluid, .rounded, .img-thumbnail to style images.

<img src="image.jpg" class="img-fluid rounded"
            alt="...">

34. Offcanvas

Creates side drawers for navigation or extra content.

<button data-bs-toggle="offcanvas"
            data-bs-target="#demo">Open Menu</button>

35. Ratio Utility

Maintain aspect ratio for responsive iframes and videos.


            <div class="ratio ratio-16x9">

              <iframe src="..."
            allowfullscreen></iframe>

            </div>

36. Scrollspy

Automatically updates active links based on scroll position.

<body data-bs-spy="scroll"
            data-bs-target="#navbar">...</body>

37. Sticky Top

Sticks element to the top on scroll using .sticky-top class.

<div class="sticky-top bg-white">Sticky
            Header</div>

38. Vertical Alignment

Vertically align content inside flex or table containers.

<div class="d-flex align-items-center">Vertically
            Centered</div>

39. Gutter (Grid Spacing)

Control spacing between columns using g-* classes.

<div class="row g-3"><div
            class="col">One</div><div
            class="col">Two</div></div>

40. Order Classes

Change column order in grid using .order-* classes.


            <div class="row">

              <div class="col order-2">Second</div>

              <div class="col order-1">First</div>

            </div>

41. Float Utilities

Use float-start, float-end, or float-none to float elements.

<div class="float-end">Floated Right</div>

42. Clearfix

Add .clearfix to force parent to clear floated children.

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

43. Visibility

Use .visible and .invisible for visibility control (element still takes space).

<div class="invisible">Hidden but still in
            DOM</div>

44. Position Helpers

Quickly set position-relative, absolute, or fixed.

<div class="position-fixed bottom-0 end-0">Fixed to Bottom
            Right</div>

45. Border Utilities

Control border appearance using .border, .border-0, .border-primary, etc.

<div class="border border-danger">Red
            Border</div>

46. Shadow Utilities

Add shadows with .shadow, .shadow-sm, .shadow-lg.

<div class="shadow p-3 mb-5 bg-body rounded">Box with
            Shadow</div>

47. Rounded Corners

Use .rounded, .rounded-circle, .rounded-pill for border radius.

<img src="..." class="rounded-circle" alt="...">

48. Text Alignment

Align text using .text-start, .text-center, .text-end.

<p class="text-center">Centered Text</p>

49. Vertical & Horizontal Centering

Use .align-items-center and .justify-content-center with flexbox to center content.


            <div class="d-flex justify-content-center align-items-center"
            style="height: 100px;">Centered</div>

50. Responsive Embed (Aspect Ratio)

Maintain aspect ratio for embedded videos using .ratio classes.


            <div class="ratio ratio-4x3">

              <iframe src="..."
            allowfullscreen></iframe>

            </div>

51. Text Truncation

Use .text-truncate to cut off text and show ellipsis when overflow occurs in a single line.

<div class="text-truncate" style="width: 200px;">This is a
            very long text that will be truncated.</div>

52. Overflow Utilities

Use .overflow-auto, .overflow-hidden, etc., to control content overflow.

<div class="overflow-auto" style="height: 100px;">Long
            scrollable content here</div>

53. Close Button

Provides a dismiss icon used in modals, alerts, etc. Use .btn-close.

<button type="button" class="btn-close"
            aria-label="Close"></button>

54. Stretched Link

Makes an entire element clickable using .stretched-link.


            <a href="#" class="stretched-link">Click anywhere</a>

55. Button Groups

Groups multiple buttons together with shared borders.


            <div class="btn-group">

              <button class="btn
            btn-primary">Left</button>

              <button class="btn
            btn-primary">Middle</button>

              <button class="btn
            btn-primary">Right</button>

            </div>

56. Toggle Buttons

Convert buttons to toggle switches using data-bs-toggle="button".

<button class="btn btn-primary"
            data-bs-toggle="button">Toggle Me</button>

57. Disabled and Active Buttons

Add .disabled or .active to set the state of buttons.

<button class="btn btn-secondary
            disabled">Disabled</button>

58. Forms Grid

Use Bootstrap's grid layout inside forms to align labels and inputs.


            <div class="row">

              <div class="col"><input type="text"
            class="form-control" placeholder="First name"></div>

              <div class="col"><input type="text"
            class="form-control" placeholder="Last name"></div>

            </div>

59. Form Validation

Use validation classes like .is-valid, .is-invalid to show feedback.

<input type="text" class="form-control is-invalid">

60. Custom File Input

Styled file input using form-control class for modern file upload fields.

<input class="form-control" type="file" id="formFile">

Reference Links

Bootstrap Official Docs

Bootstrap Components

Bootstrap Utilities

BOOTSTRAP

Bootstrap 5 Documentation