UI Elements

kml;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

Buttons

<button type="button" class="btn btn-green">Green</button>
<button type="button" class="btn btn-blue">Blue</button>
<button type="button" class="btn btn-orange">Orange</button>
<button type="button" class="btn btn-red">Red</button>

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

Large Button Large Button

Default Button Default Button

Small Button Small Button

Extra Small Extra Small

<button type="button" class="btn btn-default btn-lg">Large button</button>
<button type="button" class="btn btn-green btn-lg">Large button</button>

<button type="button" class="btn btn-default">Default button</button>
<button type="button" class="btn btn-green">Default button</button>

<button type="button" class="btn btn-default btn-sm">Small button</button>
<button type="button" class="btn btn-green btn-sm">Small button</button>

<button type="button" class="btn btn-default btn-xs">Extra small button</button>
<button type="button" class="btn btn-green btn-xs">Extra small button</button>

Panels

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component. In the Mosaic template we have added several new classes to the panel element. For full documentation on panels, please refer to the official Bootstrap page.

Panel Title
Panel Content
Panel Title
Panel Content
Panel Title
Panel Content
Panel Title
Panel Content
<div class="panel panel-green"> ... </div>
<div class="panel panel-blue"> ... </div>
<div class="panel panel-orange"> ... </div>
<div class="panel panel-red"> ... </div>

Info Boards

You can emphasize some contents by wrapping it in a .info-board. Four classes are available:

Info board title

Info board content

Info board title

Info board content

Info board title

Info board content

Info board title

Info board content

<div class="info-board info-board-green"> ... </div>
<div class="info-board info-board-blue"> ... </div>
<div class="info-board info-board-orange"> ... </div>
<div class="info-board info-board-red"> ... </div>

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

Tabs

Note the .nav-tabs class requires the .nav base class.

Home tab content
Profile tab content
Message tab content
Settings tab content
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">Home tab content</div>
  <div class="tab-pane" id="profile">Profile tab content</div>
  <div class="tab-pane" id="messages">Message tab content</div>
  <div class="tab-pane" id="settings">Settings tab content</div>
</div> 

Pills

Take that same HTML, but use .nav-pills instead.

Home tab content
Profile tab content
Message tab content
Settings tab content
<ul class="nav nav-pills">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">Home tab content</div>
  <div class="tab-pane" id="profile">Profile tab content</div>
  <div class="tab-pane" id="messages">Message tab content</div>
  <div class="tab-pane" id="settings">Settings tab content</div>
</div> 

Choose one of the four colors by adding an exta class:

Headlines

Use the code below to add a headline on your page:

Headline

<h2 class="headline text-color">
  <span class="border-color">Headlines</span>
</h2>