AdminKIT v1.5

User Interface Elements

Ribbons

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
50% Off
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
50% Off
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
50% Off
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
50% Off
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
50% Off
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
50% Off

Smaller

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took ...
50% Off
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took ...
50% Off
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took ...
50% Off

Size

<!-- Default (Large) -->
<!-- Can be attached to any element with position relative -->
<div class="box-generic">
	Lorem Ipsum is simply dummy text of the printing and typesetting industry ...
	
	<!-- Ribbon -->
	<div class="ribbon-wrapper"><div class="ribbon default">50% Off</div></div>
</div>

<!-- Smaller -->
<div class="ribbon-wrapper small">
	<div class="ribbon default">50% Off</div>
</div>

Style

<!-- Default -->
<div class="ribbon-wrapper">
	<div class="ribbon">50% Off</div>
</div>

<!-- Other -->
<div class="ribbon warning">50% Off</div>
<div class="ribbon success">50% Off</div>
<div class="ribbon danger">50% Off</div>
<div class="ribbon primary">50% Off</div>
<div class="ribbon default">50% Off</div>
Regular Buttons Buttons + Icons Buttons + Dropdown Double Buttons
Default Default
Primary Primary
Warning Warning
Success Success
Danger Danger
Inverse Inverse
Progress Bars
Default
Primary
Success
Warning
Danger
Inverse
Mini

Alerts

Warning! Best check yo self, you're not looking too good.
Warning! Best check yo self, you're not looking too good.
Warning! Best check yo self, you're not looking too good.
Warning! Best check yo self, you're not looking too good.

Tooltips

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Tooltip on Left Tooltip on Top
Tooltip on Right Tooltip on Bottom 
// Tooltip on Left
<span class="btn btn-inverse" data-toggle="tooltip" data-original-title="Tooltip on Left" data-placement="left">Tooltip on Left</span>

// Tooltip on Top
<span class="btn btn-inverse" data-toggle="tooltip" data-original-title="Tooltip on Top" data-placement="top">Tooltip on Top</span>

// Tooltip on Right
<span class="btn btn-inverse" data-toggle="tooltip" data-original-title="Tooltip on Right" data-placement="right">Tooltip on Right</span>

// Tooltip on Bottom
<span class="btn btn-inverse" data-toggle="tooltip" data-original-title="Tooltip on Bottom" data-placement="bottom">Tooltip on Bottom</span>

Popovers

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover on Left Popover on Top
Popover on Right Popover on Bottom 
// Popover on Left
<span class="btn btn-inverse" data-toggle="popover" data-title="Popover on Left" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." data-placement="left">Popover on Left</span>

// Popover on Top
<span class="btn btn-inverse" data-toggle="popover" data-title="Popover on Top" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." data-placement="top">Popover on Top</span>

// Popover on Right
<span class="btn btn-inverse" data-toggle="popover" data-title="Popover on Right" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." data-placement="right">Popover on Right</span>

// Popover on Bottom
<span class="btn btn-inverse" data-toggle="popover" data-title="Popover on Bottom" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." data-placement="bottom">Popover on Bottom</span>

Pagination

<div class="pagination margin-none">
	<ul>
		<li class="disabled"><a href="#">&laquo;</a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">&raquo;</a></li>
	</ul>
</div>

Aligned right

<div class="pagination pagination-right margin-none">
	<ul>
		<li class="disabled"><a href="#">&laquo;</a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">&raquo;</a></li>
	</ul>
</div>

Aligned center

<div class="pagination pagination-centered margin-none">
	<ul>
		<li class="disabled"><a href="#">&laquo;</a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">&raquo;</a></li>
	</ul>
</div>

Pager

<ul class="pager margin-none">
	<li class="previous disabled"><a href="#">&larr; Older</a></li>
	<li class="next"><a href="#">&rarr; Newer</a></li>
</ul>
× close

Themer color options