WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

Panels

No heading and no footer.
<div class="panel panel-default">
	<div class="panel-body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	</div>
</div>
Panel with footer.
<div class="panel panel-default">
	<div class="panel-body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	</div>
	<div class="panel-footer">
		<a class="btn btn-success btn-xs pull-right">Footer Button</a>
		Panel Footer
	</div>
</div>
Header Button

Panel Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="panel panel-default">
	<div class="panel-heading">
		<a class="btn btn-danger btn-xs pull-right">Header Button</a>
		<h2 class="panel-title">Panel Default</h2>
	</div>
	<div class="panel-body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	</div>
</div>

Panel Transparent

Header & Footer transparent!
<div class="panel panel-default">
	<div class="panel-heading panel-heading-transparent">
		<h2 class="panel-title">Panel Transparent</h2>
	</div>

	<div class="panel-body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	</div>

	<div class="panel-footer panel-footer-transparent">
		Lorem ipsum dolor
	</div>
</div>

Panel Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="panel panel-success">
	<div class="panel-heading">
		<h2 class="panel-title">Panel Success</h2>
	</div>
	<div class="panel-body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	</div>
</div>

Panel Danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="panel panel-danger">
	<div class="panel-heading">
		<h2 class="panel-title">Panel Danger</h2>
	</div>
	<div class="panel-body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	</div>
</div>

Panel Warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="panel panel-warning">
	<div class="panel-heading">
		<h2 class="panel-title">Panel Warning</h2>
	</div>
	<div class="panel-body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	</div>
</div>

Panel Info

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="panel panel-info">
	<div class="panel-heading">
		<h2 class="panel-title">Panel Info</h2>
	</div>
	<div class="panel-body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	</div>
</div>

Panel with table

Panel With Table

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
	<div class="panel-heading">
		<h2 class="panel-title">Panel With Table</h2>
	</div>
	<div class="panel-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	</div>

	<table class="table">
		<thead>
			<tr>
				<th>#</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Username</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Mark</td>
				<td>Otto</td>
				<td>@mdo</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Jacob</td>
				<td>Thornton</td>
				<td>@fat</td>
			</tr>
			<tr>
				<td>3</td>
				<td>Larry</td>
				<td>the Bird</td>
				<td>@twitter</td>
			</tr>
		</tbody>
	</table>

</div>

Panel With Table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-danger">
	<div class="panel-heading">
		<h2 class="panel-title">Panel With Table</h2>
	</div>
	<div class="nopadding panel-body">
		<table class="table nomargin">
			<thead>
				<tr>
					<th>#</th>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Username</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Mark</td>
					<td>Otto</td>
					<td>@mdo</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Jacob</td>
					<td>Thornton</td>
					<td>@fat</td>
				</tr>
				<tr>
					<td>3</td>
					<td>Larry</td>
					<td>the Bird</td>
					<td>@twitter</td>
				</tr>
			</tbody>
		</table>							
	</div>
</div>

List Groups

  • Lorem ipsum dolor
  • Dolor sit amet, consectetur
  • Amet, consectetur adipisicing elit
  • Consectetur adipisicing elit
  • Sit amet, consectetur
<ul class="list-group">
	<li class="list-group-item">Lorem ipsum dolor</li>
	<li class="list-group-item">Dolor sit amet, consectetur</li>
	<li class="list-group-item">Amet, consectetur adipisicing</li>
	<li class="list-group-item">Consectetur adipisicing elit</li>
	<li class="list-group-item">Sit amet, consectetur</li>
</ul>

Linked Items

<div class="list-group">
	<a href="#" class="list-group-item active">Lorem ipsum dolor</a>
	<a href="#" class="list-group-item">Dolor amet, consectetur</a>
	<a href="#" class="list-group-item">Consectetur amet ipsum</a>
	<a href="#" class="list-group-item">Consectetur lorem mena</a>
	<a href="#" class="list-group-item">Sit amet, consectetur</a>
</div>

Group Custom Content

<div class="list-group">
	<a href="#" class="list-group-item active">
		<h4 class="list-group-item-heading">List group item heading</h4>
		<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, sit, reiciendis expedita voluptate fuga perferendis soluta doloribus quasi quia odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, sit, reiciendis expedita voluptate fuga perferendis soluta doloribus quasi quia odio.</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">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, sit, reiciendis expedita voluptate fuga perferendis soluta doloribus quasi quia odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, sit, reiciendis expedita voluptate fuga perferendis soluta doloribus quasi quia odio.</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">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, sit, reiciendis expedita voluptate fuga perferendis soluta doloribus quasi quia odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, sit, reiciendis expedita voluptate fuga perferendis soluta doloribus quasi quia odio.</p>
	</a>
</div>

List Groups - Badges

  • 21 Lorem ipsum dolor sit amet
  • 8 Dolorem, sit, reiciendis
<ul class="list-group col_half">
	<li class="list-group-item">
		<span class="badge">21</span>
		Lorem ipsum dolor sit amet
	</li>
	<li class="list-group-item">
		<span class="badge">8</span>
		Dolorem, sit, reiciendis
	</li>
</ul>