UI Elements

Typography

Phasellus a sem et augue ullamcorper gravida. Maecenas sed porta orci. Aliquam interdum felis sapien, vitae viverra diam consectetur a. Sed interdum quam leo, sed pretium eros mattis vitae.

Phasellus a sem et augue ullamcorper gravida. Maecenas sed porta orci. Aliquam interdum felis sapien, vitae viverra diam consectetur a. Sed interdum quam leo, sed pretium eros mattis vitae.

Header 6
Header 5

Header 4

Header 3

Header 2

Header 1

Buttons

Large Button Large Button

Large Button Large Button

Large Button Large Button

Large Button Large Button

<a href="#" class="btn btn-default">Default Button</a>
<a href="#" class="btn btn-primary">Primary Button</a>

Tabs

Pills



<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
</ul>
<ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
</ul>

Pagination

Pagination

Pager

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
    </a>
    </li>
  </ul>
</nav>

Panels

Panel default
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt soluta, eveniet placeat maiores commodi perspiciatis animi ad.
Panel Primary
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi ut excepturi voluptatum dolor blanditiis ab accusantium adipisci quia.
Panel Gray
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore dolor atque vel architecto, vitae ipsa repellat quidem nulla mi.
<div class="panel panel-default">
   <div class="panel-heading">Panel Heading</div>
   <div class="panel-body">
     Panel content
   </div>
 </div>

Social Icons

<ul class="social-icons">
   <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
   <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
   <li class="google-plus"><a href="#"><i class="fa fa-google-plus"></i></a></li>
 </ul>
<ul class="social-icons social-icons_sm">
   <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
   <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
   <li class="google-plus"><a href="#"><i class="fa fa-google-plus"></i></a></li>
 </ul>

Block Header

Block Header

Block Header Alt

<h2 class="block-header">
  <span>Block Header</span>
</h2>
<h2 class="block-header alt">
  <span>Block Header Alt</span>
</h2>