Flexbox

  • Système - .row, .col, .col-1,..., .col-12 (avec ou sans row), .col-sm-1 -> .col-lg-12
  • Breakpoints - .col-sm-1 -> .col-lg-12
  • Direction - .flex-row, .flex-row-reverse, .flex-col, .flex-col-reverse
  • Aligment vertical - .items-center, .items-end
  • Aligment horizontal - .justify-center, .justify-end, .justify-between
  • Ordre - .order-first, .order-last
  • Responsive - .md:flex-row, .md:flex-col, .md:order-first, .md:order-last
Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?
Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?de si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?
3- Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça? ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?e me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

Display

.flex - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça ?
.block - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça ?
.inline-block - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça ?

.inline - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça ?
.inline-flex - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça ?
.sr-only - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça ?

Typographies

h1 - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

h2 - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

h3 - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

h4 - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

h5 - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

p - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

.text-xs - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

.text-sm - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

.text-base - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

.text-md - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

.text-lg - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

.text-xl - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

.text-2xl - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

.text-3xl - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

.text-4xl - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

.text-5xl - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

.text-6xl - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

Textes & listes

.text-left - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

.text-right - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

.text-center - Je me demande si je ne suis pas en train de jouer avec les mots. Et si les mots étaient faits pour ça?

.bold - The quick brown fox ...

.italic - The quick brown fox ...

.uppercase - The quick brown fox ...

.capitalize - The quick brown fox ...

.line-clamp-1 - Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

.line-clamp-2 - Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

.line-clamp-3 - Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

  • .list-disc - Now this is a story all about how, my life got flipped-turned upside down
  • Now this is a story all about how, my life got flipped-turned upside down
  • Now this is a story all about how, my life got flipped-turned upside down
  1. .list-decimal - Now this is a story all about how, my life got flipped-turned upside down
  2. Now this is a story all about how, my life got flipped-turned upside down
  3. Now this is a story all about how, my life got flipped-turned upside down

Images & medias

.ratio, .ratio-yxy

.icon

Boutons

.btn-primary
Bouton primary
.btn-secondary
Bouton secondary
.btn-tertiary
Bouton tertiary
.btn-dark
Bouton dark
.btn-white
Bouton white
.btn-outline-primary
Bouton primary
.btn-outline-secondary
Bouton secondary
.btn-outline-tertiary
Bouton tertiary
.btn-outline-dark
Bouton dark
.btn with icon
Bouton
.btn-sm
Bouton small
.btn-lg
Bouton lg

Colors

.bg-primary
.bg-secondary
.bg-tertiary
.bg-dark
.bg-grey
.bg-grey-100
.bg-white
.color-primary
.color-secondary
.color-tertiary
.color-dark
.color-white

Nav

.md:nav-h nav-v

Spacing

Padding
.p-1 -> .p-6
.py-1 -> .py-6
.px-1 -> .px-6
.pr-1 -> .pr-6
.pl-1 -> .pl-6
.pt-1 -> .pt-6
.pb-1 -> .pb-6

Margin
.m-1 -> .m-6
.my-1 -> .my-6
.mx-1 -> .mx-6
.mr-1 -> .mr-6
.ml-1 -> .ml-6
.mt-1 -> .mt-6
.mb-1 -> .mb-6

Form

Containers

.alignfull, .w-full
.container-xl, .alignwide
.container
.container-md
.container-sm