Elysia Tools
Navigation
CSS Frameworks
Bootstrap 5 Samples
Bootstrap 5 CSS framework examples including components, utilities, layout system, and responsive design patterns
Samples
Entries inside this sample collection
CodehtmlSimple
Bootstrap Grid Layout System
Complete Bootstrap 5 grid system examples with responsive breakpoints and layout utilities
Difficulty
3/10
Estimated time
20 min
Tags
bootstrap, grid, layout, responsive
Prerequisites
HTML basics, CSS basics
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Grid System</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.demo-cell {
background-color: #007bff;
color: white;
border: 1px solid rgba(255,255,255,0.3);
padding: 1rem;
text-align: center;
}
</style>
</head>
<body>
<div class="container mt-4">
<h1>Bootstrap 5 Grid System Examples</h1>
<!-- Basic Grid -->
<h2 class="mt-4">Basic Grid</h2>
<div class="row">
<div class="col demo-cell">Column 1</div>
<div class="col demo-cell">Column 2</div>
<div class="col demo-cell">Column 3</div>
</div>
<!-- Grid with Column Sizing -->
<h2 class="mt-4">Column Sizing</h2>
<div class="row">
<div class="col-4 demo-cell">col-4</div>
<div class="col-4 demo-cell">col-4</div>
<div class="col-4 demo-cell">col-4</div>
</div>
<div class="row mt-2">
<div class="col-6 demo-cell">col-6</div>
<div class="col-6 demo-cell">col-6</div>
</div>
<!-- Responsive Grid -->
<h2 class="mt-4">Responsive Grid</h2>
<div class="row">
<div class="col-12 col-md-6 col-lg-4 demo-cell">
12 on mobile, 6 on tablet, 4 on desktop
</div>
<div class="col-12 col-md-6 col-lg-4 demo-cell">
12 on mobile, 6 on tablet, 4 on desktop
</div>
<div class="col-12 col-md-12 col-lg-4 demo-cell">
12 on mobile/tablet, 4 on desktop
</div>
</div>
<!-- Auto Layout Columns -->
<h2 class="mt-4">Auto Layout Columns</h2>
<div class="row">
<div class="col demo-cell">Auto column</div>
<div class="col demo-cell">Auto column</div>
<div class="col demo-cell">Auto column</div>
</div>
<!-- Nested Grid -->
<h2 class="mt-4">Nested Grid</h2>
<div class="row">
<div class="col-8 demo-cell" style="background-color: #28a745;">
<div class="row">
<div class="col-6" style="background-color: #17a2b8;">Nested 1</div>
<div class="col-6" style="background-color: #17a2b8;">Nested 2</div>
</div>
</div>
<div class="col-4 demo-cell">Column</div>
</div>
<!-- Offset Columns -->
<h2 class="mt-4">Offset Columns</h2>
<div class="row">
<div class="col-4 demo-cell">Column</div>
<div class="col-4 offset-4 demo-cell">Offset 4</div>
</div>
<!-- Gutter Utilities -->
<h2 class="mt-4">Gutter Utilities</h2>
<div class="row g-0">
<div class="col-6 demo-cell">No gutter</div>
<div class="col-6 demo-cell">No gutter</div>
</div>
<div class="row g-3 mt-2">
<div class="col-6 demo-cell">Gutter 3</div>
<div class="col-6 demo-cell">Gutter 3</div>
</div>
<!-- Row and Column Utilities -->
<h2 class="mt-4">Row and Column Utilities</h2>
<div class="row justify-content-center">
<div class="col-4 demo-cell">Centered</div>
</div>
<div class="row justify-content-end">
<div class="col-4 demo-cell">Right aligned</div>
</div>
<div class="row justify-content-between">
<div class="col-3 demo-cell">Left</div>
<div class="col-3 demo-cell">Right</div>
</div>
</div>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>CodehtmlIntermediate
Bootstrap 5 Components
Essential Bootstrap 5 UI components including buttons, cards, modals, navigation, and forms
Difficulty
4/10
Estimated time
30 min
Tags
bootstrap, components, ui
Prerequisites
HTML basics, CSS basics, Bootstrap grid system
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Components</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<div class="container mt-4">
<h1>Bootstrap 5 Components</h1>
<!-- Buttons -->
<h2 class="mt-5">Buttons</h2>
<div class="mb-3">
<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
</div>
<div class="mb-3">
<button type="button" class="btn btn-outline-primary">Primary Outline</button>
<button type="button" class="btn btn-outline-secondary">Secondary Outline</button>
<button type="button" class="btn btn-outline-success">Success Outline</button>
</div>
<div class="mb-3">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
</div>
<!-- Alerts -->
<h2 class="mt-5">Alerts</h2>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
<i class="bi bi-check-circle-fill me-2"></i>
Success! Your changes have been saved.
</div>
<div class="alert alert-danger" role="alert">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
Danger! Something went wrong.
</div>
<!-- Cards -->
<h2 class="mt-5">Cards</h2>
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special Title Treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">Primary Card</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<!-- Badges -->
<h2 class="mt-5">Badges</h2>
<div class="mb-3">
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
</div>
<div class="mb-3">
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>
</div>
<div class="mb-3">
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
</div>
<!-- Progress -->
<h2 class="mt-5">Progress</h2>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<!-- List Groups -->
<h2 class="mt-5">List Groups</h2>
<div class="row">
<div class="col-md-4">
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
<div class="col-md-4">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>
</div>
<div class="col-md-4">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>CodehtmlIntermediate
Bootstrap 5 Forms
Bootstrap 5 form components including inputs, validation, checkboxes, radio buttons, and form layouts
Difficulty
5/10
Estimated time
35 min
Tags
bootstrap, forms, validation, ui
Prerequisites
HTML forms, Bootstrap basics, JavaScript basics
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Forms</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<h1>Bootstrap 5 Forms</h1>
<!-- Basic Form -->
<h2 class="mt-5">Basic Form</h2>
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- Form Controls -->
<h2 class="mt-5">Form Controls</h2>
<form>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleFormControlSelect1" class="form-label">Select dropdown</label>
<select class="form-select" id="exampleFormControlSelect1">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="mb-3">
<label for="exampleFormControlSelect2" class="form-label">Multiple select</label>
<select multiple class="form-select" id="exampleFormControlSelect2">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="mb-3">
<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">Multiple files input example</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
</form>
<!-- Sizing -->
<h2 class="mt-5">Form Sizing</h2>
<div class="mb-3">
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
</div>
<div class="mb-3">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
</div>
<div class="mb-3">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
</div>
<!-- Checkboxes and Radios -->
<h2 class="mt-5">Checkboxes and Radios</h2>
<div class="row">
<div class="col-md-6">
<h5>Checkboxes</h5>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
Disabled checkbox
</label>
</div>
</div>
<div class="col-md-6">
<h5>Radio buttons</h5>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
Disabled radio
</label>
</div>
</div>
</div>
<!-- Inline Checkboxes and Radios -->
<h2 class="mt-5">Inline Checkboxes and Radios</h2>
<div class="mb-3">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
</div>
<div class="mb-3">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
</div>
<!-- Form Validation -->
<h2 class="mt-5">Form Validation</h2>
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-6">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationCustom03" class="form-label">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-6">
<label for="validationCustom04" class="form-label">State</label>
<select class="form-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-6">
<label for="validationCustom05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
<!-- Input Groups -->
<h2 class="mt-5">Input Groups</h2>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Search</button>
</div>
</div>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>
</body>
</html>CodehtmlIntermediate
Bootstrap 5 Navigation
Bootstrap 5 navigation components including navbar, navs, breadcrumbs, pagination, and offcanvas
Difficulty
5/10
Estimated time
30 min
Tags
bootstrap, navigation, ui, layout
Prerequisites
HTML basics, Bootstrap components, JavaScript basics
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Navigation</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<!-- Basic Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">Navbar</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" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<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>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container mt-4">
<h1>Bootstrap 5 Navigation Examples</h1>
<!-- Color Schemes -->
<h2 class="mt-5">Navbar Color Schemes</h2>
<div class="row">
<div class="col-12 mb-3">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Light</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarLight" aria-controls="navbarLight" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarLight">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="col-12 mb-3">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dark</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDark" aria-controls="navbarDark" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarDark">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Navs and Tabs -->
<h2 class="mt-5">Navs and Tabs</h2>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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">Disabled</a>
</li>
</ul>
<!-- Pills -->
<h3 class="mt-4">Pills</h3>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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">Disabled</a>
</li>
</ul>
<!-- Fill and Justify -->
<h3 class="mt-4">Fill and Justify</h3>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<!-- Tabs with Dropdown -->
<h3 class="mt-4">Tabs with Dropdown</h3>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<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>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<!-- Breadcrumbs -->
<h2 class="mt-5">Breadcrumbs</h2>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<!-- Pagination -->
<h2 class="mt-5">Pagination</h2>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<!-- Pagination with Icons -->
<h3 class="mt-4">Pagination with Icons</h3>
<nav aria-label="Page navigation example">
<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>
<!-- Disabled and Active States -->
<h3 class="mt-4">Disabled and Active States</h3>
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<!-- Sizing -->
<h3 class="mt-4">Sizing</h3>
<div class="mb-3">
<nav aria-label="Page navigation example">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<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>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item active" aria-current="page">
<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>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<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>
</ul>
</nav>
</div>
<!-- Offcanvas -->
<h2 class="mt-5">Offcanvas</h2>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Toggle left offcanvas
</button>
<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
Toggle right offcanvas
</button>
</div>
<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas Right</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Content for the offcanvas that appears from the right side.
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>CodehtmlSimple
Bootstrap 5 Utilities
Bootstrap 5 utility classes for spacing, typography, colors, borders, display, and responsive design
Difficulty
3/10
Estimated time
25 min
Tags
bootstrap, utilities, css, helper-classes
Prerequisites
CSS basics, Bootstrap basics
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Utilities</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
.demo-box {
background-color: #e9ecef;
border: 1px solid #dee2e6;
min-height: 2rem;
}
.demo-text {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
padding: 0.5rem;
}
</style>
</head>
<body>
<div class="container mt-4">
<h1>Bootstrap 5 Utilities Examples</h1>
<!-- Spacing -->
<h2 class="mt-5">Spacing Utilities</h2>
<h3>Margin</h3>
<div class="demo-box m-0">m-0 (no margin)</div>
<div class="demo-box m-1">m-1 (0.25rem)</div>
<div class="demo-box m-2">m-2 (0.5rem)</div>
<div class="demo-box m-3">m-3 (1rem)</div>
<div class="demo-box m-4">m-4 (1.5rem)</div>
<div class="demo-box m-5">m-5 (3rem)</div>
<h4 class="mt-4">Directional Margins</h4>
<div class="demo-box mt-3">mt-3 (margin-top)</div>
<div class="demo-box me-3">me-3 (margin-end)</div>
<div class="demo-box mb-3">mb-3 (margin-bottom)</div>
<div class="demo-box ms-3">ms-3 (margin-start)</div>
<div class="demo-box mx-3">mx-3 (margin left & right)</div>
<div class="demo-box my-3">my-3 (margin top & bottom)</div>
<h3 class="mt-4">Padding</h3>
<div class="demo-box p-0">p-0 (no padding)</div>
<div class="demo-box p-1">p-1 (0.25rem)</div>
<div class="demo-box p-2">p-2 (0.5rem)</div>
<div class="demo-box p-3">p-3 (1rem)</div>
<div class="demo-box p-4">p-4 (1.5rem)</div>
<div class="demo-box p-5">p-5 (3rem)</div>
<!-- Typography -->
<h2 class="mt-5">Typography Utilities</h2>
<h3>Headings</h3>
<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>
<h4 class="mt-4">Lead and Font Size</h4>
<p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>
<p class="fs-1">fs-1 text</p>
<p class="fs-2">fs-2 text</p>
<p class="fs-3">fs-3 text</p>
<p class="fs-4">fs-4 text</p>
<p class="fs-5">fs-5 text</p>
<p class="fs-6">fs-6 text</p>
<h4 class="mt-4">Font Weight and Style</h4>
<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder text</p>
<p class="fw-normal">Normal weight text</p>
<p class="fw-light">Light text</p>
<p class="fw-lighter">Lighter text</p>
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal style text</p>
<h4 class="mt-4">Text Alignment</h4>
<p class="text-start">Start aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">End aligned text.</p>
<h4 class="mt-4">Text Transform</h4>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
<!-- Colors -->
<h2 class="mt-5">Color Utilities</h2>
<h3>Text Colors</h3>
<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning text-dark">Warning text</p>
<p class="text-info text-dark">Info text</p>
<p class="text-light bg-dark">Light text</p>
<p class="text-dark">Dark text</p>
<p class="text-body">Body text</p>
<p class="text-muted">Muted text</p>
<p class="text-white bg-dark">White text</p>
<h4 class="mt-4">Background Colors</h4>
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white border">.bg-white</div>
<div class="p-3 mb-2 bg-transparent border">.bg-transparent</div>
<!-- Borders -->
<h2 class="mt-5">Border Utilities</h2>
<h3>Border Additive</h3>
<div class="demo-box border">.border</div>
<div class="demo-box border-top">.border-top</div>
<div class="demo-box border-end">.border-end</div>
<div class="demo-box border-bottom">.border-bottom</div>
<div class="demo-box border-start">.border-start</div>
<h4 class="mt-4">Border Subtractive</h4>
<div class="demo-box border border-0">.border-0</div>
<div class="demo-box border border-top-0">.border-top-0</div>
<div class="demo-box border border-end-0">.border-end-0</div>
<div class="demo-box border border-bottom-0">.border-bottom-0</div>
<div class="demo-box border border-start-0">.border-start-0</div>
<h4 class="mt-4">Border Color</h4>
<div class="demo-box border border-primary">.border-primary</div>
<div class="demo-box border border-secondary">.border-secondary</div>
<div class="demo-box border border-success">.border-success</div>
<div class="demo-box border border-danger">.border-danger</div>
<div class="demo-box border border-warning">.border-warning</div>
<div class="demo-box border border-info">.border-info</div>
<div class="demo-box border border-light">.border-light</div>
<div class="demo-box border border-dark">.border-dark</div>
<h4 class="mt-4">Border Width</h4>
<div class="demo-box border border-1">.border-1</div>
<div class="demo-box border border-2">.border-2</div>
<div class="demo-box border border-3">.border-3</div>
<div class="demo-box border border-4">.border-4</div>
<div class="demo-box border border-5">.border-5</div>
<h4 class="mt-4">Border Radius</h4>
<div class="demo-box border rounded">.rounded</div>
<div class="demo-box border rounded-top">.rounded-top</div>
<div class="demo-box border rounded-end">.rounded-end</div>
<div class="demo-box border rounded-bottom">.rounded-bottom</div>
<div class="demo-box border rounded-start">.rounded-start</div>
<div class="demo-box border rounded-circle">.rounded-circle</div>
<div class="demo-box border rounded-pill">.rounded-pill</div>
<div class="demo-box border rounded-0">.rounded-0</div>
<!-- Display -->
<h2 class="mt-5">Display Utilities</h2>
<div class="demo-box d-block">d-block</div>
<div class="demo-box d-inline">d-inline</div>
<span class="demo-box d-inline-block">d-inline-block</span>
<h4 class="mt-4">Hiding Elements</h4>
<div class="demo-box d-none">d-none (hidden)</div>
<div class="demo-box d-inline d-none d-lg-block">Only visible on large screens and up</div>
<h4 class="mt-4">Flexbox Utilities</h4>
<div class="d-flex p-2 bg-light mb-3">
<div class="p-2 bg-primary text-white flex-fill">Flex item</div>
<div class="p-2 bg-secondary text-white flex-fill">Flex item</div>
<div class="p-2 bg-info text-white flex-fill">Flex item</div>
</div>
<div class="d-flex p-2 bg-light mb-3">
<div class="p-2 bg-primary text-white me-auto">Flex item with margin auto</div>
<div class="p-2 bg-secondary text-white">Flex item</div>
<div class="p-2 bg-info text-white">Flex item</div>
</div>
<!-- Position -->
<h2 class="mt-5">Position Utilities</h2>
<div class="position-relative p-3 bg-light" style="height: 200px;">
<div class="position-absolute top-0 start-0">Top left</div>
<div class="position-absolute top-0 end-0">Top right</div>
<div class="position-absolute top-50 start-50 translate-middle">Center</div>
<div class="position-absolute bottom-0 start-0">Bottom left</div>
<div class="position-absolute bottom-0 end-0">Bottom right</div>
</div>
<!-- Sizing -->
<h2 class="mt-5">Sizing Utilities</h2>
<div class="demo-box w-25">Width 25%</div>
<div class="demo-box w-50">Width 50%</div>
<div class="demo-box w-75">Width 75%</div>
<div class="demo-box w-100">Width 100%</div>
<div class="demo-box w-auto">Width auto</div>
<h4 class="mt-4">Height</h4>
<div class="demo-box" style="height: 25vh;">Height 25vh</div>
<div class="demo-box" style="height: 50vh;">Height 50vh</div>
<div class="demo-box" style="height: 75vh;">Height 75vh</div>
<div class="demo-box" style="height: 100vh;">Height 100vh</div>
<!-- Shadow -->
<h2 class="mt-5">Shadow Utilities</h2>
<div class="demo-box shadow-none">No shadow</div>
<div class="demo-box shadow-sm">Small shadow</div>
<div class="demo-box shadow">Regular shadow</div>
<div class="demo-box shadow-lg">Large shadow</div>
<!-- Overflow -->
<h2 class="mt-5">Overflow Utilities</h2>
<div class="demo-box overflow-auto" style="height: 100px;">
This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions.
By design, this content will vertically scroll if the content exceeds the defined height of the element.
</div>
<div class="demo-box overflow-hidden mt-3" style="height: 100px;">
This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
By design, this content will be clipped to the dimensions of the element.
</div>
<!-- Responsive Utilities -->
<h2 class="mt-5">Responsive Utilities</h2>
<h3>Display Responsive</h3>
<div class="d-none d-sm-block d-md-none">Hidden on mobile, visible only on tablet</div>
<div class="d-none d-md-block d-lg-none">Hidden on tablet, visible only on desktop</div>
<div class="d-none d-lg-block">Hidden on tablet and mobile, visible only on large screens</div>
<h4 class="mt-4">Flex Direction Responsive</h3>
<div class="d-flex flex-column flex-md-row">
<div class="demo-box flex-fill">Item 1</div>
<div class="demo-box flex-fill">Item 2</div>
<div class="demo-box flex-fill">Item 3</div>
</div>
</div>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Tools
Tools frequently paired with this sample
Related