Bootstrap 5

De Banane Atomic
Aller à la navigationAller à la recherche

Links

Utilities

Margin / Padding

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

Sizing - Width - Height

Html.svg
<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

Components

Collapse

Html.svg
<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

Floating labels

Html.svg
<div class="form-floating">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

Icons

Installation

Download compiled code or use a CDN url or a package manager (LibMan) to get bootstrap.

Html.svg
<!-- 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>

Migrating to v5

v4 v5 description
ml-x ms-x margin
text-right text-end text align