Styles fondamentaux

Couleurs

Les couleurs de texte utilisent le préfixe .text-*

Les couleurs d'arrière-plan utilisent le préfixe .bg-*

Palette disponible : primary / secondary / success / danger / warning / info / muted / white / light / dark

Styles de texte

Alignement : text-left / text-right / text-center

Gestion du dépassement : text-nowrap (affichage sur une ligne) / text-truncate (tronquage avec ellipsis)

Casse : text-lowercase / text-uppercase / text-capitalize (première lettre en majuscule)

Poids et style : font-weight-bold / font-weight-normal / font-weight-light / font-italic

Autres : text-hide

Dimensions des éléments

Largeur : w-25 → width:25%

Autres largeurs : w-50 / w-75 / w-100

Hauteur : h-25 / h-50 / h-75 / h-100

Dimensions maximales : mw-100 → max-width:100% / mh-100 → max-height:100%

Espacements

Marges extérieures (margin) : m / Marges intérieures (padding) : p

Directions : l (gauche) / t (haut) / b (bas) / r (droite) / x (gauche|droite) / y (haut|bas)

Tailles disponibles : 0 / 1 / 2 / 3 / 4 / 5 / auto

Exemples : mt-0 → margin-top:0 / mx-2 → margin-left et margin-right / p-2 → padding

Positionnement

Classes de position : position-relative / position-absolute / position-fixed / position-static / position-sticky

Positions prédéfinies : fixed-top / fixed-bottom / sticky-top

Display

Propriété display avec le préfixe d-*

Valeurs possibles : none / block / inline / inline-block / flex / inline-flex

Flottement

Classes : clearfix / float-left / float-right / float-none

Bordures

Bordures complètes ou partielles : border / border-top / border-right / border-bottom / border-left

Suppressoin des bordures : border-0 / border-top-0 / etc.

Couleurs de bordure : border-primary / border-secondary / border-success / etc.

Coins arrondis : rounded / rounded-circle / rounded-0

Système de grille

Conteneurs : container / container-fluid

Colonnes : col / col-sm / col-md / col-lg / col-xl

Alignement vertical des éléments flexibles : align-items-start / align-items-center / align-items-end

Alignement individuel : align-self-start / align-self-center / align-self-end

Alignement horizontal : justify-content-start / justify-content-center / justify-content-end / justify-content-between / justify-content-around

Composants de navigation

Navigation simple

Classes principales : nav / nav-item / nav-link

<div className='navigation-principale'>
  <div className='element-nav'>
    <div className='lien-nav'>HTML</div>
  </div>
  <div className='element-nav'>
    <div className='lien-nav'>CSS</div>
  </div>
  <div className='element-nav'>
    <div className='lien-nav'>JavaScript</div>
  </div>
</div>

Orientation verticale : flex-column

Alignement : justify-content-center / justify-content-start / justify-content-end

Variantes de style : nav-tabs / nav-pills

Navigation étendue : nav-fill / nav-justified

Barre de navigation

Classes de base : navbar / navbar-expand-lg

Éléments : navbar-brand / navbar-nav / nav-item / nav-link

<div className='navbar navbar-expand-lg navbar-light bg-light'>
  <a className='navbar-brand'>MonSite</a>
  <ul className='navbar-nav'>
    <li className='nav-item'>
      <a className='nav-link active'>Accueil</a>
    </li>
    <li className='nav-item'>
      <a className='nav-link'>Forum</a>
    </li>
  </ul>
</div>

Navigation responsive avec bouton hamburger

Classes pour le toggle : collapse / navbar-collapse

Bouton : navbar-toggler avec attributs data-toggle et data-target

