<CodePhenix>

Accès à GitLab
↑

Les grilles

<div class="container">
   <div class="row">
     <div class="col-8">col-8 </div>
     <div class="col-4">col-4 </div>
   </div>
   <div class="row">
     <div class="col">col </div>
     <div class="col">col </div>
   </div>
</div>
col-8
col-4
col
col

La propriété grid est une propriété centrale de l'environnement Bootstrap. La grille permet d'organiser ses éléments facilement et intuitivement; c'est la grid également donnée à Bootstrap tout son intérêt sur le plan responsif.

La grid Bootstrap : Comment ça marche ?

Une grid sur plusieur niveau
  • Containers donnent un moyen de centrer et/ou contrôler le padding et la margin des éléments d'un site.
  • Rows sont des "wrapper" (emballage) pour les colonnes.
  • Le contenu d'une grid ne peut être situé que dans les colonnes.
  • Les grid column sont diviées en 12 sous-parties par rangées. col-4 est donc une column qui prend 4 sous-parties de la rangée. 4 col-3 prendront donc tout l'espace de la rangée.
  • Si la taille des colonnes n'est pas spécifiée, elles prendront automatiquement un width de telle sorte que les colonnes prennent toute la place de la rangée.

Changer la largeur de la fenêtre pour voir les effets

<div class="container">
   <div class="row">
     <div class="col-lg-4 col-6">col</div>
     <div class="col-lg-4 col-6">col</div>
     <div class="col-lg-4 col-6">col</div>
     <div class="col-lg-4 col-6">col</div>
     <div class="col-lg-4 col-6">col</div>
     <div class="col-lg-4 col-6">col</div>
   </div>
</div>
col
col
col
col
col
col

Breakpoint

La deuxième notion essentielle de Bootstrap, allant en tandem avec la grille, est les breakpoints. Les breakpoints sont des @media queries intégrés aux classes Bootstrap. Plus besoins d'écrire dans la feuille CSS plus configuration en fonction de la taille de l'écran, c'est possible directement avec des classes.

Notation

Les breakpoint se précises dans les colonnes avec la notation suivante : col-{breakpoint}-{columnSize}
Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12

Rows & Columns

A l'interieur du container, la classe .row est utilisé comme un container pour les grid columns. Les Rows doivent toujours être placé dans un container (.container ou .container-fluid) pour s'assurer de l'espace entre les différent éléments de la page, en particulier avec le bord de la page.

Les spécificités de .row

row&contianer

La ligne Bootstrap .row utilise des marges négatives (-15px) pour contrecarrer le padding (15px) du conteneur. Le résultat final est l’absence d’espacement visuel (marge ou remplissage) sur les côtés de la rangée à l’intérieur du conteneur. Il y a plusieurs raisons pour lesquelles l’approche de la « marge négative » est utilisée dans Bootstrap. Tous les systèmes de grille ont un espacement ou des « gutter » autour des colonnes. Dans le cas de Bootstrap, le gutter est créée à l’aide d’un padding de 15px autour de chaque colonne. Le gutter effective affichée entre les colonnes voisines est de 30px. Les colonnes extérieures (la plus à gauche et la plus à droite) doivent avoir 1/2 du gutter (15px) à l’extérieur pour garder l’espacement cohérent.

container&row&column

Au lieu d’utiliser une classe spécifique comme ".first" ou ".last" sur ces colonnes de grille externe, Bootstrap utilise des marges négatives. Cela égalise les gutter des colonnes les plus à gauche et à droite avec le bord extérieur du conteneur .row.
L’espace visuel entre chaque colonne (appelée gutter) est créé avec un padding (15px) à gauche et à droite de chaque colonne. En conséquence, le gutter effectif entre le contenu de chaque colonne est de 30px (15px à gauche + 15px à droite). Les premières colonnes (les plus à gauche) et les dernières colonnes (les plus à droite) s’alignent parfaitement sur le bord de la ligne grâce à cette margin négative discutée plus haut.

Il est possible de définir un nombre de colonne maximum par la ligne :

<div class="row row-cols-3">
   <div class="col">Column</div>
   <div class="col">Column</div>
   <div class="col">Column</div>
   <div class="col">Column</div>
