Bootstrap Components

Installation

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


<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>

Coloring

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

Alerts

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
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

Buttons

<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

Jumbotron

<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>
  </div>
</div>

Cards

Illustration of Various Bootstrap Buttons

Cards Code Examples

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <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>
  </ul>
</div>
<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>
  </div>
</div>

Bootstrap Examples and Themes

 Previous Lesson Next Lesson 

Outline

[menu]

/