<div className='navbar navbar-expand-lg navbar-light bg-light'>
  <a className='navbar-brand'>MonSite</a>
  <button className='navbar-toggler' data-toggle='collapse' data-target='#contenu-navbar'>
    <span className='navbar-toggler-icon'></span>
  </button>
  <div className='collapse navbar-collapse' id='contenu-navbar'>
    <ul className='navbar-nav'>
      <li className='nav-item'>
        <a className='nav-link active'>Accueil</a>
      </li>
      <li className='nav-item'>
        <a className='nav-link'>Forum</a>
      </li>
    </ul>
  </div>
</div>

Positionnement de la navbar

Options : fixed-top / fixed-bottom / sticky-top

Composants d'alerte

Alerte simple

Classes : alert / alert-primary

Lien внутри : alert-link

<div className='alert alert-primary'>
  <h2>Titre</h2>
  Bonjour ! <a className='alert-link'>en savoir plus</a>
</div>

Alerte fermable

Classe : alert-dismissible

Attributs : role / data-dismiss

<div className='alert alert-primary alert-dismissible' role='alert'>
  <h2>Titre</h2>
  Bonjour ! <a className='alert-link'>en savoir plus</a>
  <button className='close' data-dismiss='alert'>&times;</button>
</div>

Composant Badge

Classes : badge / badge-secondary

<h1>Bienvenue<span className='badge badge-secondary'>Nouveau</span></h1>
<button className='btn btn-primary'>Notifications<span className='badge badge-light'>5</span></button>

Composant Card

Structure de base

Classes : card / card-header / card-body / card-footer

Éléments de contenu : card-title / card-subtitle / card-text / card-link

<div className='card'>
  <div className='card-header'>
    En destaque
  </div>
  <div className='card-body'>
    <h2 className='card-title'>Titre de la carte</h2>
    <div className='card-subtitle'>Sous-titre</div>
    <p className='card-text'>Ceci est un exemple de texte dans le corps de la carte.</p>
    <p>
      <a href='#' className='card-link'>lien</a>
      <a href='#' className='card-link'>autre lien</a>
    </p>
  </div>
  <div className='card-footer'>
    Pied de page
  </div>
</div>

Card avec image

Classe : card-img-top

<div className='card'>
  <img src={require('./image.jpg')} className='card-img-top'/>
  <div className='card-body'>
    <p className='card-text'>Texte explicatif rapide pour construire le contenu de la carte.</p>
  </div>
</div>

Card avec liste

Classes : list-group / list-group-flush / list-group-item

<div className='card' style='width: 18rem;'>
  <ul className='list-group list-group-flush'>
    <li className='list-group-item'>Premier élément</li>
    <li className='list-group-item'>Deuxième élément</li>
    <li className='list-group-item'>Troisième élément</li>
  </ul>
</div>

Card avec onglets

Classes : card-header-tabs / card-header-pills

<div className='card'>
  <div className='card-header'>
    <ul className='nav nav-tabs card-header-tabs'>
      <li className='nav-item'>
        <a href='#' className='nav-link active'>Actif</a>
      </li>
      <li className='nav-item'>
        <a href='#' className='nav-link'>Lien</a>
      </li>
      <li className='nav-item'>
        <a href='#' className='nav-link disabled'>Désactivé</a>
      </li>
    </ul>
  </div>
  <div className='card-body'>
    <h5 className='card-title'>Traitement spécial</h5>
    <p className='card-text'>Texte de support comme introduction.</p>
    <a href='#' className='btn btn-primary'>Aller quelque part</a>
  </div>
</div>

Card avec superposition d'image

Classes : card-img / card-img-overlay

<div className='card text-white'>
  <img className='card-img' src={require('./image.jpg')}/>
  <div className='card-img-overlay'>
    <h5 className='card-title'>Titre de la carte</h5>
    <p className='card-text'>Carte plus large avec texte de support.</p>
    <p className='card-text'><small className='text-muted'>Mis à jour récemment</small></p>
  </div>
