`btn btn-primary`
Primary	Secondary	Warning	Success	Danger	Info	Light	Dark

`btn btn-outline-primary`
Primary	Secondary	Warning	Success	Danger	Info	Light	Dark

largeurs possibles Width 25% | Width 50% | Width 75% | Width 100% | Width auto (w-25 w-50 w-75 w-100 w-auto)

Card 1

body titre centré

Avec un texte de soutien ci-dessous comme introduction naturelle à du contenu supplémentaire.

getbootstrap.com

Card 2

body titre à gauche

Avec un texte de soutien ci-dessous comme introduction naturelle à du contenu supplémentaire.

getbootstrap.com

Card 3

body titre à droite

Avec un texte de soutien ci-dessous comme introduction naturelle à du contenu supplémentaire.

getbootstrap.com

Card 4 success

titre centré fond light

Avec un texte de soutien ci-dessous comme introduction naturelle à du contenu supplémentaire.

getbootstrap.com

une simple alerte warning!

une simple alerte danger!

class="container" class="row"

col bg-success text-light

col bg-warning text-light

col bg-success text-light

col bg-warning text-light

col-8 bg-secondary text-light

col-4 bg-danger text-light

col-sm bg-danger text-light

col-sm bg-secondary text-light

col-sm bg-primary text-light

class="container px-lg-5" class="row mx-lg-n5"

col py-3 px-lg-5 border bg-danger text-dark

col py-3 px-lg-5 border bg-dark border-success

<div class="container"><div class="row row-cols-4"><div class="col bg-primary text-light"></div>...</div></div>

Col bg-primary text-light

Col bg-secondary text-light

Col bg-primary text-light

Col bg-secondary text-light

Vous pouvez utiliser la balise mark pour mettre en évidence du texte. ( <mark>évidence</mark>)

~~Cette ligne de texte est censée être traitee comme du texte supprim?.~~ ( <del>Cette ligne de texte est censée...</del> )

~~Cette ligne de texte est censée être considérée comme n'étant plus exacte.~~ ( <s>Cette ligne de texte est censée...</s> )

Cette ligne de texte doit être considérée comme un ajout au document. ( <ins>Cette ligne de texte doit être considérée....</ins> )

Cette ligne de texte sera rendue comme soulignée ( <u>Cette ligne de texte sera rendue comme soulignée </u> )

Cette ligne de texte doit être considérée comme du texte en petits caractères. ( <small>Cette ligne de texte doit être considérée...</small> )

Cette ligne est rendue en texte gras. ( <strong>Cette ligne est rendue en texte gras.</strong> )

Cette ligne est rendue sous forme de texte en italique. ( <em>Cette ligne est rendue sous forme de texte en italique</em> )

Ce texte est destiné à être traité comme un exemple de sortie d'un programme informatique. <samp>Ce texte est destiné à être traité comme un exemple...</samp>

Pour modifier les paramètres, appuyez sur ctrl + , ( <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> )

y = mx + b ( <var>y</var> = <var>m</var><var>x</var> + <var>b</var> )

Par exemple, <section> affiche du code. ( Par exemple, <code><section></code> affiche du code. )

Média centré `(align-self-center)`

Elle deviendra froide comme un congélateur. Au bout du compte. Piquante comme une abeille, j'ai gagné mes galons. Bikinis, courgettes, Martinis, pas de saucisses. J'espère que tu as bon appétit. On peut danser, jusqu'à la mort, toi et moi, on sera jeunes pour toujours. On vit la vie. On le fait bien. On dit que tu as quelque chose à me montrer, moi.

Tu veux voir la série en 3D, un film. On dit : « Aie peur de ne pas être comme les autres, amoureux du futur. Ouvre ton cœur. » Alors je me suis assis tranquillement, j'ai accepté poliment. Vendredi soir dernier. Ouais, tu as de la chance si tu es dans son avion. Je serai ton cadeau, je t'offrirai quelque chose de bien à fêter.

Média aligné en haut `(align-self-start)`

Je vais la mettre dans le coma. Tu donnes mille raisons, et tu dis que tu vas vraiment essayer. Alors je suis resté assis tranquillement, j'ai accepté poliment. Je me suis habillé pour mon combat final. Et pour mes 18 ans, on s'est fait des tatouages assortis. Tellement chic, oui, c'est un classique. Je suis prêt à sortir des sentiers battus.

Je suis sur un nuage (ce soir). Mais terre à terre. Tu es originale, irremplaçable. Mais dans une autre vie, je serais ta meuf. On est allés en Californie et on s'est saoulés sur la plage. On peut danser jusqu'à la mort, toi et moi, on sera jeunes pour toujours. Je t'ai vu en ville chanter du blues.

Média aligné en bas `(align-self-end)`

Allez, laisse éclater tes couleurs. Je sens cette lumière en moi. Toute la nuit, ils jouent ta chanson. De Tokyo à Mexico, en passant par Rio. Il n'y a pas de retour en arrière. Mais terre à terre. Magique, coloré, M. Mystère, ee. Un ADN différent, ils ne te comprennent pas.

Mais terre-à-terre. Elle a ce je-ne-sais-quoi, tu le sais. Je vois clair. Les garçons se cassent le cou pour essayer de me filer un petit coup d'œil. Prends-moi, prends-moi. Ouvre ton cœur. Je croyais que j'étais l'exception. Boum, boum, boum. Venice Beach et Palm Springs, l'été, c'est tout. Remettons le rythme. (C'est comme ça qu'on fait)

