Pipeline Project Management Bootstrap Theme

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

A simple primary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

Holy guacamole! You should check in on some of those fields below.

A simple info alert—check it out!

Markup

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

For a detailed specification of the Alerts component including all classes and features please see the official Bootstrap documentation reference

Documentation and examples for badges, our small count and labeling component.

Example heading New

Success 14 Expired Due Soon

Markup

<span class="badge badge-secondary">New</span>

For a detailed specification of the Badges component including all classes and features please see the official Bootstrap documentation reference

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Markup

<div class="navbar bg-white breadcrumb-bar">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <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>
</div>

For a detailed specification of the Breadcrumb component including all classes and features please see the official Bootstrap documentation reference

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Markup

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

For a detailed specification of the Buttons component including all classes and features please see the official Bootstrap documentation reference

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Pipeline also supports multiple custom card types. View them on the Pipeline Components page

Card title

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

Go somewhere

Markup

<div class="card">
  <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>

For a detailed specification of the Cards component including all classes and features please see the official Bootstrap documentation reference

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Markup

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

For a detailed specification of the Dropdowns component including all classes and features please see the official Bootstrap documentation reference

A brief example of Bootstrap's default form markup. See the Bootstrap Documentation for a more detailed reference.

Markup

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

For a detailed specification of the Forms component including all classes and features please see the official Bootstrap documentation reference

A brief example of Bootstrap's default Input Group markup. See the Bootstrap Documentation for a more detailed reference.

Markup

<div class="input-group input-group-round">
  <div class="input-group-prepend">
    <span class="input-group-text">
      <i class="material-icons">email</i>
    </span>
  </div>
  <input type="text" class="form-control" placeholder="Email Address" aria-label="Email Address" >
</div>

For a detailed specification of the Input Group component including all classes and features please see the official Bootstrap documentation reference

A brief example of Bootstrap's default List Group markup. See the Bootstrap Documentation for a more detailed reference.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Markup

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

For a detailed specification of the List Group component including all classes and features please see the official Bootstrap documentation reference

A brief example of Bootstrap's default Navs markup. See the Bootstrap Documentation for a more detailed reference.

Markup

<ul class="nav nav-tabs">
  <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>

For a detailed specification of the Navs component including all classes and features please see the official Bootstrap documentation reference

A brief example of Bootstrap's default Navbar markup. See the Bootstrap Documentation for a more detailed reference.

Markup

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <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>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

For a detailed specification of the Navbar component including all classes and features please see the official Bootstrap documentation reference

A brief example of Bootstrap's default progress bar markup. See the Bootstrap Documentation for a more detailed reference.

Markup

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

For a detailed specification of the Progress component including all classes and features please see the official Bootstrap documentation reference

A brief example of Bootstrap's default toasts. See the Bootstrap Documentation for a more detailed reference.

Hello, world! This toast will disappear in 5 seconds.

Markup

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

For a detailed specification of the Toasts component including all classes and features please see the official Bootstrap documentation reference

A brief example of Bootstrap's default tooltips. See the Bootstrap Documentation for a more detailed reference.

Markup

<img alt="Image" src="assets/img/avatar-female-2.jpg" class="avatar avatar-lg" data-title="Peggy Brown" data-toggle="tooltip" />

For a detailed specification of the Tooltips component including all classes and features please see the official Bootstrap documentation reference

Bootstrap Components