</div>
<div className='card'>
  <div className='card-body'>
    <h5 className='card-title'>Titre de la carte</h5>
    <p className='card-text'>Carte avec texte de support.</p>
    <p className='card-text'>
      <small className='text-muted'>Mis à jour récemment</small>
    </p>
  </div>
  <img className='card-img-bottom' src={require('./image.jpg')} />
</div>

Groupes de cards

Options : card-group / card-deck / card-columns

Composant Button

Classes de base : btn / btn-primary / btn-outline-primary

Tailles : btn-sm / btn-lg

Bouton pleine largeur : btn-block

Groupe de boutons

Classes : btn-group / btn-group-vertical

Composant Carousel

Structure : carousel / carousel-inner / carousel-item

<div className='carousel slide' data-ride='carousel'>
  <div className='carousel-inner'>
    <div className='carousel-item active'>
      <img className='d-block w-100' src={require('./photo1.jpg')} />
    </div>
    <div className='carousel-item'>
      <img className='d-block w-100' src={require('./photo2.jpg')} />
    </div>
    <div className='carousel-item'>
      <img className='d-block w-100' src={require('./photo3.jpg')} />
    </div>
  </div>
</div>

Contrôles de navigation

<a className='carousel-control-prev' href='#demonstration' data-slide='prev'>
  <span className='carousel-control-prev-icon'></span>
</a>
<a className='carousel-control-next' href='#demonstration' data-slide='next'>
  <span className='carousel-control-next-icon'></span>
</a>

Inndicateurs

<ol className='carousel-indicators'>
  <li data-target='#demonstration' data-slide-to='0' className='active'></li>
  <li data-target='#demonstration' data-slide-to='1'></li>
  <li data-target='#demonstration' data-slide-to='2'></li>
</ol>

Personnalisation CSS

.style-carousel .carousel {
  .element-carousel {
    height: 300px;
    img {
      min-height: 300px;
      max-height: 400px;
      object-fit: cover;
    }
  }
}

Composant Collapse

Affichage/masquage simple

Pour les liens : attributs data-toggle et href

Pour les boutons : attributs data-toggle et data-target

<a href='#zone-depliable' data-toggle='collapse' className='btn btn-primary'>Lien avec href</a>
<button className='btn btn-primary' data-toggle='collapse' data-target='#zone-depliable'>Bouton avec target</button>
<div className='collapse' id='zone-depliable'>
  <div className='card card-body'>
    <p className='card-text'>Contenu dépliable avec animation.</p>
  </div>
</div>

Accordéon

Attribut data-parent pour grouper les éléments

<div id='accordéon'>
  <div className='card'>
    <div className='card-header'>
      <a href='#élément-1' data-toggle='collapse'>Élément dépliable 1</a>
    </div>
    <div className='card-body collapse' id='élément-1' data-parent='#accordéon'>
      Contenu de l'élément 1 avec du texte de démonstration.
    </div>
  </div>
  <div className='card'>
    <div className='card-header'>
      <a href='#élément-2' data-toggle='collapse'>Élément dépliable 2</a>
    </div>
    <div className='card-body collapse' id='élément-2' data-parent='#accordéon'>
      Contenu de l'élément 2 avec du texte de démonstration.
    </div>
  </div>
  <div className='card'>
    <div className='card-header'>
      <a data-toggle='collapse' href='#élément-3' data-parent='#accordéon'>Élément dépliable 3</a>
    </div>
    <div className='collapse' id='élément-3'>
      Contenu de l'élément 3 avec du texte de démonstration.
    </div>
  </div>
</div>

Composant Dropdown

Structure : dropdown / dropdown-menu / dropdown-header / dropdown-item / dropdown-divider

Attribut requis : data-toggle='dropdown'

<div className='dropdown'>
  <a href='#' className='btn btn-success dropdown-toggle' data-toggle='dropdown'>Menu déroulant</a>
  <div className='dropdown-menu'>
    <div className='dropdown-header'>
      <div className='dropdown-item'>HTML</div>
      <div className='dropdown-item'>CSS</div>
      <div className='dropdown-item'>JavaScript</div>
      <div className='dropdown-divider'></div>
      <a href='#' className='dropdown-item'>Plus</a> 
    </div>
  </div>
