Page Headers:

Colors can be applied using the bg-* styles

        <div class="page-header">
          <h1>Page-header div in h1</h1>
        </div>
        <div class="page-header">
          <h1 class="bg-western-redbud">Pink Page Header</h1>
        </div>
      

        <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
        <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
        <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
        <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
        <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
        <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
      

You also have the option of underlining text.

Apply colors using underline-<color>

Note, applying .text-centered produces a different style of underline.

<h2 class="underline">Heading</h2>
<h2 class="underline sky-blue">Sky Blue underline</h2>
<h2 class="text-center underline unitrans-red">Underline on Centered Text</h2>
      

    <h2>Title - h2</h2>
    <p class="lead"> Lead text - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
    <p> Nullam quis risus eget urna mollis ornare vel eu leo. 
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
    Nullam id dolor id nibh ultricies vehicula.</p>
    <p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
    Donec ullamcorper nulla non metus auctor fringilla. 
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. 
    Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p> Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>

<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Social Security</th>
        <th>Gender</th>             
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Philip</td>
        <td>Fry</td>
        <td>123-33-4032</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Zoidberg</td>
        <td>342-23-2423</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Hermes</td>
        <td>Conrad</td>
        <td>493-23-4323</td>
        <td>Male</td>
      </tr>
      <tr> 
        <td>4</td>
        <td>Amy</td>
        <td>Wong</td>
        <td>454-45-4324</td>
        <td>Female</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Turanga</td>
        <td>Leela</td>
        <td>134-31-3431</td>
        <td>Female</td>
      </tr>
    </tbody>
  </table>
</div>

These are all the colors available to be used to style any component where colors are applied, just add the color modifier.

Background colors can be set using the class .bg-<color>

The Cal Doval Button

Large

Default Primary Secondary Success Info Warning Danger Link

Normal

Default Primary Secondary Success Info Warning Danger Link

Small

Default Primary Secondary Success Info Warning Danger Link

        
<h2>The Cal Doval Button</h2>
<button type="button" class="btn btn-cal">Give now</button>

<h2>Large</h2>
<p>
  <button type="button" class="btn btn-lg btn-default">Default</button>
  <button type="button" class="btn btn-lg btn-primary">Primary</button>
  <button type="button" class="btn btn-lg btn-success">Success</button>
  <button type="button" class="btn btn-lg btn-info">Info</button>
  <button type="button" class="btn btn-lg btn-warning">Warning</button>
  <button type="button" class="btn btn-lg btn-danger">Danger</button>
  <button type="button" class="btn btn-lg btn-link">Link</button>
</p>

<h2>Normal</h2>
<p>
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-link">Link</button>
</p>

<h2>Small</h2>
<p>
  <button type="button" class="btn btn-sm btn-default">Default</button>
  <button type="button" class="btn btn-sm btn-primary">Primary</button>
  <button type="button" class="btn btn-sm btn-success">Success</button>
  <button type="button" class="btn btn-sm btn-info">Info</button>
  <button type="button" class="btn btn-sm btn-warning">Warning</button>
  <button type="button" class="btn btn-sm btn-danger">Danger</button>
  <button type="button" class="btn btn-sm btn-link">Link</button>
</p>
      

Just add .img-thumbnail to any image.

Modifiers:

You can add colors with the appropriate color modifier

You can also use different border selectors .image-thumbnail-[top|left|bottom|right]

 <div class="row">
    <img src="sample.jpg" class="img-thumbnail img-thumbnail-left col">
    <img src="sample.jpg" class="img-thumbnail img-thumbnail-top col">
    <img src="sample.jpg" class="img-thumbnail img-thumbnail-right col">
    <img src="sample.jpg" class="img-thumbnail img-thumbnail-bottom col">
  </div>
  <div class="row">
      <img src="sample.jpg" class="img-thumbnail unitrans-red col-3">
      <img src="sample.jpg" class="img-thumbnail ucdavis-gold col-3">
      <img src="sample.jpg" class="img-thumbnail sky-blue col-3">
      <img src="sample.jpg" class="img-thumbnail sunny-grass col-3">
      <img src="sample.jpg" class="img-thumbnail california-poppy col-3">
      <img src="sample.jpg" class="img-thumbnail golden-lupine col-3">
      <img src="sample.jpg" class="img-thumbnail wine-grape col-3">
  </div>

