LAP DS / Utilities

Principe général

Bootstrap, dont l'approche est sémantique, met également à disposition toute une batterie de classes à injecter dans le dom pour "ajuster" certains blocs (façon Tailwind = approche "Utility-First").
L'objectif est de fournir aux développeurs un ensemble de classes utilitaires.
En savoir plus

Borders

Add border

.border
.border-top
.border-end
.border-bottom
.border-start

Remove border

.border-0
.border-top-0
.border-end-0
.border-bottom-0
.border-start-0

Border color (sus)

.border-primary
.border-secondary
.border-success
.border-danger
.border-warning
.border-info
.border-light
.border-dark
.border-white

Width

.border-1
.border-2
.border-3
.border-4
.border-5

Radius

Styles :
.rounded
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-circle
.rounded-pill
.rounded-0

Size :
.rounded-0
.rounded-1
.rounded-2
.rounded-3
.rounded-4
.rounded-5

Clearfix

Mettre un élément parent en clearfix (boite qui permet de gérer des enfant en float) :
.clearfix.
A noter que la mixin existe également (cf. ci-dessous)

// Usage as a mixin
.element {
  @include clearfix;
}

Float

Combinaisons pour faire "floatter" les enfants :

.float-start
.float-end
.float-none

.float-sm-start
.float-sm-end
.float-sm-none

.float-md-start
.float-md-end
.float-md-none

.float-lg-start
.float-lg-end
.float-lg-none

.float-xl-start
.float-xl-end
.float-xl-none

.float-xxl-start
.float-xxl-end

Attention, les media queries s'entendent en mode "et plus".

Colors

Texte

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Text & Opacity

.text-primary

.text-opacity-75

.text-opacity-50

.text-opacity-25

Background

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

Background & Opacity

.bg-primary

.bg-opacity-75

.bg-opacity-50

.bg-opacity-25

Display & position

Possibilité de changer le display d'un élément et de préciser dans quel media queries ce s'applique. Attention, les media queries s'entendent en mode "et plus".

Format

.d-{breakpoint}-{value} pour les breakpoint sm, md, lg, xl.
Pour xs (par défaut) on retire -{breakpoint}

Values

none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex

Format Print

.d-print-{value}

Position

.position-static
.position-relative
.position-absolute
.position-fixed
.fixed-top
.fixed-bottom .position-sticky
.sticky-top

Exemple d'usages

Screen size	Classes
Hidden on all	`.d-none`
Hidden only on XS	`.d-none .d-sm-block`
Hidden only on SM	`.d-sm-none .d-md-block`
Hidden only on MD	`.d-md-none .d-lg-block`
Hidden only on LG	`.d-lg-none .d-xl-block`
Hidden only on XL	`.d-xl-none`
Hidden only on XXL	`.d-xxl-none .d-xxl-block`
Visible sur tous	`.d-block`
Visible only on XS	`.d-block .d-sm-none`
Visible only on SM	`.d-none .d-sm-block .d-md-none`
Visible only on MD	`.d-none .d-md-block .d-lg-none`
Visible only on LG	`.d-none .d-lg-block .d-xl-none`
Visible only on XL	`.d-none .d-xl-block .d-xxl-none`
Visible only on XL	`.d-none .d-xxl-block`

Flex

Parent / Display

.d-flex
.d-inline-flex

.d-sm-flex
.d-sm-inline-flex

.d-md-flex
.d-md-inline-flex

.d-lg-flex
.d-lg-inline-flex

.d-xl-flex
.d-xl-inline-flex

.d-xxl-flex
.d-xxl-inline-flex

I'm a flexbox container!

I'm an inline flexbox container!

Parent / Direction

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse

.flex-sm-row
.flex-sm-row-reverse .flex-sm-column
.flex-sm-column-reverse

.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse

.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse

.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse

.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Parent / Justify Content

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around .justify-content-evenly

.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around .justify-content-sm-evenly

.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around .justify-content-md-evenly

.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around .justify-content-lg-evenly

.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around .justify-content-xl-evenly

.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around .justify-content-xxl-evenly

Flex item

Parent / Align Items

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch

.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch

.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch

.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch

.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch

.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch

Flex item

Parent / Align Self

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch

.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch

.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch

.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch

.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch

.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Children / Fill

.flex-fill

.flex-sm-fill

.flex-md-fill

.flex-lg-fill

.flex-xl-fill

.flex-xxl-fill

Flex item with a lot of content

Flex item

Children / Grow & Shrink

Grow
Permet d'occuper l'espace nécessaire pour remplir l'espace disponible tout en laissant aux autres éléments l'espace nécessaire.
Shrink
Permet d'occuper l'espace le plus petit possible tout en laissant aux autres éléments l'espace restant.