</div>

Menu déroulant divisé

<div className='btn-group dropup mt-5'>
  <button className='btn btn-danger' data-toggle='dropdown'>Menu</button>
  <button className='btn btn-danger dropdown-toggle dropdown-toggle-split' data-toggle='dropdown' data-offset='0'>
    <span className='sr-only'>Basculer le menu</span>
  &;/button>

  <div className='dropdown-menu dropdown-menu-right'>
    <div className='dropdown-header'>Langages Web</div>
    <div className='dropdown-item'>HTML</div>
    <div className='dropdown-item'>CSS</div>
    <div className='dropdown-item'>JavaScript</div>
    <div className='dropdown-divider'></div>
    <div className='dropdown-item'>Plus</div>
  </div>
</div>

Orientation : dropdown / dropup / dropright / dropleft

Alignement : dropdown-menu-left

Composant Jumbotron

<div className='jumbotron'>
  <h1 className='display-4'>Bonjour, monde !</h1>
  <p className='lead'>Ceci est un composant simple pour mettre en valeur un contenu.</p>
  <hr className='my-4'>
  <p>Il utilise des classes utilitaires pour la typographie et l'espacement.</p>
  <p className='lead'>
    <a className='btn btn-primary btn-lg' href='#' role='button'>En savoir plus</a>
  </p>
</div>

Composant List Group

Classes : list-group / list-group-item

États : active / disabled / list-group-item-action

<div className='list-group'>
  <a href='#' className='list-group-item '>HTML</a>
  <a href='#' className='list-group-item list-group-item-warning'>CSS</a>
  <a href='#' className='list-group-item list-group-item-action d-flex justify-content-between align-items-center'>JavaScript<span className='badge badge-primary'>12</span></a>
</div>

<div className='list-group'>
  <a className='list-group-item list-group-item-action flex-column active'>
    <div className='d-flex w-100 justify-content-between align-items-center'>
      <h5 className='mt-1'>Titre de l'élément</h5>
      <small>Il y a 3 jours</small>
    </div>
    <p>Description de l'élément avec du texte.</p>
    <small>Informations supplémentaires.</small>
  </a>
  <a className='list-group-item list-group-item-action flex-column '>
    <div className='d-flex w-100 justify-content-between align-items-center'>
      <h5 className='mt-1'>Titre de l'élément</h5>
      <small>Il y a 3 jours</small>
    </div>
    <p>Description de l'élément avec du texte.</p>
    <small>Informations supplémentaires.</small>
  </a>
</div>

Navigation par onglets avec list-group

Attribut : data-toggle='list'

Structure : tab-content / tab-pane

<div className='row'>
  <div className='col-md-4'>
    <div className='list-group'>
      <a href='#html' className='list-group-item list-group-item-action active' data-toggle='list'>HTML</a>
      <a href='#css' className='list-group-item list-group-item-action' data-toggle='list'>CSS</a>
      <a href='#js' className='list-group-item list-group-item-action' data-toggle='list'>JavaScript</a>
    </div>
  </div>
  <div className='col-md-8'>
    <div className='tab-content'>
      <div className='tab-pane fade active show' id='html'>Contenu HTML</div>
      <div className='tab-pane fade' id='css'>Contenu CSS</div>
      <div className='tab-pane fade' id='js'>Contenu JavaScript</div>
    </div>
  </div>
</div>

Composant Pagination

Classes : pagination / page-item / page-link

État actif : active

Tailles : pagination-lg / pagination-sm

