Skip to main content Skip to docs navigation

Overview

Examples of some standard Bootstrap components with Scoutstrap applied. For a comprehensive overview refer back to the Bootstrap documentation.

On this page

Alerts

Standard Bootstrap alerts

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

We’ve added another version with deeper colours:

<div class="alert alert-deep-primary" role="alert">
  A deeper primary alert!
</div>
<div class="alert alert-deep-secondary" role="alert">
  A deeper secondary alert!
</div>
<div class="alert alert-deep-success" role="alert">
  A deeper success alert!
</div>
<div class="alert alert-deep-danger" role="alert">
  A deeper danger alert!
</div>
<div class="alert alert-deep-warning" role="alert">
  A deeper warning alert!
</div>
<div class="alert alert-deep-info" role="alert">
  A deeper info alert!
</div>
<div class="alert alert-deep-light" role="alert">
  A deeper light alert!
</div>
<div class="alert alert-deep-dark" role="alert">
  A deeper dark alert!
</div>

Buttons

<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>
<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light">
  <!-- Navbar content -->
</nav>

Cards

PlaceholderImage cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere 
<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>