.flex-grow-0
.flex-grow-1
.flex-shrink-0
.flex-shrink-1

.flex-sm-grow-0
.flex-sm-grow-1
.flex-sm-shrink-0
.flex-sm-shrink-1

.flex-md-grow-0
.flex-md-grow-1
.flex-md-shrink-0
.flex-md-shrink-1

.flex-lg-grow-0
.flex-lg-grow-1
.flex-lg-shrink-0
.flex-lg-shrink-1

.flex-xl-grow-0
.flex-xl-grow-1
.flex-xl-shrink-0
.flex-xl-shrink-1

.flex-xxl-grow-0
.flex-xxl-grow-1
.flex-xxl-shrink-0
.flex-xxl-shrink-1

Flex item

Third flex item

Flex item

Children / Auto margin

Non supporté par ie11

.me-auto
.ml-auto

Flex item

with align-items

.mb-auto
.mt-auto

Flex item

Parent / Wrap

.flex-nowrap
.flex-wrap
.flex-wrap-reverse

.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse

.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse

.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse

.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse

.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse

Flex item

Children / Order

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-first
.order-last

.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-first
.order-sm-last

.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-first
.order-md-last

.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-first
.order-lg-last

.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-first
.order-xl-last

.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5
.order-xxl-first
.order-xxl-last

First flex item

Second flex item

Third flex item

Parent / Align content

.align-content-start
.align-content-end
.align-content-center
.align-content-between
.align-content-around
.align-content-stretch

.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch

.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch

.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch

.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch

.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-between
.align-content-xxl-around
.align-content-xxl-stretch

Flex item

Overflow

.overflow-auto
.overflow-hidden
.overflow-visible
.overflow-scroll

Shadow

.shadow-none

.shadow-sm

.shadow

.shadow-lg

Sizing

Relative to the parent

.w-25
.w-50
.w-75
.w-100
.w-auto

.h-25
.h-50
.h-75
.h-100
.h-auto

.mw-100
.mh-100

Width 25%

Width 50%

Width 75%

Width 100%

Width auto

Height 25%

Height 50%

Height 75%

Height 100%

Height auto

Relative to the viewport

.min-vw-100
.min-vh-100
.vw-100
.vh-100

Spacing

L'idée est de pouvoir gérer :

un espacement (p / m)
dans les 6 directions (t / e / b / s / x / y)
dans les 6 breakpoints ( / / sm / md / lg / xl / xxl)
dans 7 sizes ( 0 / 1 / 2 / 3 / 4 / 5 / auto)
avec possibilité d'être en valeur negative (ajouter n devant la size)

Combinaisons possibles

.p
.m

"rien"
t
e
b
s
x
y

-
-sm-
-md-
-lg-
-xl-
-xxl-

n (negative option)

0
1
2
3
4
5
auto

Correspondance des sizes

Les espaces de 0 à 5 sont alignés avec les spacers de bootstrap.

Exemple

.px-md-5, .p-2, .mx-md-n5

Text

Alignment

.text-start
.text-center
.text-end

.text-sm-start
.text-sm-center
.text-sm-end

.text-md-start
.text-md-center
.text-md-end

.text-lg-start
.text-lg-center
.text-lg-end

.text-xl-start
.text-xl-center
.text-xl-end

.text-xxl-start
.text-xxl-center
.text-xxl-end

Wrapping & Overflow

.text-wrap

.text-nowrap

Word break

.text-break

Transform

.text-lowercase

.text-uppercase

.text-capitalize

Size

.fs-1

.fs-2

.fs-3

.fs-4

.fs-5

.fs-6

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
) !default;

Font style

.fw-bold
.fw-bolder
.fw-semibold

.fw-normal

.fw-light
.fw-lighter

.fst-italic
.fst-normal

Line height

.lh-1

.lh-sm

.lh-base

.lh-lg

Other

.text-muted

.text-decoration-none

.text-monospace

Vertical align

Gérer l'alignement vertical des éléments inline, inline-block, inline-table et table cell.

.align-baseline

.align-top

.align-middle

.align-bottom

.align-text-bottom

.align-text-top

Elements inline

baseline top middle bottom text-top text-bottom

Cellules tableau

baseline

top

middle

bottom

text-top

text-bottom

Embed / Ratio

Pour appliquer des ratios à des éléments html tels que iframe, embed, video, object

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
) !default;

Mettre la classe .embed-responsive sur le parent ainsi que la classe qui contient le format :
.ratio-1x1
.ratio-4x3
.ratio-16x9
.ratio-21x9

Mettre la classe .ratio sur l'objet.