Bootstrap Components


Components need: - Bootstrap CSS, jQuery, Popper.js, Bootstrap.js

  <link rel="stylesheet" href="">
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>


Class Color
primary blue
secondary grey
success green
danger red
warning yellow
info teal
light white
dark dark gray


<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
Class Alert Color
alert-primary blue
alert-secondary grey
alert-success green
alert-danger red
alert-warning yellow
alert-info teal

Illustration of Various Bootstrap Alerts


<button type="button" class="btn btn-primary">Primary</button>
Class Button Color
btn-primary blue
btn-secondary grey
btn-success green
btn-danger red
btn-warning yellow
btn-info teal
<button type="button" class="btn btn-outline-primary">Primary</button>

Illustration of Various Bootstrap Buttons


<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>


Illustration of Various Bootstrap Buttons

Cards Code Examples

<div class="card">
  <div class="card-header">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <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="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>

Bootstrap Examples and Themes

 Previous Lesson Next Lesson