Cards

Cards

<div class="card card-default">
	<div class="card-block">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	</div>
</div>

<div class="card card-default">
	<div class="card-block">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	</div>
	<div class="card-footer">
		<a class="btn btn-success btn-sm float-right">Footer Button</a>
		card Footer
	</div>
</div>

<div class="card card-default">
	<div class="card-heading">
		<a class="btn btn-danger btn-sm float-right">Header Button</a>
		<h2 class="card-title">card Default</h2>
	</div>
	<div class="card-block">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	</div>
</div>

<div class="card card-default">
	<div class="card-heading card-heading-transparent">
		<h2 class="card-title">card Transparent</h2>
	</div>

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

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

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

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

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

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

card with table

<div class="card card-default">
	<div class="card-heading">
		<h2 class="card-title">card With Table</h2>
	</div>
	<div class="card-block">
		<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>

<div class="card card-danger">
	<div class="card-heading">
		<h2 class="card-title">card With Table</h2>
	</div>
	<div class="p-0 card-block">
		<table class="table m-0">
			<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>

<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>

<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>