</div>
Column
Column
Column
Column

On peut préciser le nombre maximum de colonne par ligne pour les différentes tailles d'écrans :

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
   <div class="col">Column</div>
   <div class="col">Column</div>
     <div class="col">Column</div>
   <div class="col">Column</div>
</div>
Column
Column
Column
Column

Il est possible de laiser des colonnes vide et décaller des colonnes en utilisant offset :

<div class="row">
   <div class="col-4">Column</div>
   <div class="col-4 offset-4">Column</div>
</div>
<div class="row">
   <div class="col-sm-6 col-md-5 col-lg-6">Column</div>
   <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">Column</div>
</div>
Column
Column
Column
Column

border

Contenu

La propriété CSS border permet de définir les propriétés liées à la bordure.

Notation

Additivité

  • border-top
  • border-end
  • border-bottom
  • border-start

La propriété border doit être écrite avant de donner des propriétés supplémentaires.

Soustractivité

  • border-top-0
  • border-end-0
  • border-bottom-0
  • border-start-0
  • border-0 - "efface" les bordures

Border Color

Les bordures peuvent être customisées à l'aide du code couleur Bootstrap.

  • border border-primary
  • border border-secondary
  • border border-success
  • border border-danger
  • border border-warning
  • etc...

Border width

  • border border-1
  • border border-2
  • border border-3
  • border border-4
  • border border-5

color & background-color

Text text text text

Bootstrap propose une palette de couleurs intégrées. Ce code couleur permet de donner une cohérence au design général de la page. Par exemple, un message d'erreur avec la classe .danger sera rouge.

Les différentes couleurs disponibles

  • primary
  • secondary
  • success
  • danger
  • warning
  • info
  • light
  • dark
  • muted
  • white

Notation

Pour changer la couleur d'un texte on utilisera les classes suivant la notation : text-{color}.

  • text-primary
  • text-secondary
  • etc...

Pour changer la propriété background-color on utilisera les classes suivant la notation : bg-{color}.

  • bg-primary
  • bg-secondary
  • etc...

Container

Les container sont les éléments de mise en page le plus basique dans Bootstrap et sont nécessaires lors de l’utilisation de Grid par défaut. Les containers peuvent être utilisé pour centrer des éléments. Bien que les conteneurs puissent être imbriqués, c'est à éviter sous peine de devoir compenser les marges par defaults des containers.

Les containers permettent très rapidement et facilement de donner un aspect responsive à une page. En effet, les containers ont un max-width par défaut.
Par exemple : .container-md, prend 100% de l'espace disponible, pour des écrans plus petits que le breakpoint (ici md : 768px) puis le container pour des écrans plus grands est capés à 720px.

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra large
≥1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

Flexbox

1
2
3

La classe d-flex transforme un élément en Flexbox.
La propriété flex-direction définit la façon dont les éléments flexibles sont placés dans un conteneur flexible : elle définit l'axe principal et la direction des éléments (normale ou inversée).

Notation

  • flex-column
  • flex-column-reverse
  • flex-row
  • flex-row-reverse

1
2
3

La propriété CSS justify-content indique la façon dont l'espace doit être réparti entre et autour des éléments selon l'axe principal d'une Flexbox.
La classe .justify-content change l'alignement des items sur l'axe principal de la Flexbox (par défaut sur l'axe horizontal, l'axe vertical si flex-direction : column).

Notation

  • justify-content-start
  • justify-content-end
  • justify-content-center
  • justify-content-between
  • justify-content-around

1
2
3

La propriété align-self définit elle l'alignement d'un objet au sein de son conteneur. Cette propriété contrôle l'alignement par rapport à l'axe secondaire (par défaut sur l'axe vertical, l'axe horizontal si flex-direction : column).

Notation

  • align-items-start
  • align-items-end
  • align-items-center
  • align-items-stretch

Margin & Padding

Text

Les attributs de Margin et Padding permettent de gérer les espaces entre différents éléments html.
La propriété padding permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément.
La propriété margin définit la taille des marges sur les quatre côtés de l'élément.

Notation

Les classes .margin et .padding suivent le format suivant : {property}{sides}-{size}.

Où property correspond à :

  • m - pour la classe qui definit margin
  • p - pour la classe qui definit padding

