All of Bootstrap.

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

<h5>Example heading
    <span class="badge badge-secondary">New</span>
</h5>

<h5>Example heading
    <span class="badge badge-secondary badge-pill">New</span>
</h5>

<h6>Example heading
    <span class="badge badge-primary">New</span>
</h6>
<h6>Example heading
    <span class="badge badge-secondary">New</span>
</h6>
<h6>Example heading
    <span class="badge badge-success">New</span>
</h6>
<h6>Example heading
    <span class="badge badge-danger">New</span>
</h6>
<h6>Example heading
    <span class="badge badge-warning">New</span>
</h6>
<h6>Example heading
    <span class="badge badge-info">New</span>
</h6>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="index.html">Overview</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      Bootstrap Components
    </li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-transparent p-0">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-dark">
    <li class="breadcrumb-item"><a href="#" class="text-white">Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="text-white">Library</a></li>
    <li class="breadcrumb-item active text-white" aria-current="page">Data</li>
  </ol>
</nav>

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

<button type="button" class="btn btn-sm btn-primary m-1">Small</button>
<button type="button" class="btn btn-primary m-1">Default</button>
<button type="button" class="btn btn-lg btn-primary m-1">Large</button>

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

<button type="button" class="btn btn-primary m-1">Default</button>
<button type="button" class="btn btn-primary m-1 active">Active</button>
<button type="button" class="btn btn-primary m-1 disabled">Disabled</button>

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://placehold.it/640x480" alt="Card image cap">
  <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>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <span class="dropdown-header">Header</span>
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<form>
    <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

<form>
    <input type="text" class="form-control form-control-round mb-2" id="exampleInputRound1" placeholder=".form-control-round">
    <input type="search" class="form-control form-control-sm mb-2" id="exampleInputSmall1" placeholder=".form-control-sm">
    <input type="search" class="form-control form-control-lg" id="exampleInputLarge1" placeholder=".form-control-lg">
</form>

<form>
    <div class="input-group mb-2">
        <div class="input-group-prepend">
            <span class="input-group-text" id="input-group-1">https://</span>
        </div>
        <input type="text" class="form-control" placeholder="Website URL" aria-label="Username" aria-describedby="input-group-1">
    </div>
    <div class="input-group input-group-round">
        <div class="input-group-prepend">
            <span class="input-group-text" id="input-group-2">
                <i class="material-icons">search</i>
            </span>
        </div>
        <input type="search" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="input-group-2">
    </div>
</form>

<form>
    <select class="custom-select">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</form>

<form>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
    </div>
</form>

<form>
    <div class="custom-control custom-checkbox custom-checkbox-switch">
        <input type="checkbox" class="custom-control-input" id="customSwitch1">
        <label class="custom-control-label" for="customSwitch1">Flip this custom switch</label>
    </div>
</form>

<form>
    <div class="custom-control custom-radio mb-1">
        <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
    </div>
    <div class="custom-control custom-radio">
        <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
    </div>
</form>

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link h5 active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link h5" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link h5" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link h5 disabled" href="#">Disabled</a>
  </li>
</ul>

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">
          <i class="material-icons">keyboard_arrow_left</i>
        </span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">
          <i class="material-icons">keyboard_arrow_right</i>
        </span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

<div class="progress mb-2">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress mb-2">
  <div class="progress-bar bg-primary" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="10" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-secondary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="d-flex justify-content-between">
      <span>Graphics</span>
      <span>25%</span>
    </div>
  </div>
</div>