Sizing

Large branding is available with .navbar-banner-lg

        <div class="navbar navbar-default navbar-expand-md" role="navigation">
        
            <div class="navbar-banner navbar-banner-lg">
              <div class="container">
                <a class="navbar-brand navbar-brand" href="#"><img src="media/ucdavis_logo.png"></a>
              </div>
              <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="navbar-toggler-icon"></span>
              </button>
            </div>
            <div class="navbar-row">
              <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav mr-auto">
                  <li class="nav-item active"><a class="nav-link" href="#">HOME</a></li>
                  <li class="nav-item"><a class="nav-link disabled" href="#about">ABOUT</a></li>
                  <li class="nav-item"><a class="nav-link" href="#contact">CONTACT</a></li>
                  <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" role="button" id="navbarDropdown"  data-toggle="dropdown">DROPDOWN<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li class="dropdown-item"><a href="#">Action</a></li>
                      <li class="dropdown-item"><a href="#">Another action</a></li>
                      <li class="dropdown-item"><a href="#">Something else here</a></li>
                      <li class="dropdown-divider"></li>
                      <li class="dropdown-header">Nav header</li>
                      <li class="dropdown-item"><a href="#">Separated link</a></li>
                      <li class="dropdown-item"><a href="#">One more separated link</a></li>
                    </ul>
                  </li>
                </ul>
                <form class="form-inline flex-nowrap">
                  <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-collapse -->
              
            </div>
        </div>
    

Styles:

Use .navbar-inverted for a different color set.

    <div class="navbar navbar-inverted navbar-expand-md" role="navigation">
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-banner">
      <div class="container">
        <a class="navbar-brand navbar-brand" href="#"><img src="/media/ucdavis_logo_blue.png" /></a>
      </div>
    </div>
    <div class="navbar-row navbar-collapse collapse">
      <ul class="nav navbar-nav container">
        <li class="nav-item active"><a class="nav-link" href="#">HOME</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="#about">ABOUT</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">CONTACT</a></li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" role="button" id="navbarDropdown"  data-toggle="dropdown">DROPDOWN<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="dropdown-item"><a href="#">Action</a></li>
            <li class="dropdown-item"><a href="#">Another action</a></li>
            <li class="dropdown-item"><a href="#">Something else here</a></li>
            <li class="dropdown-divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li class="dropdown-item"><a href="#">Separated link</a></li>
            <li class="dropdown-item"><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
</div>
  

Modifiers:

Add .navbar-tabs to items to simulate tabbed dropdowns

  <div class="navbar navbar-default navbar-expand-md" role="navigation">
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-banner">
      <div class="container">
        <a class="navbar-brand navbar-brand" href="#"><img src="/media/ucdavis_logo.png"></a>
      </div>
    </div>
    <div class="navbar-row navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-tabs">
        <li class="nav-item active"><a class="nav-link" href="#">HOME</a></li>
        <li class="nav-item"><a class="nav-link" href="#about">ABOUT</a></li>
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" id="navbarDropdown" data-toggle="dropdown">DROPDOWN<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li class="dropdown-item"><a href="#">Action</a></li>
              <li class="dropdown-item"><a href="#">Another action</a></li>
              <li class="dropdown-item"><a href="#">Something else here</a></li>
              <li class="dropdown-divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li class="dropdown-item"><a href="#">Separated link</a></li>
              <li class="dropdown-item"><a href="#">One more separated link</a></li>
            </ul>
          </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" role="button" id="navbarDropdown" data-toggle="dropdown">DROPDOWN<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="dropdown-item"><a href="#">Action</a></li>
            <li class="dropdown-item"><a href="#">Another action</a></li>
            <li class="dropdown-item"><a href="#">Something else here</a></li>
            <li class="dropdown-divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li class="dropdown-item"><a href="#">Separated link</a></li>
            <li class="dropdown-item"><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
