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.
<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.
<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.
<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.
<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.
<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
<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
<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
<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
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca...
crossorigin="anonymous"></script>