This class is used to create a fixed-width container for the content. It centers the content and adds padding on the left and right sides. Here's an example:
<div class="container">...</div>
This class is used to create a container with a specific maximum width. Replace the asterisk with the desired width, such as 'sm', 'md', 'lg', 'xl', or 'xxl'. Here's an example:
<div class="container-sm">...</div>
This class is used to create a full-width container that spans the entire width of the viewport. Here's an example:
<div class="container-fluid">...</div>
This class is used to create a horizontal row of columns. Here's an example:
<div class="row">...</div>
These classes are used to create columns within a row. Replace the hash symbol with the desired column width, such as 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, or 12. Here's an example:
<div class="col-sm-6 col-lg-4">...</div>
This class is used to create a column that spans the entire width of the row. Here's an example:
<div class="col">...</div>
This class is used to create a column that automatically adjusts its width based on the content. Replace the asterisk with the desired screen size, such as 'sm', 'md', 'lg', 'xl', or 'xxl'. Here's an example:
<div class="col-md">...</div>
This class is used to create a column that automatically adjusts its width based on the remaining space in the row. Replace the asterisk with the desired screen size, such as 'sm', 'md', 'lg', 'xl', or 'xxl'. Here's an example:
<div class="col-md-auto">...</div>
These classes are used to create a row with a specific number of columns. Replace the hash symbol with the desired number of columns. Here's an example:
<div class="row row-cols-3">...</div>
This technique is used to create a grid of columns within a column. Here's an example:
<div class="row"><div class="col"><div class="row">...</div></div></div>
These classes are used to create an offset for a column. Replace the hash symbol with the desired number of columns to offset. Here's an example:
<div class="col-sm-6 offset-sm-3">...</div>
These classes are used to create horizontal gutters between columns. Replace the asterisk with the desired screen size, such as 'sm', 'md', 'lg', 'xl', or 'xxl', and replace {size} with the desired gutter size, such as 1, 2, 3, 4, 5, or 'auto'. Here's an example:
<div class="row gx-3">...</div>
These classes are used to create vertical gutters between rows. Replace the asterisk with the desired screen size, such as 'sm', 'md', 'lg', 'xl', or 'xxl', and replace {size} with the desired gutter size, such as 1, 2, 3, 4, 5, or 'auto'.
<div class="row gy-2">...</div>
This class is used to create a horizontal gutter between columns. Replace the `{size}` with the desired gutter size, such as `1`, `2`, `3`, `4`, `5`, or `0`. Here's an example:
<div class="row g-3">...</div>
This class is used to create a horizontal gutter between columns for a specific screen size. Replace the asterisk with the desired screen size, such as `sm`, `md`, `lg`, `xl`, or `xxl`, and replace `{size}` with the desired gutter size, such as `1`, `2`, `3`, `4`, `5`, or `0`. Here's an example:
<div class="row g-md-3">...</div>
This class is used to remove the horizontal gutter between columns. Here's an example:
<div class="row g-0">...</div>
The h1 to h6 classes are used to define headings with decreasing levels of importance. Here are examples:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
The text-muted class is used to create muted (or less prominent) text. Here's an example:
<p class="text-muted">This is muted text.</p>
The display-{size} classes are used to control the display size of an element. Replace {size} with values like 1, 2, 3, 4, or 5. Here's an example:
<span class="display-3">Large Display Text</span>
The lead class is used to give extra emphasis to a paragraph. Here's an example:
<p class="lead">This is a lead paragraph with additional emphasis.</p>
The mark class is used to highlight or mark text. Here's an example:
<p>This is a <mark>highlighted</mark> word in the text.</p>
The small class is used to make the text smaller. Here's an example:
<p class="small">This is smaller text.</p>
The initialism class is used to style an abbreviation or acronym with a smaller font size. Here's an example:
<abbr title="World Health Organization" class="initialism">WHO</abbr>
The blockquote class is used to create a blockquote. Here's an example:
<blockquote class="blockquote">
<p>This is a blockquote.</p>
</blockquote>
The blockquote-footer class is used to style the footer of a blockquote. Here's an example:
<blockquote class="blockquote">
<p>This is a blockquote.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
The list-unstyled class is used to remove list styling (bullets or numbers) from an unordered or ordered list. Here's an example:
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
The list-inline class is used to create an inline list. Here's an example:
<ul class="list-inline">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
<li class="list-inline-item">Item 3</li>
</ul>
The img-fluid class is used to make an image responsive. It ensures that the image scales with its container while maintaining its aspect ratio. Here's an example:
<img src="your-image.jpg" alt="Responsive Image" class="img-fluid">
The img-thumbnail class is used to create a bordered and rounded thumbnail-style image. Here's an example:
<img src="your-image.jpg" alt="Thumbnail Image" class="img-thumbnail">
The table class is used to create a basic table. Here's an example:
<table class="table">...</table>
The table-{color} classes are used to add contextual color to a table. Replace {color} with values like primary, secondary, success, info, warning, or danger. Here's an example:
<table class="table table-success">...</table>
The table-striped class is used to add zebra-striping to a table, making it easier to read. Here's an example:
<table class="table table-striped">...</table>
The table-hover class is used to enable a hover effect on table rows. Here's an example:
<table class="table table-hover">...</table>
The table-active class is used to highlight the active (selected) row in a table. Here's an example:
<table class="table">
<tbody>
<tr class="table-active">...</tr>
</tbody>
</table>
The table-bordered class is used to add borders to all the cells in a table. Here's an example:
<table class="table table-bordered">...</table>
The table-borderless class is used to remove borders from all the cells in a table. Here's an example:
<table class="table table-borderless">...</table>
The table-sm class is used to create a smaller, more compact table. Here's an example:
<table class="table table-sm">...</table>
The caption-top class is used to position the table caption above the table. Here's an example:
<table class="table caption-top">...</table>
The table-responsive class is used to make a table responsive on smaller screens. Here's an example:
<div class="table-responsive">
<table class="table">...</table>
</div>
The table-responsive-* classes are used to control the responsive behavior of the table at different screen sizes. Replace * with values like sm, md, lg, or xl. Here's an example:
<div class="table-responsive-md">
<table class="table">...</table>
</div>
The figure class is used to encapsulate media (such as images) and their captions. Here's an example:
<figure>
<img src="your-image.jpg" alt="Image">
<figcaption>Caption for the image.</figcaption>
</figure>
The form-control class is used to style form elements like input, select, and textarea. Here's an example:
<input type="text" class="form-control" placeholder="Enter your text">
The form-label class is used to style the label associated with a form element. Here's an example:
<label for="exampleFormControlInput" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput" placeholder="name@example.com">
The form-control-lg class is used to increase the height of the form control for larger input fields. Here's an example:
<input type="text" class="form-control form-control-lg" placeholder="Large input">
The form-control-sm class is used to decrease the height of the form control for smaller input fields. Here's an example:
<input type="text" class="form-control form-control-sm" placeholder="Small input">
The form-control-plaintext class is used to style plain text form controls. Here's an example:
<input type="text" readonly class="form-control-plaintext" value="Readonly text">
The file input is used to allow users to select and upload files. Here's an example:
<input type="file" class="form-control">
The form-control-color class is used for input elements that allow users to pick a color. Here's an example:
<input type="color" class="form-control-color">
The form-select class is used to style a dropdown select menu. Here's an example:
<select class="form-select">...</select>
The form-select-lg class is used to increase the height of a large dropdown select menu. Here's an example:
<select class="form-select form-select-lg">...</select>
The form-select-sm class is used to decrease the height of a small dropdown select menu. Here's an example:
<select class="form-select form-select-sm">...</select>
The form-check class is used to style a checkbox input within a form. Here's an example:
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">Default checkbox</label>
</div>
The form-check-inline class is used to style inline checkbox inputs within a form. Here's an example:
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="inlineCheckbox1">
<label class="form-check-label" for="inlineCheckbox1">Inline checkbox</label>
</div>
The form-check class is used to style a radio button input within a form. Here's an example:
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
<label class="form-check-label" for="exampleRadios1">Radio button 1</label>
</div>
The form-check-inline class is used to style inline radio button inputs within a form. Here's an example:
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="exampleRadiosInline" id="exampleRadiosInline1" value="option1">
<label class="form-check-label" for="exampleRadiosInline1">Inline radio button 1</label>
</div>
The form-switch class is used to style a switch (toggle) input within a form. Here's an example:
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch</label>
</div>
The form-range class is used to style a range input within a form. Here's an example:
<input type="range" class="form-range" id="formRange">
The input-group class is used to create a container for grouping and styling input elements. Here's an example with content on the left side:
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
The input-group class is used to create a container for grouping and styling input elements. Here's an example with content on the right side:
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username">
<span class="input-group-text">@example.com</span>
</div>
The input-group class is used to create a container for grouping and styling input elements. Here's an example with content on both sides:
<div class="input-group">
<span class="input-group-text">$</span>
<input type="text" class="form-control" placeholder="Amount">
<span class="input-group-text">.00</span>
</div>
The input-group-lg class is used to create a larger input group. Here's an example:
<div class="input-group input-group-lg">...</div>
The input-group-sm class is used to create a smaller input group. Here's an example:
<div class="input-group input-group-sm">...</div>
The input-group class is used to create a container for grouping and styling input elements. Here's an example with a checkbox:
<div class="input-group">
<div class="input-group-text">
<input class="form-check-input" type="checkbox" aria-label="Checkbox for following text input">
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
The input-group class is used to create a container for grouping and styling input elements. Here's an example with a radio button:
<div class="input-group">
<div class="input-group-text">
<input class="form-check-input" type="radio" aria-label="Radio button for following text input">
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
The input-group class is used to create a container for grouping and styling input elements. Here's an example with a button:
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
The input-group class is used to create a container for grouping and styling input elements. Here's an example with a dropdown:
<div class="input-group">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
The form-floating class is used to create a floating label for form controls. Here's an example:
<div class="form-floating mb-3">
<input type="text" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
The form-floating class can also be used with a textarea. Here's an example:
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
The form-floating class can also be used with a select. Here's an example:
<div class="form-floating">
<select class="form-select" id="floatingSelect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label for="floatingSelect">Select an option</label>
</div>
The horizontal form layout is achieved by using the row and col classes. Here's an example:
<form>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">Remember me</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
The col-form-label-{size} classes are used to control the width of form labels within columns. Replace {size} with values like sm, md, lg, or xl. Here's an example:
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
The valid-feedback class is used to provide feedback for valid input. Here's an example:
<div class="valid-feedback">
Your input is valid!
</div>
The valid-tooltip class is used to provide a tooltip for valid input. Here's an example:
<div class="valid-tooltip">
Your input is valid!
</div>
The accordion class is used to create a collapsible accordion component. Here's an example:
<div class="accordion" id="exampleAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#exampleAccordion">
<div class="accordion-body">
Content for Accordion Item #1 goes here.
</div>
</div>
</div>
<!-- Add more accordion items as needed -->
</div>
The accordion-flush class is used to create a flush (borderless) accordion component. Here's an example:
<div class="accordion accordion-flush" id="exampleFlushAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="flushHeadingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flushCollapseOne" aria-expanded="false" aria-controls="flushCollapseOne">
Accordion Item #1
</button>
</h2>
<div id="flushCollapseOne" class="accordion-collapse collapse" aria-labelledby="flushHeadingOne" data-bs-parent="#exampleFlushAccordion">
<div class="accordion-body">
Content for Accordion Item #1 goes here.
</div>
</div>
</div>
<!-- Add more accordion items as needed -->
</div>
The alert-primary class is used to create a primary-colored alert. Here's an example:
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
The alert-secondary class is used to create a secondary-colored alert. Here's an example:
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
The alert-success class is used to create a success-colored alert. Here's an example:
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
The alert-danger class is used to create a danger-colored alert. Here's an example:
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
The alert-warning class is used to create a warning-colored alert. Here's an example:
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
The alert-info class is used to create an info-colored alert. Here's an example:
<div class="alert alert-info" role="alert">
This is an info alert—check it out!
</div>
The alert-light class is used to create a light-colored alert. Here's an example:
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
The alert-dark class is used to create a dark-colored alert. Here's an example:
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>
The alert-link class is used to create a link within an alert. Here's an example:
<div class="alert alert-primary" role="alert">
This is a primary alert with <a href="#" class="alert-link">an example link</a>.
</div>
The alert-dismissible class is used to add a close button to an alert. Here's an example:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
This is a warning alert with a close button.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
The primary class is used to create a primary-colored badge. Here's an example:
<span class="badge bg-primary">Primary</span>
The secondary class is used to create a secondary-colored badge. Here's an example:
<span class="badge bg-secondary">Secondary</span>
The success class is used to create a success-colored badge. Here's an example:
<span class="badge bg-success">Success</span>
The danger class is used to create a danger-colored badge. Here's an example:
<span class="badge bg-danger">Danger</span>
The warning class is used to create a warning-colored badge. Here's an example:
<span class="badge bg-warning text-dark">Warning</span>
The info class is used to create an info-colored badge. Here's an example:
<span class="badge bg-info text-dark">Info</span>
The light class is used to create a light-colored badge. Here's an example:
<span class="badge bg-light text-dark">Light</span>
The dark class is used to create a dark-colored badge. Here's an example:
<span class="badge bg-dark">Dark</span>
The pill class is used to create a badge with rounded corners. Here's an example:
<span class="badge rounded-pill bg-primary">Pill Badge</span>
The notification class is used to create a badge for notifications. Here's an example:
<span class="badge bg-danger">3</span>
The breadcrumb class is used to create a breadcrumb navigation. Here's an example:
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Category</a></li>
<li class="breadcrumb-item active" aria-current="page">Current Page</li>
</ol>
</nav>
To change the divider used in the breadcrumb, you can use the breadcrumb-divider class. Here's an example:
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Category</a></li>
<li class="breadcrumb-item active" aria-current="page">Current Page</li>
</ol>
<div class="breadcrumb-divider"> / </div>
</nav>
The btn-primary class is used to create a primary-colored button. Here's an example:
<button type="button" class="btn btn-primary">Primary Button</button>
The btn-secondary class is used to create a secondary-colored button. Here's an example:
<button type="button" class="btn btn-secondary">Secondary Button</button>
The btn-success class is used to create a success-colored button. Here's an example:
<button type="button" class="btn btn-success">Success Button</button>
The btn-danger class is used to create a danger-colored button. Here's an example:
<button type="button" class="btn btn-danger">Danger Button</button>
The btn-warning class is used to create a warning-colored button. Here's an example:
<button type="button" class="btn btn-warning">Warning Button</button>
The btn-info class is used to create an info-colored button. Here's an example:
<button type="button" class="btn btn-info">Info Button</button>
The btn-light class is used to create a light-colored button. Here's an example:
<button type="button" class="btn btn-light">Light Button</button>
The btn-dark class is used to create a dark-colored button. Here's an example:
<button type="button" class="btn btn-dark">Dark Button</button>
The btn-link class is used to create a button that looks like a link. Here's an example:
<button type="button" class="btn btn-link">Link Button</button>
The btn-outline-primary class is used to create a button with outlined primary color. Here's an example:
<button type="button" class="btn btn-outline-primary">Primary Button</button>
The btn-outline-secondary class is used to create a button with outlined secondary color. Here's an example:
<button type="button" class="btn btn-outline-secondary">Secondary Button</button>
The btn-outline-success class is used to create a button with outlined success color. Here's an example:
<button type="button" class="btn btn-outline-success">Success Button</button>
The btn-outline-danger class is used to create a button with outlined danger color. Here's an example:
<button type="button" class="btn btn-outline-danger">Danger Button</button>
The btn-outline-warning class is used to create a button with outlined warning color. Here's an example:
<button type="button" class="btn btn-outline-warning">Warning Button</button>
The btn-outline-info class is used to create a button with outlined info color. Here's an example:
<button type="button" class="btn btn-outline-info">Info Button</button>
The btn-outline-light class is used to create a button with outlined light color. Here's an example:
<button type="button" class="btn btn-outline-light">Light Button</button>
The btn-outline-dark class is used to create a button with outlined dark color. Here's an example:
<button type="button" class="btn btn-outline-dark">Dark Button</button>
The btn-lg class is used to create a large-sized button. Here's an example:
<button type="button" class="btn btn-primary btn-lg">Large Button</button>
The btn-sm class is used to create a small-sized button. Here's an example:
<button type="button" class="btn btn-primary btn-sm">Small Button</button>
The btn-block class is used to create a block-level button that spans the full width of its parent. Here's an example:
<button type="button" class="btn btn-primary btn-block">Block Button</button>
The btn-close class is used to create a close button, typically used in alert or modal components. Here's an example:
<button type="button" class="btn-close" aria-label="Close"></button>
The btn-close-white class is used to create a white-colored close button. Here's an example:
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
The btn-group class is used to group buttons together. Here's an example:
<div class="btn-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>
You can use the btn-group class with <a> tags to create a button group with links. Here's an example:
<div class="btn-group">
<a href="#" class="btn btn-primary">Link 1</a>
<a href="#" class="btn btn-primary">Link 2</a>
<a href="#" class="btn btn-primary">Link 3</a>
</div>
The btn-outline class is used to create a button group with outlined buttons. Here's an example:
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">Button 1</button>
<button type="button" class="btn btn-outline-primary">Button 2</button>
<button type="button" class="btn btn-outline-primary">Button 3</button>
</div>
The btn-toolbar class is used to create a toolbar for groups of buttons. Here's an example:
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary">Group 1</button>
<button type="button" class="btn btn-secondary">Group 2</button>
</div>
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary">Group 3</button>
<button type="button" class="btn btn-secondary">Group 4</button>
</div>
</div>
The btn-group-lg class is used to create a large-sized button group. Here's an example:
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Large Button 1</button>
<button type="button" class="btn btn-primary">Large Button 2</button>
</div>
The btn-group-sm class is used to create a small-sized button group. Here's an example:
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">Small Button 1</button>
<button type="button" class="btn btn-primary">Small Button 2</button>
</div>
The btn-group-vertical class is used to create a vertically stacked button group. Here's an example:
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-primary">Button 2</button>
</div>
The btn-group-toggle class is used to create a toggleable single button. Here's an example:
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Toggle Button
</label>
</div>
The btn-group-toggle class is used with checkboxes to create a toggleable button group. Here's an example:
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 1
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
</div>
The btn-group-toggle class is used with radio buttons to create a toggleable button group. Here's an example:
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1" autocomplete="off"> Radio 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
</div>
The card class is used to create a card container. Here's an example:
<div class="card">
<!-- Card content goes here -->
</div>
The card-body class is used to contain the main content of the card. Here's an example:
<div class="card">
<div class="card-body">
<!-- Main content goes here -->
</div>
</div>
Titles, text, and links can be added within the card-body to provide additional content. Here's an example:
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is some card content.</p>
<a href="#" class="card-link">Card Link</a>
<a href="#" class="card-link">Another Link</a>
</div>
</div>
The list-group class is used to create a list group within a card. Here's an example:
<div class="card">
<ul class="list-group list-group-flush">
<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>
</div>
The card-header class is used to add a header to the card. Here's an example:
<div class="card">
<div class="card-header">
Card Header
</div>
<div class="card-body">
<!-- Main content goes here -->
</div>
</div>
The card-footer class is used to add a footer to the card. Here's an example:
<div class="card">
<div class="card-body">
<!-- Main content goes here -->
</div>
<div class="card-footer">
Card Footer
</div>
</div>
Navigation elements, such as tabs or pills, can be added within a card. Here's an example using tabs:
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<div id="tab1" class="tab-pane active">
<!-- Tab 1 content goes here -->
</div>
<div id="tab2" class="tab-pane">
<!-- Tab 2 content goes here -->
</div>
</div>
</div>
The card-img-top class is used to place an image at the top of the card. Here's an example:
<div class="card">
<img src="image.jpg" class="card-img-top" alt="Card Image">
<div class="card-body">
<!-- Main content goes here -->
</div>
</div>
The card-img-bottom class is used to place an image at the bottom of the card. Here's an example:
<div class="card">
<div class="card-body">
<!-- Main content goes here -->
</div>
<img src="image.jpg" class="card-img-bottom" alt="Card Image">
</div>
The card-img-overlay class is used to overlay content on top of an image. Here's an example:
<div class="card">
<img src="image.jpg" class="card-img" alt="Card Image">
<div class="card-img-overlay">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Overlay Text</p>
</div>
</div>
The flex-row class can be used to create a horizontal card layout. Here's an example:
<div class="card flex-row">
<img src="image.jpg" class="card-img-left" alt="Card Image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Card content goes here.</p>
</div>
</div>
The bg-{color} class is used to set the background color of the card. Replace {color} with a Bootstrap color class. Here's an example:
<div class="card bg-primary">
<div class="card-body">
<!-- Main content goes here -->
</div>
</div>
The border-{color} class is used to set the border color of the card, and the text-{color} class is used to set the text color. Replace {color} with a Bootstrap color class. Here's an example:
<div class="card border-primary text-white">
<div class="card-body">
<!-- Main content goes here -->
</div>
</div>
The bg-transparent class is used to make the card background transparent. Here's an example:
<div class="card bg-transparent">
<div class="card-body">
<!-- Main content goes here -->
</div>
</div>
The card-group class is used to group cards together. Here's an example:
<div class="card-group">
<div class="card">
<!-- Card 1 content goes here -->
</div>
<div class="card">
<!-- Card 2 content goes here -->
</div>
<div class="card">
<!-- Card 3 content goes here -->
</div>
</div>
Using a combination of columns and cards, you can create a grid of cards. Here's an example:
<div class="row">
<div class="col-md-4">
<div class="card">
<!-- Card 1 content goes here -->
</div>
</div>
<div class="col-md-4">
<div class="card">
<!-- Card 2 content goes here -->
</div>
</div>
<div class="col-md-4">
<div class="card">
<!-- Card 3 content goes here -->
</div>
</div>
</div>
The carousel class is used to create a basic carousel with slides only. Here's an example:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
</div>
</div>
</div>
The carousel class with control elements is used to create a carousel with navigation controls. Here's an example:
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
The carousel-indicators class is used to add slide indicators to the carousel. Here's an example:
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
</div>
</div>
</div>
The carousel-caption class is used to add captions to carousel slides. Here's an example:
<div id="carouselExampleCaption" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>First Slide</h5>
<p>Slide description goes here.</p>
</div>
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
<div class="carousel-caption d-none d-md-block">
<h5>Second Slide</h5>
<p>Slide description goes here.</p>
</div>
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
<div class="carousel-caption d-none d-md-block">
<h5>Third Slide</h5>
<p>Slide description goes here.</p>
</div>
</div>
</div>
</div>
The carousel-fade class is used to create a fading transition between slides. Here's an example:
<div id="carouselExampleFade" class="carousel carousel-fade slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
</div>
</div>
</div>
The data-bs-interval attribute is used to set the interval between automatic slides. Here's an example:
<div id="carouselExampleIntervals" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
</div>
</div>
</div>
The carousel-dark class is used to create a dark-themed carousel. Here's an example:
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
</div>
</div>
</div>
The collapse class is used to create a collapsible element. Here's an example:
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Toggle Collapse
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Content inside the collapsible element.
</div>
</div>
The multi-collapse class is used when multiple collapse elements need to be controlled. Here's an example:
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">
Toggle Collapse 1
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Toggle Collapse 2
</button>
<div class="collapse multi-collapse" id="collapseExample1">
<div class="card card-body">
Content inside the first collapsible element.
</div>
</div>
<div class="collapse multi-collapse" id="collapseExample2">
<div class="card card-body">
Content inside the second collapsible element.
</div>
</div>
The collapse-horizontal class is not a standard Bootstrap class. However, you can use custom CSS to create horizontal collapsible elements. Here's an example:
<style>
.collapse-horizontal {
display: flex;
}
.collapse-horizontal .collapse {
flex: 1;
margin-right: 16px; /* Adjust the spacing between collapsible elements */
}
</style>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExampleH1" aria-expanded="false" aria-controls="collapseExampleH1">
Toggle Collapse 1
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExampleH2" aria-expanded="false" aria-controls="collapseExampleH2">
Toggle Collapse 2
</button>
<div class="collapse collapse-horizontal" id="collapseExampleH1">
<div class="card card-body">
Content inside the first horizontal collapsible element.
</div>
</div>
<div class="collapse collapse-horizontal" id="collapseExampleH2">
<div class="card card-body">
Content inside the second horizontal collapsible element.
</div>
</div>
The dropdown class is used to create a basic dropdown menu. Here's an example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</div>
The dropdown-toggle-split class is used to create a split button in a dropdown. Here's an example:
<div class="btn-group">
<button type="button" class="btn btn-secondary">Split Button</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</div>
The dropdown-menu-dark class is used to create a dark-themed dropdown menu. Here's an example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuDarkButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dark Dropdown
</button>
<div class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuDarkButton">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</div>
The dropup class is used to create a dropup menu. Here's an example:
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup Button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</div>
The dropup class with split button is used to create a split dropup menu. Here's an example:
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">Split Button</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</div>
The dropend class is used to create a dropend menu. Here's an example:
<div class="btn-group">
<button type="button" class="btn btn-secondary">End Button</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropend">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</div>
The dropstart class is used to create a dropstart menu. Here's an example:
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<button type="button" class="btn btn-secondary">Start Button</button>
<div class="dropdown-menu dropstart">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</div>
The dropdown-item-text class is used to create text-only items within a dropdown. Here's an example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownTextButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown with Text
</button>
<div class="dropdown-menu" aria-labelledby="dropdownTextButton">
<span class="dropdown-item-text">Text Item 1</span>
<span class="dropdown-item-text">Text Item 2</span>
<span class="dropdown-item-text">Text Item 3</span>
</div>
</div>
The active class is used to mark a dropdown item as active. Here's an example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownActiveButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Active Item
</button>
<div class="dropdown-menu" aria-labelledby="dropdownActiveButton">
<a class="dropdown-item active" href="#">Active Item</a>
<a class="dropdown-item" href="#">Regular Item</a>
</div>
</div>
The disabled class is used to mark a dropdown item as disabled. Here's an example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownDisabledButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Disabled Item
</button>
<div class="dropdown-menu" aria-labelledby="dropdownDisabledButton">
<a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled Item</a>
<a class="dropdown-item" href="#">Regular Item</a>
</div>
</div>
The dropdown-menu-end class is used to align the dropdown menu to the end of its parent. Here's an example:
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
End-aligned Dropdown
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</div>
The dropdown-menu-{direction} class is used to set the direction of the dropdown menu. Replace {direction} with values like start, end, left, or right. Here's an example:
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown with Direction
</button>
<div class="dropdown-menu dropdown-menu-start">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</div>
The dropdown-header class is used to create a header within a dropdown menu. Here's an example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownHeaderButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown with Header
</button>
<div class="dropdown-menu" aria-labelledby="dropdownHeaderButton">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</div>
The dropdown-divider class is used to create a divider line within a dropdown menu. Here's an example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownDividerButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown with Divider
</button>
<div class="dropdown-menu" aria-labelledby="dropdownDividerButton">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</div>
The list-group class is used to create a list group. Here's an example:
<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>
The active class is used to mark a list group item as active. Here's an example:
<ul class="list-group">
<li class="list-group-item active">Active Item</li>
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
</ul>
The disabled class is used to mark a list group item as disabled. Here's an example:
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">Disabled Item</li>
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
</ul>
The list-group-flush class is used to create a flush (borderless) list group. Here's an example:
<ul class="list-group list-group-flush">
<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>
The list-group-numbered class is not a standard Bootstrap class. However, you can use custom CSS to create a numbered list group. Here's an example:
<style>
.list-group-numbered>li:before {
content: counter(item) ". ";
counter-increment: item;
}
</style>
<ul class="list-group list-group-numbered">
<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>
The list-group-horizontal class is used to create a horizontal list group. Here's an example:
<div class="list-group list-group-horizontal">
<a href="#" class="list-group-item">Item 1</a>
<a href="#" class="list-group-item">Item 2</a>
<a href="#" class="list-group-item">Item 3</a>
</div>
The list-group-horizontal-{breakpoint} class is used to create a horizontal list group that stacks vertically on smaller screens. Replace {breakpoint} with values like sm, md, lg, or xl. Here's an example:
<div class="list-group list-group-horizontal-sm">
<a href="#" class="list-group-item">Item 1</a>
<a href="#" class="list-group-item">Item 2</a>
<a href="#" class="list-group-item">Item 3</a>
</div>
The list-group-item-{color} class is used to apply a contextual color to a list group item. Replace {color} with values like primary, secondary, success, danger, warning, info, light, or dark. Here's an example:
<ul class="list-group">
<li class="list-group-item list-group-item-primary">Primary Item</li>
<li class="list-group-item list-group-item-secondary">Secondary Item</li>
<li class="list-group-item list-group-item-success">Success Item</li>
</ul>
The list-group-item-action class is used to make a list group item actionable, typically for links or buttons. Here's an example:
<ul class="list-group">
<a href="#" class="list-group-item list-group-item-action">Clickable Item</a>
<a href="#" class="list-group-item list-group-item-action">Another Clickable Item</a>
</ul>
The list group allows you to include custom content within each item. Here's an example with custom content:
<ul class="list-group">
<li class="list-group-item">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Custom Content</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Some text goes here.</p>
<small>Additional information</small>
</li>
<li class="list-group-item">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Another Item</h5>
<small class="text-muted">1 day ago</small>
</div>
<p class="mb-1">More text goes here.</p>
<small>Additional details</small>
</li>
</ul>
You can include checkboxes within list group items. Here's an example:
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="Checkbox"> Checkbox Item 1
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="Checkbox"> Checkbox Item 2
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="Checkbox"> Checkbox Item 3
</li>
</ul>
For JavaScript behavior, you may need to include the Bootstrap JavaScript library and initialize the list group component using JavaScript. Ensure you have the required Bootstrap JavaScript files included in your project.
<script src="path/to/bootstrap.bundle.min.js"></script>
<script>
// Initialize list group behavior
var listGroup = new bootstrap.ListGroup(document.getElementById('yourListGroupId'));
</script>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Modal Open Modal
</button>
The modal class is used to create a modal. Here's an example:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal content goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The static class is used to create a modal with a static backdrop, meaning the modal will not close when clicking outside of it. Here's an example:
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Static Backdrop</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal content with a static backdrop.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The modal-dialog-scrollable class is used to create a modal with a scrollable content area. Here's an example:
<div class="modal fade" id="scrollableModal" tabindex="-1" aria-labelledby="scrollableModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="scrollableModalLabel">Scrollable Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Long scrollable content goes here.</p>
<p>More content...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The modal-dialog-centered class is used to vertically center the modal. Here's an example:
<div class="modal fade" id="centeredModal" tabindex="-1" aria-labelledby="centeredModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="centeredModalLabel">Centered Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Content of the centered modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The modal-{size} classes are used to create a modal with a specific size. Replace {size} with values like sm, md, lg, or xl. Here's an example:
<div class="modal fade" id="smallModal" tabindex="-1" aria-labelledby="smallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="smallModalLabel">Small Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Content of the small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The modal-fullscreen class is used to create a fullscreen modal. Here's an example:
<div class="modal fade" id="fullscreenModal" tabindex="-1" aria-labelledby="fullscreenModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fullscreenModalLabel">Fullscreen Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Content of the fullscreen modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The modal-fullscreen-*-down classes are used to create a fullscreen modal that activates at a specific breakpoint. Replace * with values like sm, md, lg, or xl. Here's an example:
<div class="modal fade" id="breakpointModal" tabindex="-1" aria-labelledby="breakpointModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-lg-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="breakpointModalLabel">Modal with Breakpoint</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Content of the modal with breakpoint.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The ul.nav class is used to style an unordered list as a navigation menu. Here's an example:
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
The nav.nav class is used to style a navigation bar. Here's an example:
<nav class="nav">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
</nav>
The flex-column class is used to create a vertical navigation menu. Here's an example:
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
The nav-tabs class is used to create a navigation bar with tabs. Here's an example:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#tab1" data-bs-toggle="tab">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2" data-bs-toggle="tab">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab3" data-bs-toggle="tab">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">Tab 1 content</div>
<div class="tab-pane fade" id="tab2">Tab 2 content</div>
<div class="tab-pane fade" id="tab3">Tab 3 content</div>
</div>
The nav-pills class is used to create a navigation bar with pills. Here's an example:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#tab1" data-bs-toggle="pill">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2" data-bs-toggle="pill">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab3" data-bs-toggle="pill">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">Tab 1 content</div>
<div class="tab-pane fade" id="tab2">Tab 2 content</div>
<div class="tab-pane fade" id="tab3">Tab 3 content</div>
</div>
The nav-fill class is used to make the navigation items stretch to fill the entire width. Here's an example:
<ul class="nav nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
The nav-justified class is used to make the navigation items spread across the entire width evenly. Here's an example:
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#tab1" data-bs-toggle="tab">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2" data-bs-toggle="tab">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab3" data-bs-toggle="tab">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">Tab 1 content</div>
<div class="tab-pane fade" id="tab2">Tab 2 content</div>
<div class="tab-pane fade" id="tab3">Tab 3 content</div>
</div>
Adding a dropdown to a navigation bar with tabs using the dropdown class. Here's an example:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#tab1" data-bs-toggle="tab">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2" data-bs-toggle="tab">Tab 2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">Tab 1 content</div>
<div class="tab-pane fade" id="tab2">Tab 2 content</div>
</div>
Adding a dropdown to a navigation bar with pills using the dropdown class. Here's an example:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#tab1" data-bs-toggle="pill">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2" data-bs-toggle="pill">Tab 2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">Tab 1 content</div>
<div class="tab-pane fade" id="tab2">Tab 2 content</div>
</div>
Creating a vertical navigation menu with pills using the flex-column class. Here's an example:
<ul class="nav flex-column nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#tab1" data-bs-toggle="pill">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2" data-bs-toggle="pill">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab3" data-bs-toggle="pill">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">Tab 1 content</div>
<div class="tab-pane fade" id="tab2">Tab 2 content</div>
<div class="tab-pane fade" id="tab3">Tab 3 content</div>
</div>
The navbar class is used to create a navigation bar. Here's an example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
The navbar-brand class is used to style the branding in a navigation bar. Here's an example:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>
Creating a navigation bar without using an unordered list. Here's an example:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
</div>
</nav>
Adding a dropdown to a navigation bar. Here's an example:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</nav>
The navbar-text class is used to add text to a navigation bar. Here's an example:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<span class="navbar-text">Some text</span>
</div>
</nav>
The navbar-dark and navbar-light classes are used to control the color scheme of the navigation bar. Here are examples of both:
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
The fixed-top class is used to fix the navbar at the top of the page. Here's an example:
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
The fixed-bottom class is used to fix the navbar at the bottom of the page. Here's an example:
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
The sticky-top class is used to make the navbar stick to the top when you scroll down. Here's an example:
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Placing the brand inside the collapse section. Here's an example:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<a class="navbar-brand" href="#">Brand</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Adjusting the position of the toggler button. To place it on the right, add the ml-auto class. To place it on the left, add the mr-auto class. Here are examples of both:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler ml-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
The offcanvas-start class is used to create an offcanvas that starts from the left side of the viewport. Here's an example:
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Toggle Offcanvas</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
The offcanvas-end class is used to create an offcanvas that starts from the right side of the viewport. Here's an example:
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Toggle Offcanvas</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
The offcanvas-top class is used to create an offcanvas that starts from the top of the viewport. Here's an example:
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Toggle Offcanvas</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
The offcanvas-bottom class is used to create an offcanvas that starts from the bottom of the viewport. Here's an example:
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Toggle Offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
The pagination class is used to create a basic pagination. Here's an example:
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
The disabled class is used to make a page item disabled. Here's an example:
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item disabled"><span class="page-link">1</span></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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
The active class is used to make a page item active. Here's an example:
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
The pagination-lg class is used to increase the size of the pagination. Here's an example:
<nav aria-label="Page navigation">
<ul class="pagination pagination-lg">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
The pagination-sm class is used to decrease the size of the pagination. Here's an example:
<nav aria-label="Page navigation">
<ul class="pagination pagination-sm">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
The placeholder class is used to create a basic placeholder. Here's an example:
<input type="text" class="form-control" placeholder="Enter text">
The placeholder bg-{color} class is used to add a background color to the placeholder text. Replace {color} with the desired background color class. Here's an example:
<input type="text" class="form-control" placeholder="Enter text" aria-label="Username" aria-describedby="basic-addon1">
The placeholder-lg class is used to increase the size of the placeholder text. Here's an example:
<input type="text" class="form-control placeholder-lg" placeholder="Enter text">
The placeholder-sm class is used to decrease the size of the placeholder text. Here's an example:
<input type="text" class="form-control placeholder-sm" placeholder="Enter text">
The placeholder-xs class is used to further decrease the size of the placeholder text. Here's an example:
<input type="text" class="form-control placeholder-xs" placeholder="Enter text">
The placeholder-glow class is used to add a glowing effect to the placeholder text. Here's an example:
<input type="text" class="form-control placeholder-glow" placeholder="Enter text">
The placeholder-wave class is used to add a wave animation effect to the placeholder text. Here's an example:
<input type="text" class="form-control placeholder-wave" placeholder="Enter text">
The popover on right class is used to create a popover that appears on the right side of the element. Here's an example:
<button type="button" class="btn btn-secondary popover-right" data-bs-toggle="popover" title="Popover Title" data-bs-content="Popover content goes here.">
Popover on Right
</button>
The popover on top class is used to create a popover that appears on the top of the element. Here's an example:
<button type="button" class="btn btn-secondary popover-top" data-bs-toggle="popover" title="Popover Title" data-bs-content="Popover content goes here.">
Popover on Top
</button>
The popover on bottom class is used to create a popover that appears on the bottom of the element. Here's an example:
<button type="button" class="btn btn-secondary popover-bottom" data-bs-toggle="popover" title="Popover Title" data-bs-content="Popover content goes here.">
Popover on Bottom
</button>
The popover on left class is used to create a popover that appears on the left side of the element. Here's an example:
<button type="button" class="btn btn-secondary popover-left" data-bs-toggle="popover" title="Popover Title" data-bs-content="Popover content goes here.">
Popover on Left
</button>
The dismissible popover class is used to create a popover that can be dismissed by clicking outside of it. Here's an example:
<button type="button" class="btn btn-secondary popover-dismiss" data-bs-toggle="popover" title="Popover Title" data-bs-content="Popover content goes here.">
Dismissible Popover
</button>
The progress class is used to create a basic progress bar. Here's an example:
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
The progress-bar class is used to define the progress bar itself. Here's an example:
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
The progress-bar class with label is used to display a label inside the progress bar. Here's an example:
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
The progress-bar class with custom height is used to define the height of the progress bar. Here's an example:
<div class="progress">
<div class="progress-bar" role="progressbar" style="height: 20px; width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
The progress-bar bg-{color} class is used to add a background color to the progress bar. Replace {color} with the desired background color class. Here's an example:
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Multiple progress-bar elements can be used to create a progress bar with multiple segments. Here's an example:
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
The progress-bar-striped class is used to add a striped effect to the progress bar. Here's an example:
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
The progress-bar-striped bg-{color} class is used to add both the striped effect and a background color to the progress bar. Replace {color} with the desired background color class. Here's an example:
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
The progress-bar-animated class is used to add an animated effect to the progress bar. Here's an example:
<div class="progress">
<div class="progress-bar progress-bar-animated" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
The progress-bar-animated bg-{color} class is used to add both the animated effect and a background color to the progress bar. Replace {color} with the desired background color class. Here's an example:
<div class="progress">
<div class="progress-bar progress-bar-animated bg-success" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
The data-bs-spy attribute is used to enable the scrollspy behavior on an element. Add this attribute to the element you want to spy on. Here's an example:
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
<div id="navbar-example">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#section1">Section 1</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">Section 2</a></li>
<li class="nav-item"><a class="nav-link" href="#section3">Section 3</a></li>
</ul>
</div>
</body>
Nested data-bs-spy is used when you have multiple scrollspy elements and want to specify different targets for each. Use the data-bs-target attribute to specify the target element for each scrollspy. Here's an example:
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
<div id="navbar-example">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#section1">Section 1</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">Section 2</a></li>
<li class="nav-item"><a class="nav-link" href="#section3">Section 3</a></li>
</ul>
</div>
<div data-bs-spy="scroll" data-bs-target="#section1">
<h4 id="section1">Section 1</h4>
<p>Content for Section 1</p>
</div>
<div data-bs-spy="scroll" data-bs-target="#section2">
<h4 id="section2">Section 2</h4>
<p>Content for Section 2</p>
</div>
<div data-bs-spy="scroll" data-bs-target="#section3">
<h4 id="section3">Section 3</h4>
<p>Content for Section 3</p>
</div>
</body>
The spinner-border class is used to create a basic spinner border. Here's an example:
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
The spinner-border text-{color} class is used to add a text color to the spinner border. Replace {color} with the desired text color class. Here's an example:
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
The spinner-border-sm class is used to create a smaller spinner border. Here's an example:
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
The spinner-grow class is used to create a basic spinner that grows. Here's an example:
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
The spinner-grow text-{color} class is used to add a text color to the growing spinner. Replace {color} with the desired text color class. Here's an example:
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
The spinner-grow-sm class is used to create a smaller growing spinner. Here's an example:
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
The toast class is used to create a basic toast. Here's an example:
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
The toast with button class is used to create a toast with a close button. Here's an example:
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<div class="toast-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="toast">Action</button>
</div>
</div>
The toast bg-{color} text-{color} classes are used to add background and text colors to the toast. Replace {color} with the desired background and text color classes. Here's an example:
<div class="toast bg-primary text-light" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message with custom colors.
</div>
</div>
The tooltip on top class is used to create a tooltip positioned above the target element. Here's an example:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>
The tooltip on right class is used to create a tooltip positioned to the right of the target element. Here's an example:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>
The tooltip on bottom class is used to create a tooltip positioned below the target element. Here's an example:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>
The tooltip on left class is used to create a tooltip positioned to the left of the target element. Here's an example:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>
The tooltip with HTML class is used to create a tooltip with HTML content. Here's an example:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> with <strong>HTML</strong>">
Tooltip with HTML
</button>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>
The clearfix class is used to clear floats and prevent container collapse. Here's an example:
<div class="clearfix">
<div class="float-start">Float left</div>
<div class="float-end">Float right</div>
</div>
The link-{color} class is used to add a color to a link. Replace {color} with the desired color class. Here's an example:
<a href="#" class="link-primary">Primary Link</a>
The ratio-{ratio} class is used to create an aspect ratio box. Replace {ratio} with the desired aspect ratio (e.g., 16x9, 4x3). Here's an example:
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video" allowfullscreen></iframe>
</div>
The fixed-top class is used to fix an element at the top of the viewport. Here's an example:
<div class="fixed-top">Fixed at the top</div>
The fixed-bottom class is used to fix an element at the bottom of the viewport. Here's an example:
<div class="fixed-bottom">Fixed at the bottom</div>
The sticky-top class is used to make an element stick to the top of the viewport when scrolling. Here's an example:
<div class="sticky-top">Sticky at the top</div>
The sticky-*-top class is used to make an element stick to the top of the viewport for a specific breakpoint. Replace * with the desired breakpoint (e.g., lg, xl). Here's an example:
<div class="sticky-lg-top">Sticky at the top for large screens</div>
The visually-hidden class is used to visually hide an element but keep it accessible to screen readers. Here's an example:
<span class="visually-hidden">This text is visually hidden</span>
The visually-hidden-focusable class is used to visually hide an element while keeping it focusable for screen readers. Here's an example:
<button class="visually-hidden-focusable">Click me</button>
The stretched-link class is used to make a link fill its containing parent. Here's an example:
<a href="#" class="stretched-link">Stretched Link</a>
The text-truncate class is used to truncate text with an ellipsis. Here's an example:
<p class="text-truncate">This is a long text that will be truncated with an ellipsis.</p>
The vstack class is used to create a vertical stack of elements. Here's an example:
<div class="vstack">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
</div>
The hstack class is used to create a horizontal stack of elements. Here's an example:
<div class="hstack">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
</div>
The vr class is used to create a vertical rule (separator). Here's an example:
<div class="vr"></div>
These are the shortcut and faster codes that can help you to save your time for css
The border class is used to add a border to an element. Here's an example:
<div class="border">Element with border</div>
The border-{direction} class is used to add a border to a specific side of an element. Replace {direction} with the desired direction (e.g., top, right, bottom, left). Here's an example:
<div class="border-top">Top border</div>
The border-0 class is used to remove the border from an element. Here's an example:
<div class="border-0">Element without border</div>
The border-{direction}-0 class is used to remove the border from a specific side of an element. Replace {direction} with the desired direction (e.g., top, right, bottom, left). Here's an example:
<div class="border-top-0">Element without top border</div>
The border-{color} class is used to add a border with a specific color to an element. Replace {color} with the desired color class. Here's an example:
<div class="border-primary">Element with primary color border</div>
The border-{size} class is used to add a border with a specific size to an element. Replace {size} with the desired size (e.g., 1, 2, 3). Here's an example:
<div class="border-2">Element with 2px border</div>
The rounded class is used to add rounded corners to an element. Here's an example:
<div class="rounded">Element with rounded corners</div>
The rounded-{corner} class is used to add rounded corners to a specific corner of an element. Replace {corner} with the desired corner (e.g., top, right, bottom, left). Here's an example:
<div class="rounded-top">Element with rounded top corners</div>
The rounded-{size} class is used to add rounded corners of a specific size to an element. Replace {size} with the desired size (e.g., 1, 2, 3). Here's an example:
<div class="rounded-3">Element with rounded corners of size 3</div>
The text-{color} class is used to set the text color of an element. Replace {color} with the desired color class. Here's an example:
<p class="text-primary">This is a primary color text.</p>
The text-body class is used to set the default text color based on the body text color. Here's an example:
<p class="text-body">This is the body text color.</p>
The text-white class is used to set the text color to white. Here's an example:
<p class="text-white bg-dark">White text on a dark background.</p>
The text-black-50 class is used to set the text color to a semi-transparent black. Here's an example:
<p class="text-black-50 bg-light">Semi-transparent black text on a light background.</p>
The text-white-50 class is used to set the text color to a semi-transparent white. Here's an example:
<p class="text-white-50 bg-dark">Semi-transparent white text on a dark background.</p>
The bg-{color} class is used to set the background color of an element. Replace {color} with the desired color class. Here's an example:
<div class="bg-primary">Element with a primary color background.</div>
The bg-white class is used to set the background color to white. Here's an example:
<div class="bg-white text-dark">White background with dark text.</div>
The bg-transparent class is used to set the background color to transparent. Here's an example:
<div class="bg-transparent">Transparent background.</div>
The bg-gradient class is used to apply a gradient background to an element. Here's an example:
<div class="bg-gradient">Element with gradient background.</div>
The d-*-none class is used to hide an element on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-sm-none">Hidden on small screens</div>
The d-*-inline class is used to make an element display as an inline element on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<span class="d-md-inline">Inline on medium screens and larger</span>
The d-*-inline-block class is used to make an element display as an inline-block element on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-lg-inline-block">Inline block on large screens and larger</div>
The d-*-block class is used to make an element display as a block element on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-xl-block">Block on extra-large screens and larger</div>
The d-*-grid class is used to make an element display as a grid on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-md-grid">Grid on medium screens and larger</div>
The d-*-table class is used to make an element display as a table on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-lg-table">Table on large screens and larger</div>
The d-*-table-cell class is used to make an element display as a table cell on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-md-table-cell">Table cell on medium screens and larger</div>
The d-*-table-row class is used to make an element display as a table row on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-xl-table-row">Table row on extra-large screens and larger</div>
The d-*-flex class is used to make an element display as a flex container on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-lg-flex">Flex container on large screens and larger</div>
The d-*-inline-flex class is used to make an element display as an inline flex container on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-md-inline-flex">Inline flex container on medium screens and larger</div>
The d-print-{display} class is used to set the display property for printing. Replace {display} with the desired display value (e.g., none, block, inline). Here's an example:
<div class="d-print-none">Hidden on print</div>
The flex-*-row class is used to set the flex container to have a row layout on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-md-flex flex-md-row">Flex container with row layout on medium screens and larger</div>
The flex-*-row-reverse class is used to set the flex container to have a reversed row layout on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-lg-flex flex-lg-row-reverse">Flex container with reversed row layout on large screens and larger</div>
The flex-*-column class is used to set the flex container to have a column layout on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-xl-flex flex-xl-column">Flex container with column layout on extra-large screens and larger</div>
The flex-*-column-reverse class is used to set the flex container to have a reversed column layout on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-md-flex flex-md-column-reverse">Flex container with reversed column layout on medium screens and larger</div>
The justify-content-*-{option} class is used to set the horizontal alignment of flex items along the main axis. Replace * with the desired breakpoint (e.g., sm, md, lg, xl) and replace {option} with the alignment option (e.g., start, end, center, between, around). Here's an example:
<div class="d-lg-flex justify-content-lg-center">Centered content on large screens and larger</div>
The align-items-*-{option} class is used to set the vertical alignment of flex items along the cross axis. Replace * with the desired breakpoint (e.g., sm, md, lg, xl) and replace {option} with the alignment option (e.g., start, end, center, baseline, stretch). Here's an example:
<div class="d-md-flex align-items-md-center">Centered items vertically on medium screens and larger</div>
The align-self-*-{option} class is used to set the alignment of a specific flex item along the cross axis. Replace * with the desired breakpoint (e.g., sm, md, lg, xl), and replace {option} with the alignment option (e.g., start, end, center, baseline, stretch). Here's an example:
<div class="align-self-lg-center">Centered self on the cross axis on large screens and larger</div>
The flex-*-fill class is used to make a flex item take up all available space along the main axis on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="flex-xl-fill">Fill available space on extra-large screens and larger</div>
The flex-grow-{option} class is used to set the flexibility factor for a flex item. Replace {option} with a numerical value. Here's an example:
<div class="flex-grow-2">Flex item with a flexibility factor of 2</div>
The flex-shrink-{option} class is used to set the shrink factor for a flex item. Replace {option} with a numerical value. Here's an example:
<div class="flex-shrink-3">Flex item with a shrink factor of 3</div>
The flex-*-nowrap class is used to make a flex container not wrap its content on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-lg-flex flex-lg-nowrap">Flex container with nowrap on large screens and larger</div>
The flex-*-wrap class is used to make a flex container wrap its content on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-xl-flex flex-xl-wrap">Flex container with wrap on extra-large screens and larger</div>
The flex-*-wrap-reverse class is used to make a flex container wrap its content in reverse order on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl). Here's an example:
<div class="d-md-flex flex-md-wrap-reverse">Flex container with wrap in reverse order on medium screens and larger</div>
The order-*-{order-number} class is used to set the order of a flex item on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl), and replace {order-number} with a numerical value. Here's an example:
<div class="order-md-3">Flex item with order 3 on medium screens and larger</div>
The order-*-{order-name} class is used to set the order of a flex item on a specific breakpoint using a named order value. Replace * with the desired breakpoint (e.g., sm, md, lg, xl), and replace {order-name} with a named order value (e.g., first, last, unset). Here's an example:
<div class="order-lg-last">Flex item with order set to last on large screens and larger</div>
The align-content-*-{option} class is used to set the alignment of flex lines within a flex container on a specific breakpoint. Replace * with the desired breakpoint (e.g., sm, md, lg, xl), and replace {option} with the alignment option (e.g., start, end, center, between, around, stretch). Here's an example:
<div class="d-lg-flex align-content-lg-center">Align content to the center on large screens and larger</div>
The user-select-{option} class is used to control the user selection behavior. Replace {option} with values like none, text, all, or auto. Here's an example:
<div class="user-select-none">User selection is disabled</div>
The pe-{option} class is used to control the pointer events for an element. Replace {option} with values like none, auto, or visible. Here's an example:
<div class="pe-none">Pointer events are disabled</div>
The overflow-{option} class is used to control the overflow behavior of an element. Replace {option} with values like auto, hidden, visible, scroll, or auto. Here's an example:
<div class="overflow-auto">Enable auto-scrolling for overflow content</div>
The shadow class is used to apply a default shadow to an element. Additionally, shadow-{option} can be used to apply specific shadow styles. Replace {option} with values like sm, md, lg, xl, or xxl. Here's an example:
<div class="shadow">Default shadow</div>
<div class="shadow-lg">Large shadow</div>
The w-{option} class is used to set the width of an element. Replace {option} with values like 25, 50, 75, 100, or auto. Here's an example:
<div class="w-50">Width set to 50%</div>
The h-{option} class is used to set the height of an element. Replace {option} with values like 25, 50, 75, 100, or auto. Here's an example:
<div class="h-100">Height set to 100%</div>
The mw-100 class is used to set the maximum width of an element to 100%. Here's an example:
<div class="mw-100">Maximum width set to 100%</div>
The mh-100 class is used to set the maximum height of an element to 100%. Here's an example:
<div class="mh-100">Maximum height set to 100%</div>
The viewport class is used to apply styles that make an element cover the entire viewport. Here's an example:
<div class="viewport">Covers the entire viewport</div>
The visible class is used to make an element visible. Here's an example:
<div class="visible">Visible element</div>
The invisible class is used to make an element invisible. Here's an example:
<div class="invisible">Invisible element</div>
The float-*-{option} class is used to float an element to the left or right. Replace * with values like start or end, and replace {option} with values like start, end, top, bottom, center, baseline, or stretch. Here's an example:
<div class="float-start-bottom">Float to the start and align to the bottom</div>
The position-{option} class is used to set the positioning of an element. Replace {option} with values like static, relative, absolute, fixed, sticky, or sticky-{direction}. Here's an example:
<div class="position-relative">Position set to relative</div>
The {direction}-{position} class is used to set the positioning of an element in a specific direction. Replace {direction} with values like top, bottom, start, or end, and replace {position} with values like 0, 50, 100, or auto. Here's an example:
<div class="top-0">Positioned at the top with 0 offset</div>
The translate-middle class is used to horizontally and vertically center an element using the transform property. Here's an example:
<div class="translate-middle">Centered element</div>
The translate-middle-{direction} class is used to center an element in a specific direction using the transform property. Replace {direction} with values like x, y, or xy. Here's an example:
<div class="translate-middle-x">Centered horizontally</div>
The align-{option} class is used to align an element. Replace {option} with values like baseline, top, middle, bottom, text-top, or text-bottom. Here's an example:
<div class="align-middle">Vertically centered using flex</div>
The m-*-{option} class is used to set the margin of an element. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {option} with values like 0, auto, 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="m-3">Margin set to 1rem on all sides</div>
The mt-*-{option} class is used to set the top margin of an element. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {option} with values like 0, auto, 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="mt-2">Top margin set to 0.5rem</div>
The me-*-{option} class is used to set the right margin of an element. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {option} with values like 0, auto, 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="me-4">Right margin set to 1rem</div>
The mb-*-{option} class is used to set the bottom margin of an element. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {option} with values like 0, auto, 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="mb-3">Bottom margin set to 1.5rem</div>
The ms-*-{option} class is used to set the left margin of an element. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {option} with values like 0, auto, 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="ms-5">Left margin set to 1.25rem</div>
The mx-*-{option} class is used to set the horizontal margin of an element. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {option} with values like 0, auto, 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="mx-auto">Horizontal margin set to auto</div>
The my-*-{option} class is used to set the vertical margin of an element. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {option} with values like 0, auto, 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="my-4">Vertical margin set to 2rem</div>
The p-*-{option} class is used to set the padding of an element. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {option} with values like 0, auto, 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="p-4">Padding set to 1rem on all sides</div>
The pt-*-{option} class is used to set the top padding of an element. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {option} with values like 0, auto, 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="pt-3">Top padding set to 0.75rem</div>
The pe-*-{option} class is used to set the right padding of an element. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {option} with values like 0, auto, 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="pe-2">Right padding set to 0.5rem</div>
The pb-*-{option} class is used to set the bottom padding of an element. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {option} with values like 0, auto, 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="pb-5">Bottom padding set to 3.75rem</div>
The ps-*-{option} class is used to set the left padding of an element. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {option} with values like 0, auto, 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="ps-4">Left padding set to 1rem</div>
The px-*-{option} class is used to set the horizontal padding of an element. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {option} with values like 0, auto, 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="px-3">Horizontal padding set to 0.75rem</div>
The py-*-{option} class is used to set the vertical padding of an element. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {option} with values like 0, auto, 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="py-1">Vertical padding set to 0.25rem</div>
The m{direction}-*-n{size} class is used to set negative margin in a specific direction and size. Replace {direction} with values like t, r, b, or l, {size} with values like 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="mt-n3">Top margin set to -0.75rem</div>
The gap-*-{size} class is used to set the gap between grid columns or flex items. Replace * with values like 1, 2, 3, 4, 5, or auto, and replace {size} with values like 1, 2, 3, 4, 5, or auto. Here's an example:
<div class="gap-2">Gap set to 0.5rem</div>
The text-*-start class is used to set the text alignment to the start (left for left-to-right text, right for right-to-left text) on different screen sizes. Replace * with values like sm, md, lg, xl, or xxl. Here's an example:
<div class="text-sm-start">Text aligned to the start on small screens</div>
The text-*-center class is used to set the text alignment to the center on different screen sizes. Replace * with values like sm, md, lg, xl, or xxl. Here's an example:
<div class="text-center">Text aligned to the center on all screens</div>
The text-*-end class is used to set the text alignment to the end (right for left-to-right text, left for right-to-left text) on different screen sizes. Replace * with values like sm, md, lg, xl, or xxl. Here's an example:
<div class="text-lg-end">Text aligned to the end on large screens</div>
The text-wrap class is used to allow text to wrap within an element. Here's an example:
<div class="text-wrap">This text will wrap within the element</div>
The text-nowrap class is used to prevent text from wrapping within an element. Here's an example:
<div class="text-nowrap">This text will not wrap within the element</div>
The text-break class is used to enable word breaking for long words within an element. Here's an example:
<div class="text-break">Thisisaverylongwordthatmightbreakintomultiplelines</div>
The text-{option} class is used to apply additional text-related styling options. Replace {option} with values like lowercase, uppercase, capitalize, monospace, reset, truncate, or other options. Here's an example:
<div class="text-uppercase">This text is in uppercase</div>
The fs-{size} class is used to set the font size of an element. Replace {size} with values like 1, 2, 3, 4, 5, 6, or 7. Here's an example:
<div class="fs-4">Font size set to 1.5rem</div>
The fw-{weight} class is used to set the font weight of an element. Replace {weight} with values like 100, 200, 300, 400, 500, 600, 700, 800, or 900. Here's an example:
<div class="fw-bold">Font weight set to bold</div>
The fst-{style} class is used to set the font style of an element. Replace {style} with values like normal, italic, or oblique. Here's an example:
<div class="fst-italic">Font style set to italic</div>
The lh-{style} class is used to set the line height of an element. Replace {style} with values like 1, 1.25, 1.5, 1.75, or 2. Here's an example:
<div class="lh-1.5">Line height set to 1.5</div>
The font-monospace class is used to set the font family to a monospaced font for an element. Here's an example:
<div class="font-monospace">This text is in a monospaced font</div>
The text-reset class is used to reset text color to the default value. Here's an example:
<div class="text-reset">This text has the default text color</div>
The text-decoration-{option} class is used to apply text decoration to an element. Replace {option} with values like none, underline, overline, line-through, or underline-overline. Here's an example:
<div class="text-decoration-underline">Text with underline decoration</div>
The opacity-{value} class is used to set the opacity of an element. Replace {value} with values like 0, 0.1, 0.2, ..., 0.9, or 1. Here's an example:
<div class="opacity-75">Element with 75% opacity</div>
The bg-opacity-{value} class is used to set the background opacity of an element. Replace {value} with values like 0, 0.1, 0.2, ..., 0.9, or 1. Here's an example:
<div class="bg-opacity-50">Element with background 50% opacity</div>
The text-opacity-{value} class is used to set the text opacity of an element. Replace {value} with values like 0, 0.1, 0.2, ..., 0.9, or 1. Here's an example:
<div class="text-opacity-25">Text with 25% opacity</div>