Components

Aero Lists

Quick Configurator

Admin Template Included

Using the same core as frontend!
Modular & Lightweight

Using helpers to build all blocks
Free lifetime update

All updates are free, no charge!
Free Ferrari included

Well, we tried but without much luck!

Admin Template Included

Using the same core as frontend!
Modular & Lightweight

Using helpers to build all blocks
Free lifetime update

All updates are free, no charge!
Free Ferrari included

Well, we tried but without much luck!


<!-- Not affected by configurator -->


<!-- Aero List -->
<ul class="list-group list-group-flush rounded overflow-hidden">
	
	<li class="list-group-item pt-4 pb-4">
		<div class="d-flex">

			<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
				<i class="fi fi-check"></i>
			</div>

			<div class="pl--12 pr--12">
				<p class="text-dark font-weight-medium m-0">
					Admin Template Included
				</p>

				<p class="m-0">
					Using the same core as frontend!
				</p>
			</div>

		</div>
	</li>

	<li class="list-group-item pt-4 pb-4">
		<div class="d-flex">

			<div class="badge badge-primary badge-soft badge-ico-sm rounded-circle float-start">
				<i class="fi fi-check"></i>
			</div>

			<div class="pl--12 pr--12">
				<p class="text-dark font-weight-medium m-0">
					Modular & Lightweight
				</p>

				<p class="m-0">
					Using helpers to build all blocks
				</p>
			</div>

		</div>
	</li>

	<li class="list-group-item pt-4 pb-4">
		<div class="d-flex">

			<div class="badge badge-warning badge-soft badge-ico-sm rounded-circle float-start">
				<i class="fi fi-check"></i>
			</div>

			<div class="pl--12 pr--12">
				<p class="text-dark font-weight-medium m-0">
					Free lifetime update
				</p>

				<p class="m-0">
					All updates are free, no charge!
				</p>
			</div>

		</div>
	</li>

	<li class="list-group-item pt-4 pb-4">
		<div class="d-flex">

			<div class="badge badge-danger badge-soft badge-ico-sm rounded-circle float-start">
				<i class="fi fi-close"></i>
			</div>

			<div class="pl--12 pr--12">
				<p class="text-dark font-weight-medium m-0">
					Free Ferrari included
				</p>

				<p class="m-0">
					Well, we tried but without much luck!
				</p>
			</div>

		</div>
	</li>

</ul>
<!-- /Aero List -->






<!-- Aero List -->
<ul class="list-group list-group-flush rounded overflow-hidden">
	
	<li class="list-group-item d-flex justify-content-between align-items-center pt-4 pb-4">

		<div>
			<p class="text-dark font-weight-medium m-0">
				Admin Template Included
			</p>

			<p class="m-0">
				Using the same core as frontend!
			</p>
		</div>

		<div class="badge badge-success badge-soft badge-ico-sm rounded-circle">
			<i class="fi fi-check"></i>
		</div>

	</li>

	<li class="list-group-item d-flex justify-content-between align-items-center pt-4 pb-4">

		<div>
			<p class="text-dark font-weight-medium m-0">
				Modular & Lightweight
			</p>

			<p class="m-0">
				Using helpers to build all blocks
			</p>
		</div>

		<div class="badge badge-primary badge-soft badge-ico-sm rounded-circle">
			<i class="fi fi-check"></i>
		</div>

	</li>

	<li class="list-group-item d-flex justify-content-between align-items-center pt-4 pb-4">

		<div>
			<p class="text-dark font-weight-medium m-0">
				Free lifetime update
			</p>

			<p class="m-0">
				All updates are free, no charge!
			</p>
		</div>

		<div class="badge badge-warning badge-soft badge-ico-sm rounded-circle">
			<i class="fi fi-check"></i>
		</div>

	</li>

	<li class="list-group-item d-flex justify-content-between align-items-center pt-4 pb-4">

		<div>
			<p class="text-dark font-weight-medium m-0">
				Free Ferrari included
			</p>

			<p class="m-0">
				Well, we tried but without much luck!
			</p>
		</div>


		<div class="badge badge-danger badge-soft badge-ico-sm rounded-circle">
			<i class="fi fi-close"></i>
		</div>

	</li>

</ul>
<!-- /Aero List -->

Bootstrap Basic Lists

Flush Layout
Active Item
Disabled Item
Using Badge 14
Color Item

copy code

Basic Example
Active Item
Disabled Item
Using Badge 14
Color Item

copy code

Links Active Item Disabled Item Using Badge 14 Color Item

copy code

view code


<!-- Basic Example -->
<ul class="list-group">
	<li class="list-group-item"><b>Basic Example</b></li>
	<li class="list-group-item active">Active Item</li>
	<li class="list-group-item disabled">Disabled Item</li>
	<li class="list-group-item list-group-item d-flex justify-content-between align-items-center">
		Using Badge
		<span class="badge badge-primary badge-pill">14</span>
	</li>
	<li class="list-group-item text-danger">Color Item</li>
</ul>


<!-- Links -->
<div class="list-group">
	<a href="#" class="list-group-item list-group-item-action">
		<b>Links</b>
	</a>
	<a href="#" class="list-group-item list-group-item-action active">Active Item</a>
	<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Disabled Item</a>
	<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
		Using Badge
		<span class="badge badge-primary badge-pill">14</span>
	</a>
	<a href="#" class="list-group-item list-group-item-action text-danger">Color Item</a>
</div>


<!-- Flush Layout -->
<ul class="list-group list-group-flush">
	<li class="list-group-item">
		<b>Flush Layout</b>
	</li>
	<li class="list-group-item active bg-primary-soft b-0">Active Item</li>
	<li class="list-group-item disabled">Disabled Item</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		Using Badge
		<span class="badge badge-primary badge-pill">14</span>
	</li>
	<li class="list-group-item text-danger">Color Item</li>
</ul>

Horizontal

Disabled item
Active Item
Regular Item
Color Item

view code copy code


<ul class="list-group list-group-horizontal">
	<li class="list-group-item disabled">Disabled item</li>
	<li class="list-group-item active">Active Item</li>
	<li class="list-group-item">Regular Item</li>
	<li class="list-group-item text-danger">Color Item</li>
</ul>

Quick Configurator

Jump To