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

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>

Icons

Installation

Download compiled code or use CDN via jsDelivr or a package manager to get bootstrap.

Html.svg
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <!-- option 1: CDN -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
          integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
          crossorigin="anonymous">
    <!-- option 2: file -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then bundle of Popper.js and Bootstrap.js -->
    <!-- option 1: CDN -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
            crossorigin="anonymous">
    </script>
    <!-- option 2: files -->
    <script src="js/jquery-3.5.1.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
  </body>
</html>


Migrating to v5