<div className='pagination justify-content-center'>
  <li className='page-item'>
    <a className='page-link' href='#'>
      <span className='sr-only'>Précédent</span>
      <span>&laquo;</span>  
    </a>
  </li>
  <li className='page-item active'>
    <a className='page-link' href='#'>1</a>
  </li>
  <li className='page-item'>
    <a className='page-link' href='#'>2</a>
  </li>
  <li className='page-item'>
    <a className='page-link' href='#'>3</a>
  </li>
  <li className='page-item'>
    <a className='page-link' href='#'>
      <span className='sr-only'>Suivant</span>
      <span>&raquo;</span>
    </a>
  </li>
</div>

Composant Progres

Classes : progress / progress-bar / progress-bar-striped / progress-bar-animated

<div className='progress mt-1'>
  <div className='progress-bar'></div>
</div>
<div className='progress mt-1'>
  <div className='progress-bar progress-bar-striped progress-bar-animated bg-info' style={{width:'50%'}}></div>
</div>
<div className='progress mt-1'>
  <div className='progress-bar bg-danger' style={{width:'15%'}}></div>
  <div className='progress-bar bg-info' style={{width:'20%'}}></div>
  <div className='progress-bar bg-warning' style={{width:'10%'}}></div>
</div>

Composant Scrollspy

Attributs requis : data-spy='scroll' et data-target='#id'

Configuration CSS obligatoire : height et overflow-y

<div className='row'>
  <div className='col-md-3'>
    <div id='défilement' className='nav nav-pills bg-light flex-column'>
      <div className='nav-item'>
        <a className='nav-link' href='#html'>HTML</a>
      </div>
      <div className='nav-item'>
        <a className='nav-link' href='#css'>CSS</a>
      </div>
      <div className='nav-item'>
        <a className='nav-link' href='#js'>JavaScript</a>
      </div>
    </div>
  </div>
  <div className='col-md-9'>
    <div data-spy='scroll' data-target='#défilement' style={{height:'300px',overflowY:'scroll'}}>
      <h4 id='html'>HTML</h4>
      <p>Contenu de la section HTML...</p>
      <h4 id='css'>CSS</h4>
      <p>Contenu de la section CSS...</p>
      <h4 id='js'>JavaScript</h4>
      <p>Contenu de la section JavaScript...</p>
    </div>
  </div>
</div>

<div className='row'>
  <div className='col-md-3'>
    <div id='défilement' className='list-group'>
      <a className='list-group-item list-group-item-action' href='#html'>HTML</a>
      <a className='list-group-item list-group-item-action' href='#css'>CSS</a>
      <a className='list-group-item list-group-item-action' href='#js'>JavaScript</a>
    </div>
  </div>
  <div className='col-md-9'>
    <div data-spy='scroll' data-target='#défilement' style={{height:'300px',overflowY:'scroll'}}>
      <h4 id='html'>HTML</h4>
      <p>Contenu de la section HTML...</p>
      <h4 id='css'>CSS</h4>
      <p>Contenu de la section CSS...</p>
      <h4 id='js'>JavaScript</h4>
      <p>Contenu de la section JavaScript...</p>
    </div>
  </div>
</div>

Composant Tooltip

Attributs requis : data-toggle='tooltip'

Positionnement : data-placement='top|bottom|left|right'

Composants de formulaire

Classes principales : form-control / form-text

<form>  
  <label for='#email'>Email :</label>
  <input id='email' type='email' className='form-control' />
  <small className='form-text text-muted'>Veuillez saisir votre adresse email</small>
</form>

Tailles : form-control-lg / form-control-sm

Attribut readonly pour champ en lecture seule

Groupes d'input

Classes : input-group / input-group-prepend / input-group-append / input-group-text

<form className='form-row'>
  <div className='input-group'>
    <div className='input-group-prepend'>
      <span className='input-group-text'>@</span>
    </div>
    <input className='form-control' type='text' placeholder='Saisir...' />
    <div className='input-group-append'>
      <span className='input-group-text bg-primary text-light'>OK</span>
    </div>
  </div>
</form>