data-toggle="popover" data-placement="top" |bottom|left|right

carousel slide carousel-fade

Los Angeles

LA is always so much fun!

Chicago

Thank you, Chicago!

New York

We love the Big Apple!

class="d-flex p-2 bg-secondary text-dark"

Je suis un conteneur de flexbox.

class="d-inline-flex p-2 bg-secondary text-dark""

Je suis un conteneur de flexbox en ligne.

direction horizontale flex-row

Row Flex item 1

Row Flex item 2

Row Flex item 3

direction verticale flex-column

column Flex item 1

column Flex item 2

column Flex item 3

alignement horizontal des éléments justify_content-start|end|center|beetween|around

start Flex item 1

start Flex item 2

start Flex item 3

end Flex item 1

end Flex item 2

end Flex item 3

center Flex item 1

center Flex item 2

center Flex item 3

between Flex item 1

between Flex item 2

between Flex item 3

around Flex item 1

around Flex item 2

around Flex item 3

alignement vertical des éléments (align-items-start)

Flex item 1

Flex item 2

Flex item 3

align-items-center

Flex item 1

Flex item 2

Flex item 3

align-items-end

Flex item 1

Flex item 2

Flex item 3

align-items-stretch

Flex item 1

Flex item 2

Flex item 3

align-self-center

Self Flex item 1

flex item 2

Flex item 3

forcer dans des largeurs égales (flex-fill)

Flex item 1 avec du texte long

Flex item 2

Flex item 3

Agrandir (flex-grow-1)

item 1

item 2

item 3

Rétrécir (flex-shrink-1)

item 1

w-50 item 2

w-50 item 3

Normal d-flex

item 1

item 2

item 3

item

emballage à l'enroulement (flex-wrap)

item 1

item 2

item 3

item

alignement vertical début (flex-wrap align-content-start)

item 1

item 2

item 3

item

alignement vertical fin (align-content-end)

item 1

item 2

item 3

item

avec image flex-shrink-0

Contenu d'un composant image. Vous pouvez le remplacer par n'importe quel contenu et l'ajuster selon les besoins.

Pas d'ombre

Petite ombre

Ombre régulière

Ombre plus grande

Il s'agit d'un exemple d'utilisation .overflow-auto sur un élément de dimensions, de largeur, de hauteur fixé. Par conception, ce contenu va défiler verticalement.

Il s'agit d'un exemple d'utilisation .overflow-hidden sur un élément de dimensions, de largeur, de hauteur fixé.

Il s'agit d'un exemple d'utilisation .overflow-visible sur un élément de dimensions, de largeur, de hauteur fixé.

Texte en Minuscule text-lowercase.

Texte en Majuscule text-uppercase.

capitale sur début de mot text-capitalize.

25%

.progress-bar

25%

.progress-bar-striped

75%

.progress-bar-striped progress-bar-animated

Chargement...

du texte dans le toast-body

TOAST ALIGNEMENT HORIZONTAL justify-content-center | start | end | beetwen

Bonjour, Ceci est un message de Bootstrap.

Table normale ( class="table" )

N°	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table noire ( class="table table-dark" )

N°	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table entête noire ( class="thead-dark" )

N°	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<figure class="figure">

    <img src="images/svg/square-fill-blue.svg" width="250" alt="square-fill-blue.svg" class="figure-img img-fluid rounded">

    <figcaption class="figure-caption text-center font-italic">légende de l'image centrée.</figcaption>

</figure>

Contenu d'espace réservé pour le premier panneau d'accordéon. Ce panneau est affiché par défaut grâce à la classe .show.

Contenu d'espace réservé pour le deuxième panneau d'accordéon. Ce panneau est masqué par défaut.

Enfin, le contenu de l'espace réservé pour le troisième et dernier panneau d'accordéon. Ce panneau est masqué par défaut.

Différents ratio: 21:9 | 16:9 | 4:3 | 1:1

Ce paragraphe sera entièrement sélectionné lorsque l'utilisateur cliquera dessus.

Ce paragraphe a le comportement de sélection par défaut.

Ce paragraphe ne sera pas sélectionnable lorsque l'utilisateur cliquera dessus.

style 1 centré style 2 à droite

Bonjour, le monde.

Il s'agit d'une simple unité, un simple composant de type jumbotron pour attirer une attention particulière sur le contenu ou l'information en vedette.

Il utilise des classes d'utilité pour la typographie et l'espacement pour le contenu de l'espace dans un container plus grand.

Modal static
Depuis un bouton Scrollable Centré
Small (sm) Large (lg) Extra large (xl) Avec Tooltips et Popover

Survol Icones en couleur

DIFFERENTS COMPOSANTS DE BOOTSTRAP 4

body titre centré

body titre à gauche

body titre à droite

titre centré fond light

Média centré (align-self-center)

Média aligné en haut (align-self-start)

Média aligné en bas (align-self-end)

Los Angeles

Chicago

New York

Groupe repliable Item 1

Groupe repliable Item 2

Groupe repliable Item 3

Bonjour, le monde.

Modal titre

Média centré `(align-self-center)`

Média aligné en haut `(align-self-start)`

Média aligné en bas `(align-self-end)`