Bootstrap 4 reference

This reference covers the Bootstrap 4 classes and components available when you build a Site Designer project with Bootstrap selected. Use it alongside the official Bootstrap 4 docs for the complete API.

Grid system

Bootstrap uses a 12-column Flexbox grid. Layout progresses from a single container to row to responsive col-* cells.

Utility classes

Bootstrap ships a large utility layer:

Spacing scale: 0–5 (0 = 0, 1 = 4 px, 2 = 8 px, 3 = 16 px, 4 = 24 px, 5 = 48 px).

Components

Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#navMenu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navMenu">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
    </ul>
  </div>
</nav>

Card

<div class="card">
  <img class="card-img-top" src="…" alt="…">
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Description.</p>
    <a href="#" class="btn btn-primary">Action</a>
  </div>
</div>

Buttons

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary btn-lg">Large secondary</button>
<button class="btn btn-outline-danger btn-sm">Small outline danger</button>
<button class="btn btn-primary btn-block">Full-width</button>

Alert

<div class="alert alert-success" role="alert">Success message.</div>
<div class="alert alert-warning" role="alert">Warning message.</div>
<div class="alert alert-danger" role="alert">Error message.</div>

Badge

<span class="badge badge-primary">New</span>
<span class="badge badge-pill badge-success">42</span>

Modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-modal="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">Content here.</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>
<button data-toggle="modal" data-target="#myModal" class="btn btn-primary">Open</button>

Form controls

<div class="form-group">
  <label for="email">Email address</label>
  <input type="email" class="form-control" id="email" placeholder="you@example.com">
</div>
<button type="submit" class="btn btn-primary">Submit</button>

Jumbotron

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">A large hero area for prominent calls to action.</p>
  <hr class="my-4">
  <a class="btn btn-primary btn-lg" href="#">Learn more</a>
</div>

Responsive display utilities

Full documentation

For the full Bootstrap 4 reference — utilities, JavaScript plugins, theming — visit getbootstrap.com/docs/4.6/.