Elements

The Dawn theme is built upon the powerful Twitter Bootstrap development framework and comes packaged with several pre-styled, ready to use elements right out of the box. Elements are easy to integrate, production-ready, and mobile responsive. Simply find an element, copy the code snippet, and you're ready to go!

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Maecenas id sem et lacus vehicula scelerisque nec nulla.

In vel justo at dolor mattis dictum pharetra enim.

Grab Snippet
<ul class="nav nav-tabs">
	<li class="active">
	  <a href="#tab1" data-toggle="tab">Section 1</a>
	</li>
	<li>
	  <a href="#tab2" data-toggle="tab">Section 2</a>
	</li>
	<li>
	  <a href="#tab3" data-toggle="tab">Section 3</a>
	</li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="tab1">
	  <p>...</p>
	</div>
	<div class="tab-pane" id="tab2">
	  <p>...</p>
	</div>
	<div class="tab-pane" id="tab3">
	  <p>...</p>
	</div>
</div>

Pills

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Maecenas id sem et lacus vehicula scelerisque nec nulla.

In vel justo at dolor mattis dictum pharetra enim.

Grab Snippet
<ul class="nav nav-pills">
	<li class="active first">
	  <a href="#tab1" data-toggle="tab">Section 1</a>
	</li>
	<li>
	  <a href="#tab2" data-toggle="tab">Section 2</a>
	</li>
	<li>
	  <a href="#tab3" data-toggle="tab">Section 3</a>
	</li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="tab1">
	  <p>...</p>
	</div>
	<div class="tab-pane" id="tab2">
	  <p>...</p>
	</div>
	<div class="tab-pane" id="tab3">
	  <p>...</p>
	</div>
</div>

Vertical Tabs (Left)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis tellus nec ipsum consequat viverra porttitor metus pellentesque.

Praesent ac elit odio, ac porta nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Quisque auctor pharetra lorem eu scelerisque. In laoreet, arcu vel interdum vehicula, nisi leo cursus est, et convallis nulla lorem sed purus.

Grab Snippet
<div class="tabbable tabs-left">
  <ul class="nav nav-pills">
    <li class="active">
	  <a href="#tab1" data-toggle="tab">Section 1</a>
    </li>
    <li>
	  <a href="#tab2" data-toggle="tab">Section 2</a>
    </li>
    <li>
	  <a href="#tab3" data-toggle="tab">Section 3</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
	  <p>...</p>
    </div>
    <div class="tab-pane" id="tab2">
	  <p>...</p>
    </div>
    <div class="tab-pane" id="tab3">
	  <p>...</p>
    </div>
  </div>
</div>

Vertical Tabs (Right)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis tellus nec ipsum consequat viverra porttitor metus pellentesque.

Praesent ac elit odio, ac porta nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Quisque auctor pharetra lorem eu scelerisque. In laoreet, arcu vel interdum vehicula, nisi leo cursus est, et convallis nulla lorem sed purus.

Grab Snippet
<div class="tabbable tabs-right">
  <ul class="nav nav-pills">
    <li class="active">
	  <a href="#tab1" data-toggle="tab">Section 1</a>
    </li>
    <li>
	  <a href="#tab2" data-toggle="tab">Section 2</a>
    </li>
    <li>
	  <a href="#tab3" data-toggle="tab">Section 3</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
	  <p>...</p>
    </div>
    <div class="tab-pane" id="tab2">
	  <p>...</p>
    </div>
    <div class="tab-pane" id="tab3">
	  <p>...</p>
    </div>
  </div>
</div>

Alert Boxes

Warning! Be extremely careful!

Success! The configuration has been saved.

Error! Something has run amok!

Alert! This alert needs your attention.

Grab Snippet
<div class="alert">
  <button type="button" class="close" data-dismiss="alert">×</button>
<p><strong>Warning!</strong> ...</p>
</div>
<div class="alert alert-success">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <p><strong>Success!</strong> ...</p>
</div>
<div class="alert alert-error">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <p><strong>Error!</strong> ...</p>
</div>
<div class="alert alert-info">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <p><strong>Alert!</strong> ...</p>
</div>

Accordion

In laoreet, arcu vel interdum vehicula, nisi leo cursus est, et convallis nulla lorem sed purus. Consectetur metus adipiscing elit amet.
Curabitur mattis tellus nec ipsum consequat viverra porttitor metus pellentesque. et convallis nulla lorem sed purus interdum arcu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nisi leo lorem sed cursus est, et convallis nulla viverra porttitor metus tellus.

Grab Snippet
<div class="accordion" id="accordion">
 <div class="accordion-group">
  <div class="accordion-heading">
   <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Heading</a>
  </div>
  <div id="collapseOne" class="accordion-body collapse in">
   <div class="accordion-inner">...</div>
  </div>
</div>
<div class="accordion-group last">
 <div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Heading</a>
 </div>
 <div id="collapseThree" class="accordion-body collapse">
  <div class="accordion-inner">...</div>
 </div>
</div>
</div>

Progress Bars

Grab Snippet
<div class="progress progress-info">
 <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
 <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
 <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
 <div class="bar" style="width: 80%"></div>
</div>
<div class="progress">
 <div class="bar bar-info" style="width: 35%;"></div>
 <div class="bar bar-success" style="width: 30%;"></div>
 <div class="bar bar-warning" style="width: 20%;"></div>
 <div class="bar bar-danger" style="width: 10%;"></div>
</div>

Testimonials

Grab Snippet
<div class="testimonials carousel slide" id="myCarousel">
 <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
 <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
 <div class="carousel-inner">
  <div class="item">
   <div class="carousel-caption">
    <blockquote>...</blockquote>
   </div>
   <div class="quoted">...</div>
  </div>
  <div class="item">
   <div class="carousel-caption">
    <blockquote>...</blockquote>
   </div>
   <div class="quoted">...</div>
  </div>
 </div>
</div>


Buttons








Glyph Icons

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-fullscreen
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-bell
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-briefcase
  • icon-filter