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

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

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

<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

Bootstrap Icons and Blazor

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

Bootstrap 5

Sommaire