Links
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
|
Utilities
Classes
| class
|
Description
|
| m-0 |
margin: 0 !important
|
| p-3 |
padding: 1rem !important
|
| mx-auto |
margin-right: auto !important
margin-left: auto !important
|
Sides
| Side
|
Description
|
| t |
top
|
| b |
bottom
|
| s |
start (left in LTR)
|
| e |
end (right in LTR)
|
| x |
left and right
|
| y |
top and bottom
|
Values
| 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
|
|
<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>
|
| classe
|
Description
|
| text-center |
centrer aligned text
|
| text-end |
end (right) aligned text
|
| text-uppercase |
uppercased text
|
| fw-bold |
bold text
|
| 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
|
Components
|
|
<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>
|
Forms
|
|
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
|
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>
|
| File
|
Description
|
| bootstrap.min.css |
Layout, Content, Components and Utilities included
|
| bootstrap.min.js |
minimal js
|
| bootstrap.bundle.min.js |
Popper included
|
| v4
|
v5
|
description
|
| ml-x |
ms-x |
margin
|
| text-right |
text-end |
text align
|
