Le centrage avec les marges
Element div centré dans notre conteneur
Element p centré dans notre conteneur
Element p centré dans un div lui même centré dans notre conteneur
Les display
Un span avec un display:blockUn paragraphe avec un display:inline
Un paragraphe avec un display:inline
Un div se comportant comme une cellule de tableau
Un div se comportant comme une cellule de tableau
Un div se comportant comme une cellule de tableau
Un div se comportant comme une cellule de tableau
Je suis flex (block)
Je suis flex (inline)
Je suis flex (inline)
Je suis caché !
Caché sur petit écran, block à partir de 992px
Caché seulement entre 768px et 991px
Block jusqu'à 767px, caché ensuite
Les Flex
Elément flex 1
Elément flex 2
Elément flex 3
Elément flex 1
Elément flex 2
Elément flex 3
Elément flex 1
Elément flex 2
Elément flex 3
Elément flex 1
Elément flex 2
Elément flex 3
Elément flex 1
Elément flex 2
Elément flex 3
Justify-content
Elément flex 1
Elément flex 2
Elément flex 3
Elément flex 1
Elément flex 2
Elément flex 3
Elément flex 1
Elément flex 2
Elément flex 3
Elément flex 1
Elément flex 2
Elément flex 3
Elément flex 1
Elément flex 2
Elément flex 3
Elément flex 1
Elément flex 2
Elément flex 3
Elément flex 1
Elément flex 2
Elément flex 3
Align-items
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Align-self
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Au cas par cas
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
align-content
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 4
Flex élément 5
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
Flex élément 1
Flex élément 2
Flex élément 3
flex-wrap
Ici, on demande à chaque fois à chacun de nos éléments flex d’occuper 50% de la taille du conteneur avec .w-50. Cependant, dans le premier exemple, .flex-nowrap est appliquée a conteneur ce qui va empêcher nos éléments d’aller à la ligne et donc chaque élément va finalement n’occuper qu’un tiers du conteneur.
Elément flex 1
Elément flex 2
Elément flex 3
Elément flex 1
Elément flex 2
Elément flex 3
Elément flex 1
Elément flex 2
Elément flex 3
Position
Position : static
Position : relative
Position : absolute
Position : fixed
Position : sticky
fixed
fixed-top
fixed-bottom
Regarder aux coins de votre écran
Sticky-top
Un paragraphe
sticky-top
Visibilité
display: none
Ce texte s'affiche normalement
Ce texte est invisible
Ce texte est visible
overflow
Le navigateur décide de la façon dont le texte qui dépasse doit être géré. Généralement, une barre de défilement sera affichée
On décide de cacher le texte qui dépasse en le tronquant. Le texte de cette phrase devrait être à moitié coupé
Ombre
Pas d'ombre
Petite ombre
Ombre moyenne
Grande ombre
Les tableaux
| Nom | Prénom | Age |
|---|---|---|
| Dupont | André | 28 |
| Durand | Victor | 26 |
| Joly | Julia | 27 |
Inverser les couleurs avec la class table-dark
| Nom | Prénom | Age |
|---|---|---|
| Dupont | André | 28 |
| Durand | Victor | 26 |
| Joly | Julia | 27 |
Les couleurs dans les tableaux
| Classe | Couleur | Couleur |
|---|---|---|
| Default | Une cellule | Une cellule |
| Active | Une cellule | Une cellule |
| Primary | Une cellule | Une cellule |
| Secondary | Une cellule | Une cellule |
| Success | Une cellule | Une cellule |
| Danger | Une cellule | Une cellule |
| Warning | Une cellule | Une cellule |
| Info | Une cellule | Une cellule |
| Light | Une cellule | Une cellule |
| Dark | Une cellule | Une cellule |
| Primary | Success | Warning |
| Classe | Couleur | Couleur |
|---|---|---|
| Default | Une cellule | Une cellule |
| Active | Une cellule | Une cellule |
| Primary | Une cellule | Une cellule |
Les images
Style normal
Légèrement arrondie
Ellipse
Bordure 1px légèrement arondie
Les listes
- Liste non ordonnée :
- Premier élément de liste
- Deuxième élément de liste
- Troisième élément de liste
- Liste ordonnée :
- Premier élément de liste
- Deuxième élément de liste
- Troisième élément de liste
Liste en ligne
- Premier élément de liste
- Deuxième élément de liste
- Troisième élément de liste
Liste de liens
Liste de liens :
Primary
Liste pour afficher un contenu
Navbar
On peut changer le positionnement de notre nav-barre avec justify-content-end par exemple pour mettre tous les liens à droite de la page. On appliquera le style au ul car c'est lui qui contient les liens
On peux aussi mettre le menu en colonne avec flex-column, toujours sur le ul
Fill ou justified
Pils ou tabs
nav responsive
Menu déroulant
Menu dans une barre de navigation
Barre de nav, avec barre de recherche et menu déroulant, qui se fixe en haut au scroll et menu burger si largeur de page trop petite
Une carte
