<img src="//nojsim.images.xtstatic.com/tp.gif" alt="" />
<img src="//cim.images.xtstatic.com/tp.gif" alt="" />
Toggle navigation
Templates
XtBlog Templates
XtForum Templates
XtGem Templates
Twig
XtBlog Twig
XtChat Twig
XtForum Twig
Components
Navbar
Buttons
Typography
Tables
Navs
Indicators
Containers
Dialogs
Blog
Forum
Containers
List groups
14
Cras justo odio
2
Dapibus ac facilisis in
1
Morbi leo risus
<ul class="list-group"> <li class="list-group-item"> <span class="badge">14</span> Cras justo odio </li> <li class="list-group-item"> <span class="badge">2</span> Dapibus ac facilisis in </li> <li class="list-group-item"> <span class="badge">1</span> Morbi leo risus </li> </ul>
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
<div class="list-group"> <a href="#" class="list-group-item active"> Cras justo odio </a> <a href="#" class="list-group-item">Dapibus ac facilisis in </a> <a href="#" class="list-group-item">Morbi leo risus </a> </div>
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group"> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a> </div>
Panels
Basic panel
Panel heading
Panel content
Panel content
<div class="panel panel-default"> <div class="panel-body"> Basic panel </div> </div> <div class="panel panel-default"> <div class="panel-heading">Panel heading</div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-default"> <div class="panel-body"> Panel content </div> <div class="panel-footer">Panel footer</div> </div>
Panel primary
Panel content
Panel success
Panel content
Panel warning
Panel content
<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Panel primary</h3> </div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Panel success</h3> </div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">Panel warning</h3> </div> <div class="panel-body"> Panel content </div> </div>
Panel danger
Panel content
Panel info
Panel content
<div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">Panel danger</h3> </div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">Panel info</h3> </div> <div class="panel-body"> Panel content </div> </div>
Wells
Look, I'm in a well!
<div class="well"> Look, I'm in a well! </div>
Look, I'm in a small well!
<div class="well well-sm"> Look, I'm in a small well! </div>
Look, I'm in a large well!
<div class="well well-lg"> Look, I'm in a large well! </div>
Log in
Snack's 1967
