💻 What is Bootstrap 5?

Bootstrap is a free, open-source front-end framework used to create responsive and mobile-first websites easily. It provides pre-designed CSS and JavaScript components that help developers build modern web pages quickly without writing all styles from scratch.

</> Key Features

➤ Responsive Grid System: Easily create layouts that adapt to any screen size.
➤ Pre-built Components: Buttons, navbars, cards, modals, forms, and more.
➤ Customizable: Use variables, Sass, and themes to match your design.
➤ Cross-browser Compatible: Works well on Chrome, Firefox, Edge, Safari.
➤ Easy Integration: Can be added via CDN or downloaded locally.

🛠️ Why Use Bootstrap 5?

Speeds up development time ⚡
Ensures a consistent design across pages
Provides ready-to-use UI components
Supports mobile-first design

⚡ Example Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Example</title>
</head>
<body>
  <div class="container text-center mt-5">
    <h1 class="text-primary">Welcome to Bootstrap!</h1>
    <button class="btn btn-success">Click Me</button>
  </div>
</body>
</html>

⚙️ How to Install Bootstrap 5

Bootstrap can be installed in four main ways depending on your project setup: CDN, npm, Local Download, or Yarn. Each method has its use cases.

🔹 1. Using CDN (Fast & Easy)

Add Bootstrap CSS and JS links directly in your HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap CSS CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap CDN Example</title>
</head>
<body>
  <div class="container text-center mt-5">
    <h1 class="text-primary">Bootstrap CDN</h1>
    <button class="btn btn-success">Click Me</button>
  </div>

  <!-- Bootstrap JS CDN -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

📐 Bootstrap 5 Breakpoints

In Bootstrap 5, breakpoints are used to create responsive layouts. They define screen widths at which the layout or components adjust to different devices like mobile, tablet, and desktop. Bootstrap 5 follows a mobile-first approach, meaning styles for smaller screens are applied first, and larger screens use specific breakpoints.

🔹 What Are Breakpoints?

Breakpoints determine when content changes layout based on screen size.
They help build mobile-friendly and responsive designs.
Classes like .col-md-6, .d-lg-none are used to apply styles only at specific breakpoints.

📝 List of Bootstrap 5 Breakpoints

Breakpoint	Abbreviation	Screen Width (px)	Typical Device
Extra Small	`xs`	<576	Mobile phones
Small	`sm`	≥576	Large phones / tablets
Medium	`md`	≥768	Tablets / small laptops
Large	`lg`	≥992	Laptops / desktops
Extra Large	`xl`	≥1200	Desktops
Extra Extra Large	`xxl`	≥1400	Large desktops

⚡ Example: Responsive Columns

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
      Column 1
    </div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
      Column 2
    </div>
  </div>
</div>

🏗️ Bootstrap Container Layout

In Bootstrap, a container layout is used to wrap website content and align it properly within the page. Containers provide responsive padding and center the content based on the screen size. They are the foundation of Bootstrap's grid system.

🔹 Types of Containers in Bootstrap 5

Container Type	Description	Example Class
Fixed Container	Width changes at breakpoints; centers content on large screens	`.container`
Fluid Container	Always takes 100% width of the viewport	`.container-fluid`
Responsive Container	Width changes at specific breakpoints, combining fixed & fluid features	`.container-sm`, `.container-md`, `.container-lg`, `.container-xl`, `.container-xxl`

⚡ Example: Container Layout

<div class="container mt-5">
  <h1 class="text-center text-primary">Fixed Container</h1>
  <p>This container adjusts width at different breakpoints.</p>
</div>

<div class="container-fluid mt-3 bg-light p-3">
  <h1 class="text-center text-success">Fluid Container</h1>
  <p>This container always spans the full width of the viewport.</p>
</div>

📐 Bootstrap 5 Container Widths

Breakpoint	Extra Small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

📐 What is Grid in Bootstrap?

The Bootstrap Grid System is a flexbox-based layout system that helps developers design responsive and structured web pages. It divides the page into rows and columns to organize content in a clean and flexible way.

</> Key Features

➤ 12-column system: The screen is divided into 12 equal parts.
➤ Responsive: Automatically adjusts for mobiles, tablets, and desktops.
➤ Containers → Rows → Columns structure.
➤ Breakpoints allow layouts to adapt across devices.
➤ Works with flexbox utilities for alignment and spacing.

🖼️ Grid Structure Diagram

graph TD
    A[Container]:::blue --> B[Row]:::green
    B --> C1[Col-1]:::purple
    B --> C2[Col-2]:::purple
    B --> C3[Col-3]:::purple
    B --> C4[Col-4]:::purple

    classDef blue fill:#4B6CB7,stroke:#fff,stroke-width:2px,color:#fff;
    classDef green fill:#6BB74B,stroke:#fff,stroke-width:2px,color:#fff;
    classDef purple fill:#8A2BE2,stroke:#fff,stroke-width:2px,color:#fff;

↔️ What is Bootstrap Offset?

The Bootstrap Offset is a feature in the Grid system that allows you to add extra spacing (margin-left) before a column. It helps in pushing columns to the right without leaving empty <div> elements, keeping the layout clean and flexible.

</> Key Features

➤ Used with the .offset-* classes.
➤ Works with 12-column grid system.
➤ Offsets are responsive, meaning you can apply them per breakpoint.
➤ Helps in centering or aligning content inside rows.

⚡ Example Code

<div class="container">
  <div class="row">
    <!-- Column pushed to the right using offset -->
    <div class="col-4 offset-4 bg-primary text-white text-center">
      Centered Column
    </div>
  </div>
</div>

🔄 What is Reordering in Bootstrap?

Reordering in Bootstrap refers to changing the visual order of columns inside the grid system without changing the HTML structure.
This is done using the order-* classes, which are based on Flexbox ordering. It’s useful for making content appear in different positions on different screen sizes.

</> Key Features

➤ Uses Flexbox order property.
➤ Helps adjust column order for responsive layouts.
➤ Classes available: .order-0 to .order-5 and .order-first, .order-last.
➤ You can combine breakpoints (e.g., .order-md-2).

⚡ Example Code

<div class="container">
  <div class="row">
    <div class="col bg-primary text-white order-2">Column 1</div>
    <div class="col bg-success text-white order-1">Column 2</div>
     <div class="col bg-danger text-white order-3">Column 3</div>
  </div>
</div>

🖼️ Reordering Diagram

graph LR
    subgraph O[Original Order]
        A1[Col 1]:::blue --> A2[Col 2]:::orange --> A3[Col 3]:::red
    end

    subgraph R[Reordered Layout]
        B1[Col 2]:::orange --> B2[Col 1]:::blue --> B3[Col 3]:::red
    end

    O --> R

    classDef blue fill:#4B6CB7,stroke:#fff,stroke-width:2px,color:#fff;
    classDef orange fill:#FFA500,stroke:#fff,stroke-width:2px,color:#fff;
    classDef red fill:#E63946,stroke:#fff,stroke-width:2px,color:#fff;

</> Table of Grid Classes

Class	Description	Example
`.container`	Fixed-width container	`<div class="container">...</div>`
`.container-fluid`	Full-width container	`<div class="container-fluid">...</div>`
`.row`	Creates a horizontal row	`<div class="row">...</div>`
`.col`	Auto-width column	`<div class="col">Column</div>`
`.col-*`	Column with specific width (1–12)	`<div class="col-4">Column</div>`
`.col-sm-*`	Column for small devices ≥576px	`<div class="col-sm-6">Column</div>`
`.col-md-*`	Column for medium devices ≥768px	`<div class="col-md-4">Column</div>`
`.col-lg-*`	Column for large devices ≥992px	`<div class="col-lg-3">Column</div>`
`.col-xl-*`	Column for X-large devices ≥1200px	`<div class="col-xl-2">Column</div>`
`.col-xxl-*`	Column for XX-large devices ≥1400px	`<div class="col-xxl-1">Column</div>`
`.g-*`	Sets gap (spacing) between columns	`<div class="row g-3">...</div>`
`.gx-*`	Sets horizontal gap	`<div class="row gx-2">...</div>`
`.gy-*`	Sets vertical gap	`<div class="row gy-2">...</div>`
`.order-*`	Reorder columns	`<div class="col order-2">Column</div>`
`.offset-*`	Push column to the right	`<div class="col-4 offset-2">Column</div>`
`.align-items-*`	Vertical alignment of columns	`<div class="row align-items-center">...</div>`
`.justify-content-*`	Horizontal alignment of columns	`<div class="row justify-content-between">...</div>`

🏗️ What is Nesting in Bootstrap?

Nesting in Bootstrap refers to placing a new row and columns inside an existing column.
This allows developers to create complex layouts by dividing a column into smaller sub-columns while maintaining responsiveness.

</> Key Features

➤ Nesting = Column inside a Column.
➤ Use a .row inside a .col-*.
➤ Keeps the grid alignment consistent.
➤ Helpful for multi-level layouts (e.g., sidebars, cards, sub-sections).

⚡ Example Code

<div class="container">
  <div class="row">
    <div class="col-8 bg-primary text-white">
      Main Column (8/12)
      <div class="row mt-2">
        <div class="col-6 bg-success text-white">Nested Col 1 (6/12)</div>
        <div class="col-6 bg-danger text-white">Nested Col 2 (6/12)</div>
      </div>
    </div>
    <div class="col-4 bg-warning text-dark">
      Sidebar Column (4/12)
    </div>
  </div>
</div>

graph TD
    A[📦 Container]:::blue --> B[📏 Row]:::green
    B --> C[⬛ Col-8]:::purple
    B --> D[⬜ Col-4]:::orange

    C --> E[📏 Nested Row]:::teal
    E --> F[🔹 Nested Col-6]:::red
    E --> G[🔹 Nested Col-6]:::red

    %% Styles
    classDef blue fill:#007BFF,stroke:#fff,stroke-width:2px,color:#fff,rx:10,ry:10;
    classDef green fill:#28A745,stroke:#fff,stroke-width:2px,color:#fff,rx:10,ry:10;
    classDef purple fill:#6F42C1,stroke:#fff,stroke-width:2px,color:#fff,rx:10,ry:10;
    classDef orange fill:#FFC107,stroke:#fff,stroke-width:2px,color:#000,rx:10,ry:10;
    classDef red fill:#E63946,stroke:#fff,stroke-width:2px,color:#fff,rx:10,ry:10;
    classDef teal fill:#20C997,stroke:#fff,stroke-width:2px,color:#fff,rx:10,ry:10;

📏 Margin in Bootstrap

Margin in Bootstrap is the space outside an element, used to create distance between elements and improve layout design.

</> Key Features

➤ Adds space outside an element.
➤ Can be applied on all sides or specific sides.
➤ Bootstrap uses shorthand classes for margins.

💡 Margin Classes

Class	Effect	Example
`m-0`	No margin	`<div class="m-0">Box</div>`
`m-1` to `m-5`	Small to large margin	`<div class="m-3">Box</div>`
`mt-*`	Top margin	`<div class="mt-2">Box</div>`
`mb-*`	Bottom margin	`<div class="mb-4">Box</div>`
`ms-*`	Start (left) margin	`<div class="ms-3">Box</div>`
`me-*`	End (right) margin	`<div class="me-2">Box</div>`

💡 Tip: Use responsive margin classes like mt-md-4 to adjust spacing on different screen sizes.

📌 Bootstrap Margin Scale

Class Value	rem	px	Description
`0`	0	0px	No padding
`1`	0.25	4px	Extra small
`2`	0.5	8px	Small
`3`	1	16px	Medium
`4`	1.5	24px	Large
`5`	3	48px	Extra large
`auto`	—	—	Automatic

⚡ Example Code

<div class="m-3 p-2 bg-primary text-white">
  This box has margin and padding
</div>

🌐 Diagram for Margin

flowchart TB
    style A fill:#6D6F73,stroke:#000,stroke-width:1px
    style B fill:#2F2440,stroke:#000,stroke-width:1px
    style C fill:#BA0F30,stroke:#000,stroke-width:1px

    A[Parent Container]
    B[Margin Area]
    C[Element]

    A --> B --> C

➖ Negative Margin in Bootstrap

Negative margin in Bootstrap is a technique where you pull an element closer to its neighboring elements by using negative values, effectively reducing or reversing the default spacing.

</> Key Features

➤ Moves element closer to nearby elements.
➤ Can be applied on all sides (m) or specific sides (mt, mb, ms, me).
➤ Useful for overlapping elements or adjusting layout spacing.

💡 Negative Margin Classes

Class	Effect	Example
`m-n1` to `m-n5`	Negative margin on all sides	`<div class="m-n3">Box</div>`
`mt-n*`	Negative top margin	`<div class="mt-n2">Box</div>`
`mb-n*`	Negative bottom margin	`<div class="mb-n4">Box</div>`
`ms-n*`	Negative start (left) margin	`<div class="ms-n2">Box</div>`
`me-n*`	Negative end (right) margin	`<div class="me-n3">Box</div>`

💡 Tip: Use negative margins carefully, as they can overlap content and affect responsiveness.

⚡ Example Code

<div class="bg-success p-3 mb-3">Above Box</div>
<div class="bg-danger p-3 mt-n3 text-black">
  This box uses negative top margin
</div>

flowchart TB
    style A fill:#2F5233,stroke:#000,stroke-width:1px
    style B fill:#08313A,stroke:#000,stroke-width:1px
    style C fill:##2C5E1A,stroke:#000,stroke-width:1px

    A[Parent Container]
    B[Negative Margin Area]
    C[Element]

    A --> B --> C

