- Include Bootstrap’s CSS :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
- Include Bootstrap’s JS :
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
- .container class :
The .container class provides a responsive fixed width container
<div class="container">
<h1>Welcome to SpecBits</h1>
<p>This is a software company.</p>
</div>
- .container-fluid class :
The .container-fluid class provides a full width container, spanning the entire width of the viewport
<div class="container-fluid">
<h1>Welcome to SpecBits</h1>
<p>This is a software company.</p>
</div>
- Container Padding :
By default, containers have 15px left and right padding, with no top or bottom padding. Therefore, we often use spacing utilities, such as extra padding and margins to make them look even better. For example, .pt-3 means "add a top padding of 16px":
<div class="container pt-3">
<h1>Welcome to SpecBits</h1>
<p>This is a software company.</p>
</div>
- Container Border and Color :
Other utilities, such as borders and colors, are also often used together with containers:
<div class="container p-3 my-3 border">
<h1>My First Bootstrap Page</h1>
<p>This container has a border and some extra padding and margins.</p>
</div>
<div class="container p-3 my-3 bg-success text-white">
<h1>My First Bootstrap Page</h1>
<p>This container has a dark background color and a white text, and some extra padding and margins.</p>
</div>
<div class="container p-3 my-3 bg-primary text-white">
<h1>My First Bootstrap Page</h1>
<p>This container has a blue background color and a white text, and some extra padding and margins.</p>
</div>
- Responsive Containers :
You can also use the .container-sm|md|lg|xl classes to create responsive containers.
The max-width of the container will change on different screen sizes/viewports:
<div class="container-sm border">
<div class="container">
<h1>Responsive Containers</h1>
<p>Resize the browser window to see the effect.</p>
</div>
</div>
<div class="container-md mt-3 border">
<div class="container">
<h1>Responsive Containers</h1>
<p>Resize the browser window to see the effect.</p>
</div>
</div>
<div class="container-lg mt-3 border">
<div class="container">
<h1>Responsive Containers</h1>
<p>Resize the browser window to see the effect.</p>
</div>
</div>
<div class="container-xl mt-3 border">
<div class="container">
<h1>Responsive Containers</h1>
<p>Resize the browser window to see the effect.</p>
</div>
</div>
- Bootstrap 5 Grid :
create a row (div class="row"). Then, add the desired number of columns (tags with appropriate .col-*-* classes). The first star (*) represents the responsiveness: sm, md, lg, xl or xxl, while the second star represents a number, which should add up to 12 for each row.
<div class="row">
<div class="col-*-*">1</div>
<div class="col-*-*">2</div>
</div>
instead of adding a number to each col, let bootstrap handle the layout, to create equal width columns: two "col" elements = 50% width to each col, while three cols = 33.33% width to each col. Four cols = 25% width, etc. You can also use .col-sm|md|lg|xl|xxl to make the columns responsive.
<div class="row border">
<div class="col border bg-success">1</div>
<div class="col border bg-danger">2</div>
<div class="col border bg-primary">3</div>
</div>
Responsive Columns
<div class="row">
<div class="col-sm-3 border bg-success">.col-sm-3</div>
<div class="col-sm-3 border bg-success">.col-sm-3</div>
<div class="col-sm-3 border bg-success">.col-sm-3</div>
<div class="col-sm-3 border bg-success">.col-sm-3</div>
</div>
- Bootstrap 5 Text/Typography :
You can also use .h1 to .h6 classes on other elements to make them behave as headings if you want:
<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4 Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p class="h6">h6 Bootstrap heading</p>
Display Headings :
Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are six classes to choose from: .display-1 to .display-6:
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
- Bootstrap 5 Colors :
Text Colors :
Bootstrap 5 has some contextual classes that can be used to provide "meaning through colors".
The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:
<div class="container mt-3">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light">This text is light grey (on white background).</p>
<p class="text-white">This text is white (on white background).</p>
</div>
Note :- You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:
Background Colors :
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
<div class="container mt-3">
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors".</p>
<div class="bg-primary p-3"></div>
<div class="bg-success p-3"></div>
<div class="bg-info p-3"></div>
<div class="bg-warning p-3"></div>
<div class="bg-danger p-3"></div>
<div class="bg-secondary p-3"></div>
<div class="bg-dark p-3"></div>
<div class="bg-light p-3"></div>
</div>
- Bootstrap 5 Tables :
Basic Table :
A basic Bootstrap 5 table has a light padding and horizontal dividers.
The .table class adds basic styling to a table:
<div class="container mt-3">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kaushal</td>
<td>Jacker</td>
<td>ykaushal638@gmail.com</td>
</tr>
<tr>
<td>Kaushal</td>
<td>Jacker</td>
<td>ykaushal638@gmail.com</td>
</tr>
<tr>
<td>Kaushal</td>
<td>Jacker</td>
<td>ykaushal638@gmail.com</td>
</tr>
</tbody>
</table>
</div>
Striped Rows :
<div class="container mt-3">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kaushal</td>
<td>Jacker</td>
<td>ykaushal638@gmail.com</td>
</tr>
<tr>
<td>Kaushal</td>
<td>Jacker</td>
<td>ykaushal638@gmail.com</td>
</tr>
<tr>
<td>Kaushal</td>
<td>Jacker</td>
<td>ykaushal638@gmail.com</td>
</tr>
</tbody>
</table>
</div>
Note :- The .table-bordered class adds borders on all sides of the table and cells:
The .table-hover class adds a hover effect (grey background color) on table rows:
The .table-dark class adds a black background to the table:
Combine .table-dark and .table-striped to create a dark, striped table:
The .table-hover class adds a hover effect (grey background color) on table rows:
The .table-borderless class removes borders from the table:
- Bootstrap 5 Images :
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Aligning Images :
<img src="paris.jpg" class="float-start" alt="Paris" width="304" height="236">
<img src="paris.jpg" class="float-end" alt="Paris" width="304" height="236">
Centered Image :
<img src="paris.jpg" class="mx-auto d-block" style="width:50%">
Responsive Images :
<img class="img-fluid" src="ny.jpg" alt="New York">
- Bootstrap 5 Alerts :
Alerts
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
<div class="alert alert-primary">
<strong>Primary!</strong> Indicates an important action.
</div>
<div class="alert alert-secondary">
<strong>Secondary!</strong> Indicates a slightly less important action.
</div>
<div class="alert alert-dark">
<strong>Dark!</strong> Dark grey alert.
</div>
<div class="alert alert-light">
<strong>Light!</strong> Light grey alert.
</div>
Alert Links :
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
<div class="alert alert-info">
<strong>Info!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
<div class="alert alert-primary">
<strong>Primary!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
<div class="alert alert-secondary">
<strong>Secondary!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
<div class="alert alert-dark">
<strong>Dark!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
<div class="alert alert-light">
<strong>Light!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Closing Alerts :
<div class="alert alert-success alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
<div class="alert alert-primary alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Primary!</strong> Indicates an important action.
</div>
<div class="alert alert-secondary alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Secondary!</strong> Indicates a slightly less important action.
</div>
<div class="alert alert-dark alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Dark!</strong> Dark grey alert.
</div>
<div class="alert alert-light alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Light!</strong> Light grey alert.
</div>
Animated Alerts :
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
<div class="alert alert-primary alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Primary!</strong> Indicates an important action.
</div>
<div class="alert alert-secondary alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Secondary!</strong> Indicates a slightly less important action.
</div>
<div class="alert alert-dark alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Dark!</strong> Dark grey alert.
</div>
<div class="alert alert-light alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Light!</strong> Light grey alert.
</div>
- Bootstrap 5 Buttons :
Button Styles
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Button Sizes :
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Block Level Buttons:
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</div>
Active/Disabled Buttons :
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
Spinner Buttons :
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
Note :- Use a (div) element with class .btn-group to create a button group:
Instead of applying button sizes to every button in a group, use class .btn-group-lg for a large button group or the .btn-group-sm for a small button group:
Use the class .btn-group-vertical to create a vertical button group:
- Bootstrap 5 Cards :
Header and Footer
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div> <br>
Titles, text, and links :
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div><br>
Card Images :
<div class="card" style="width:400px">
<img class="card-img-top" src="../bootstrap4/img_avatar1.png" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
Card Image Overlays :
<div class="card img-fluid" style="width:500px">
<img class="card-img-top" src="copy-icon-vector-illustration.jpg" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
- Bootstrap 5 Dropdowns :
Basic Dropdown
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
Dropdown Divider :
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
</div>
- Bootstrap 5 Collapse :
Basic Collapsible
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
Accordion :
<div class="card">
<div class="card-header">
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
- Bootstrap 5 Navs :
Nav Menus
<div class="container mt-3">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
Toggleable / Dynamic Tabs:
<div class="container mt-3">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#">Menu 2</a>
</li>
</ul>
</div>
- Bootstrap 5 Navbars :
Navbar Logo, Dropdown, Forms and Buttons
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="copy-icon-vector-illustration.jpg" alt="Logo" style="width:40px;" class="rounded-pill">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
<li><a class="dropdown-item" href="#">A third link</a></li>
</ul>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</div>
</nav>
Note : The .fixed-top class makes the navigation bar fixed at the top:
Use the .fixed-bottom class to make the navbar stay at the bottom of the page:
- Bootstrap 5 Carousel :
Carousel / Slideshow
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="178921.png" alt="Los Angeles" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="copy-icon-9.png" alt="Chicago" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="copy-icon-vector-illustration.jpg" alt="New York" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
- Bootstrap 5 Modal :
Modals
<div class="container mt-3">
<h3>Fading Modal Example</h3>
<p>Click on the button to open the modal.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Open modal</button>
</div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
Modal body..
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Notes :- Change the size of the modal by adding the .modal-sm class for small modals (max-width 300px), .modal-lg class for large modals (max-width 800px), or .modal-xl for extra large modals (max-width 1140px). Default is 500px max-width.
Add the size class to the (div) element with class .modal-dialog:
If you want the modal to span the whole width and height of the page, use the .modal-fullscreen class:
However, it is possible to only scroll inside the modal, instead of the page itself, by adding .modal-dialog-scrollable to .modal-dialog:
- Bootstrap 5 Flex :
Flexbox
<div class="container mt-3">
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>
Note :- To create an inline flexbox container, use the d-inline-flex class:
Horizontal Direction :- Use .flex-row to display the flex items horizontally (side by side). This is default.
<div class="container mt-3">
<div class="d-flex flex-row bg-secondary mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>
Tip: Use .flex-row-reverse to right-align the horizontal direction:
Note :- Vertical Direction Use .flex-column to display the flex items vertically (on top of each other), or .flex-column-reverse to reverse the vertical direction:
Justify Content :- Use the .justify-content-* classes to change the alignment of flex items. Valid classes are start (default), end, center, between or around:
<div class="container mt-3">
<div class="d-flex justify-content-start bg-secondary mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>
Try this all by yourself :-
Fill / Equal Widths :- Use .flex-fill on flex items to force them into equal widths:
Grow :- Use .flex-grow-1 on a flex item to take up the rest of the space.
Tip: Use .flex-shrink-1 :- on a flex item to make it shrink if necessary.
Auto Margins :- Easily add auto margins to flex items with .ms-auto (push items to the right), or by using .me-auto (push items to the left):
Wrap :- Control how flex items wrap in a flex container with .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse.
Align Content :- Control the vertical alignment of gathered flex items with the .align-content-* classes. Valid classes are .align-content-start (default), .align-content-end, .align-content-center, .align-content-between, .align-content-around and .align-content-stretch
Align Items :- Control the vertical alignment of single rows of flex items with the .align-items-* classes. Valid classes are .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch (default).
Align Self :- Control the vertical alignment of a specified flex item with the .align-self-* classes. Valid classes are .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, and .align-self-stretch (default).
- Bootstrap 5 Forms :
Stacked Form
<div class="container mt-3">
<form>
<div class="mb-3 mt-3">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="mb-3">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<div class="mb-3 mt-3">
<label for="comment">Comments:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
Form Row/Grid (Inline Forms)
<div class="container mt-3">
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
</div>
Disabled and Readonly
<div class="container mt-3">
<form>
<input type="text" class="form-control" placeholder="Normal input">
<input type="text" class="form-control mt-3" placeholder="Disabled input" disabled>
<input type="text" class="form-control mt-3" placeholder="Readonly input" readonly>
</form>
</div>
Notes :- Use the .form-control-plaintext class to style an input field without borders, but keep proper marigins and padding:
To style an input with type="color" properly, use the .form-control-color class:
- Bootstrap 5 Select :
Select Menu
<div class="container mt-3">
<form>
<label for="sel1" class="form-label">Select list (select one):</label>
<select class="form-select" id="sel1" name="sellist1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<label for="sel2" class="form-label">Mutiple select list (hold shift to select more than one):</label>
<select multiple class="form-select" id="sel2" name="sellist2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>
</div>
- Bootstrap 5 Checkboxes and Radio buttons :
Checkboxes
<div class="container mt-3">
<h2>Checkboxes</h2>
<form>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>
<label class="form-check-label" for="check1">Option 1</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
<label class="form-check-label" for="check2">Option 2</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" disabled>
<label class="form-check-label">Option 3</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
Radio buttons
<div class="container mt-3">
<h2>Radio buttons</h2>
<form>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>
<label class="form-check-label" for="radio1">Option 1</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">
<label class="form-check-label" for="radio2">Option 2</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" disabled>
<label class="form-check-label">Option 3</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
Toggle Switches
<div class="container mt-3">
<h2>Toggle Switch</h2>
<form>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
<label class="form-check-label" for="mySwitch">Dark Mode</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
- Bootstrap 5 Range :
Custom Range
<div class="container mt-3">
<form>
<label for="customRange" class="form-label">Custom range</label>
<input type="range" class="form-range" id="customRange" name="points">
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
Note :- Steps By default, the interval between the range numbers is 1. You can change it by using the step attribute:
Min and Max :- By default, the minimum value is 0 and maximum value is 100. You can use the min and/or max attribute change it:
- Bootstrap 5 Input Groups :
Input Groups
<div class="container mt-3">
<form>
<label for="customRange" class="form-label">Custom range</label>
<input type="range" class="form-range" id="customRange" name="points">
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
Note :- Steps By default, the interval between the range numbers is 1. You can change it by using the step attribute:
Min and Max :- By default, the minimum value is 0 and maximum value is 100. You can use the min and/or max attribute change it:
- Bootstrap 5 Form Floating Labels :
Floating Labels / Animated Labels / Textarea
<div class="container mt-3">
<form>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
<label for="email">Email</label>
</div>
<div class="form-floating mt-3 mb-3">
<input type="text" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
<label for="pwd">Password</label>
</div>
<div class="form-floating mb-3 mt-3">
<textarea class="form-control" id="comment" name="text" placeholder="Comment goes here"></textarea>
<label for="comment">Comments</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
- Bootstrap 5 Form Validation :
Form Validation
<div class="container mt-3">
<form class="was-validated">
<div class="mb-3 mt-3">
<label for="uname" class="form-label">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="myCheck" name="remember" required>
<label class="form-check-label" for="myCheck">I agree on blabla.</label>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
- Bootstrap 5 Offcanvas :
Offcanvas
<div class="offcanvas offcanvas-start" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Offcanvas Sidebar</h3>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button>
</div>
