Bootstrap 5
Apparence
Links
Grid system
Breakpoints
Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.
class | dimension |
---|---|
col- col-auto- | adaptation de la largeur au contenu |
col-sm- | ≥ 576px |
col-md- | ≥ 768px |
col-lg- | ≥ 992px |
col-xl- | ≥ 1200px |
col-xxl- | ≥ 1400px |
Grid layout
![]() |
Une page est divisé en 12 colonnes. |
<!-- définit une ligne -->
<div class="row">
<!-- définit 3 colonnes de même taille -->
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
<div class="row">
<!-- définit 3 colonnes, la première 2x plus large que les autres. Il y a 12 colonnes (6-3-3) -->
<div class="col-6">...</div>
<div class="col">...</div>
<div class="col">...</div>
<!-- centrer verticalement tous les éléments de la ligne -->
<div class="row align-items-center">
<!-- centrer verticalement un élément de la ligne -->
<div class="col align-self-center">...</div>
<!-- centrer horizontalement la ligne -->
<div class="row justify-content-center">
|
Utilities
Margin / Padding
class | Description |
---|---|
m-0 | margin: 0 !important |
p-3 | padding: 1rem !important |
mx-auto | margin-right: auto !important margin-left: auto !important |
Side | Description |
---|---|
t | top |
b | bottom |
s | start (left in LTR) |
e | end (right in LTR) |
x | left and right |
y | top and bottom |
Value | Description |
---|---|
0 | 0 |
1 | $spacer * .25 = 0.25rem |
2 | $spacer * .5 = 0.5rem |
3 | $spacer = 1rem |
4 | $spacer * 1.5 = 1.5rem |
5 | $spacer * 3 = 3rem |
auto | auto |
Sizing - Width - Height
<div class="w-25">Width 25%</div>
<div class="w-50">Width 50%</div>
<div class="w-75">Width 75%</div>
<div class="w-100">Width 100%</div>
<div class="w-auto">Width auto</div>
<div class="h-25">Height 25%</div>
<div class="mw-100">Max width 100%</div>
<div class="vw-100">Width 100vw</div>
|
Text
classe | Description |
---|---|
text-center | centrer aligned text |
text-end | end (right) aligned text |
text-uppercase | uppercased text |
fw-bold | bold text |
Display
classe | Description |
---|---|
d-block | generating line breaks both before and after the element |
d-inline | do not generate line breaks before or after the element |
d-none | turn off the display of the element |
Colors
classe | Description |
---|---|
text-primary | blue |
text-secondary | grey |
text-success | green |
text-danger | red |
text-warning | yellow |
text-info | light blue |
bg-transparent | transparent |
Components
Button
btn-primary | btn-secondary | btn-success | btn-danger | btn-warning | btn-info | btn-light | btn-dark | btn-link |
bleu | gris | vert | rouge | jaune | cyan | blanc | noir | texte souligné bleu |
<button type="button" class="btn btn-primary oi oi-magnifying-glass" />
|
Collapse
<a data-bs-toggle="collapse" href="#filter" role="button" aria-expanded="false" aria-controls="filter">
<i class="fa fa-filter"></i>
</a>
<div class="collapse" id="filter">
</div>
|
Dropdowns
<div class="dropdown">
<i class="bi bi-three-dots-vertical dropdown-toggle hidden-arrow" data-bs-toggle="dropdown"></i>
<ul class="dropdown-menu">
<li><i class="bi bi-pencil dropdown-item"></i></li>
<li><i class="bi bi-trash3 dropdown-item"></i></li>
</ul>
</div>
|
/* create the hidden-arrow class to hide the arrow*/
.dropdown .hidden-arrow.dropdown-toggle:after {
display: none;
}
/* reset the min-width for dropdown-menu (set to 10rem) */
.dropdown-menu {
min-width: auto;
}
|
Toasts
Forms
Floating labels
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
|
Mouse
Use role="button"
to set the mouse cursor to pointer when hovering.
Bootstrap Icons
Bootswatch themes
Download bootstrap.min.css then add it in the web page.
Installation
Download compiled code or use a CDN url or a package manager (LibMan) to get bootstrap.
<!-- CDN -->
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- file in wwwroot -->
<!-- CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
<!-- JavaScript Bundle with Popper -->
<script src="lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
Files
File | Description |
---|---|
bootstrap.min.css | Layout, Content, Components and Utilities included |
bootstrap.min.js | minimal js |
bootstrap.bundle.min.js | Popper included |
Migrating to v5
v4 | v5 | description |
---|---|---|
ml-x | ms-x | margin |
text-right | text-end | text align |