🧩 What is Padding in Bootstrap?

Padding is the space inside an element, between the content and the border.
In Bootstrap, padding is controlled using utility classes.

</> Key Features

➤ Adds space inside an element.
➤ Pushes the content away from the border.
➤ Can be applied on all sides or specific sides.
➤ Helps improve readability and design balance.

📘 Padding Classes in Bootstrap

Class	Effect	Example
`p-0`	No padding	`<div class="p-0">Box</div>`
`p-1` to `p-5`	Small to large padding	`<div class="p-3">Box</div>`
`pt-*`	Top padding	`<div class="pt-2">Box</div>`
`pb-*`	Bottom padding	`<div class="pb-4">Box</div>`
`ps-*`	Start (left) padding	`<div class="ps-3">Box</div>`
`pe-*`	End (right) padding	`<div class="pe-2">Box</div>`
`px-*`	Horizontal padding (left & right)	`<div class="px-4">Box</div>`
`py-*`	Vertical padding (top & bottom)	`<div class="py-5">Box</div>`

📌 Bootstrap Padding Scale

Class Value	rem	px	Description
`0`	0	0px	No padding
`1`	0.25	4px	Extra small
`2`	0.5	8px	Small
`3`	1	16px	Medium
`4`	1.5	24px	Large
`5`	3	48px	Extra large
`auto`	—	—	Automatic

⚡ Example Code

<div class="bg-primary text-white p-4">
  This box has padding inside
</div>

flowchart TB
    style A fill:#81B622,stroke:#000,stroke-width:1px
    style B fill:#DBA40E,stroke:#000,stroke-width:1px
    style C fill:##7E6E13,stroke:#000,stroke-width:1px

    A[Element Border]
    B[Padding Area]
    C[Content]

    A --> B --> C

↔️ What are Horizontal Classes in Bootstrap?

In Bootstrap, horizontal classes are utility classes used to align, space, and position elements horizontally across the page. These classes help in alignment of text, flex items, and spacing between elements without writing custom CSS.

</> Key Horizontal Classes

✅ Text Alignment
- text-start → Align text to the left
- text-center → Center align text
- text-end → Align text to the right
✅ Flexbox Alignment
- d-flex justify-content-start → Align items to the left
- d-flex justify-content-center → Center items horizontally
- d-flex justify-content-end → Align items to the right
- d-flex justify-content-between → Spread items evenly
- d-flex justify-content-around → Equal space around items
- d-flex justify-content-evenly → Equal space between items

⚡ Example Code

<div class="container text-center">
  <h3 class="text-center">Horizontal Classes Example</h3>
  
  <div class="d-flex justify-content-between bg-light p-3">
    <div class="p-2 bg-primary text-white">Box 1</div>
    <div class="p-2 bg-success text-white">Box 2</div>
    <div class="p-2 bg-danger text-white">Box 3</div>
  </div>
</div>

graph LR;
    A[Start]:::blue --> B[Text Classes]:::green
    A --> C[Flexbox Classes]:::orange
    B --> D["text-start<br>text-center<br>text-end"]:::purple
    C --> E["justify-content-start<br>justify-content-center<br>justify-content-end"]:::red
    C --> F["justify-content-between<br>justify-content-around<br>justify-content-evenly"]:::red

classDef blue fill:#3498db,color:#fff,stroke:#2c3e50;
classDef green fill:#2ecc71,color:#fff,stroke:#27ae60;
classDef orange fill:#e67e22,color:#fff,stroke:#d35400;
classDef purple fill:#9b59b6,color:#fff,stroke:#8e44ad;
classDef red fill:#e74c3c,color:#fff,stroke:#c0392b;

⬆️ What is Vertical Alignment in Bootstrap?

In Bootstrap, vertical alignment is used to position elements up, center, or down within a container. It is commonly applied to flex items, text, images, tables, and navbars to make layouts clean and responsive.

</> Key Classes for Vertical Alignment

1. Text Alignment (Vertical)

align-baseline → Aligns text to the baseline
align-top → Aligns text to the top
align-middle → Aligns text to the middle
align-bottom → Aligns text to the bottom

2. Flexbox Alignment (Vertical)

align-items-start → Align flex items at top
align-items-center → Center flex items vertically
align-items-end → Align flex items at bottom
align-items-baseline → Align items by baseline
align-items-stretch → Stretch items to fill container

⚡ Example Code

<div class="d-flex align-items-center" style="height:200px; background:#f8f9fa;">
  <div class="p-2 bg-primary text-white">Box 1</div>
  <div class="p-2 bg-success text-white">Box 2</div>
</div>