</div>

<div class="navbar navbar-inverted navbar-expand-md" role="navigation">
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-banner">
    <div class="container">
      <a class="navbar-brand navbar-brand" href="#"><img src="/media/ucdavis_logo_blue.png"></a>
    </div>
  </div>
  <div class="navbar-row navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-tabs">
      <li class="nav-item active"><a class="nav-link" href="#">HOME</a></li>
      <li class="nav-item"><a class="nav-link" href="#about">ABOUT</a></li>
      <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" role="button" id="navbarDropdown" data-toggle="dropdown">DROPDOWN<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="dropdown-item"><a href="#">Action</a></li>
            <li class="dropdown-item"><a href="#">Another action</a></li>
            <li class="dropdown-item"><a href="#">Something else here</a></li>
            <li class="dropdown-divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li class="dropdown-item"><a href="#">Separated link</a></li>
            <li class="dropdown-item"><a href="#">One more separated link</a></li>
          </ul>
        </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" role="button" id="navbarDropdown" data-toggle="dropdown">DROPDOWN<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class="dropdown-item"><a href="#">Action</a></li>
          <li class="dropdown-item"><a href="#">Another action</a></li>
          <li class="dropdown-item"><a href="#">Something else here</a></li>
          <li class="dropdown-divider"></li>
          <li class="dropdown-header">Nav header</li>
          <li class="dropdown-item"><a href="#">Separated link</a></li>
          <li class="dropdown-item"><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!--/.nav-collapse -->
</div>
  

<div class="row">
    <div class="col-sm-4">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Hello there.</h3>
        </div>
        <div class="card-body">
          Card content.
        </div>
      </div>
    </div>
  </div>
<div class="row">
    <div class="col-sm-4">
      <div class="card card-primary">
        <div class="card-header">
          <h3 class="card-title">Panel title</h3>
        </div>
        <div class="card-body">
          Panel content
        </div>
      </div>

    </div><!-- /.col-sm-4 -->
    <div class="col-sm-4">
      <div class="card card-secondary">
        <div class="card-header">
          <h3 class="card-title">Panel title</h3>
        </div>
        <div class="card-body">
          Panel content
        </div>
      </div>
    </div><!-- /.col-sm-4 -->
    <div class="col-sm-4">
      <div class="card mu-brick">
        <div class="card-header">
          <h3 class="card-title">Panel title</h3>
        </div>
        <div class="card-body">
          Panel content
        </div>
      </div>
    </div>
    <div class="col-sm-4">
        <div class="card sunny-grass">
            <div class="card-header">
              <h3 class="card-title">Panel title</h3>
            </div>
            <div class="card-body">
              Panel content
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="card unitrans-red">
              <div class="card-header">
                <h3 class="card-title">Panel title</h3>
              </div>
              <div class="card-body">
                Panel content
              </div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="card sky-blue">
                <div class="card-header">
                  <h3 class="card-title">Panel title</h3>
                </div>
                <div class="card-body">
                  Panel content
                </div>
              </div>
            </div>
          </div>

      

Apply .well class to any element

Some random mail.

Some random mail.

<div class="focus-block focus-block-lg">
    <div class="focus-logo">
      <img src="/media/mail-poppy.png" />
    </div>
    <div class="focus-body">
      Some random mail.
    </div>
  </div>
<a href="#" class="focus-block">
    <div class="focus-logo">
      <img src="/media/mail-poppy.png" />
    </div>
    <div class="focus-body">
      Some random mail.
    </div>
  </div>
</a>