Elysia Tools
Navigation mobile
CSS Frameworks
Exemples Bootstrap 5
Exemples du framework CSS Bootstrap 5 incluant les composants, utilitaires, système de mise en page et modèles de conception responsive
Exemples
Entrées de cette collection
Code sourcehtmlSimple
Système de Grille Bootstrap
Exemples complets du système de grille Bootstrap 5 avec points d'arrêt responsifs et utilitaires de mise en page
Difficulté
3/10
Temps estimé
20 min
Étiquettes
bootstrap, grid, layout, responsive
Prérequis
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>Code sourcehtmlIntermédiaire
Composants Bootstrap 5
Composants UI essentiels Bootstrap 5 incluant boutons, cartes, modales, navigation et formulaires
Difficulté
4/10
Temps estimé
30 min
Étiquettes
bootstrap, components, ui
Prérequis
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>Code sourcehtmlIntermédiaire
Formulaires Bootstrap 5
Composants de formulaires Bootstrap 5 incluant champs, validation, cases à cocher, boutons radio et mises en page de formulaires
Difficulté
5/10
Temps estimé
35 min
Étiquettes
bootstrap, forms, validation, ui
Prérequis
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>Code sourcehtmlIntermédiaire
Navigation Bootstrap 5
Composants de navigation Bootstrap 5 incluant barre de navigation, navs, breadcrumbs, pagination et offcanvas
Difficulté
5/10
Temps estimé
30 min
Étiquettes
bootstrap, navigation, ui, layout
Prérequis
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>Code sourcehtmlSimple
Utilitaires Bootstrap 5
Classes d'utilité Bootstrap 5 pour espacement, typographie, couleurs, bordures, affichage et conception responsive
Difficulté
3/10
Temps estimé
25 min
Étiquettes
bootstrap, utilities, css, helper-classes
Prérequis
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>Outils
Outils souvent utilisés avec cet exemple
Associé