LAPEYRE 2023 / 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-right
.border-bottom
.border-left

Remove border

.border-0
.border-top-0
.border-right-0
.border-bottom-0
.border-left-0

Border color (sus)

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

Radius

Styles :
.rounded
.rounded-top
.rounded-right
.rounded-bottom
.rounded-left
.rounded-circle
.rounded-pill
.rounded-0

Size :
.rounded-sm
.rounded-lg

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-left
.float-right
.float-none

.float-sm-left
.float-sm-right
.float-sm-none

.float-md-left
.float-md-right
.float-md-none

.float-lg-left
.float-lg-right
.float-lg-none

.float-xl-left
.float-xl-right

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

Background

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

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
table
table-cell
table-row2
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`
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`

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

I'm a flexbox container!

I'm an inline flexbox container!

Parent / Direction

.flex-row2
.flex-row2-reverse
.flex-column
.flex-column-reverse

.flex-sm-row2
.flex-sm-row2-reverse .flex-sm-column
.flex-sm-column-reverse

.flex-md-row2
.flex-md-row2-reverse
.flex-md-column
.flex-md-column-reverse

.flex-lg-row2
.flex-lg-row2-reverse
.flex-lg-column
.flex-lg-column-reverse

.flex-xl-row2
.flex-xl-row2-reverse
.flex-xl-column
.flex-xl-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-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around

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

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

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

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

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

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 item with a lot of content

Flex item

Children / Grow2 & Shrink

Grow2
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-grow2-0
.flex-grow2-1
.flex-shrink-0
.flex-shrink-1

.flex-sm-grow2-0
.flex-sm-grow2-1
.flex-sm-shrink-0
.flex-sm-shrink-1

.flex-md-grow2-0
.flex-md-grow2-1
.flex-md-shrink-0
.flex-md-shrink-1

.flex-lg-grow2-0
.flex-lg-grow2-1
.flex-lg-shrink-0
.flex-lg-shrink-1

.flex-xl-grow2-0
.flex-xl-grow2-1
.flex-xl-shrink-0
.flex-xl-shrink-1

Flex item

Third flex item

Flex item

Children / Auto margin

Non supporté par ie11

.mr-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 item

Children / Order

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12

.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-6
.order-sm-7
.order-sm-8
.order-sm-9
.order-sm-10
.order-sm-11
.order-sm-12

.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12

.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12

.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-6
.order-xl-7
.order-xl-8
.order-xl-9
.order-xl-10
.order-xl-11
.order-xl-12

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

Flex item

Overflow

.overflow-auto
.overflow-hidden

Shadow

.shadow-none

.shadow-sm

.shadow

.shadow-lg

Screen reader

Permet de cacher un élément partout sauf aux lecteurs d'écrans. Peut être combiné à un affichage en cas de focus sur l'élément (jouer avec le focus pour tester).

// Usage as a mixin
.skip-navigation {
  @include sr-only;
  @include sr-only-focusable;
}

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 / r / b / l / x / y)
dans les 5 breakpoints ( / / sm / md / lg / xl)
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
r
b
l
x
y

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

n (option)

0
1
2
3
4
5
auto

Correspondance des sizes

// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge(
  (
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: $spacer,
    4: ($spacer * 1.5),
    5: ($spacer * 3)
  ),
  $spacers
);

Exemple

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

Text

Alignment

.text-left
.text-center
.text-right

.text-sm-left
.text-sm-center
.text-sm-right

.text-md-left
.text-md-center
.text-md-right

.text-lg-left
.text-lg-center
.text-lg-right

.text-xl-left
.text-xl-center
.text-xl-right

Wrapping & Overflow

.text-wrap

.text-nowrap

Word break

.text-break

Transform

.text-lowercase

.text-uppercase

.text-capitalize

Font style

.font-weight-bold
.font-weight-bolder

.font-weight-normal

.font-weight-light
.font-weight-lighter

.italic

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

$embed-responsive-aspect-ratios: (
(21 9),
(16 9),
(4 3),
(1 1)
) !default;

Mettre la classe .embed-responsive sur le parent ainsi que la classe qui contient le format :
.embed-responsive-21by9
.embed-responsive-16by9
.embed-responsive-4by3
.embed-responsive-1by1

Mettre la classe .embed-responsive-item sur l'objet.