Bootstrap propose des composants pratiques à mettre en œuvre : barres de navigation, effets typographiques, panneaux, boutons, etc.

Boutons [button]

Bootstrap comprend plusieurs styles de boutons prédéfinis, chacun servant son propre but sémantique, avec quelques extras ajoutés pour plus de contrôle.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Barre de navigation [navbar]

Les navbars Bootstrap sont des menus de navigation responsives, ils s’adaptent aux différents périphériques et prennent des mises en forme différentes en fonction de la taille de l’écran.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Carousel [carousel]

Le carrousel est un diaporama permettant de parcourir une série de contenus, construits avec des transformations CSS 3D et un peu de JavaScript. Il fonctionne avec une série d’images, de texte ou de balises personnalisées. Il inclut également la prise en charge des commandes et indicateurs précédents / suivants.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Cartes

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Formulaire

<div class="container">
    <form>
      <div class="form-row">
        <div class="col-md-6 mb-3">
          <label for="validationDefault01">Nom</label>
          <input type="text" class="form-control" id="validationDefault01" placeholder="Nom" required>
        </div>
      </div>

      <div class="form-row">
        <div class="col-md-6 mb-3">
          <label for="validationDefault02">Email</label>
          <input type="text" class="form-control" id="validationDefault02" placeholder="Email" required>
        </div>
      </div>

      <div class="form-row">
        <div class="col-md-6 mb-3">
          <label for="validationDefault03">Objet</label>
          <input type="text" class="form-control" id="validationDefault03" placeholder="Objet" required>
        </div>
      </div>

      <div class="form-row">
        <div class="col-md-6 mb-3">
          <label for="exampleFormControlTextarea1">Message</label>
          <textarea class="form-control y-5" id="exampleFormControlTextarea1" placeholder="Message"></textarea>
        </div>
      </div>

      <div class="form-group">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
          <label class="form-check-label" for="invalidCheck2">
            J’ai lu et accepte la politique de confidentialité du site.
          </label>
        </div>
      </div>

      <button class="btn btn-primary" type="submit">Submit form</button>

    </form>
  </div>