← Modification précédente Modification suivante →

Version du 15 mai 2021 à 20:16

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

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

<!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