Où sides correspond à :

  • t - pour la classe qui definit margin-top ou padding-top
  • b - pour la classe qui definit margin-bottom ou padding-bottom
  • s - pour la classe qui definit margin-left ou padding-left
  • e - pour la classe qui definit margin-right ou padding-right
  • x - pour la classe qui definit *-right ou *-left (où * correspond à property)
  • y - pour la classe qui definit *-top ou *-bottom (où * correspond à property)
  • blank - pour la classe qui definit padding ou margin sur les 4 côtés

Où size correspond à :

  • 0 - pour la classe qui definit margin or padding à 0
  • 1 - pour la classe qui definit margin or padding à 0.25rem
  • 2 - pour la classe qui definit margin or padding à 0.5rem
  • 3 - pour la classe qui definit margin or padding à 1rem
  • 4 - pour la classe qui definit margin or padding à 1.5rem
  • 5 - pour la classe qui definit margin or padding à 3rem
  • auto - pour la classe qui definit margin or padding à auto

Il est également possible d'appliquer des breakpoints aux classes margin et padding (les mêmes que pour les grid). Les breakpoints utilisés conjointement avec les classes margin et padding sont des outils très puissants pour donner un aspect responsive à une page.
On a alors la notation suivantes : {{property}{sides}-{breakpoint}-{size}, avec breakpoint prenant les valeurs sm, md, lg et xl.

Position

Des classes de positionnement Boostrap sont disponibles.

  • .position-static - comportement par défaut
  • .position-relative
  • .position-absolute
  • .position-fixed
  • .fixed-top - positionnement en haut de la fenêtre
  • .fixed-bottom - positionnement en bas de la fenêtre

Shadow

Text

La classe CSS .shadow permet de définir la propriétés box-shadow d'un élément.

Notation

  • shadow-sm - small shadow
  • shadow - regular shadow
  • shadow-lg - large shadow
  • shadow-none pour enlever l'ombre d'un élément

Sizing

Text

Notation

Les classes de .width et de .height suivent le format suivant : {property}-{size}.

Où property correspond à :

  • w - pour la classe qui definit width
  • h - pour la classe qui definit height

Où size peut prendre les valeurs 0, 25, 50, 75, 100.

Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Les différentes classes disponible dans Bootstrap sur le Text :

Font size

  • fs-1
  • fs-2
  • fs-3
  • fs-4
  • fs-5
  • fs-6

Text alignment

  • text-center
  • text-end
  • text-justify

Font weight

  • fw-bold
  • fw-normal
  • fw-light

Text transform

  • text-lowercase
  • text-uppercase
  • text-capitalize

Text wrapping

  • text-nowrap
  • text-truncate

Visbilité

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Opacity

  • opacity-25
  • opacity-50
  • opacity-75
  • opacity-100

Overflow

  • overflow-hidden
  • overflow-scroll
  • overflow-auto
  • overflow-visible

Visibility

  • invisible
  • visible

Accordion

This is the first item's accordion body.

This is the second item's accordion body.

This is the third item's accordion body.
<div class="accordion" id="accordionExample">
   <div class="accordion-item">
     <h2 class="accordion-header" id="headingOne">
       <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
         Accordion Item #1
       </button>
     </h2>
     <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
       <div class="accordion-body">
         <strong>This is the first item's accordion body.</strong>
       </div>
     </div>
   </div>
   <div class="accordion-item">
     <h2 class="accordion-header" id="headingTwo">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
         Accordion Item #2
       </button>
     </h2>
     <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
       <div class="accordion-body">
         <strong>This is the second item's accordion body.</strong>
       </div>
     </div>
   </div>
   <div class="accordion-item">
     <h2 class="accordion-header" id="headingThree">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
         Accordion Item #3
       </button>
     </h2>
     <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
       <div class="accordion-body">
         <strong>This is the third item's accordion body.</strong>
       </div>
     </div>
   </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
   Button demo
</button>
<div class="collapse" id="collapseExample">
   <div class="card card-body">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   </div>
</div>

  • Un bouton. On lui donnera les propriétés suivantes :
    • data-toggle="collapse" pour donner le comportement au bouton.
    • data-target="#cardHidden" et aria-controls="cardHidden" pour lier le bouton à la card "caché". Ici data-target et aria-controls correspond à l'ID du container de la card-body
  • Un container (celui dans lequel on va placer la card-body) avec les propriétés suivantes :
    • class="collapse" pour donner le comportement à la card-body.
    • id="cardHidden"
    • Un div avec la classe card-body. Il s'agit du contenue de la card.

Les badges

Les Badges permettent de mettre en avant une information.

Example heading New
Example heading Danger
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h5>Example heading <span class="badge bg-danger">Danger</span></h5>
<button type="button" class="btn btn-primary position-relative">
   Profile
   <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
     <span class="visually-hidden">New alerts</span>
   </span>
</button>
<button type="button" class="btn btn-primary position-relative">
   Inbox
   <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
     99+
     <span class="visually-hidden">unread messages</span>
   </span>
</button>

Button

<button type="button" href="#" class="btn btn-primary">Primary</button>
<button type="button" href="#" class="btn btn-secondary">Secondary</button>
<button type="button" href="#" class="btn btn-success">Success</button>
<button type="button" href="#" class="btn btn-danger">Danger</button>
<button type="button" href="#" class="btn btn-warning">Warning</button>
<button type="button" href="#" class="btn btn-info">Info</button>
<button type="button" href="#" class="btn btn-light">Light</button>
<button type="button" href="#" class="btn btn-dark">Dark</button>
<button type="button" href="#" class="btn btn-link">Link</button>

Buttons

La classe .btn est à utiliser avec les balises <button> et <a> (lorsque l'on utilise la balise <a>, il faut préciser role="button").
Avant d'assigner une couleur au bouton (ou une autre propriété) il faut donner la classe btn.
Pour ajouter un lien à un boutton, il suffit d'ajouter un href="chemin_lien".

Button-outline

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Désactivé

<button type="button" class="btn btn-lg btn-primary" readonly>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" readonly>Button</button>

Card

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
<div class="card w-50">
   <img src="..." class="card-img-top" alt="...">
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
</div>

Carousel

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
   <div class="carousel-inner">
     <div class="carousel-item active">
       <img src="..." class="d-block w-100" alt="...">
     </div>
     <div class="carousel-item">
       <img src="..." class="d-block w-100" alt="...">
     </div>
     <div class="carousel-item">
       <img src="..." class="d-block w-100" alt="...">
     </div>
   </div>
</div>

Features des Carousel :

Slide automatique

Les contenue d'un carousel ne se déroule pas automatiquement de base. Il faut ajouter la classe .slide au container avec la class .

Controleur

Les contrôleurs peuvent également être rajoutés ou non (si l'on opte pour une diapositive automatique par exemple). L'implémentation est présenté ci-dessus avec les liens ayant les classes .carousel-control-prev et carousel-control-next

Indicateur

Dans le container ayant la classe carousel, on peut choisir d'y ajouter des indicateurs, montrant quel slide est visible. indicateurs

  • carousel-dark Permet de posser les textes et les controles en noir, sinon ils seront en blanc par défaut.
  • carousel-fade Permet de changer l'animation du changement de slide en fondue.
<div id="carouselExampleCaptions" class="carousel slide carousel-fade carousel-dark" data-bs-ride="carousel">
   <div class="carousel-indicators">
     <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
     <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
   </div>
   <div class="carousel-inner">
     <div class="carousel-item active">
       <img src="..." class="d-block w-100" alt="...">
       <div class="carousel-caption d-none d-md-block">
         <h5>First slide label</h5>
         <p>Some representative placeholder content for the first slide.</p>
       </div>
     </div>
     <div class="carousel-item">
       <img src="..." class="d-block w-100" alt="...">
       <div class="carousel-caption d-none d-md-block">
         <h5>Second slide label</h5>
         <p>Some representative placeholder content for the second slide.</p>
       </div>
     </div>
   </div>
   <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="visually-hidden">Previous</span>
   </button>
   <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="visually-hidden">Next</span>
   </button>
</div>

Form control

<div class="mb-3">
   <label for="exampleFormControlInput1" class="form-label">Email address</label>
   <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
   <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
   <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
Readonly

Ajoutez l'attribut booléen readonly sur une entrée pour empêcher la modification de la valeur de l'entrée.

<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>
Readonly plain text
<form class="row g-3">
   <div class="col-auto">
     <label for="staticEmail2" class="visually-hidden">Email</label>
     <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
   </div>
   <div class="col-auto">
     <label for="inputPassword2" class="visually-hidden">Password</label>
     <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
   </div>
   <div class="col-auto">
     <button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
   </div>
</form>
File input
<div class="mb-3">
       <label for="formFile" class="form-label">Default file input example</label>
       <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
       <label for="formFileMultiple" class="form-label">Multiple files input example</label>
       <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
Color
<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

Select

<select class="form-select" aria-label="Default select example">
     <option selected>Open this select menu</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
</select>
Sizing

Vous pouvez également choisir entre les petites et les grandes sélections personnalisées qui correspondent à nos entrées de texte de taille similaire.

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

L'attribut multiple est également pris en charge :

<select class="form-select" multiplearia-label="multiple select example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

Tout comme l'attribut de taille :

<select class="form-select" size="3" aria-label="size 3 select example">
     <option selected>Open this select menu</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
</select>
Disabled

Ajoutez l'attribut booléen désactivé sur une sélection pour lui donner un aspect grisé et supprimer les événements liés au pointeur.

<select class="form-select" aria-label="Disabled select example" readonly>
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

Checks & radios

<div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
   <label class="form-check-label" for="flexCheckDefault">
     Default checkbox
   </label>
</div>
<div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
   <label class="form-check-label" for="flexCheckChecked">
     Checked checkbox
   </label>
</div>
Indeterminate

Les cases à cocher peuvent utiliser la pseudo-classe :indeterminate lorsqu'elles sont définies manuellement via JavaScript (il n'existe pas d'attribut HTML permettant de la spécifier).

<div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
   <label class="form-check-label" for="flexCheckIndeterminate">
     Indeterminate checkbox
   </label>
</div>
Disabled

Ajoutez l'attribut disabled et les label associés sont automatiquement stylisés pour correspondre avec une couleur plus claire pour aider à indiquer l'état de l'entrée.

<div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" readonly>
   <label class="form-check-label" for="flexCheckDisabled">
     Disabled checkbox
   </label>
</div>
<div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
   <label class="form-check-label" for="flexCheckCheckedDisabled">
     Disabled checked checkbox
   </label>
</div>

<div class="form-check">
   <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
   <label class="form-check-label" for="flexRadioDefault1">
     Default radio
   </label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
   <label class="form-check-label" for="flexRadioDefault2">
     Default checked radio
   </label>
</div>
Disabled

Ajoutez l'attribut disabled et les label associés sont automatiquement stylisés pour correspondre avec une couleur plus claire pour aider à indiquer l'état de l'entrée.

<div class="form-check">
   <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" readonly>
   <label class="form-check-label" for="flexRadioDisabled">
     Disabled radio
   </label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
   <label class="form-check-label" for="flexRadioCheckedDisabled">
       Disabled checked radio
   </label>
</div>
Switches

Un interrupteur possède le balisage d'une case à cocher personnalisée mais utilise la classe .form-switch pour rendre un interrupteur à bascule. Pensez à utiliser role="switch" pour transmettre plus précisément la nature du contrôle aux technologies d'assistance qui prennent en charge ce rôle. Dans les technologies d'assistance plus anciennes, le contrôle sera simplement annoncé comme une case à cocher ordinaire. Les interrupteurs prennent également en charge l'attribut désactivé.

<div class="form-check form-switch">
   <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
   <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
   <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
   <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
   <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" readonly>
   <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
   <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
   <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
Inline

Regroupez les cases à cocher ou les cases radios sur une même ligne horizontale en ajoutant .form-check-inline à tout .form-check.

<div class="form-check form-check-inline">
   <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
   <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
   <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
   <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
   <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" readonly>
   <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
   <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
   <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" readonly>
   <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
Radio toggle buttons
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>

<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>

<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" readonly>
<label class="btn btn-secondary" for="option3">Disabled</label>

<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>

Range

Overview

Créez des contrôles input type="range" personnalisés avec .form-range. La piste (l'arrière-plan) et la vignette (la valeur) sont toutes deux stylisées pour apparaître de la même manière dans tous les navigateurs. Comme seul Firefox prend en charge le "remplissage" de sa piste à partir de la gauche ou de la droite de la vignette comme moyen d'indiquer visuellement la progression, nous ne le prenons pas en charge actuellement.

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
Disabled

Ajoutez l'attribut booléen désactivé sur une entrée pour lui donner un aspect grisé et supprimer les événements du pointeur.

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" readonly>
Min and max

Les entrées de la plage ont des valeurs implicites pour min et max - 0 et 100, respectivement. Vous pouvez spécifier de nouvelles valeurs pour celles-ci en utilisant les attributs min et max.

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">
Steps

Par défaut, les entrées de la gamme sont "instantanées" à des valeurs entières. Pour changer cela, vous pouvez spécifier une valeur de pas. Dans l'exemple ci-dessous, nous doublons le nombre d'étapes en utilisant step="0.5".

<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

Floating labels

<div class="form-floating mb-3">
   <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
   <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
   <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
   <label for="floatingPassword">Password</label>
</div>

Lorsqu'il y a une valeur déjà définie, les label s'ajusteront automatiquement à leur position flottante.

<form class="form-floating">
   <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
   <label for="floatingInputInvalid">Invalid input</label>
</form>
Textareas

Par défaut, les textarea avec .form-control auront la même hauteur que les input.

<div class="form-floating">
   <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
   <label for="floatingTextarea">Comments</label>
</div>

Pour définir une hauteur personnalisée sur votre textarea, n'utilisez pas l'attribut rows. Au lieu de cela, définissez une hauteur explicite (soit en ligne, soit via une CSS personnalisée).

<div class="form-floating">
   <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
   <label for="floatingTextarea2">Comments</label>
</div>
Selects

En dehors de .form-control, les label flottants ne sont disponibles que sur .form-selects. Ils fonctionnent de la même manière, mais contrairement aux input, ils montreront toujours le label> dans son état flottant. avec taille et multiple ne sont pas pris en charge.

<div class="form-floating">
   <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
     <option selected>Open this select menu</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select>
<label for="floatingSelect">Works with selects</label>
</div>

Validation

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.
<form class="row g-3 needs-validation" novalidate>
   <div class="col-md-4">
     <label for="validationCustom01" class="form-label">First name</label>
     <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
     <div class="valid-feedback">
          Looks good!
     </div>
   </div>
   <div class="col-md-4">
     <label for="validationCustom02" class="form-label">Last name</label>
     <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
     <div class="valid-feedback">
       Looks good!
     </div>
   </div>
   <div class="col-md-4">
     <label for="validationCustomUsername" class="form-label">Username</label>
     <div class="input-group has-validation">
       <span class="input-group-text" id="inputGroupPrepend">@</span>
       <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
       <div class="invalid-feedback">
         Please choose a username.
       </div>
     </div>
   </div>
   <div class="col-md-6">
     <label for="validationCustom03" class="form-label">City</label>
     <input type="text" class="form-control" id="validationCustom03" required>
     <div class="invalid-feedback">
       Please provide a valid city.
     </div>
   </div>
   <div class="col-md-3">
     <label for="validationCustom04" class="form-label">State</label>
     <select class="form-select" id="validationCustom04" required>
       <option selected readonly value="">Choose...</option>
       <option>...</option>
     </select>
     <div class="invalid-feedback">
       Please select a valid state.
     </div>
   </div>
   <div class="col-md-3">
     <label for="validationCustom05" class="form-label">Zip</label>
     <input type="text" class="form-control" id="validationCustom05" required>
     <div class="invalid-feedback">
       Please provide a valid zip.
     </div>
   </div>
   <div class="col-12">
     <div class="form-check">
       <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
       <label class="form-check-label" for="invalidCheck">
         Agree to terms and conditions
       </label>
       <div class="invalid-feedback">
         You must agree before submitting.
       </div>
     </div>
   </div>
   <div class="col-12">
     <button class="btn btn-primary" type="submit">Submit form</button>
   </div>
</form>

Voici le code javascript à ajouter :

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'

// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')

// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}

form.classList.add('was-validated')
}, false)
})
})()