```mermaid
graph TD;
    A[Vertical Alignment]:::blue --> B[Text Classes]:::green
    A --> C[Flexbox Classes]:::orange
    B --> D[align-top / align-middle / align-bottom / align-baseline]:::purple
    C --> E[align-items-start / center / end / baseline / stretch]:::red

classDef blue fill:#3498db,color:#fff,stroke:#2c3e50;
classDef green fill:#2ecc71,color:#fff,stroke:#27ae60;
classDef orange fill:#e67e22,color:#fff,stroke:#d35400;
classDef purple fill:#9b59b6,color:#fff,stroke:#8e44ad;
classDef red fill:#e74c3c,color:#fff,stroke:#c0392b;

🎯 Alignment Content Classes in Bootstrap

Alignment content classes in Bootstrap are used to align flex container content along the cross axis. They help position rows or columns inside a flex container vertically or horizontally based on container height.

🔹 Key Classes

Class	Description
`.align-content-start`	Aligns content to the start of container
`.align-content-center`	Aligns content to the center
`.align-content-end`	Aligns content to the end
`.align-content-between`	Places content with space between
`.align-content-around`	Places content with space around
`.align-content-stretch`	Stretches content to fill container

⚡ Syntax Example

<div class="d-flex flex-wrap align-content-center" style="height:200px;">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
</div>

💡 Tip: These classes work only on flex containers with multiple lines (flex-wrap), and affect overall content alignment, not individual items.

🌐 Align Content Diagram Example

graph TD;
    A[Flex Container] --> B[align-content-start]
    A --> C[align-content-center]
    A --> D[align-content-end]
    A --> E[align-content-between]
    A --> F[align-content-around]
    A --> G[align-content-stretch]

🙋 Align Self Classes in Bootstrap

The align-self classes in Bootstrap allow you to align individual flex items inside a flex container. Unlike align-content (which controls multiple items together), align-self works per item, giving you more control.

🔹 Available Classes

Class	Description
`.align-self-start`	Aligns the item to the start of the container
`.align-self-center`	Aligns the item to the center
`.align-self-end`	Aligns the item to the end
`.align-self-baseline`	Aligns the item based on text baseline
`.align-self-stretch`	Stretches the item to fill the container

⚡ Responsive Variants

You can also use these with breakpoints:

align-self-{breakpoint}-{value}

Example breakpoints: sm, md, lg, xl, xxl

👉 Example: align-self-md-center, align-self-lg-end

⚡ Example Code

<div class="d-flex" style="height:150px;">
  <div class="p-2 bg-primary text-white align-self-start">Start</div>
  <div class="p-2 bg-success text-white align-self-center">Center</div>
  <div class="p-2 bg-danger text-white align-self-end">End</div>
  <div class="p-2 bg-warning text-dark align-self-stretch">Stretch</div>
</div>

🌐 Align Self Diagram (Behavior)

graph TD;
    A[Flex Container] --> B[align-self-start]
    A --> C[align-self-center]
    A --> D[align-self-end]
    A --> E[align-self-baseline]
    A --> F[align-self-stretch]

💡 Tip: Use align-self when you want one item aligned differently from others inside the same flex container.

🔄 Flex Direction Classes in Bootstrap

The flex-direction classes in Bootstrap are used to set the direction of flex items inside a flex container. They control how items are placed: horizontally (row) or vertically (column), and whether the order is normal or reversed.

🔹 Available Classes

Class	Description
`.flex-row`	Places items horizontally (default)
`.flex-row-reverse`	Places items horizontally in reverse order
`.flex-column`	Places items vertically
`.flex-column-reverse`	Places items vertically in reverse order

⚡ Responsive Variants

Bootstrap supports responsive flex direction classes with breakpoints:

flex-{breakpoint}-{direction}

✅ Breakpoints: sm, md, lg, xl, xxl
✅ Directions: row, row-reverse, column, column-reverse

👉 Examples:

flex-sm-row
flex-md-column
flex-lg-row-reverse
flex-xl-column-reverse

📝 Example Code

<div class="d-flex flex-row bg-light p-3">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
</div>

<div class="d-flex flex-column-reverse bg-light p-3 mt-3">
  <div class="p-2 bg-warning text-dark">Item A</div>
  <div class="p-2 bg-info text-white">Item B</div>
  <div class="p-2 bg-secondary text-white">Item C</div>
</div>

🌐 Mermaid Diagram (Flex Direction)

graph TD;
    A[Flex Container] --> B[flex-row → Horizontal]
    A --> C[flex-row-reverse → Horizontal Reverse]
    A --> D[flex-column → Vertical]
    A --> E[flex-column-reverse → Vertical Reverse]

💡 Tip: Use flex-direction classes when you want to control layout orientation of flex items in Bootstrap.

🌀 Flex Wrap & Flex Fill in Bootstrap

Bootstrap provides flex utilities to control how flex items wrap and how they fill available space inside a flex container.

🔹 Flex Wrap

Flex wrap classes define whether flex items should stay in a single line or wrap into multiple lines.

Class	Description
`.flex-nowrap`	Default, items stay on one line
`.flex-wrap`	Items wrap onto multiple lines if needed
`.flex-wrap-reverse`	Items wrap onto multiple lines in reverse order

✅ Works with responsive variants: flex-{breakpoint}-wrap or flex-{breakpoint}-nowrap.

⚡ Example: Flex Wrap

<div class="d-flex flex-wrap bg-light p-2" style="width:200px;">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
  <div class="p-2 bg-warning">Item 4</div>
</div>

🔹 Flex Fill

Flex fill classes make flex items grow to occupy available free space equally, no matter their content.

Class	Description
`.flex-fill`	Forces the item to take equal width in the container

✅ Works across breakpoints: flex-{breakpoint}-fill. ✅ It work with col only

⚡ Example: Flex Fill

<div class="d-flex">
  <div class="p-2 flex-fill bg-primary text-white">Equal Width 1</div>
  <div class="p-2 flex-fill bg-success text-white">Equal Width 2</div>
  <div class="p-2 flex-fill bg-danger text-white">Equal Width 3</div>
</div>

🌐 Mermaid Diagram (Flex Wrap & Fill)

graph TD;
    A[Flex Container] --> B[flex-nowrap → Single Line]
    A --> C[flex-wrap → Multiple Lines]
    A --> D[flex-wrap-reverse → Reverse Wrap]
    A --> E[flex-fill → Items Grow Equally]

💡 Tip: Use flex-wrap to control line breaking, and flex-fill to make items expand and share space equally.

📏 Flex Direction Breakpoints in Bootstrap

Bootstrap provides responsive flex-direction classes that let you control the layout direction of flex items at different screen sizes.

🔹 Breakpoint Pattern

flex-{breakpoint}-{direction}

{breakpoint} → sm, md, lg, xl, xxl
{direction} → row, row-reverse, column, column-reverse

📝 Complete List of Classes

Breakpoint	Row	Row Reverse	Column	Column Reverse
Extra Small (XS `<576px`)	`flex-row`	`flex-row-reverse`	`flex-column`	`flex-column-reverse`
Small (SM `≥576px`)	`flex-sm-row`	`flex-sm-row-reverse`	`flex-sm-column`	`flex-sm-column-reverse`
Medium (MD `≥768px`)	`flex-md-row`	`flex-md-row-reverse`	`flex-md-column`	`flex-md-column-reverse`
Large (LG `≥992px`)	`flex-lg-row`	`flex-lg-row-reverse`	`flex-lg-column`	`flex-lg-column-reverse`
Extra Large (XL `≥1200px`)	`flex-xl-row`	`flex-xl-row-reverse`	`flex-xl-column`	`flex-xl-column-reverse`
Extra Extra Large (XXL `≥1400px`)	`flex-xxl-row`	`flex-xxl-row-reverse`	`flex-xxl-column`	`flex-xxl-column-reverse`

⚡ Example Code

<div class="d-flex flex-sm-row flex-md-column flex-lg-row-reverse bg-light p-3">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
</div>

🌐 Mermaid Diagram (Responsive Flow)

graph TD;
    A[Extra Small]:::blue --> B[flex-row / flex-row-reverse]:::green
    A --> C[flex-column / flex-column-reverse]:::orange
    B --> D[Responsive Versions: sm, md, lg, xl, xxl]:::purple
    C --> D

💡 Tip: Use row for horizontal layouts and column for vertical layouts, then adjust with responsive breakpoints to make layouts flexible.

🌀 Flex Wrap Breakpoints in Bootstrap

Bootstrap provides responsive flex-wrap classes that control whether flex items wrap onto multiple lines or stay on a single line, with support across all breakpoints.

🔹 Breakpoint Pattern

flex-{breakpoint}-{wrap}

{breakpoint} → sm, md, lg, xl, xxl
{wrap} → wrap, nowrap, wrap-reverse

📝 Complete List of Classes

Breakpoint	Wrap	No Wrap	Wrap Reverse
Extra Small (XS `<576px`)	`flex-wrap`	`flex-nowrap`	`flex-wrap-reverse`
Small (SM `≥576px`)	`flex-sm-wrap`	`flex-sm-nowrap`	`flex-sm-wrap-reverse`
Medium (MD `≥768px`)	`flex-md-wrap`	`flex-md-nowrap`	`flex-md-wrap-reverse`
Large (LG `≥992px`)	`flex-lg-wrap`	`flex-lg-nowrap`	`flex-lg-wrap-reverse`
Extra Large (XL `≥1200px`)	`flex-xl-wrap`	`flex-xl-nowrap`	`flex-xl-wrap-reverse`
Extra Extra Large (XXL `≥1400px`)	`flex-xxl-wrap`	`flex-xxl-nowrap`	`flex-xxl-wrap-reverse`

⚡ Example Code

<div class="d-flex flex-sm-wrap flex-md-nowrap flex-lg-wrap-reverse bg-light p-2" style="width:220px;">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
  <div class="p-2 bg-warning">Item 4</div>
</div>

🌐 Mermaid Diagram (Flex Wrap Flow)

graph TD;
    A[Flex Container]:::blue --> B[flex-wrap]:::green
    A --> C[flex-nowrap]:::orange
    A --> D[flex-wrap-reverse]:::red
    B --> E[Responsive Versions: sm, md, lg, xl, xxl]:::purple
    C --> E
    D --> E

💡 Tip: Use flex-wrap for multi-line layouts, flex-nowrap to force items on one line, and flex-wrap-reverse when you need items to wrap in reverse order.

🔳 Flex Fill Breakpoints in Bootstrap

The flex-fill classes in Bootstrap make flex items grow and share available space equally inside a flex container.
They also support responsive breakpoints to control this behavior on different screen sizes.

🔹 Breakpoint Pattern

flex-{breakpoint}-fill

{breakpoint} → sm, md, lg, xl, xxl
fill → Forces the item to take equal space as siblings

📝 Complete List of Classes

Breakpoint	Class Example
Extra Small (XS `<576px`)	`flex-fill`
Small (SM `≥576px`)	`flex-sm-fill`
Medium (MD `≥768px`)	`flex-md-fill`
Large (LG `≥992px`)	`flex-lg-fill`
Extra Large (XL `≥1200px`)	`flex-xl-fill`
Extra Extra Large (XXL `≥1400px`)	`flex-xxl-fill`

⚡ Example Code

<div class="d-flex">
  <div class="p-2 flex-sm-fill bg-primary text-white">Fill on SM+</div>
  <div class="p-2 flex-md-fill bg-success text-white">Fill on MD+</div>
  <div class="p-2 flex-lg-fill bg-danger text-white">Fill on LG+</div>
</div>

🌐 Mermaid Diagram (Flex Fill Flow)

graph TD
    A[Flex Container]
    B[flex-fill XS]
    C[flex-sm-fill 576px]
    D[flex-md-fill 768px]
    E[flex-lg-fill 992px]
    F[flex-xl-fill 1200px]
    G[flex-xxl-fill 1400px]

    A --> B
    A --> C
    A --> D
    A --> E
    A --> F
    A --> G

💡 Tip: Use flex-fill when you want all items to automatically take equal width, regardless of content size, with responsive control.

📐 Display Property in Bootstrap

The display property in Bootstrap is used to control how elements are displayed on the page. It helps to quickly switch elements between block, inline, flex, grid, or hidden states using utility classes.

🔹 Display Classes

Class	Description
`.d-none`	Hides the element
`.d-inline`	Displays element inline
`.d-inline-block`	Displays element inline-block
`.d-block`	Displays element as block
`.d-flex`	Displays element as flex container
`.d-inline-flex`	Displays element as inline-flex
`.d-grid`	Displays element as grid container
`.d-inline-grid`	Displays element as inline-grid
`.d-table`	Displays element as table
`.d-table-row`	Displays element as table-row
`.d-table-cell`	Displays element as table-cell

🔹 Responsive Variants

You can also make display responsive using breakpoints:

d-{breakpoint}-{value}

Breakpoints: sm, md, lg, xl, xxl
Example:
- d-sm-block → block on small screens and above
- d-md-flex → flex on medium screens and above

⚡ Example Code

<div class="d-none d-md-block bg-primary text-white p-2">
  Visible only on medium screens and above
</div>

<div class="d-flex d-sm-inline-flex bg-success text-white p-2">
  Flex container on all screens, inline-flex on small+
</div>

🌐 Mermaid Diagram (Display Flow)

graph TD
    A[Element]
    B[d-none]
    C[d-block]
    D[d-inline]
    E[d-flex]
    F[d-grid]

    A --> B
    A --> C
    A --> D
    A --> E
    A --> F

💡 Tip: Use display utilities in Bootstrap to quickly change element visibility and layout without writing custom CSS.

🖨️ Display Print Property in Bootstrap

The display print property in Bootstrap is used to control element visibility when printing a page. It allows developers to show or hide elements specifically for printed documents using utility classes.

🔹 Print Display Classes

Class	Description
`.d-print-none`	Hides the element only when printing
`.d-print-inline`	Displays element inline when printing
`.d-print-inline-block`	Displays element inline-block when printing
`.d-print-block`	Displays element as block when printing

⚡ Example Code

<div class="d-none d-print-block bg-primary text-white p-2">
  This element is hidden on screen but visible when printing
</div>

<div class="d-block d-print-none bg-success text-white p-2">
  This element is visible on screen but hidden in print
</div>

🌐 Mermaid Diagram (Print Display Flow)

graph TD
    A[Element]
    B[d-print-none --> Hidden in print]
    C[d-print-inline --> Inline in print]
    D[d-print-inline-block --> Inline-block in print]
    E[d-print-block --> Block in print]

    A --> B
    A --> C
    A --> D
    A --> E

💡 Tip: Use print display classes to optimize your page layout for printing and hide unnecessary elements like menus or ads.

📊 Display Property Breakpoints in Bootstrap

Bootstrap provides responsive display utility classes that allow you to control how elements are displayed on different screen sizes.

🔹 Breakpoint Pattern

d-{breakpoint}-{value}

{breakpoint} → sm, md, lg, xl, xxl
{value} → none, inline, inline-block, block, flex, inline-flex, grid, inline-grid, table, etc.

📝 Complete List of Classes by Breakpoints

Breakpoint	Example Classes
Extra Small (XS `<576px`)	`d-none`, `d-block`, `d-flex`, `d-inline`
Small (SM `≥576px`)	`d-sm-none`, `d-sm-block`, `d-sm-flex`
Medium (MD `≥768px`)	`d-md-none`, `d-md-block`, `d-md-flex`
Large (LG `≥992px`)	`d-lg-none`, `d-lg-block`, `d-lg-flex`
Extra Large (XL `≥1200px`)	`d-xl-none`, `d-xl-block`, `d-xl-flex`
Extra Extra Large (XXL `≥1400px`)	`d-xxl-none`, `d-xxl-block`, `d-xxl-flex`

⚡ Example Code

<div class="d-none d-md-block bg-primary text-white p-2">
  Hidden on XS & SM, visible on MD and above
</div>

<div class="d-block d-lg-none bg-success text-white p-2">
  Visible on XS, SM, MD; hidden on LG+
</div>

🌐 Mermaid Diagram (Responsive Display Flow)

graph TD
    A[Element]
    B[d-none / d-block XS]
    C[d-sm-none / d-sm-block SM]
    D[d-md-none / d-md-block MD]
    E[d-lg-none / d-lg-block LG]
    F[d-xl-none / d-xl-block XL]
    G[d-xxl-none / d-xxl-block XXL]

    A --> B
    A --> C
    A --> D
    A --> E
    A --> F
    A --> G

💡 Tip: Use display breakpoints to control visibility and layout on different screen sizes without writing custom CSS.

🖨️ Display Print Property Breakpoints in Bootstrap

Bootstrap provides display utility classes for print to control element visibility when printing.
These classes do not have traditional breakpoints like screen sizes, because they only apply during printing. However, you can combine them with responsive classes for screen + print control.

🔹 Print Display Classes

Class	Description
`.d-print-none`	Hides element only in print
`.d-print-inline`	Displays element inline in print
`.d-print-inline-block`	Displays element inline-block in print
`.d-print-block`	Displays element as block in print

⚡ Example Code

<div class="d-none d-print-block bg-primary text-white p-2">
  Hidden on screen, visible in print
</div>

<div class="d-block d-print-none bg-success text-white p-2">
  Visible on screen, hidden in print
</div>

💡 Key Notes

Print classes only work when printing, not on screens.
You can combine screen display classes (like d-sm-block) with print classes:

<div class="d-none d-sm-block d-print-block">
  Visible on SM+ screens and in print
</div>

✅ Tip: Use print display utilities to optimize printed documents and hide unnecessary content like navigation bars, ads, or buttons.

🌊 Float and Clear Classes in Bootstrap

Bootstrap provides float and clear utility classes to control element positioning and flow. These classes are used to make elements float left, right, or reset floating behavior using clear classes.

🔹 Float Classes

Class	Description
`.float-start`	Floats element to the left (start of container)
`.float-end`	Floats element to the right (end of container)
`.float-none`	Removes any float, element becomes normal flow

✅ Responsive variants:

float-{breakpoint}-{value}

Breakpoints: sm, md, lg, xl, xxl
Example: float-md-start → float left on medium screens and above

🔹 Clear Classes

Class	Description
`.clearfix`	Clears floats for parent container so it wraps floated children properly
`.clear-start`	Clears float on the left side
`.clear-end`	Clears float on the right side
`.clear-both`	Clears float on both sides

⚡ Example Code

<div class="bg-light p-2">
  <div class="float-start bg-primary text-white p-2">Float Left</div>
  <div class="float-end bg-success text-white p-2">Float Right</div>
  <div class="clearfix"></div>
  <div class="bg-danger text-white p-2 mt-2">Normal Flow</div>
</div>

🌐 Mermaid Diagram (Float & Clear Flow)

graph TD
    A[Parent Container]
    B[float-start → left]
    C[float-end → right]
    D[float-none → normal flow]
    E[clearfix → clears floats]

    A --> B
    A --> C
    A --> D
    B --> E
    C --> E

💡 Tip: Use float classes to align elements horizontally, and use clear or clearfix to fix parent container height or reset flow.

🌊 Float & Clear Classes Breakpoints in Bootstrap

Bootstrap provides responsive float and clear utility classes to control element positioning across different screen sizes.

🔹 Float Classes Breakpoints

Breakpoint	Float Left (Start)	Float Right (End)	Float None
XS `<576px`	`float-start`	`float-end`	`float-none`
SM `≥576px`	`float-sm-start`	`float-sm-end`	`float-sm-none`
MD `≥768px`	`float-md-start`	`float-md-end`	`float-md-none`
LG `≥992px`	`float-lg-start`	`float-lg-end`	`float-lg-none`
XL `≥1200px`	`float-xl-start`	`float-xl-end`	`float-xl-none`
XXL `≥1400px`	`float-xxl-start`	`float-xxl-end`	`float-xxl-none`

🔹 Clear Classes Breakpoints

Clear classes don’t have screen-specific breakpoints, but you can combine with responsive floats:

Class	Description
`.clearfix`	Clears floated children in parent container
`.clear-start`	Clears float on the left side
`.clear-end`	Clears float on the right side
`.clear-both`	Clears float on both sides

✅ Example combining breakpoints:

<div class="float-sm-start float-md-end clearfix bg-light p-2">
  Responsive floated element
</div>

🌐 Mermaid Diagram (Float Breakpoints)

graph TD
    A[Element] 
    B[float-start / float-sm-start / ...] 
    C[float-end / float-sm-end / ...] 
    D[float-none / float-sm-none / ...] 

    A --> B
    A --> C
    A --> D

💡 Tip: Use responsive float classes to control horizontal alignment on different screens, and use clear/clearfix to maintain proper layout flow.

📏 Width Classes in Bootstrap

Bootstrap provides width utility classes to quickly set the width of elements using percentages, pixels, or auto values. These classes are responsive and easy to use without custom CSS.

🔹 Width Classes (Basic)

Class	Width Description
`.w-25`	Width: 25%
`.w-50`	Width: 50%
`.w-75`	Width: 75%
`.w-100`	Width: 100%
`.w-auto`	Width: auto (content-based)

🔹 Responsive Width Classes

Pattern:

w-{breakpoint}-{value}

{breakpoint} → sm, md, lg, xl, xxl
{value} → 25, 50, 75, 100, auto

Breakpoint	Example
XS `<576px`	`w-50`
SM `≥576px`	`w-sm-50`
MD `≥768px`	`w-md-50`
LG `≥992px`	`w-lg-50`
XL `≥1200px`	`w-xl-50`
XXL `≥1400px`	`w-xxl-50`

⚡ Example Code

<div class="w-25 bg-primary text-white p-2">Width 25%</div>
<div class="w-sm-50 w-md-75 bg-success text-white p-2">Responsive Width</div>
<div class="w-100 bg-danger text-white p-2">Full Width</div>

🌐 Mermaid Diagram (Width Classes Flow)

graph TD
    A[Element]
    B[w-25 / w-sm-25 / w-md-25 ...]
    C[w-50 / w-sm-50 / w-md-50 ...]
    D[w-75 / w-sm-75 / w-md-75 ...]
    E[w-100 / w-sm-100 / w-md-100 ...]
    F[w-auto / w-sm-auto / w-md-auto ...]

    A --> B
    A --> C
    A --> D
    A --> E
    A --> F

💡 Tip: Use width classes for quick layout adjustments and combine with responsive breakpoints for different screen sizes.

📏 Height Classes in Bootstrap

Bootstrap provides height utility classes to quickly set the height of elements using percentages, pixels, or auto values. These classes are responsive and easy to use without writing custom CSS.

🔹 Height Classes (Basic)

Class	Height Description
`.h-25`	Height: 25%
`.h-50`	Height: 50%
`.h-75`	Height: 75%
`.h-100`	Height: 100%
`.h-auto`	Height: auto (content-based)

🔹 Responsive Height Classes

Pattern:

h-{breakpoint}-{value}

{breakpoint} → sm, md, lg, xl, xxl
{value} → 25, 50, 75, 100, auto

Breakpoint	Example
XS `<576px`	`h-50`
SM `≥576px`	`h-sm-50`
MD `≥768px`	`h-md-50`
LG `≥992px`	`h-lg-50`
XL `≥1200px`	`h-xl-50`
XXL `≥1400px`	`h-xxl-50`

⚡ Example Code

<div class="h-25 bg-primary text-white p-2">Height 25%</div>
<div class="h-sm-50 h-md-75 bg-success text-white p-2">Responsive Height</div>
<div class="h-100 bg-danger text-white p-2">Full Height</div>

🌐 Mermaid Diagram (Height Classes Flow)

graph TD
    A[Element]
    B[h-25 / h-sm-25 / h-md-25 ...]
    C[h-50 / h-sm-50 / h-md-50 ...]
    D[h-75 / h-sm-75 / h-md-75 ...]
    E[h-100 / h-sm-100 / h-md-100 ...]
    F[h-auto / h-sm-auto / h-md-auto ...]

    A --> B
    A --> C
    A --> D
    A --> E
    A --> F

💡 Tip: Use height classes for quick vertical sizing and combine with responsive breakpoints for different devices.

🌐 Viewport Height and Width in Bootstrap

In Bootstrap, viewport height (vh) and viewport width (vw) are utility classes used to set an element's size relative to the browser's viewport.

1vh = 1% of the viewport height
1vw = 1% of the viewport width

This is useful for making full-screen sections, responsive layouts, and flexible containers.

🔹 Viewport Width Classes

Class	Description
`.vw-100`	Width = 100% of viewport width
`.vw-75`	Width = 75% of viewport width
`.vw-50`	Width = 50% of viewport width
`.vw-25`	Width = 25% of viewport width

🔹 Viewport Height Classes

Class	Description
`.vh-100`	Height = 100% of viewport height
`.vh-75`	Height = 75% of viewport height
`.vh-50`	Height = 50% of viewport height
`.vh-25`	Height = 25% of viewport height

⚡ Example Code

<div class="vh-100 vw-100 bg-primary text-white d-flex align-items-center justify-content-center">
  Full viewport height and width
</div>

<div class="vh-50 vw-75 bg-success text-white p-2">
  Half height, 75% width of viewport
</div>

🌐 Mermaid Diagram (Viewport Flow)

graph TD
    A[Element]
    B[vw-100 / vh-100 → full viewport]
    C[vw-75 / vh-75 → 75% viewport]
    D[vw-50 / vh-50 → 50% viewport]
    E[vw-25 / vh-25 → 25% viewport]

    A --> B
    A --> C
    A --> D
    A --> E

💡 Tip: Use viewport classes to create full-screen hero sections, modals, or responsive containers that scale with the browser size.

📌 Position Classes in Bootstrap

Bootstrap provides position utility classes to control how an element is positioned on the page.
These are based on standard CSS position values.

🔹 Position Types

Class	Description
`.position-static`	Default, element is static (not positioned).
`.position-relative`	Positioned relative to itself, allows offset using `top`, `right`, `bottom`, `left`.
`.position-absolute`	Positioned relative to the nearest positioned ancestor.
`.position-fixed`	Positioned relative to the viewport, stays in place when scrolling.
`.position-sticky`	Sticks to a given position until a boundary is met.

🔹 Center Helpers

Class	Description
`.top-0`	Top aligned (0%)
`.bottom-0`	Bottom aligned (0%)
`.start-0`	Left aligned (0%)
`.end-0`	Right aligned (0%)
`.translate-middle`	Center element both vertically and horizontally
`.translate-middle-x`	Center horizontally only
`.translate-middle-y`	Center vertically only

⚡ Example Code

<div class="position-relative bg-light" style="height:200px;">
  <div class="position-absolute top-0 end-0 bg-primary text-white p-2">
    Top Right
  </div>
  <div class="position-absolute bottom-0 start-0 bg-success text-white p-2">
    Bottom Left
  </div>
  <div class="position-absolute top-50 start-50 translate-middle bg-danger text-white p-2">
    Centered
  </div>
</div>

🌐 Mermaid Diagram (Position Flow)

graph TD
    A[Position Classes]
    B[Static]
    C[Relative]
    D[Absolute]
    E[Fixed]
    F[Sticky]

    A --> B
    A --> C
    A --> D
    A --> E
    A --> F

💡 Tip: Use position-relative on the parent when you want an absolutely positioned child to be aligned within it.

🌐 Overflow in Bootstrap

The overflow utility in Bootstrap is used to control how content is handled when it overflows its container.
It is based on the CSS overflow property.

🔹 Classes of Overflow

Class	Description
`.overflow-auto`	Adds scrollbars only when content overflows.
`.overflow-hidden`	Hides extra content that goes outside the container.
`.overflow-visible`	Default behavior; extra content is visible outside the container.
`.overflow-scroll`	Always adds scrollbars, regardless of content size.

🔹 Breakpoints

Bootstrap also supports responsive variations for overflow:

.overflow-sm-auto, .overflow-md-auto, .overflow-lg-auto, .overflow-xl-auto, .overflow-xxl-auto
Same for .overflow-hidden, .overflow-visible, .overflow-scroll.

⚡ Example Code

<div class="overflow-auto bg-light" style="height: 100px; width: 200px;">
  <p>
    This is a long text that will make the container scrollable when content overflows.
    Bootstrap overflow utilities help in managing this behavior.
  </p>
</div>

📊 Mermaid Diagram

graph TD
    A[Overflow Classes] --> B[overflow-auto]
    A --> C[overflow-hidden]
    A --> D[overflow-visible]
    A --> E[overflow-scroll]

💡 Tip: Use .overflow-auto for dynamic layouts where scrollbars should appear only when needed.

🎨 Background Classes in Bootstrap

Bootstrap provides background utility classes that help you quickly set the background color or gradient of elements using predefined styles.

🔹 Types of Background Classes

Class	Description
`.bg-primary`	Applies the primary theme color background.
`.bg-secondary`	Applies the secondary theme color background.
`.bg-success`	Green background, often used for success messages.
`.bg-danger`	Red background, used for errors or warnings.
`.bg-warning`	Yellow background, used for caution or alerts.
`.bg-info`	Light blue background, for information messages.
`.bg-light`	Light gray background.
`.bg-dark`	Dark background (black/gray).
`.bg-white`	Pure white background.
`.bg-transparent`	Transparent background.

🔹 Gradient Backgrounds

You can add gradients with the .bg-gradient class:

<div class="bg-primary bg-gradient text-white p-3">
  Gradient Background Example
</div>

⚡ Example Code

<div class="bg-success text-white p-3">Success Background</div>
<div class="bg-danger text-white p-3">Danger Background</div>
<div class="bg-warning text-dark p-3">Warning Background</div>

📊 Mermaid Diagram

graph TD
    A[Background Classes] --> B[.bg-primary]
    A --> C[.bg-secondary]
    A --> D[.bg-success]
    A --> E[.bg-danger]
    A --> F[.bg-warning]
    A --> G[.bg-info]
    A --> H[.bg-light]
    A --> I[.bg-dark]
    A --> J[.bg-white]
    A --> K[.bg-transparent]

💡 Tip: Use text color utilities like .text-white or .text-dark with background classes for better readability.

🌈 Background Gradient Classes in Bootstrap

Bootstrap provides gradient utilities that apply a smooth gradient effect to any background color class.
The gradients are added using the .bg-gradient class in combination with color utilities.

🔹 Syntax

<div class="bg-primary bg-gradient text-white p-3">
  Primary Gradient Background
</div>

🔹 Available Gradient Classes

Class Example	Description
`.bg-primary.bg-gradient`	Gradient with primary color
`.bg-secondary.bg-gradient`	Gradient with secondary color
`.bg-success.bg-gradient`	Gradient with success color
`.bg-danger.bg-gradient`	Gradient with danger color
`.bg-warning.bg-gradient`	Gradient with warning color
`.bg-info.bg-gradient`	Gradient with info color
`.bg-light.bg-gradient`	Gradient with light color
`.bg-dark.bg-gradient`	Gradient with dark color

⚡ Example Code

<div class="bg-success bg-gradient text-white p-3 mb-2">Success Gradient</div>
<div class="bg-danger bg-gradient text-white p-3 mb-2">Danger Gradient</div>
<div class="bg-warning bg-gradient text-dark p-3 mb-2">Warning Gradient</div>
<div class="bg-info bg-gradient text-white p-3 mb-2">Info Gradient</div>

📊 Mermaid Diagram

graph TD
    A[.bg-gradient] --> B[.bg-primary.bg-gradient]
    A --> C[.bg-secondary.bg-gradient]
    A --> D[.bg-success.bg-gradient]
    A --> E[.bg-danger.bg-gradient]
    A --> F[.bg-warning.bg-gradient]
    A --> G[.bg-info.bg-gradient]
    A --> H[.bg-light.bg-gradient]
    A --> I[.bg-dark.bg-gradient]

💡 Tip: Always combine .bg-gradient with a background color class. The gradient flows top-to-bottom by default.

🎨 Color Utility Classes in Bootstrap

Bootstrap provides text color utilities to quickly set the foreground (text) color of elements.
These classes make it easy to apply theme-based or contextual colors.

🔹 Standard Text Color Classes

Class	Description
`.text-primary`	Applies the primary theme color to text.
`.text-secondary`	Applies the secondary theme color.
`.text-success`	Green text for success messages.
`.text-danger`	Red text for error or danger.
`.text-warning`	Yellow text for warnings.
`.text-info`	Light blue text for informational content.
`.text-light`	Light gray text (use on dark backgrounds).
`.text-dark`	Dark gray/black text.
`.text-body`	Default body text color.
`.text-muted`	Muted (less visible) text.
`.text-white`	Pure white text.
`.text-black-50`	Black text with 50% opacity.
`.text-white-50`	White text with 50% opacity.

🔹 Background & Link Integration

Combine with background classes for readability:

<div class="bg-dark p-3">
  <p class="text-light">Light text on dark background</p>
</div>

Links also adapt to text color utilities using .link-* classes.

Example:

<a href="#" class="link-primary">Primary Link</a>
<a href="#" class="link-danger">Danger Link</a>

⚡ Example Code

<p class="text-primary">Primary Color Text</p>
<p class="text-success">Success Color Text</p>
<p class="text-danger">Danger Color Text</p>
<p class="text-warning">Warning Color Text</p>
<p class="text-info">Info Color Text</p>
<p class="text-muted">Muted Color Text</p>

📊 Mermaid Diagram

graph TD
    A[Text Color Classes] --> B[.text-primary]
    A --> C[.text-secondary]
    A --> D[.text-success]
    A --> E[.text-danger]
    A --> F[.text-warning]
    A --> G[.text-info]
    A --> H[.text-light]
    A --> I[.text-dark]
    A --> J[.text-body]
    A --> K[.text-muted]
    A --> L[.text-white]
    A --> M[.text-black-50]
    A --> N[.text-white-50]

💡 Tip: Always ensure enough contrast between text and background for accessibility.

🌈 Color Opacity Classes in Bootstrap

Bootstrap provides color opacity utilities that let you control the transparency of text colors.
These classes are based on CSS variables and can be applied to any text color utility (.text-*).

🔹 Syntax

.text-{color}-opacity-{value}

{color} → primary, secondary, success, danger, warning, info, dark, light, white, black
{value} → 25, 50, 75, 100 (percentage of visibility)

🔹 Available Classes

Class Example	Description
`.text-primary-opacity-25`	Primary text with 25% opacity
`.text-primary-opacity-50`	Primary text with 50% opacity
`.text-primary-opacity-75`	Primary text with 75% opacity
`.text-primary-opacity-100`	Primary text with full (100%) opacity
`.text-danger-opacity-50`	Danger text with 50% opacity
`.text-success-opacity-75`	Success text with 75% opacity
`.text-dark-opacity-25`	Dark text with 25% opacity
`.text-white-opacity-50`	White text with 50% opacity

⚡ Example Code

<p class="text-primary-opacity-25">Primary 25% Opacity</p>
<p class="text-primary-opacity-50">Primary 50% Opacity</p>
<p class="text-primary-opacity-75">Primary 75% Opacity</p>
<p class="text-primary-opacity-100">Primary 100% Opacity</p>

📊 Mermaid Diagram

graph TD
    A[Color Opacity Classes] --> B[.text-*-opacity-25]
    A --> C[.text-*-opacity-50]
    A --> D[.text-*-opacity-75]
    A --> E[.text-*-opacity-100]

💡 Tip: Combine opacity classes with background utilities for better contrast and accessibility.

🎨 Background Opacity Classes in Bootstrap

Bootstrap provides background opacity utilities that let you control the transparency of background colors.
These classes are useful when you want a semi-transparent background while keeping text fully visible.

🔹 Syntax

.bg-opacity-{value}

{value} → 10, 25, 50, 75, 100
Works with any background color like .bg-primary, .bg-success, .bg-danger, etc.

🔹 Available Classes

Class Example	Description
`.bg-opacity-10`	Background color with 10% opacity
`.bg-opacity-25`	Background color with 25% opacity
`.bg-opacity-50`	Background color with 50% opacity
`.bg-opacity-75`	Background color with 75% opacity
`.bg-opacity-100`	Background color with 100% (solid)

⚡ Example Code

<div class="bg-primary bg-opacity-25 text-dark p-3">Primary 25% Background</div>
<div class="bg-success bg-opacity-50 text-white p-3">Success 50% Background</div>
<div class="bg-danger bg-opacity-75 text-white p-3">Danger 75% Background</div>
<div class="bg-warning bg-opacity-100 text-dark p-3">Warning 100% Background</div>

📊 Mermaid Diagram

graph TD
    A[Background Opacity] --> B[.bg-opacity-10]
    A --> C[.bg-opacity-25]
    A --> D[.bg-opacity-50]
    A --> E[.bg-opacity-75]
    A --> F[.bg-opacity-100]

💡 Tip: Use .bg-opacity-* with contextual background classes for better design control (e.g., .bg-primary.bg-opacity-50).

🌐 How Opacity Works in CSS & Bootstrap

The opacity property in CSS (and Bootstrap utilities) controls the transparency level of an element.
It affects how much of the background or underlying content is visible through the element.

🔹 Opacity Values

The value ranges between 0 and 1 in CSS.
Bootstrap uses percentage-based classes like 25, 50, 75, 100.

CSS Value	Bootstrap Equivalent	Effect
`opacity: 0`	Not available (custom CSS)	Fully transparent
`opacity: 0.25`	`.bg-opacity-25` / `.text-primary-opacity-25`	25% visible
`opacity: 0.5`	`.bg-opacity-50` / `.text-primary-opacity-50`	50% visible
`opacity: 0.75`	`.bg-opacity-75` / `.text-primary-opacity-75`	75% visible
`opacity: 1`	`.bg-opacity-100` / `.text-primary-opacity-100`	Fully visible

⚡ Example Code

<!-- Background Opacity Example -->
<div class="bg-primary bg-opacity-25 text-dark p-3">25% Visible</div>
<div class="bg-primary bg-opacity-50 text-white p-3">50% Visible</div>
<div class="bg-primary bg-opacity-75 text-white p-3">75% Visible</div>
<div class="bg-primary bg-opacity-100 text-white p-3">100% Visible</div>

📊 Mermaid Diagram

graph LR
    A[Opacity] --> B[0 → Fully Transparent]
    A --> C[0.25 → 25% Visible]
    A --> D[0.5 → 50% Visible]
    A --> E[0.75 → 75% Visible]
    A --> F[1 → Fully Opaque]

🔎 Key Points

✅ opacity applies to the entire element (background, text, borders).
✅ Bootstrap’s .bg-opacity-* only adjusts the background layer, keeping text fully visible.
✅ Higher value = less transparent, lower value = more transparent.

💡 Tip: Use Bootstrap’s opacity utilities instead of raw CSS when working with components for consistent theming.

📝 Text Alignment Classes in Bootstrap

Bootstrap provides text alignment utility classes to align text horizontally within its container.
These are responsive, so you can control alignment at different breakpoints.

🔹 Syntax

.text-{alignment}-{breakpoint}

{alignment} → start, center, end
{breakpoint} → sm, md, lg, xl, xxl (optional)

🔹 Available Classes

Class	Description
`.text-start`	Aligns text to the left (LTR) / right (RTL).
`.text-center`	Centers the text horizontally.
`.text-end`	Aligns text to the right (LTR) / left (RTL).

🔹 Responsive Variations

You can use breakpoints to apply alignment only on specific screen sizes:

.text-sm-start, .text-sm-center, .text-sm-end
.text-md-start, .text-md-center, .text-md-end
.text-lg-start, .text-lg-center, .text-lg-end
.text-xl-start, .text-xl-center, .text-xl-end
.text-xxl-start, .text-xxl-center, .text-xxl-end

⚡ Example Code

<p class="text-start">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">Right aligned text</p>

<!-- Responsive Example -->
<p class="text-sm-center text-lg-end">Centered on small, Right on large</p>

📊 Mermaid Diagram

graph TD
    A[Text Alignment] --> B[.text-start]
    A --> C[.text-center]
    A --> D[.text-end]
    A --> E[Responsive Variants: sm, md, lg, xl, xxl]

💡 Tip: Use responsive text alignment classes for better control on different screen sizes.

🔡 Text Transform Classes in Bootstrap

Bootstrap provides text transform utility classes that let you control the capitalization of text.
These classes apply CSS text-transform property directly to your text.

🔹 Available Classes

Class	CSS Equivalent	Description
`.text-lowercase`	`text-transform: lowercase;`	Transforms all text to lowercase.
`.text-uppercase`	`text-transform: uppercase;`	Transforms all text to uppercase.
`.text-capitalize`	`text-transform: capitalize;`	Capitalizes the first letter of each word.

⚡ Example Code

<p class="text-lowercase">THIS WILL BECOME lowercase</p>
<p class="text-uppercase">this will become UPPERCASE</p>
<p class="text-capitalize">this will become Capitalized</p>

📊 Mermaid Diagram

graph TD
    A[Text Transform Classes] --> B[.text-lowercase]
    A --> C[.text-uppercase]
    A --> D[.text-capitalize]

🔎 Key Points

✅ Works on inline, block, and heading text.
✅ Does not change the original text content, only its visual display.
✅ Useful for headings, buttons, and styled text.

💡 Tip: Use .text-uppercase for buttons and labels to make them stand out.

🔤 Breakpoints of Text Transform Classes

Bootstrap provides text transform classes to change the capitalization of text. These classes can also be applied with breakpoints for responsive design.

📌 Available Text Transform Classes

text-lowercase → makes all text lowercase
text-uppercase → makes all text uppercase
text-capitalize → capitalizes the first letter of each word

📐 Breakpoint Variations

You can use responsive prefixes (sm, md, lg, xl, xxl) to apply these classes at different screen sizes.

Class Pattern	Example	Screen Size Applied
`text-{breakpoint}-lowercase`	`text-md-lowercase`	From `md` and above
`text-{breakpoint}-uppercase`	`text-lg-uppercase`	From `lg` and above
`text-{breakpoint}-capitalize`	`text-xl-capitalize`	From `xl` and above

💻 Example Code

<p class="text-sm-uppercase">This text is uppercase from small devices and above.</p>
<p class="text-md-lowercase">This text is lowercase from medium devices and above.</p>
<p class="text-lg-capitalize">This text is capitalized from large devices and above.</p>

Block Digram

graph LR;
    A[Extra Small <576px]:::blue -->|text-xs-*| B[Small ≥576px]:::green
    B -->|text-sm-*| C[Medium ≥768px]:::orange
    C -->|text-md-*| D[Large ≥992px]:::red
    D -->|text-lg-*| E[X-Large ≥1200px]:::purple
    E -->|text-xl-*| F[XX-Large ≥1400px]:::pink

classDef blue fill:#007bff,color:#fff;
classDef green fill:#28a745,color:#fff;
classDef orange fill:#fd7e14,color:#fff;
classDef red fill:#dc3545,color:#fff;
classDef purple fill:#6f42c1,color:#fff;
classDef pink fill:#d63384,color:#fff;

📝 Text Wrapping and Overflow Classes in Bootstrap

In Bootstrap, text wrapping and overflow classes help control how content behaves inside containers. They ensure that text and elements remain readable and properly contained in responsive layouts.

🔹 Text Wrapping Classes

Class	Description
`text-wrap`	Allows long text to wrap to the next line.
`text-nowrap`	Keeps text on a single line, preventing wrapping.

Example:

<p class="text-wrap">This long text will wrap to the next line automatically.</p>
<p class="text-nowrap">This text will stay in a single line and may overflow.</p>

⚡ Overflow Classes in Bootstrap

Class	Description
`overflow-auto`	Adds scrollbars if content exceeds container size.
`overflow-hidden`	Hides overflowing content.
`overflow-visible`	Shows all content, even if it overflows.
`overflow-scroll`	Always shows scrollbars, regardless of content size.

graph TD;
    A[Text & Overflow Classes]:::blue --> B[Text Wrapping]:::green
    A --> C[Overflow Classes]:::orange
    B --> D[text-wrap / text-nowrap]:::purple
    C --> E[overflow-auto / overflow-hidden / overflow-visible / overflow-scroll]:::red

classDef blue fill:#3498db,color:#fff,stroke:#2c3e50;
classDef green fill:#2ecc71,color:#fff,stroke:#27ae60;
classDef orange fill:#e67e22,color:#fff,stroke:#d35400;
classDef purple fill:#9b59b6,color:#fff,stroke:#8e44ad;
classDef red fill:#e74c3c,color:#fff,stroke:#c0392b;

🔠 Font Size Classes in Bootstrap

In Bootstrap, font size classes are utility classes that allow you to quickly adjust the size of text without writing custom CSS. They are useful for headings, paragraphs, and small labels, ensuring consistent and responsive typography.

🔹 Font Size Classes

Class	Size Description
`fs-1`	Extra large text
`fs-2`	Large text
`fs-3`	Medium-large text
`fs-4`	Medium text
`fs-5`	Small-medium text
`fs-6`	Small text

🧑‍💻 Example

<!-- Copy Code 👇 -->
<p class="fs-1">This is extra large text (fs-1)</p>
<p class="fs-3">This is medium-large text (fs-3)</p>
<p class="fs-6">This is small text (fs-6)</p>

🌐 Font Size Classes Diagram

graph TD;
    A[Font Size Classes]:::blue --> B[fs-1]:::green
    A --> C[fs-2]:::green
    A --> D[fs-3]:::green
    A --> E[fs-4]:::green
    A --> F[fs-5]:::green
    A --> G[fs-6]:::green

    B --> H[Extra Large Text]
    C --> I[Large Text]
    D --> J[Medium-Large Text]
    E --> K[Medium Text]
    F --> L[Small-Medium Text]

🅰️ Font Weight Classes in Bootstrap

In Bootstrap, font weight classes are utility classes used to adjust the thickness (boldness) of text. These classes help make text light, normal, or bold without writing custom CSS.

🔹 Font Weight Classes

Class	Description
`fw-light`	Light text weight
`fw-normal`	Normal (default) text weight
`fw-semibold`	Semi-bold text weight
`fw-bold`	Bold text weight

🧑‍💻 Example

<p class="fw-light">This is light text (fw-light)</p>
<p class="fw-normal">This is normal text (fw-normal)</p>
<p class="fw-semibold">This is semi-bold text (fw-semibold)</p>
<p class="fw-bold">This is bold text (fw-bold)</p>

graph TD;
    A[Font Weight Classes]:::blue --> B[fw-light]:::green
    A --> C[fw-normal]:::green
    A --> D[fw-semibold]:::green
    A --> E[fw-bold]:::green

    B --> F[Light Text]
    C --> G[Normal Text]
    D --> H[Semi-Bold Text]
    E --> I[Bold Text]

classDef blue fill:#3498db,color:#fff,stroke:#2c3e50;
classDef green fill:#2ecc71,color:#fff,stroke:#27ae60;

🎨 Font Style Classes in Bootstrap

In Bootstrap, font style classes are utility classes used to change the style of text, mainly to make it italic or normal without writing custom CSS.

🔹 Font Style Classes

Class	Description
`fst-italic`	Makes text italic
`fst-normal`	Sets text back to normal style

🧑‍💻 Example

<p class="fst-italic">This text is italic (fst-italic)</p>
<p class="fst-normal">This text is normal (fst-normal)</p>

graph TD;
    A[Font Style Classes]:::blue --> B[fst-italic]:::green
    A --> C[fst-normal]:::green

    B --> D[Italic Text]
    C --> E[Normal Text]

classDef blue fill:#3498db,color:#fff,stroke:#2c3e50;
classDef green fill:#2ecc71,color:#fff,stroke:#27ae60;

📏 Line Height Classes in Bootstrap

In Bootstrap, line-height classes control the vertical spacing between lines of text. These classes make text more readable and visually balanced.

🔹 Line Height Classes

Class	Description
`lh-1`	Line height = 1 (tight)
`lh-sm`	Smaller line height
`lh-base`	Default line height
`lh-lg`	Larger line height
`lh-100`	Line height = 1 (numeric)
`lh-125`	Line height = 1.25
`lh-150`	Line height = 1.5

🧑‍💻 Example

<p class="lh-1">Tight line height example (lh-1)</p>
<p class="lh-base">Default line height example (lh-base)</p>
<p class="lh-lg">Large line height example (lh-lg)</p>

graph TD;
    A[Line Height Classes]:::blue --> B[lh-1]:::green
    A --> C[lh-sm]:::green
    A --> D[lh-base]:::green
    A --> E[lh-lg]:::green
    A --> F[lh-100 / lh-125 / lh-150]:::green

    B --> G[Tight Line Height]
    C --> H[Small Line Height]
    D --> I[Default Line Height]
    E --> J[Large Line Height]
    F --> K[Numeric Line Heights]

classDef blue fill:#3498db,color:#fff,stroke:#2c3e50;
classDef green fill:#2ecc71,color:#fff,stroke:#27ae60;

✨ Text Decoration Classes in Bootstrap

In Bootstrap, text decoration classes are utility classes used to add or remove decorations like underline, line-through, or overline on text. These classes help style text quickly without custom CSS.

🔹 Text Decoration Classes

Class	Description
`text-decoration-none`	Removes all text decorations (no underline)
`text-decoration-underline`	Adds underline to text
`text-decoration-line-through`	Adds line-through (strikethrough)
`text-decoration-overline`	Adds overline above text

🧑‍💻 Example

<p class="text-decoration-none">No decoration text</p>
<p class="text-decoration-underline">Underlined text</p>
<p class="text-decoration-line-through">Strikethrough text</p>
<p class="text-decoration-overline">Overlined text</p>

graph TD;
    A[Text Decoration Classes]:::blue --> B[text-decoration-none]:::green
    A --> C[text-decoration-underline]:::green
    A --> D[text-decoration-line-through]:::green
    A --> E[text-decoration-overline]:::green

    B --> F[No Decoration]
    C --> G[Underline]
    D --> H[Line-Through / Strikethrough]
    E --> I[Overline]

classDef blue fill:#3498db,color:#fff,stroke:#2c3e50;
classDef green fill:#2ecc71,color:#fff,stroke:#27ae60;

📝 Text Heading Classes in Bootstrap

In Bootstrap, text heading classes are utility classes used to style headings and text sizes without writing custom CSS. They help maintain consistent typography for headings (h1–h6) and other text elements.

🔹 Heading Classes

Class	Description
`h1`	Largest heading
`h2`	Second largest heading
`h3`	Medium-large heading
`h4`	Medium heading
`h5`	Small-medium heading
`h6`	Smallest heading
`display-1`	Very large display heading
`display-2`	Large display heading
`display-3`	Medium display heading
`display-4`	Small display heading

🧑‍💻 Example

<h1 class="h1">Heading 1</h1>
<h3 class="h3">Heading 3</h3>
<h5 class="h5">Heading 5</h5>
<p class="display-1">Display 1 Text</p>
<p class="display-4">Display 4 Text</p>

graph TD;
    A[Text Heading Classes]:::blue --> B[h1 / h2 / h3 / h4 / h5 / h6]:::green
    A --> C[display-1 / display-2 / display-3 / display-4]:::orange

    B --> D[Standard Headings]
    C --> E[Large Display Headings]

classDef blue fill:#3498db,color:#fff,stroke:#2c3e50;
classDef green fill:#2ecc71,color:#fff,stroke:#27ae60;
classDef orange fill:#e67e22,color:#fff,stroke:#d35400;

📖 Lead Classes in Bootstrap

In Bootstrap, the lead class is used to highlight important paragraphs by making the text slightly larger and lighter in weight. It helps create a visual emphasis for introductions, summaries, or key information in a section.

🔹 Purpose of `lead` Class

✅ Makes text stand out from normal paragraphs.
✅ Used for introductory or summary text.
✅ Enhances readability and focus.
✅ Provides professional design consistency.

🧑‍💻 Example

<p class="lead">
  This is an example of lead text. It is slightly larger and more noticeable.
</p>

<p>
  This is normal paragraph text. It appears smaller and less emphasized.
</p>

graph TD;
    A[Bootstrap Text Classes]:::blue --> B[lead Class]:::green
    B --> C[Highlight Important Text]:::orange
    B --> D[Introductory Paragraphs]:::orange
    B --> E[Summaries & Key Notes]:::orange

classDef blue fill:#3498db,color:#fff,stroke:#2c3e50;
classDef green fill:#2ecc71,color:#fff,stroke:#27ae60;
classDef orange fill:#f39c12,color:#fff,stroke:#d35400;

📋 List Style Classes in Bootstrap

In Bootstrap, list style classes are utility classes used to control how lists are displayed. They help in removing default bullets/numbers, making lists inline, or unstyled for better customization.

🔹 List Style Classes

Class	Description
`list-unstyled`	Removes default list styles (no bullets/numbers) but keeps indentation.
`list-inline`	Displays list items horizontally (inline).
`list-inline-item`	Used inside `list-inline` to make each `<li>` inline.

🧑‍💻 Example

<!-- Unstyled List -->
<ul class="list-unstyled">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

<!-- Inline List -->
<ul class="list-inline">
  <li class="list-inline-item">Home</li>
  <li class="list-inline-item">About</li>
  <li class="list-inline-item">Contact</li>
</ul>

graph TD;
    A[List Style Classes]:::blue --> B[list-unstyled]:::green
    A --> C[list-inline]:::orange
    C --> D[list-inline-item]:::purple

    B --> E[Removes Bullets/Numbers]
    C --> F[Displays List Items Inline]
    D --> G[Applies Inline Style to <li>]

classDef blue fill:#3498db,color:#fff,stroke:#2c3e50;
classDef green fill:#2ecc71,color:#fff,stroke:#27ae60;
classDef orange fill:#e67e22,color:#fff,stroke:#d35400;
classDef purple fill:#9b59b6,color:#fff,stroke:#8e44ad;

💬 Blockquote Classes in Bootstrap

In Bootstrap, blockquote classes are used to style quoted content. They make quotes visually distinct with proper alignment, font styling, and citation formatting.

🔹 Blockquote Classes

Class	Description
`blockquote`	Applies default blockquote styling (larger font, margins).
`blockquote-footer`	Used for citation/author name below the quote.
`text-center`	Centers the quote text.
`text-end`	Right-aligns the quote text.

🧑‍💻 Example

<blockquote class="blockquote">
  <p>
    "The only way to do great work is to love what you do."
  </p>
  <footer class="blockquote-footer">
    Steve Jobs
  </footer>
</blockquote>

<!-- Center Aligned -->
<blockquote class="blockquote text-center">
  <p>
    "Success is not the key to happiness. Happiness is the key to success."
  </p>
  <footer class="blockquote-footer">
    Albert Schweitzer
  </footer>
</blockquote>

graph TD;
    A[Blockquote Classes]:::blue --> B[blockquote]:::green
    A --> C[blockquote-footer]:::orange
    A --> D[text-center / text-end]:::purple

    B --> E[Styles Quoted Text]
    C --> F[Adds Citation/Author]
    D --> G[Aligns Quote Text]

classDef blue fill:#3498db,color:#fff,stroke:#2c3e50;
classDef green fill:#2ecc71,color:#fff,stroke:#27ae60;
classDef orange fill:#e67e22,color:#fff,stroke:#d35400;
classDef purple fill:#9b59b6,color:#fff,stroke:#8e44ad;

🔘 Button Classes in Bootstrap

Bootstrap provides predefined button classes to style buttons with different colors, sizes, and states. These classes make it easy to create consistent and responsive buttons without writing custom CSS.

✅ Common Button Classes

Class	Description
`btn`	Base button class (must be included)
`btn-primary`	Blue button – main action
`btn-secondary`	Gray button – secondary action
`btn-success`	Green button – success action
`btn-danger`	Red button – danger action
`btn-warning`	Yellow button – warning
`btn-info`	Light blue button – info
`btn-light`	White/light button
`btn-dark`	Black/dark button
`btn-link`	Styled as hyperlink

📏 Button Sizes

Class	Description
`btn-lg`	Large button
`btn-sm`	Small button
`btn-block`	Full-width button

💻 Code Example

💡 Tip: Always start with btn and then add a modifier class like btn-primary.

<!-- Copy Code 👇 -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success btn-lg">Large Success</button>
<button class="btn btn-danger btn-sm">Small Danger</button>
<button class="btn btn-warning btn-block">Full Width Warning</button>

graph TD;
    A[btn] --> B[btn-primary]
    A[btn] --> C[btn-secondary]
    A[btn] --> D[btn-success]
    A[btn] --> E[btn-danger]
    A[btn] --> F[btn-warning]
    A[btn] --> G[btn-info]
    A[btn] --> H[btn-light]
    A[btn] --> I[btn-dark]
    A[btn] --> J[btn-link]

🔳 Outline Button Classes in Bootstrap

Outline button classes in Bootstrap create buttons with only a border color and transparent background.
They look lighter and are useful for secondary actions or when you don’t want solid color buttons.

✅ Key Features

Use btn-outline-* instead of btn-*.
Same color variants as normal buttons.
Become filled automatically when hovered or clicked.
Can be used with all sizes (btn-lg, btn-sm) and shapes (btn-block).

📊 Outline Button Variants

Class	Description
`btn-outline-primary`	Blue border, transparent background
`btn-outline-secondary`	Gray border
`btn-outline-success`	Green border
`btn-outline-danger`	Red border
`btn-outline-warning`	Yellow border
`btn-outline-info`	Light blue border
`btn-outline-light`	White/light border
`btn-outline-dark`	Black/dark border

💻 Code Example

<!-- Copy Code 👇 -->
<button type="button" class="btn btn-outline-primary">Primary Outline</button>
<button type="button" class="btn btn-outline-success btn-lg">Large Success</button>
<button type="button" class="btn btn-outline-danger btn-sm">Small Danger</button>
<button type="button" class="btn btn-outline-dark btn-block">Full Width Dark</button>

graph TD;
    A[btn-outline-*] --> B[btn-outline-primary]
    A --> C[btn-outline-success]
    A --> D[btn-outline-danger]
    A --> E[btn-outline-warning]
    A --> F[btn-outline-info]
    A --> G[btn-outline-light]
    A --> H[btn-outline-dark]

🔘 Active & Disabled Button Classes in Bootstrap 5

Bootstrap 5 provides active and disabled classes to indicate different states of a button.
These states improve user interaction and UI feedback.

✅ 1. Active Class (`.active`)

Adds a pressed/selected look to a button.
Often used for toggle buttons or navigation.
Can be applied with .active class or aria-pressed="true".

💻 Example

<!-- Copy Code 👇 -->
<button type="button" class="btn btn-primary active" aria-pressed="true">
  Active Button
</button>

✅ 1. Disabled Class (`.disabled`)

✅ Key Features

Adds faded/greyed-out look.
Prevents click events for <button> and <input>.
For <a> links, you must use both .disabled and tabindex="-1" with aria-disabled="true" to make it truly non-interactive.
Works with all button styles (btn-primary, btn-success, etc.).

💻 Code Examples

1. Disabled Button

<!-- Copy Code 👇 -->
<button type="button" class="btn btn-primary disabled" disabled>
  Disabled Button
</button>

graph TD;
    A[Button States] --> B[Active]
    A --> C[Disabled]
    B --> D[.active + aria-pressed=true]
    C --> E[.disabled Class]
    C --> F[disabled Attribute]

👥 Bootstrap Grouping Classes

In Bootstrap, grouping classes are used to combine multiple elements (like buttons, inputs, or form controls) into a single grouped unit.
They help in creating organized layouts where related items stay together and look consistent.

✅ Key Types of Grouping Classes

1. Button Groups (`.btn-group`)

Groups multiple buttons on a single line.
Can be horizontal or vertical (.btn-group-vertical).

<!-- Copy Code 👇 -->
<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

graph TD;
    A[Bootstrap Grouping Classes] --> B[Button Group]
    A --> C[Vertical Button Group]
    A --> D[Input Group]

🔘 Button Group Size Classes in Bootstrap

In Bootstrap, button groups can be resized using size modifier classes.
These classes adjust the height and padding of all buttons inside a group, making them larger or smaller.

✅ Available Button Group Size Classes

Class	Description
`.btn-group-lg`	Creates a large button group
`.btn-group-sm`	Creates a small button group
`.btn-group`	Default medium size (no extra class)

💻 Code Examples

1. Large Button Group

<!-- Copy Code 👇 -->
<div class="btn-group btn-group-lg" role="group">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

1. Small Button Group

<!-- Copy Code 👇 -->
<div class="btn-group btn-group-sm" role="group">
  <button type="button" class="btn btn-success">Yes</button>
  <button type="button" class="btn btn-danger">No</button>
</div>

graph TD;
    A[Button Group Sizes] --> B[btn-group-lg]
    A --> C[btn-group &#40;default&#41;]
    A --> D[btn-group-sm]

🛠️ Button Group Toolbar Classes in Bootstrap

In Bootstrap, a button toolbar is used to group multiple button groups together on a single line.
It helps create toolbars with multiple actions without overlapping buttons.

✅ Key Features

Use .btn-toolbar as the container for button groups.
Place multiple .btn-group inside the toolbar.
Use role="toolbar" and aria-label for accessibility.
Supports sizes like .btn-group-lg or .btn-group-sm.

💻 Code Example

<!-- Copy Code 👇 -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar example">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-success">A</button>
    <button type="button" class="btn btn-success">B</button>
  </div>
</div>

graph TD;
    A[btn-toolbar] --> B[btn-group 1]
    A --> C[btn-group 2]
    B --> D[Button 1]
    B --> E[Button 2]
    B --> F[Button 3]
    C --> G[Button A]
    C --> H[Button B]

🔽 Vertical Button Group Classes in Bootstrap

In Bootstrap, vertical button groups stack buttons vertically instead of horizontally.
This is useful for sidebars, menus, or tool panels where vertical alignment is needed.

✅ Key Features

Use .btn-group-vertical instead of .btn-group.
Supports all button sizes (.btn-lg, .btn-sm).
Can include buttons, dropdowns, or mixed elements.
Works inside toolbars for complex layouts.

💻 Code Example

<!-- Copy Code 👇 -->
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">Top</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Bottom</button>
</div>

LargeBtn Example

<div class="btn-group-vertical btn-group-lg" role="group">
  <button type="button" class="btn btn-success">Large 1</button>
  <button type="button" class="btn btn-success">Large 2</button>
</div>

graph TD;
    A[btn-group-vertical] --> B[Button Top]
    A --> C[Button Middle]
    A --> D[Button Bottom]

🧩 Button Group Nesting Classes in Bootstrap

In Bootstrap, nesting button groups allows you to combine multiple button groups inside a single parent group.
This is useful for creating complex toolbars, dropdowns, or multi-level actions.

✅ Key Features

Use .btn-group inside another .btn-group to nest buttons.
Can include dropdowns or additional buttons.
Maintains consistent spacing with .me-2 or .ms-2.
Works with vertical or horizontal button groups.

💻 Code Example

<!-- Copy Code 👇 -->
<div class="btn-group" role="group" aria-label="Nested button group">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
</div>

graph TD;
    A[Outer btn-group] --> B[Button 1]
    A --> C[Button 2]
    A --> D[Inner btn-group]
    D --> E[Button 3]
    D --> F[Button 4]

☑️ Button Checkbox Grouping in Bootstrap

Button checkbox grouping in Bootstrap allows you to create a group of buttons that behave like checkboxes.
Users can toggle multiple buttons on or off, and the state is visually highlighted.
This is useful for filters, options selection, or multi-choice controls.

✅ Key Features

Buttons use .btn and .active classes to show selection.
Wrap buttons inside .btn-group or .btn-toolbar.
Each button uses data-bs-toggle="button" to enable toggle behavior.
Multiple buttons can be selected simultaneously (checkbox behavior).

💻 Code Example

<!-- Copy Code 👇 -->
<div class="btn-group" role="group" aria-label="Checkbox button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Option 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Option 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Option 3</label>
</div>

graph TD;
    A[Button Checkbox Group] --> B[Option 1]
    A --> C[Option 2]
    A --> D[Option 3]
    B --> E[btn-check + label]
    C --> F[btn-check + label]
    D --> G[btn-check + label]

🔘 Button Radio Grouping in Bootstrap

Button radio grouping in Bootstrap allows you to create a group of buttons that behave like radio buttons.
Users can select only one option at a time, and the active button is visually highlighted.
This is ideal for single-choice selections like gender, payment methods, or filter options.

✅ Key Features

Buttons use .btn and .active classes to show selection.
Wrap buttons inside .btn-group or .btn-toolbar.
Each button uses type="radio" and the same name attribute for single-selection behavior.
Only one button in the group can be active at a time.

💻 Code Example

<!-- Copy Code 👇 -->
<div class="btn-group" role="group" aria-label="Radio button group">
  <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="option1">Option 1</label>

  <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
  <label class="btn btn-outline-primary" for="option2">Option 2</label>

  <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off">
  <label class="btn btn-outline-primary" for="option3">Option 3</label>
</div>

graph TD;
    A[Button Radio Group] --> B[Option 1]
    A --> C[Option 2]
    A --> D[Option 3]
    B --> E[btn-check + label]
    C --> F[btn-check + label]
    D --> G[btn-check + label]

🔽 Vertical Button Grouping in Bootstrap

In Bootstrap, vertical button grouping allows you to stack buttons vertically instead of horizontally.
This layout is useful for sidebars, menus, filters, or vertical tool panels, especially when horizontal space is limited.

✅ Key Features

Use .btn-group-vertical to create a vertical stack of buttons.
Works with normal, outline, checkbox, and radio buttons.
Supports all sizes (.btn-group-lg, .btn-group-sm).
Can be nested or included in toolbars for complex layouts.

💻 Code Example

<!-- Copy Code 👇 -->
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">Button 1</button>
  <button type="button" class="btn btn-primary">Button 2</button>
  <button type="button" class="btn btn-primary">Button 3</button>
</div>

💻 Code Example

<div class="btn-group-vertical" role="group" aria-label="Vertical radio group">
  <input type="radio" class="btn-check" name="options" id="voption1" autocomplete="off" checked>
  <label class="btn btn-outline-success" for="voption1">Option 1</label>

  <input type="radio" class="btn-check" name="options" id="voption2" autocomplete="off">
  <label class="btn btn-outline-success" for="voption2">Option 2</label>
</div>

graph TD;
    A[Vertical Button Group] --> B[Button 1]
    A --> C[Button 2]
    A --> D[Button 3]

📋 List Grouping in Bootstrap 5

List groups in Bootstrap 5 are used to display vertical lists of content in a flexible and styled way.
They are commonly used for menus, links, items, or groupings of text.

✅ Key Features

Provides consistent styling for list items.
Supports active, disabled, and flush styles.
Can contain links, buttons, or custom content.
Easy to customize with borders, colors, and badges.

🔹 Basic List Group

<!-- Copy Code 👇 -->
<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

graph TD;
    A[List Group] --> B[Item 1]
    A --> C[Item 2]
    A --> D[Item 3]
    B --> E[Active / Disabled / Link]
    C --> E
    D --> E

✅ Active List Item Grouping in Bootstrap 5

In Bootstrap 5, an active list item highlights a specific item in a list group to indicate current selection or focus.
It is commonly used for menus, navigation, or multi-step processes to show the user which item is active.

✅ Key Features

Add the .active class to a list item.
Can be used on <li> or <a> elements inside a .list-group.
Works with links, buttons, or plain items.
Automatically gives a highlighted background and text color.

💻 Code Example

Active Item in Plain List

<!-- Copy Code 👇 -->
<ul class="list-group">
  <li class="list-group-item active">Active Item</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

graph TD;
    A[List Group] --> B[Active Item]
    A --> C[Item 2]
    A --> D[Item 3]
    B --> E[.active class applied]

🧼 Flush List Group in Bootstrap 5

A flush list group in Bootstrap 5 removes the borders, rounded corners, and spacing from a standard list group.
It allows the list items to align seamlessly with the parent container, creating a clean, minimal look.

✅ Key Features

Use the .list-group-flush class on the .list-group container.
Works with <li> or <a> elements inside the list group.
Items stretch edge-to-edge, removing extra padding and borders.
Commonly used in cards or compact layouts.

💻 Code Example

<!-- Copy Code 👇 -->
<ul class="list-group list-group-flush">
  <li class="list-group-item">Flush Item 1</li>
  <li class="list-group-item">Flush Item 2</li>
  <li class="list-group-item">Flush Item 3</li>
</ul>

graph TD;
    A[Flush List Group] --> B[Flush Item 1]
    A --> C[Flush Item 2]
    A --> D[Flush Item 3]

🔢 Numbered List Grouping in Bootstrap 5

Numbered list grouping in Bootstrap 5 is used to display list items in a sequential, ordered format.
It combines the <ol> HTML element with Bootstrap's list-group classes for a styled and organized numbered list.

✅ Key Features

Uses <ol> instead of <ul> to create numbered items.
Apply .list-group to the container and .list-group-item to each item.
Supports active and disabled states.
Can be used for steps, tasks, rankings, or ordered instructions.

💻 Code Example

<!-- Copy Code 👇 -->
<ol class="list-group list-group-numbered">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ol>

graph TD;
    A[Numbered List Group] --> B[1. First item]
    A --> C[2. Second item]
    A --> D[3. Third item]
    B --> E[Active or Normal State]

↔️ Horizontal List Grouping in Bootstrap 5

Horizontal list grouping in Bootstrap 5 allows list items to be displayed side by side horizontally instead of the default vertical stack.
It is useful for navigation menus, tabs, or compact layouts where horizontal space is preferred.

✅ Key Features

Use .list-group-horizontal on the .list-group container.
Can be responsive using .list-group-horizontal-sm, -md, -lg, -xl, or -xxl.
Works with <ul> or <div> elements.
Supports active, disabled, and flush styles.

💻 Code Example

Basic Horizontal List

<!-- Copy Code 👇 -->
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

graph LR;
    A[Horizontal List Group] --> B[Item 1]
    A --> C[Item 2]
    A --> D[Item 3]

🎨 Variants Grouping List in Bootstrap 5

Variant list grouping in Bootstrap 5 allows you to apply different contextual colors to individual list items.
This is useful for highlighting status, priorities, categories, or alerts in your lists.

✅ Key Features

Add contextual classes like .list-group-item-primary, .list-group-item-success, .list-group-item-danger, etc.
Can be used with active, disabled, flush, or horizontal lists.
Provides visual feedback for different item types or statuses.

💻 Code Example

<!-- Copy Code 👇 -->
<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Primary Item</li>
  <li class="list-group-item list-group-item-success">Success Item</li>
  <li class="list-group-item list-group-item-warning">Warning Item</li>
  <li class="list-group-item list-group-item-danger">Danger Item</li>
  <li class="list-group-item list-group-item-info">Info Item</li>
  <li class="list-group-item list-group-item-light">Light Item</li>
  <li class="list-group-item list-group-item-dark">Dark Item</li>
</ul>

graph TD;
    A[Variant List Group] --> B[Primary Item]
    A --> C[Success Item]
    A --> D[Warning Item]
    A --> E[Danger Item]
    A --> F[Info Item]
    A --> G[Light Item]
    A --> H[Dark Item]

📋 What is Table in Bootstrap?

In Bootstrap 5, a table is a built-in component used to display data in a structured row and column format.
It provides predefined classes for styling, spacing, and responsiveness without writing custom CSS.

✅ Key Features

🧩 Ready-to-use table styles
🎨 Alternating row colors using .table-striped
🕶️ Hover effect with .table-hover
📱 Responsive layout with .table-responsive
🌈 Dark and light theme support

💻 Code Example

<!-- Copy Code 👇 -->
<div class="table-responsive">
  <table class="table table-striped table-hover table-bordered">
    <thead class="table-dark">
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Preetam</td>
        <td>preetam@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

graph TD
    A[Bootstrap Table] --> B[table-striped 🎨]
    A --> C[table-hover 🖱️]
    A --> D[table-bordered 📏]
    A --> E[table-responsive 📱]

🖱️ What is Table Hoverable Row Classes in Bootstrap?

In Bootstrap 5, the hoverable row class is used to highlight a table row when the mouse pointer moves over it.
This effect is applied using the class .table-hover. It improves user interaction and readability, especially in data tables.

✅ Key Features

🖱️ Highlights rows on mouse hover
🎨 Works with striped, bordered, or dark tables
📱 Fully responsive and mobile-friendly
🔧 Easy to apply — just one class

💻 Example Code

<!-- Copy Code 👇 -->
<table class="table table-hover">
  <thead class="table-dark">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Preetam</td>
      <td>Developer</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Shubhangi</td>
      <td>Designer</td>
    </tr>
  </tbody>
</table>

graph TD
    A[Bootstrap Table] --> B[.table 🎯 Base Table]
    A --> C[.table-hover 🖱️ Hover Effect]
    C --> D[User Hovers Over Row 💡]
    D --> E[Row Background Changes ✨]

🌟 What is Table Active Classes in Bootstrap?

In Bootstrap 5, the .table-active class is used to highlight a specific table row or cell to show that it is selected or active.
It gives a light gray background (or darker shade in dark mode) to make the active row stand out from others.

✅ Key Features

🌟 Highlights a selected or active row/cell
🎨 Works with .table, .table-hover, .table-striped
🕶️ Supports both light and dark themes
🧩 Simple and easy to apply

💻 Example Code

<!-- Copy Code 👇 -->
<table class="table table-hover table-striped">
  <thead class="table-dark">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-active">
      <td>1</td>
      <td>Preetam</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Shubhangi</td>
      <td>Inactive</td>
    </tr>
  </tbody>
</table>

graph TD
    A[Bootstrap Table] --> B[.table 🎯 Base Class]
    A --> C[.table-hover 🖱️ Hover Rows]
    A --> D[.table-active 🌟 Active Row]
    D --> E[Visually Highlighted Row ✨]

📏 Table Border Classes in Bootstrap

In Bootstrap 5, table border classes are used to add or remove borders around the table and its cells.
They help make tables more organized, improving the visibility of rows and columns.

✅ Key Features

📏 Adds or removes borders for better table layout
🎨 Works with all table types (striped, hover, dark)
⚙️ Easy customization using simple classes
📱 Fully responsive and mobile-friendly

💻 Example Code

<!-- Copy Code 👇 -->
<h5>Bordered Table</h5>
<table class="table table-bordered">
  <thead class="table-dark">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Preetam</td>
      <td>Jaipur</td>
    </tr>
  </tbody>
</table>

<h5>Borderless Table</h5>
<table class="table table-borderless">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2</td>
      <td>Shubhangi</td>
      <td>Pune</td>
    </tr>
  </tbody>
</table>

graph TD
    A[Bootstrap Table] --> B[.table-bordered 📏 Adds Borders]
    A --> C[.table-borderless 🚫 Removes Borders]
    B --> D[Clear Data Separation ✨]
    C --> E[Simple & Clean Design 🧩]

🚫 Table Without Border in Bootstrap

In Bootstrap 5, a table without borders is created using the class .table-borderless.
This class removes all the borders from the table cells, giving it a clean and minimal design.
It’s often used when borders are not needed, such as in reports or layout tables.

✅ Key Features

🚫 Removes borders from all table cells
🎨 Creates a modern and minimal layout
💻 Works with other classes like .table-hover and .table-striped
📱 Fully responsive and easy to use

💻 Example Code

<!-- Copy Code 👇 -->
<table class="table table-borderless">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Preetam</td>
      <td>Jaipur</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Shubhangi</td>
      <td>Pune</td>
    </tr>
  </tbody>
</table>

graph TD
    A[Bootstrap Table] --> B[.table 🎯 Base Table]
    A --> C[.table-borderless 🚫 No Borders]
    C --> D[Minimal & Clean Look ✨]

📘 Small Table Classes in Bootstrap

Definition:
Bootstrap provides a class to make tables smaller and more compact by reducing the padding inside table cells. It helps display large data in a limited space clearly.

✅ Class

Class Name	Description
`.table-sm`	Makes the table compact by reducing cell padding.

💻 Example

<table class="table table-sm">
  <thead>
    <tr>
      <th>Name</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Preetam</td>
      <td>Jaipur</td>
    </tr>
  </tbody>
</table>

graph TD
    A[Bootstrap Table] --> B[.table 🎯 Base Table]
    A --> C[.table-sm 📏 Small Table]
    C --> D[Reduced Padding ✂️]
    D --> E[Compact & Neat Look ✨]

🏷️ Table Head Classes in Bootstrap

In Bootstrap 5, the .table-dark or .table-light classes can be used to style the table header (<thead>).
This allows you to make table headers stand out with different background colors for better readability.

✅ Key Features

🎨 Highlights table headers
🌈 Provides light or dark header themes
📱 Works with all table types (striped, hover, bordered)
⚡ Easy to apply using .table-dark or .table-light

💻 Example Code

<table class="table">
  <thead class="table-dark">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Preetam</td>
      <td>Jaipur</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Shubhangi</td>
      <td>Pune</td>
    </tr>
  </tbody>
</table>

graph TD
    A[Bootstrap Table] --> B[.table 🎯 Base Table]
    A --> C[<thead> Table Header 📌]
    C --> D[.table-dark 🌑 Dark Header]
    C --> E[.table-light 🌕 Light Header]
    D --> F[Header Highlighted ✨]
    E --> F

🏁 Table Foot Classes in Bootstrap

In Bootstrap 5, the <tfoot> element is used to define a table footer.
You can style it using .table-dark or .table-light classes to make footer rows stand out or match the table design.

✅ Key Features

🎨 Highlights table footer
🌈 Supports light and dark footer themes
🧩 Works with striped, hover, and bordered tables
📱 Fully responsive and easy to implement

💻 Example Code

<table class="table">
  <thead class="table-dark">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Preetam</td>
      <td>Jaipur</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Shubhangi</td>
      <td>Pune</td>
    </tr>
  </tbody>
  <tfoot class="table-light">
    <tr>
      <td colspan="3">Total Users: 2</td>
    </tr>
  </tfoot>
</table>

graph TD
    A[Bootstrap Table] --> B[.table 🎯 Base Table]
    A --> C[<tfoot> Table Footer 📌]
    C --> D[.table-dark 🌑 Dark Footer]
    C --> E[.table-light 🌕 Light Footer]
    D --> F[Footer Highlighted ✨]
    E --> F

🏷️ Table Caption Classes in Bootstrap

In Bootstrap 5, the <caption> element is used to provide a title or description for a table.
You can style captions using .caption-top or .caption-bottom classes to place the caption above or below the table.

✅ Key Features

📌 Adds a descriptive title to the table
⬆️ .caption-top places the caption at the top
⬇️ .caption-bottom places the caption at the bottom (default)
🎨 Improves table clarity and accessibility

💻 Example Code

<table class="table">
  <caption class="caption-top">User Details Table</caption>
  <thead class="table-dark">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Preetam</td>
      <td>Jaipur</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Shubhangi</td>
      <td>Pune</td>
    </tr>
  </tbody>
</table>

graph TD
    A[Bootstrap Table] --> B[.table 🎯 Base Table]
    A --> C[<caption> Table Caption 📌]
    C --> D[.caption-top ⬆️ Top Caption]
    C --> E[.caption-bottom ⬇️ Bottom Caption]
    D --> F[Descriptive & Clear ✨]
    E --> F

📱 Responsive Table Classes in Bootstrap

In Bootstrap 5, responsive tables allow tables to scroll horizontally on small devices to prevent layout overflow.
This is achieved using the .table-responsive class.

✅ Key Features

📏 Makes tables scrollable on small screens
🖱️ Works with all table types (striped, hover, bordered)
⚡ Ensures better readability on mobile devices
🎨 Supports all table styles and themes

💻 Example Code

<div class="table-responsive">
  <table class="table table-striped table-hover table-bordered">
    <thead class="table-dark">
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>City</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Preetam</td>
        <td>preetam@example.com</td>
        <td>Jaipur</td>
        <td>India</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Shubhangi</td>
        <td>shubhangi@example.com</td>
        <td>Pune</td>
        <td>India</td>
      </tr>
    </tbody>
  </table>
</div>

graph TD
    A[Bootstrap Table] --> B[.table 🎯 Base Table]
    A --> C[.table-responsive 📱 Scrollable Table]
    C --> D[Mobile Devices 📱]
    D --> E[Horizontal Scroll Added ↔️]
    E --> F[Better Readability ✨]

🏗️ Nesting Table Classes in Bootstrap

In Bootstrap 5, nested tables are tables placed inside another table’s cell.
This allows complex data representation like sub-tables for details or grouped data.

✅ Key Features

🧩 Organizes complex or hierarchical data
📏 Works with all table styles (striped, bordered, hover)
⚡ Supports responsive layout with .table-responsive
🎨 Nested tables inherit parent table styling

💻 Example Code

<table class="table table-bordered">
  <thead class="table-dark">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Preetam</td>
      <td>
        <table class="table table-sm table-striped">
          <tr>
            <td>Email</td>
            <td>preetam@example.com</td>
          </tr>
          <tr>
            <td>City</td>
            <td>Jaipur</td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

graph TD
    A[Parent Table 📋] --> B[Nested Table 🧩]
    B --> C[Compact Rows ✂️]
    C --> D[Organized & Readable Data ✨]

🎨 Table Variants in Bootstrap

In Bootstrap 5, table variants are used to change the background color of table rows or the entire table.
Variants improve readability and highlight important data.

✅ Common Table Variant Classes

Class	Description
`.table-primary`	Blue background for row or cell
`.table-secondary`	Grey background
`.table-success`	Green background
`.table-danger`	Red background
`.table-warning`	Yellow background
`.table-info`	Light blue background
`.table-light`	Light background
`.table-dark`	Dark background

💻 Example Code

<table class="table">
  <thead class="table-dark">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <td>1</td>
      <td>Preetam</td>
      <td>Active</td>
    </tr>
    <tr class="table-success">
      <td>2</td>
      <td>Shubhangi</td>
      <td>Completed</td>
    </tr>
    <tr class="table-danger">
      <td>3</td>
      <td>Ravi</td>
      <td>Pending</td>
    </tr>
  </tbody>
</table>

graph TD
    A[Bootstrap Table] --> B[Table Rows 📋]
    B --> C[.table-primary 🔵 Blue Row]
    B --> D[.table-success 🟢 Green Row]
    B --> E[.table-danger 🔴 Red Row]
    C --> F[Highlights Active Status ✨]
    D --> F
    E --> F

🔢 What is Pagination in Bootstrap

Pagination is a component in Bootstrap used to divide large content into smaller, navigable pages.
It improves user experience by allowing users to jump between pages easily instead of scrolling through long content.

✅ Key Features

📄 Splits content into multiple pages
⬅️➡️ Provides navigation links (Previous, Next)
⚡ Supports custom sizes (.pagination-sm, .pagination-lg)
🎨 Works with all Bootstrap themes and styles

💻 Example Code

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><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>
  </ul>
</nav>

graph TD
    A[Pagination Component 🔢] --> B[.pagination 📋 Base]
    B --> C[.page-item 📌 Page Item]
    C --> D[.page-link 🔗 Page Link]
    B --> E[.pagination-sm 📏 Small Pagination]
    B --> F[.pagination-lg 📏 Large Pagination]

🔹 Pagination Display & Active Classes in Bootstrap

In Bootstrap 5, pagination display classes manage the layout and visibility of pagination, and active classes highlight the current page.
These classes help users know which page they are on and navigate easily.

✅ Key Classes

Class	Description
`.pagination`	Base class for pagination container
`.page-item`	Wrapper for each page link
`.page-link`	Styles individual links/buttons
`.active`	Marks the current active page
`.disabled`	Disables a page link (cannot be clicked)

💻 Example Code

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <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>
  </ul>
</nav>

graph TD
    A[Pagination Component 🔢] --> B[.pagination 📋 Base]
    B --> C[.page-item 📌 Page Item]
    C --> D[.page-link 🔗 Page Link]
    D --> E[.active ✅ Current Page Highlighted]
    D --> F[.disabled 🚫 Disabled Page Link]

📏 Pagination Size Classes in Bootstrap

In Bootstrap 5, pagination size classes allow you to adjust the size of pagination links.
You can create smaller or larger pagination to fit different UI layouts.

✅ Key Size Classes

Class	Description
`.pagination-sm`	Makes pagination smaller (compact)
`.pagination-lg`	Makes pagination larger (bigger links)
`.pagination`	Default size

💻 Example Code

<!-- Small Pagination -->
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

<!-- Default Pagination -->
<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

<!-- Large Pagination -->
<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

graph TD
    A[Pagination Component 🔢] --> B[.pagination 📋 Default Size]
    A --> C[.pagination-sm 📏 Small Size]
    A --> D[.pagination-lg 🔍 Large Size]
    C --> E[Compact Layout ✨]
    D --> F[Bigger Links for Visibility 🖱️]

🎯 Pagination Alignment Classes in Bootstrap

In Bootstrap 5, pagination alignment classes help you position pagination in a container.
You can align it left, center, or right using flexbox utility classes.

✅ Key Alignment Classes

Class	Description
`.justify-content-start`	Align pagination to the left
`.justify-content-center`	Align pagination to the center
`.justify-content-end`	Align pagination to the right
`.d-flex`	Required to enable flexbox layout

💻 Example Code

<!-- Left-aligned Pagination -->
<ul class="pagination d-flex justify-content-start">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

<!-- Center-aligned Pagination -->
<ul class="pagination d-flex justify-content-center">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

<!-- Right-aligned Pagination -->
<ul class="pagination d-flex justify-content-end">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

graph TD
    A[Pagination Component 🔢] --> B[.d-flex 💪 Flexbox Enabled]
    B --> C[.justify-content-start ⬅️ Left]
    B --> D[.justify-content-center ⬆️ Center]
    B --> E[.justify-content-end ➡️ Right]
    C --> F[Left-aligned Pagination]
    D --> G[Center-aligned Pagination]
    E --> H[Right-aligned Pagination]

🥖 Breadcrumbs Classes in Bootstrap

Breadcrumbs are a navigation component in Bootstrap used to show the current page's location within a website hierarchy.
Bootstrap provides classes to style, size, and align breadcrumbs easily.

✅ Key Breadcrumb Classes

Class	Description
`.breadcrumb`	Base class for the breadcrumb container
`.breadcrumb-item`	Styles each item in the breadcrumb
`.active`	Marks the current page (last item)
`.breadcrumb-lg`	Large-sized breadcrumb (optional styling)
`.breadcrumb-sm`	Small-sized breadcrumb (optional styling)

💻 Example Code

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

graph TD
    A[Bootstrap Breadcrumbs 🥖] --> B[.breadcrumb 📋 Base Container]
    B --> C[.breadcrumb-item 📌 Breadcrumb Item]
    C --> D[.active ✅ Current Page Highlight]

Name		Name	Last commit message	Last commit date
Latest commit History 16 Commits
README.md		README.md

kumawatpreetam/Notes

Folders and files

Latest commit

History

Repository files navigation

💻 What is Bootstrap 5?

</> Key Features

🛠️ Why Use Bootstrap 5?

⚡ Example Code

⚙️ How to Install Bootstrap 5

🔹 1. Using CDN (Fast & Easy)

📐 Bootstrap 5 Breakpoints

🔹 What Are Breakpoints?

📝 List of Bootstrap 5 Breakpoints

⚡ Example: Responsive Columns

🏗️ Bootstrap Container Layout

🔹 Types of Containers in Bootstrap 5

⚡ Example: Container Layout

📐 Bootstrap 5 Container Widths

📐 What is Grid in Bootstrap?

</> Key Features

🖼️ Grid Structure Diagram

↔️ What is Bootstrap Offset?

</> Key Features

⚡ Example Code

🔄 What is Reordering in Bootstrap?

</> Key Features

⚡ Example Code

🖼️ Reordering Diagram

</> Table of Grid Classes

🏗️ What is Nesting in Bootstrap?

</> Key Features

⚡ Example Code

📏 Margin in Bootstrap

</> Key Features

💡 Margin Classes

📌 Bootstrap Margin Scale

⚡ Example Code

🌐 Diagram for Margin

➖ Negative Margin in Bootstrap

</> Key Features

💡 Negative Margin Classes

⚡ Example Code

🧩 What is Padding in Bootstrap?

</> Key Features

📘 Padding Classes in Bootstrap

📌 Bootstrap Padding Scale

⚡ Example Code

↔️ What are Horizontal Classes in Bootstrap?

</> Key Horizontal Classes

⚡ Example Code

⬆️ What is Vertical Alignment in Bootstrap?

</> Key Classes for Vertical Alignment

1. Text Alignment (Vertical)

2. Flexbox Alignment (Vertical)

⚡ Example Code

🎯 Alignment Content Classes in Bootstrap

🔹 Key Classes

⚡ Syntax Example

🌐 Align Content Diagram Example

🙋 Align Self Classes in Bootstrap

🔹 Available Classes

⚡ Responsive Variants

⚡ Example Code

🌐 Align Self Diagram (Behavior)

🔄 Flex Direction Classes in Bootstrap

🔹 Available Classes

⚡ Responsive Variants

📝 Example Code

🌐 Mermaid Diagram (Flex Direction)

🌀 Flex Wrap & Flex Fill in Bootstrap

🔹 Flex Wrap

⚡ Example: Flex Wrap

🔹 Flex Fill

⚡ Example: Flex Fill

🌐 Mermaid Diagram (Flex Wrap & Fill)

📏 Flex Direction Breakpoints in Bootstrap

🔹 Breakpoint Pattern

📝 Complete List of Classes

⚡ Example Code