Fabrx - Light Components Documentation

Components

500+ responsive components ready for action.

Avatars

A collection of avatars with different shapes, sizes and the possibility to group them.

Example

Use the .fabrx-avatar modifier class to create a circular avatar.

<div class="fabrx-avatar fabrx-status dnd lg"><img src="assets/images/avatars/avatar-1.png" alt="Avatar"></div>

<a href="#0" class="fabrx-avatar fabrx-status dnd lg"><span class="avatar-wrap">ab</span></a>

<a href="#0" class="fabrx-avatar fabrx-status dnd lg">
 <span class="avatar-wrap">
  <svg xmlns="http://www.w3.org/2000/svg" width="24.364" height="30" viewBox="0 0 24.364 30">
   <g transform="translate(-0.5 0)">
    <path data-name="Icon Color" d="M23.414,30a.917.917,0,0,1-.221-.028.815.815,0,0,1-.469-.308L19.269,25.8l-2.812,3.807a.814.814,0,0,1-.322.278.973.973,0,0,1-.439.1.907.907,0,0,1-.409-.1.806.806,0,0,1-.322-.278l-2.753-3.719L9.459,29.606a1.142,1.142,0,0,1-.337.278.929.929,0,0,1-.849,0,1.126,1.126,0,0,1-.337-.278L5.183,25.77,1.64,29.694a1,1,0,0,1-.322.22.987.987,0,0,1-.381.073.816.816,0,0,1-.161-.014,1.34,1.34,0,0,1-.161-.044,1.109,1.109,0,0,1-.439-.351A.863.863,0,0,1,0,29.049V13.031a13.477,13.477,0,0,1,3.587-9.21,12.387,12.387,0,0,1,3.865-2.8,11.421,11.421,0,0,1,9.458,0,12.387,12.387,0,0,1,3.865,2.8A13.464,13.464,0,0,1,23.4,7.965a13.355,13.355,0,0,1,.967,5.066V29.049a.863.863,0,0,1-.176.527,1.109,1.109,0,0,1-.439.351A.818.818,0,0,1,23.414,30ZM12.241,23.369a.913.913,0,0,1,.409.1.823.823,0,0,1,.322.278L15.7,27.468l2.753-3.719a.842.842,0,0,1,.307-.278.826.826,0,0,1,.4-.1,1.1,1.1,0,0,1,.4.073.828.828,0,0,1,.337.249l2.606,2.9V13.031a11.5,11.5,0,0,0-.82-4.319,11.773,11.773,0,0,0-2.211-3.558,10.333,10.333,0,0,0-3.265-2.4,9.591,9.591,0,0,0-8.024,0,10.333,10.333,0,0,0-3.265,2.4A11.773,11.773,0,0,0,2.694,8.712a11.5,11.5,0,0,0-.82,4.319V26.619l2.695-2.958a.716.716,0,0,1,.307-.22,1.027,1.027,0,0,1,.366-.073H5.3a.828.828,0,0,1,.4.1A.851.851,0,0,1,6,23.749L8.7,27.468l2.782-3.719a.815.815,0,0,1,.322-.278A.968.968,0,0,1,12.241,23.369Zm4.627-9.312a1.864,1.864,0,0,1-1.318-3.192A1.864,1.864,0,1,1,18.185,13.5,1.809,1.809,0,0,1,16.868,14.056Zm-9.371,0a1.864,1.864,0,0,1-1.319-3.192,1.874,1.874,0,0,1,3.192,1.319A1.9,1.9,0,0,1,7.5,14.056Z" transform="translate(0.5)" fill="#fff"></path>
   </g>
  </svg>
 </span>
</a>

Sizing

Use the .sm .md .lg to control Avatar size.

<div class="fabrx-avatar fabrx-status dnd sm"><img src="assets/images/avatars/avatar-1.png" alt="Avatar"></div>
<div class="fabrx-avatar fabrx-status dnd"><img src="assets/images/avatars/avatar-1.png" alt="Avatar"></div>
<div class="fabrx-avatar fabrx-status dnd md"><img src="assets/images/avatars/avatar-1.png" alt="Avatar"></div>
<div class="fabrx-avatar fabrx-status dnd lg"><img src="assets/images/avatars/avatar-1.png" alt="Avatar"></div>

Group

Include multiple avatar items inside a .fabrx-avatar-group container.

<div class="fabrx-avatar-group">
 <a href="#0" class="fabrx-avatar lg"><img src="assets/images/avatars/avatar-1.png" alt="Avatar"></a>
 <a href="#0" class="fabrx-avatar lg"><img src="assets/images/avatars/avatar-2.png" alt="Avatar"></a>
 <a href="#0" class="fabrx-avatar lg"><img src="assets/images/avatars/avatar-3.png" alt="Avatar"></a>
 <a href="#0" class="fabrx-avatar lg"><img src="assets/images/avatars/avatar-4.png" alt="Avatar"></a>
 <a href="#0" class="fabrx-avatar lg more"><span class="avatar-wrap">+9</span></a>
</div>

Badges

Example

Badges can be used as fill or outline.

<a href="#0" class="badge badge-primary circle xxl">
 <svg data-name="Icon/Star Fill" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <path data-name="Icon Color" d="M18.3,25.716l-5.588-3.779a.175.175,0,0,0-.2,0L6.923,25.716A2.128,2.128,0,0,1,5.939,26a1.66,1.66,0,0,1-1.378-.691,1.7,1.7,0,0,1-.315-1.543l1.574-7.11c0-.082,0-.162-.078-.2L.587,11.659a1.975,1.975,0,0,1-.511-1.95A1.744,1.744,0,0,1,1.61,8.491l6.651-.529c.079,0,.119-.04.158-.121L10.9,1.178A1.831,1.831,0,0,1,12.59,0a1.742,1.742,0,0,1,1.653,1.178l2.48,6.662c.04.082.079.121.157.121l6.652.529a1.744,1.744,0,0,1,1.535,1.218,1.819,1.819,0,0,1-.511,1.95L19.4,16.453a.314.314,0,0,0-.079.2l1.614,7.11a1.957,1.957,0,0,1-.315,1.543A1.71,1.71,0,0,1,19.242,26,1.858,1.858,0,0,1,18.3,25.716Z" transform="translate(2.583 2.667)" fill="#ffffff"></path>
</svg>
</a>

<a href="#0" class="badge badge-outline-primary circle xxl border-0">12</a>

Sizes

Use the .xxl, .xl, .md, .sm, or .ssm modifier classes to adjust badge sizes.

<ul class="component-list list-unstyled">
	<li>
	  <div class="badge badge-primary circle xxl">
	    <svg data-name="Icon/Star Fill" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
	      <path data-name="Icon Color" d="M18.3,25.716l-5.588-3.779a.175.175,0,0,0-.2,0L6.923,25.716A2.128,2.128,0,0,1,5.939,26a1.66,1.66,0,0,1-1.378-.691,1.7,1.7,0,0,1-.315-1.543l1.574-7.11c0-.082,0-.162-.078-.2L.587,11.659a1.975,1.975,0,0,1-.511-1.95A1.744,1.744,0,0,1,1.61,8.491l6.651-.529c.079,0,.119-.04.158-.121L10.9,1.178A1.831,1.831,0,0,1,12.59,0a1.742,1.742,0,0,1,1.653,1.178l2.48,6.662c.04.082.079.121.157.121l6.652.529a1.744,1.744,0,0,1,1.535,1.218,1.819,1.819,0,0,1-.511,1.95L19.4,16.453a.314.314,0,0,0-.079.2l1.614,7.11a1.957,1.957,0,0,1-.315,1.543A1.71,1.71,0,0,1,19.242,26,1.858,1.858,0,0,1,18.3,25.716Z" transform="translate(2.583 2.667)" fill="#ffffff"></path>
	    </svg>
	  </div>
	</li>
	<li>
	  <div class="badge badge-primary circle xl">
	    <svg data-name="Icon/Star Fill" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 32 32">
	      <path data-name="Icon Color" d="M18.3,25.716l-5.588-3.779a.175.175,0,0,0-.2,0L6.923,25.716A2.128,2.128,0,0,1,5.939,26a1.66,1.66,0,0,1-1.378-.691,1.7,1.7,0,0,1-.315-1.543l1.574-7.11c0-.082,0-.162-.078-.2L.587,11.659a1.975,1.975,0,0,1-.511-1.95A1.744,1.744,0,0,1,1.61,8.491l6.651-.529c.079,0,.119-.04.158-.121L10.9,1.178A1.831,1.831,0,0,1,12.59,0a1.742,1.742,0,0,1,1.653,1.178l2.48,6.662c.04.082.079.121.157.121l6.652.529a1.744,1.744,0,0,1,1.535,1.218,1.819,1.819,0,0,1-.511,1.95L19.4,16.453a.314.314,0,0,0-.079.2l1.614,7.11a1.957,1.957,0,0,1-.315,1.543A1.71,1.71,0,0,1,19.242,26,1.858,1.858,0,0,1,18.3,25.716Z" transform="translate(2.583 2.667)" fill="#ffffff"></path>
	    </svg>
	  </div>
	</li>
	<li>
	  <div class="badge badge-primary circle lg">
	    <svg data-name="Icon/Star Fill" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
	      <path data-name="Icon Color" d="M18.3,25.716l-5.588-3.779a.175.175,0,0,0-.2,0L6.923,25.716A2.128,2.128,0,0,1,5.939,26a1.66,1.66,0,0,1-1.378-.691,1.7,1.7,0,0,1-.315-1.543l1.574-7.11c0-.082,0-.162-.078-.2L.587,11.659a1.975,1.975,0,0,1-.511-1.95A1.744,1.744,0,0,1,1.61,8.491l6.651-.529c.079,0,.119-.04.158-.121L10.9,1.178A1.831,1.831,0,0,1,12.59,0a1.742,1.742,0,0,1,1.653,1.178l2.48,6.662c.04.082.079.121.157.121l6.652.529a1.744,1.744,0,0,1,1.535,1.218,1.819,1.819,0,0,1-.511,1.95L19.4,16.453a.314.314,0,0,0-.079.2l1.614,7.11a1.957,1.957,0,0,1-.315,1.543A1.71,1.71,0,0,1,19.242,26,1.858,1.858,0,0,1,18.3,25.716Z" transform="translate(2.583 2.667)" fill="#ffffff"></path>
	    </svg>
	  </div>
	</li>
	<li>
	  <div class="badge badge-primary circle">
	    <svg data-name="Icon/Star Fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32">
	      <path data-name="Icon Color" d="M18.3,25.716l-5.588-3.779a.175.175,0,0,0-.2,0L6.923,25.716A2.128,2.128,0,0,1,5.939,26a1.66,1.66,0,0,1-1.378-.691,1.7,1.7,0,0,1-.315-1.543l1.574-7.11c0-.082,0-.162-.078-.2L.587,11.659a1.975,1.975,0,0,1-.511-1.95A1.744,1.744,0,0,1,1.61,8.491l6.651-.529c.079,0,.119-.04.158-.121L10.9,1.178A1.831,1.831,0,0,1,12.59,0a1.742,1.742,0,0,1,1.653,1.178l2.48,6.662c.04.082.079.121.157.121l6.652.529a1.744,1.744,0,0,1,1.535,1.218,1.819,1.819,0,0,1-.511,1.95L19.4,16.453a.314.314,0,0,0-.079.2l1.614,7.11a1.957,1.957,0,0,1-.315,1.543A1.71,1.71,0,0,1,19.242,26,1.858,1.858,0,0,1,18.3,25.716Z" transform="translate(2.583 2.667)" fill="#ffffff"></path>
	    </svg>
	  </div>
	</li>
	<li>
	  <div class="badge badge-primary circle sm">
	    <svg data-name="Icon/Star Fill" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 32 32">
	      <path data-name="Icon Color" d="M18.3,25.716l-5.588-3.779a.175.175,0,0,0-.2,0L6.923,25.716A2.128,2.128,0,0,1,5.939,26a1.66,1.66,0,0,1-1.378-.691,1.7,1.7,0,0,1-.315-1.543l1.574-7.11c0-.082,0-.162-.078-.2L.587,11.659a1.975,1.975,0,0,1-.511-1.95A1.744,1.744,0,0,1,1.61,8.491l6.651-.529c.079,0,.119-.04.158-.121L10.9,1.178A1.831,1.831,0,0,1,12.59,0a1.742,1.742,0,0,1,1.653,1.178l2.48,6.662c.04.082.079.121.157.121l6.652.529a1.744,1.744,0,0,1,1.535,1.218,1.819,1.819,0,0,1-.511,1.95L19.4,16.453a.314.314,0,0,0-.079.2l1.614,7.11a1.957,1.957,0,0,1-.315,1.543A1.71,1.71,0,0,1,19.242,26,1.858,1.858,0,0,1,18.3,25.716Z" transform="translate(2.583 2.667)" fill="#ffffff"></path>
	    </svg>
	  </div>
	</li>
	<li>
	  <div class="badge badge-primary circle ssm">
	    <svg data-name="Icon/Star Fill" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 32 32">
	      <path data-name="Icon Color" d="M18.3,25.716l-5.588-3.779a.175.175,0,0,0-.2,0L6.923,25.716A2.128,2.128,0,0,1,5.939,26a1.66,1.66,0,0,1-1.378-.691,1.7,1.7,0,0,1-.315-1.543l1.574-7.11c0-.082,0-.162-.078-.2L.587,11.659a1.975,1.975,0,0,1-.511-1.95A1.744,1.744,0,0,1,1.61,8.491l6.651-.529c.079,0,.119-.04.158-.121L10.9,1.178A1.831,1.831,0,0,1,12.59,0a1.742,1.742,0,0,1,1.653,1.178l2.48,6.662c.04.082.079.121.157.121l6.652.529a1.744,1.744,0,0,1,1.535,1.218,1.819,1.819,0,0,1-.511,1.95L19.4,16.453a.314.314,0,0,0-.079.2l1.614,7.11a1.957,1.957,0,0,1-.315,1.543A1.71,1.71,0,0,1,19.242,26,1.858,1.858,0,0,1,18.3,25.716Z" transform="translate(2.583 2.667)" fill="#ffffff"></path>
	    </svg>
	  </div>
	</li>
	</ul>

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Example

<nav aria-label="breadcrumb" class="bg-white p-4">
 <ol class="breadcrumb mb-0">
  <li class="breadcrumb-item"><a href="#0">Breadcrumb</a></li>
  <li class="breadcrumb-item"><a href="#0">Breadcrumb</a></li>
  <li class="breadcrumb-item"><a href="#0">Breadcrumb</a></li>
  <li class="breadcrumb-item"><a href="#0">Breadcrumb</a></li>
  <li class="breadcrumb-item active" aria-current="page"><span>Breadcrumb</span></li>
 </ol>
</nav>

<nav aria-label="breadcrumb" class="bg-white p-4">
 <ol class="breadcrumb mb-0">
  <li class="breadcrumb-item"><a href="#0">Breadcrumb</a></li>
  <li class="breadcrumb-item"><a href="#0">Breadcrumb</a></li>
  <li class="breadcrumb-item"><a href="#0">Breadcrumb</a></li>
  <li class="breadcrumb-item"><a href="#0">Breadcrumb</a></li>
  <li class="breadcrumb-item active" aria-current="page"><a href="#0"><u>Breadcrumb</u></a></li>
 </ol>
</nav>

Buttons

Use Bootstrap buttons and BootstrapVue custom styles for actions in forms, dialogues, and more with support for multiple sizes, states, and more.

Classes

.btn
.btn-light
.btn-dark
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
.btn-outline-light
.btn-outline-dark
.btn-outline-primary
.btn-outline-success
.btn-outline-info
.btn-outline-warning
.btn-outline-danger

Examples

Predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Button Button

<a href="#0" class="btn btn-primary"><span class="btn-text">Button</span></a>
 <a href="#0" class="btn btn-primary">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
   <path data-name="Icon Color" d="M16,4.075a4.157,4.157,0,0,0-8-1.5A4.144,4.144,0,0,0,4.15,0,4.108,4.108,0,0,0,0,4.075v.3C0,8.575,8.3,14,8.3,14S16,8.575,16,4.375Z" transform="translate(0 1.333)" fill="#fff"></path>
  </svg>
  <span class="btn-text">Button</span>
 </a>
 <a href="#0" class="btn btn-primary btn-has-one">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 22 22">
   <path data-name="Icon Color" d="M22,5.6A5.716,5.716,0,0,0,11,3.541,5.7,5.7,0,0,0,5.706,0,5.649,5.649,0,0,0,0,5.6v.412C0,11.791,11.413,19.25,11.413,19.25S22,11.791,22,6.016Z" transform="translate(0 1.833)" fill="#fff"></path>
  </svg>
 </a>

Light Dark Primary Success Info Warning Danger Link

<a href="#0" class="btn btn-light"><span class="btn-text">Light</span></a>
<a href="#0" class="btn btn-dark"><span class="btn-text">Dark</span></a>
<a href="#0" class="btn btn-primary"><span class="btn-text">Primary</span></a>
<a href="#0" class="btn btn-success"><span class="btn-text">Success</span></a>
<a href="#0" class="btn btn-info"><span class="btn-text">Info</span></a>
<a href="#0" class="btn btn-warning"><span class="btn-text">Warning</span></a>
<a href="#0" class="btn btn-danger"><span class="btn-text">Danger</span></a>
<a href="#0" class="btn btn-link"><span class="btn-text">Link</span></a>

Outline buttons

Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Light Dark Primary Success Info Warning Danger

<a href="#0" class="btn btn-outline-light"><span class="btn-text">Light</span></a>
<a href="#0" class="btn btn-outline-dark"><span class="btn-text">Dark</span></a>
<a href="#0" class="btn btn-outline-primary"><span class="btn-text">Primary</span></a>
<a href="#0" class="btn btn-outline-success"><span class="btn-text">Success</span></a>
<a href="#0" class="btn btn-outline-info"><span class="btn-text">Info</span></a>
<a href="#0" class="btn btn-outline-warning"><span class="btn-text">Warning</span></a>
<a href="#0" class="btn btn-outline-danger"><span class="btn-text">Danger</span></a>

Sizes

Add .btn-xl, .btn-lg or .btn-sm for additional sizes.

Xtra large button Xtra large button

<a href="#0" class="btn btn-primary btn-xl">Xtra large button</a>
<a href="#0" class="btn btn-outline-primary btn-xl">Xtra large button</a>

Large button Large button

<a href="#0" class="btn btn-primary btn-lg">Large button</a>
<a href="#0" class="btn btn-outline-primary btn-lg">Large button</a>

Medium button Medium button

<a href="#0" class="btn btn-primary">Medium button</a>
<a href="#0" class="btn btn-outline-primary">Medium button</a>

Small button Small button

<a href="#0" class="btn btn-primary btn-sm">Small button</a>
<a href="#0" class="btn btn-outline-primary btn-sm">Small button</a>

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

Block level button Block level button

<div class="d-grid">
<a href="#0" class="btn btn-primary">Block level button</a>
<a href="#0" class="btn btn-outline-primary">Block level button</a>
</div>

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

Primary button Primary button

<a href="#0" class="btn btn-primary disabled">Primary button</a>
<a href="#0" class="btn btn-outline-primary disabled">Primary button</a>

Text Links

Basic left and right icon options for text links.

Link Link

<a href="#0" class="btn btn-link btn-lg">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <path data-name="Icon Color" d="M6.813,6.187a.5.5,0,0,1-.048-.651l.048-.056L8.627,3.667H.5a.5.5,0,0,1-.068-1l.068,0H8.626L6.813.854A.5.5,0,0,1,7.464.1L7.52.147,10.177,2.8a.5.5,0,0,1,.052.057l0,0,0,0,0,0,0,0,0,.005,0,0,0,.005,0,0,0,0,0,.006h0l.016.029h0l0,.01h0l0,.01h0l0,.01h0a.5.5,0,0,1-.054.5l0,0-.006.008-.005.006h0a.5.5,0,0,1-.041.044L7.52,6.187a.5.5,0,0,1-.707,0Z" transform="translate(2.833 4.833)" fill="#0d6efd"></path>
  </svg>
  <span class="btn-text">Link</span>
</a>
<a href="#0" class="btn btn-link btn-lg">
  <span class="btn-text">Link</span>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <path data-name="Icon Color" d="M6.813,6.187a.5.5,0,0,1-.048-.651l.048-.056L8.627,3.667H.5a.5.5,0,0,1-.068-1l.068,0H8.626L6.813.854A.5.5,0,0,1,7.464.1L7.52.147,10.177,2.8a.5.5,0,0,1,.052.057l0,0,0,0,0,0,0,0,0,.005,0,0,0,.005,0,0,0,0,0,.006h0l.016.029h0l0,.01h0l0,.01h0l0,.01h0a.5.5,0,0,1-.054.5l0,0-.006.008-.005.006h0a.5.5,0,0,1-.041.044L7.52,6.187a.5.5,0,0,1-.707,0Z" transform="translate(2.833 4.833)" fill="#0d6efd"></path>
  </svg>
</a>

Button grouped

Group a series of buttons together on a single line with the button group.

Label Label Label Label

<div class="btn-group btn-group-lg" role="group" aria-label="Grouped lg">
 <a href="#0" class="btn btn-primary"><span class="btn-text">Label</span></a>
 <a href="#0" class="btn btn-light"><span class="btn-text">Label</span></a>
 <a href="#0" class="btn btn-light"><span class="btn-text">Label</span></a>
 <a href="#0" class="btn btn-light"><span class="btn-text">Label</span></a>
</div>

<div class="btn-group" role="group" aria-label="Grouped md">
 <a href="#0" class="btn btn-primary">
  <svg xmlns="http://www.w3.org/2000/svg" width="15.985" height="16" viewBox="0 0 15.985 16">
   <path data-name="Icon Color" d="M11.623,15.825,8.073,13.5a.113.113,0,0,0-.125,0L4.4,15.825A1.382,1.382,0,0,1,3.773,16a1.067,1.067,0,0,1-.875-.425,1.02,1.02,0,0,1-.2-.95l1-4.375c0-.05,0-.1-.05-.125L.373,7.175a1.19,1.19,0,0,1-.325-1.2,1.1,1.1,0,0,1,.975-.75L5.248,4.9c.049,0,.075-.024.1-.075L6.923.725A1.163,1.163,0,0,1,8,0a1.105,1.105,0,0,1,1.05.725l1.575,4.1c.025.05.05.075.1.075l4.226.326a1.111,1.111,0,0,1,.65,1.949l-3.275,2.95a.19.19,0,0,0-.05.125L13.3,14.625a1.176,1.176,0,0,1-.2.95,1.1,1.1,0,0,1-.875.425A1.208,1.208,0,0,1,11.623,15.825Z" fill="#fff"></path>
  </svg>
 </a>
 <a href="#0" class="btn btn-light">
  <svg xmlns="http://www.w3.org/2000/svg" width="15.987" height="16" viewBox="0 0 15.987 16">
   <g transform="translate(0.001)">
    <path data-name="Icon Color" d="M12.223,16a1.2,1.2,0,0,1-.6-.175L8.073,13.5a.139.139,0,0,0-.063-.019.136.136,0,0,0-.062.019L4.4,15.825A1.394,1.394,0,0,1,3.773,16a1.062,1.062,0,0,1-.875-.425,1.014,1.014,0,0,1-.2-.95l1-4.375c0-.049,0-.1-.05-.125L.373,7.175a1.185,1.185,0,0,1-.325-1.2,1.105,1.105,0,0,1,.975-.75L5.248,4.9c.052,0,.077-.029.1-.075L6.923.725A1.161,1.161,0,0,1,8,0a1.109,1.109,0,0,1,1.05.725l1.575,4.1c.023.046.048.075.1.075l4.226.326a1.105,1.105,0,0,1,.975.75,1.091,1.091,0,0,1-.325,1.2l-3.275,2.95a.191.191,0,0,0-.05.125L13.3,14.625a1.169,1.169,0,0,1-.2.95A1.106,1.106,0,0,1,12.223,16ZM8,12.475a1.379,1.379,0,0,1,.625.175l3.55,2.325a.091.091,0,0,0,.066.027.162.162,0,0,0,.11-.052c.024-.025.024-.05.024-.1l-1.024-4.375a1.14,1.14,0,0,1,.349-1.1L15,6.45a.131.131,0,0,0,.041-.073.061.061,0,0,0-.016-.052c-.023-.047-.048-.076-.1-.076L10.7,5.925a1.109,1.109,0,0,1-.95-.725L8.123,1.075A.126.126,0,0,0,8.01,1a.127.127,0,0,0-.113.075l-1.575,4.1a1.159,1.159,0,0,1-.95.725l-4.251.325c-.048,0-.1.023-.1.075a.17.17,0,0,1,0,.021c0,.034-.012.085.027.1l3.3,2.925a1.142,1.142,0,0,1,.35,1.1L3.673,14.825c0,.05,0,.076.025.1a.14.14,0,0,0,.1.053.137.137,0,0,0,.076-.027l3.55-2.325A1.037,1.037,0,0,1,8,12.475Z" fill="#3f3b3b"></path>
   </g>
  </svg>
 </a>
 <a href="#0" class="btn btn-light">
  <svg xmlns="http://www.w3.org/2000/svg" width="15.987" height="16" viewBox="0 0 15.987 16">
   <g transform="translate(0.001)">
    <path data-name="Icon Color" d="M12.223,16a1.2,1.2,0,0,1-.6-.175L8.073,13.5a.139.139,0,0,0-.063-.019.136.136,0,0,0-.062.019L4.4,15.825A1.394,1.394,0,0,1,3.773,16a1.062,1.062,0,0,1-.875-.425,1.014,1.014,0,0,1-.2-.95l1-4.375c0-.049,0-.1-.05-.125L.373,7.175a1.185,1.185,0,0,1-.325-1.2,1.105,1.105,0,0,1,.975-.75L5.248,4.9c.052,0,.077-.029.1-.075L6.923.725A1.161,1.161,0,0,1,8,0a1.109,1.109,0,0,1,1.05.725l1.575,4.1c.023.046.048.075.1.075l4.226.326a1.105,1.105,0,0,1,.975.75,1.091,1.091,0,0,1-.325,1.2l-3.275,2.95a.191.191,0,0,0-.05.125L13.3,14.625a1.169,1.169,0,0,1-.2.95A1.106,1.106,0,0,1,12.223,16ZM8,12.475a1.379,1.379,0,0,1,.625.175l3.55,2.325a.091.091,0,0,0,.066.027.162.162,0,0,0,.11-.052c.024-.025.024-.05.024-.1l-1.024-4.375a1.14,1.14,0,0,1,.349-1.1L15,6.45a.131.131,0,0,0,.041-.073.061.061,0,0,0-.016-.052c-.023-.047-.048-.076-.1-.076L10.7,5.925a1.109,1.109,0,0,1-.95-.725L8.123,1.075A.126.126,0,0,0,8.01,1a.127.127,0,0,0-.113.075l-1.575,4.1a1.159,1.159,0,0,1-.95.725l-4.251.325c-.048,0-.1.023-.1.075a.17.17,0,0,1,0,.021c0,.034-.012.085.027.1l3.3,2.925a1.142,1.142,0,0,1,.35,1.1L3.673,14.825c0,.05,0,.076.025.1a.14.14,0,0,0,.1.053.137.137,0,0,0,.076-.027l3.55-2.325A1.037,1.037,0,0,1,8,12.475Z" fill="#3f3b3b"></path>
   </g>
  </svg>
 </a>
</div>

Cards

Flexible and extensible content container with multiple variants and options. Please read the official Bootstrap Documentation for a full list of options.

Examples

12 hours ago

Hidden universe revealed in stunning first images from German telescope

Bruce Lee

<div class="card shadow-40 border border-gray-200">
 <img class="card-img-top" src="../assets/images/placeholders/placeholder-6.jpg" alt="Card Image">
  <div class="card-body px-lg-4 pb-4">
    <small class="card-subtitle mb-2 text-muted">12 hours ago</small>
    <h6 class="card-title"><a href="#0">Hidden universe revealed in stunning first images from German telescope</a></h6>
    <div class="clearfix pt-md-5">
      <div class="float-start">
        <a href="#0">
          <div class="fabrx-avatar sm"><img src="../assets/images/avatars/avatar-1.png" alt="Avatar"></div>
          <span class="avatar-user">Bruce Lee</span>
        </a>
      </div>
      <div class="float-end">
        <div class="dropdown">
          <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action1">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
              <path data-name="Icon Color" d="M9.334,1.166A1.167,1.167,0,1,1,10.5,2.333,1.168,1.168,0,0,1,9.334,1.166Zm1,0A.167.167,0,1,0,10.5,1,.167.167,0,0,0,10.334,1.166Zm-5.667,0A1.167,1.167,0,1,1,5.833,2.333,1.168,1.168,0,0,1,4.667,1.166Zm1,0A.166.166,0,1,0,5.833,1,.167.167,0,0,0,5.667,1.166ZM0,1.166A1.167,1.167,0,1,1,1.166,2.333,1.168,1.168,0,0,1,0,1.166Zm1,0A.167.167,0,1,0,1.166,1,.167.167,0,0,0,1,1.166Z" transform="translate(9.167 2) rotate(90)" fill="#212121"></path>
            </svg>
          </a>
          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action1">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

For you

Hubble Telescope Spots ‘Ghostly Face' in Space

Link

<div class="card shadow-40 border border-gray-200">
 <a href="#0"><img class="card-img-top" src="../assets/images/placeholders/placeholder-7.jpg" alt="Card Image"></a>
  <div class="card-body text-center px-lg-4 pb-4">
    <small class="card-subtitle mb-2 text-muted">For you</small>
    <h5 class="card-title">Hubble Telescope Spots ‘Ghostly Face' in Space</h5>
    <div class="clearfix pt-md-3">
      <a href="#0" class="btn btn-link btn-lg">
        <span class="btn-text">Link</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
          <path data-name="Icon Color" d="M6.813,6.187a.5.5,0,0,1-.048-.651l.048-.056L8.627,3.667H.5a.5.5,0,0,1-.068-1l.068,0H8.626L6.813.854A.5.5,0,0,1,7.464.1L7.52.147,10.177,2.8a.5.5,0,0,1,.052.057l0,0,0,0,0,0,0,0,0,.005,0,0,0,.005,0,0,0,0,0,.006h0l.016.029h0l0,.01h0l0,.01h0l0,.01h0a.5.5,0,0,1-.054.5l0,0-.006.008-.005.006h0a.5.5,0,0,1-.041.044L7.52,6.187a.5.5,0,0,1-.707,0Z" transform="translate(2.833 4.833)" fill="#0d6efd"></path>
        </svg>
      </a>
    </div>
  </div>
</div>

Tag

Electronics

$468.00

<div class="card shadow-40 border border-gray-200">
 <div class="badge badge-primary badge-absolute lg">Tag</div>
  <img class="card-img-top" src="../assets/images/placeholders/placeholder-8.jpg" alt="Card Image">
  <div class="card-body px-lg-4 pb-4">
    <small class="card-subtitle text-muted">Electronics</small>
    <h6 class="card-title mb-2"><a href="#0">Moog Synthesizer</a></h6>
    <h6 class="font-weight-regular">$468.00</h6>
  </div>
</div>

Moog Synthesizer

$249.00

<div class="card shadow-40 border border-gray-200">
 <a href="#0"><img class="card-img-top" src="../assets/images/placeholders/placeholder-9.jpg" alt="Card Image"></a>
  <div class="card-body">
    <div class="px-lg-2">
      <div class="d-flex flex-wrap pb-3">
        <div class="form-check form-check-rounded form-check-lg radio-has-check control-has-danger me-3">
          <input class="form-check-input" type="radio" name="Radioa" id="Radioa22">
        </div>
        <div class="form-check form-check-rounded form-check-lg radio-has-check control-has-pink me-3">
          <input class="form-check-input" type="radio" name="Radioa" id="Radioa23">
        </div>
        <div class="form-check form-check-rounded form-check-lg radio-has-check control-has-indigo me-3">
          <input class="form-check-input" type="radio" name="Radioa" id="Radioa24">
        </div>
        <div class="form-check form-check-rounded form-check-lg radio-has-check control-has-success">
          <input class="form-check-input" type="radio" name="Radioa" id="Radioa25">
        </div>
      </div>
      <h6 class="card-title mb-2">Moog Synthesizer</h6>
      <h6 class="mb-0">$249.00</h6>
    </div>
  </div>
</div>

Bruce Lee

Hidden universe revealed in first images from German telescope

<div class="card shadow-40 border border-gray-200">
	<a href="#0" class="badge badge-primary badge-absolute circle">
	  <svg data-name="Icon/Star Fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
	    <path data-name="Icon Color" d="M6.474,1.054l.036.037.036-.035A3.834,3.834,0,0,1,9.662.046l.164.025a3.833,3.833,0,0,1,2.034,6.512l-.03.025L6.861,11.53a.5.5,0,0,1-.648.048l-.056-.048-5-4.949A3.833,3.833,0,0,1,6.474,1.054Z" transform="translate(1.491 2.826)" fill="#fff"></path>
	  </svg>
	</a>
	<img class="card-img-top" src="../assets/images/placeholders/placeholder-10.jpg" alt="Card Image">
	<div class="card-body bottom">
	  <div class="px-lg-2">
	    <div class="clearfix pb-3">
	      <a href="#0" class="fabrx-avatar sm"><img src="../assets/images/avatars/avatar-1.png" alt="Avatar"></a>
	      <span class="avatar-user">Bruce Lee</span>
	    </div>
	    <h6 class="card-title mb-0"><a href="#0">Hidden universe revealed in first images from German telescope</a></h6>
	  </div>
	</div>
</div>

An Awesome Product

Button

<div class="card shadow-40 border border-gray-200">
 <img class="card-img-top" src="assets/images/placeholders/placeholder-11.jpg" alt="Card Image">
 <div class="card-body">
  <div class="px-lg-2">
    <h6 class="card-title mb-3">An Awesome Product</h6>
    <a href="#0" class="btn btn-primary">Button</a>
  </div>
</div>
</div>

Nike Air Zoom Structure 21
(Limited Edition)

$99.00

Button

<div class="card card-gradient card-xl text-white border-0">
  <div class="card-body">
    <div class="overlay-wrap flex-wrap">
      <h4 class="card-title mb-md-3 text-white font-weight-regular pt-lg-3">Nike Air Zoom Structure 21 <br>(Limited Edition)</h4>
      <div class="align-items-start d-flex mt-2">
        <div class="fabrx-ratings has-rating rating fabrx-ratings-white mb-3">
          <input type="radio" id="rating35" name="rating15" value="1">
          <label for="rating35" class="custom-starboxes"></label>
          <input type="radio" id="rating36" name="rating15" value="2">
          <label for="rating36" class="custom-starboxes"></label>
          <input type="radio" id="rating37" name="rating15" value="3">
          <label for="rating37" class="custom-starboxes"></label>
          <input type="radio" id="rating38" name="rating15" value="4">
          <label for="rating38" class="custom-starboxes"></label>
          <input type="radio" id="rating39" name="rating15" value="5">
          <label for="rating39" class="custom-starboxes"></label>
        </div>
      </div>
      <h4 class="text-white">$99.00</h4>
      <div class="text-center">
        <img src="../assets/images/placeholders/placeholder-12.png" alt="Card Image">
      </div>
      <div class="card-link w-100">
        <a href="#0" class="btn btn-primary btn-xl">Button</a>
      </div>
    </div>
  </div>
</div>

Feature Headline

Ship of the imagination star stuff harvesting star light descended from astronomers finite but unbounded realm of the galaxies.

Button

<div class="card card-xl shadow-40 border-0">
  <img class="card-img-top rounded-12" src="../assets/images/placeholders/placeholder-13.jpg" alt="Card Image">
  <div class="card-img-overlay">
    <div class="overlay-wrap">
      <h2 class="card-title mb-1 pt-lg-3">Feature Headline</h2>
      <p class="lead">Ship of the imagination star stuff harvesting star light descended from astronomers finite but unbounded realm of the galaxies.</p>
      <div class="card-link w-100">
        <a href="#0" class="btn btn-primary btn-xl">Button</a>
      </div>
    </div>
  </div>
</div>

6.4k

Impressions

<div class="card card-gradient card-gradient-height rounded-6">
  <div class="card-body text-center text-white d-flex align-items-center justify-content-center">
	  <a href="#0" class="card-action text-white">
	    <small>
	      Today
	      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16" class="ms-1">
	        <path d="M4.116,16a.317.317,0,0,1-.1-.015.363.363,0,0,1-.2-.165L3.772,15.7a.319.319,0,0,1-.039-.266.309.309,0,0,1,.163-.2l1.257-.657H5.122a.043.043,0,0,1-.031-.016,6.066,6.066,0,0,1-1.335-.5,7.248,7.248,0,0,1-1.2-.776,6.544,6.544,0,0,1-1.009-1,7.19,7.19,0,0,1-.791-1.213A7.091,7.091,0,0,1,.265,9.8,6.832,6.832,0,0,1,.023,8.485,7.264,7.264,0,0,1,.04,7.147,6.287,6.287,0,0,1,.327,5.816,6.147,6.147,0,0,1,.862,4.571a7.337,7.337,0,0,1,.768-1.1,6.864,6.864,0,0,1,.962-.94A6.614,6.614,0,0,1,3.74,1.792a.44.44,0,0,1,.212-.056A.461.461,0,0,1,4.1,1.76a.488.488,0,0,1,.077.893,6.177,6.177,0,0,0-1.808,1.44A5.75,5.75,0,0,0,1.242,6.114,5.883,5.883,0,0,0,.986,8.407a6.059,6.059,0,0,0,.628,2.216A6.457,6.457,0,0,0,2.3,11.648a5.834,5.834,0,0,0,1.885,1.526,5.575,5.575,0,0,0,1.156.438l.232.063-.915-1.44a.484.484,0,0,1-.07-.283.24.24,0,0,1,.132-.219l.124-.078A.379.379,0,0,1,5.03,11.6a.34.34,0,0,1,.092.013.362.362,0,0,1,.218.165l1.427,2.255v.016l.094.14a.278.278,0,0,1,.054.133.362.362,0,0,1-.008.133.274.274,0,0,1-.062.117.615.615,0,0,1-.108.1l-.156.078L4.269,15.962A.342.342,0,0,1,4.116,16Zm5.973-1.666a.454.454,0,0,1-.24-.071.465.465,0,0,1-.178-.2.482.482,0,0,1-.031-.376.488.488,0,0,1,.233-.282,5.938,5.938,0,0,0,2.515-7.969,6.033,6.033,0,0,0-1.521-1.894A5.5,5.5,0,0,0,8.973,2.525L8.708,2.45A1.655,1.655,0,0,0,8.514,2.4l-.1-.018c-.108-.017-.2-.035-.3-.055l.916,1.44a.446.446,0,0,1,.062.282A.263.263,0,0,1,9,4.237l-.169.107A.319.319,0,0,1,8.66,4.4a.345.345,0,0,1-.092-.013.368.368,0,0,1-.217-.164L6.923,1.965H6.907l-.077-.157a.269.269,0,0,1-.054-.133.383.383,0,0,1,.007-.133.3.3,0,0,1,.062-.118.743.743,0,0,1,.109-.1l.155-.078L9.421.039A.35.35,0,0,1,9.582,0a.438.438,0,0,1,.111.015.37.37,0,0,1,.225.164l.046.126A.269.269,0,0,1,9.98.571a.483.483,0,0,1-.186.22l-1.242.626c.076.011.143.024.21.039s.135.035.194.055a7.073,7.073,0,0,1,1.335.508,6.391,6.391,0,0,1,1.179.768,7,7,0,0,1,.994,1A6.564,6.564,0,0,1,13.239,5a7.145,7.145,0,0,1,.5,1.261,6.762,6.762,0,0,1,.24,1.315,7.277,7.277,0,0,1-.015,1.339,6.346,6.346,0,0,1-.287,1.33A6.73,6.73,0,0,1,12.393,12.6a7.059,7.059,0,0,1-.947.932,6.589,6.589,0,0,1-1.125.735.649.649,0,0,1-.116.047A.408.408,0,0,1,10.088,14.333Z" transform="translate(0 0)" fill="#fff"></path>
	      </svg>
	    </small>
	  </a>
	  <div class="clearfix">
	    <h2 class="card-title font-weight-bold mb-0 text-white lh-1">6.4k</h2>
	    <div class="card-subtitle font-size-14">Impressions</div>
	  </div>
	</div>
</div>

Feature Cards

You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.

Feature Headline

Ship of the imagination star stuff harvesting star light descended from astronomers finite but

Learn more

Feature Headline

Ship of the imagination star stuff harvesting star light descended from astronomers finite but

Learn more

<div class="card rounded-12 shadow-20 text-center border border-gray-200 px-lg-2">
  <div class="card-body py-md-5 px-md-4">
    <div class="mb-3">
      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
        <path data-name="Icon Color" d="M20.194,36.807l-.005,0a1.506,1.506,0,0,1-.159-.137l0,0-6-6A1.5,1.5,0,0,1,15.979,28.4l.169.144,3.438,3.438V17.6a1.5,1.5,0,0,1,2.986-.2l.014.2V31.979l3.44-3.44a1.5,1.5,0,0,1,1.953-.144l.167.144a1.5,1.5,0,0,1,.146,1.953l-.146.169-6,6-.027.026-.011.011-.016.014-.016.015-.011.009-.02.017-.007.006-.025.02,0,0-.028.021h0a1.491,1.491,0,0,1-.451.23h0a1.5,1.5,0,0,1-1.338-.226ZM33.586,27.6a1.5,1.5,0,0,1,1.5-1.5,5.5,5.5,0,0,0,.337-10.989l-.337-.011h-2a1.5,1.5,0,0,1-1.463-1.829A8.027,8.027,0,0,0,28.579,5.2a10.685,10.685,0,0,0-9.634-1.741,9.044,9.044,0,0,0-6.4,6.467,1.5,1.5,0,0,1-1.523,1.17A7.648,7.648,0,0,0,3.209,16.71a7.2,7.2,0,0,0,4.277,8.316,1.5,1.5,0,0,1-1.2,2.75A10.2,10.2,0,0,1,.3,15.983a10.582,10.582,0,0,1,9.43-7.848l.223-.016.077-.225A12.154,12.154,0,0,1,17.584.751l.493-.16A13.679,13.679,0,0,1,30.443,2.852a11.2,11.2,0,0,1,4.365,8.683l-.014.565h.292a8.5,8.5,0,0,1,8.491,8.089l.011.412a8.5,8.5,0,0,1-8.5,8.5A1.5,1.5,0,0,1,33.586,27.6Z" transform="translate(2 6)" fill="#212121"></path>
      </svg>
    </div>
    <h5 class="mb-2 pb-1">Feature Headline</h5>
    <p class="text-muted lh-28 pb-1">Ship of the imagination star stuff harvesting star light descended from astronomers finite but</p>
    <a href="#0" class="btn btn-primary btn-mwidth-145">Learn more</a>
  </div>
</div>

<!-- Card Feature Left Align and Text Link --> 
<div class="card rounded-12 shadow-20 border border-gray-200 px-lg-2">
  <div class="card-body py-md-5 px-md-4">
    <div class="mb-3">
      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
        <path data-name="Icon Color" d="M20.194,36.807l-.005,0a1.506,1.506,0,0,1-.159-.137l0,0-6-6A1.5,1.5,0,0,1,15.979,28.4l.169.144,3.438,3.438V17.6a1.5,1.5,0,0,1,2.986-.2l.014.2V31.979l3.44-3.44a1.5,1.5,0,0,1,1.953-.144l.167.144a1.5,1.5,0,0,1,.146,1.953l-.146.169-6,6-.027.026-.011.011-.016.014-.016.015-.011.009-.02.017-.007.006-.025.02,0,0-.028.021h0a1.491,1.491,0,0,1-.451.23h0a1.5,1.5,0,0,1-1.338-.226ZM33.586,27.6a1.5,1.5,0,0,1,1.5-1.5,5.5,5.5,0,0,0,.337-10.989l-.337-.011h-2a1.5,1.5,0,0,1-1.463-1.829A8.027,8.027,0,0,0,28.579,5.2a10.685,10.685,0,0,0-9.634-1.741,9.044,9.044,0,0,0-6.4,6.467,1.5,1.5,0,0,1-1.523,1.17A7.648,7.648,0,0,0,3.209,16.71a7.2,7.2,0,0,0,4.277,8.316,1.5,1.5,0,0,1-1.2,2.75A10.2,10.2,0,0,1,.3,15.983a10.582,10.582,0,0,1,9.43-7.848l.223-.016.077-.225A12.154,12.154,0,0,1,17.584.751l.493-.16A13.679,13.679,0,0,1,30.443,2.852a11.2,11.2,0,0,1,4.365,8.683l-.014.565h.292a8.5,8.5,0,0,1,8.491,8.089l.011.412a8.5,8.5,0,0,1-8.5,8.5A1.5,1.5,0,0,1,33.586,27.6Z" transform="translate(2 6)" fill="#212121"></path>
      </svg>
    </div>
    <h5 class="mb-2 pb-1">Feature Headline</h5>
    <p class="text-muted lh-28 pb-1">Ship of the imagination star stuff harvesting star light descended from astronomers finite but</p>
    <a href="#0" class="btn btn-primary btn-mwidth-145">Learn more</a>
  </div>
</div>

Feature Headline

Ship of the imagination star stuff harvesting star light descended from

<div class="card rounded-12 shadow-20 border border-gray-200">
  <div class="card-body d-flex py-md-5">
    <div class="float-start me-4">
      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
        <path data-name="Icon Color" d="M20.194,36.807l-.005,0a1.506,1.506,0,0,1-.159-.137l0,0-6-6A1.5,1.5,0,0,1,15.979,28.4l.169.144,3.438,3.438V17.6a1.5,1.5,0,0,1,2.986-.2l.014.2V31.979l3.44-3.44a1.5,1.5,0,0,1,1.953-.144l.167.144a1.5,1.5,0,0,1,.146,1.953l-.146.169-6,6-.027.026-.011.011-.016.014-.016.015-.011.009-.02.017-.007.006-.025.02,0,0-.028.021h0a1.491,1.491,0,0,1-.451.23h0a1.5,1.5,0,0,1-1.338-.226ZM33.586,27.6a1.5,1.5,0,0,1,1.5-1.5,5.5,5.5,0,0,0,.337-10.989l-.337-.011h-2a1.5,1.5,0,0,1-1.463-1.829A8.027,8.027,0,0,0,28.579,5.2a10.685,10.685,0,0,0-9.634-1.741,9.044,9.044,0,0,0-6.4,6.467,1.5,1.5,0,0,1-1.523,1.17A7.648,7.648,0,0,0,3.209,16.71a7.2,7.2,0,0,0,4.277,8.316,1.5,1.5,0,0,1-1.2,2.75A10.2,10.2,0,0,1,.3,15.983a10.582,10.582,0,0,1,9.43-7.848l.223-.016.077-.225A12.154,12.154,0,0,1,17.584.751l.493-.16A13.679,13.679,0,0,1,30.443,2.852a11.2,11.2,0,0,1,4.365,8.683l-.014.565h.292a8.5,8.5,0,0,1,8.491,8.089l.011.412a8.5,8.5,0,0,1-8.5,8.5A1.5,1.5,0,0,1,33.586,27.6Z" transform="translate(2 6)" fill="#212121"></path>
      </svg>
    </div>
    <div class="float-end">
      <h6 class="mb-2">Feature Headline</h6>
      <p class="lh-28 mb-0">Ship of the imagination star stuff harvesting star light descended from</p>
    </div>
  </div>
</div>

<div class="card rounded-12 shadow-20 border border-gray-200">
  <div class="card-body d-flex py-md-5">
    <div class="float-start ms-4 order-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
        <path data-name="Icon Color" d="M20.194,36.807l-.005,0a1.506,1.506,0,0,1-.159-.137l0,0-6-6A1.5,1.5,0,0,1,15.979,28.4l.169.144,3.438,3.438V17.6a1.5,1.5,0,0,1,2.986-.2l.014.2V31.979l3.44-3.44a1.5,1.5,0,0,1,1.953-.144l.167.144a1.5,1.5,0,0,1,.146,1.953l-.146.169-6,6-.027.026-.011.011-.016.014-.016.015-.011.009-.02.017-.007.006-.025.02,0,0-.028.021h0a1.491,1.491,0,0,1-.451.23h0a1.5,1.5,0,0,1-1.338-.226ZM33.586,27.6a1.5,1.5,0,0,1,1.5-1.5,5.5,5.5,0,0,0,.337-10.989l-.337-.011h-2a1.5,1.5,0,0,1-1.463-1.829A8.027,8.027,0,0,0,28.579,5.2a10.685,10.685,0,0,0-9.634-1.741,9.044,9.044,0,0,0-6.4,6.467,1.5,1.5,0,0,1-1.523,1.17A7.648,7.648,0,0,0,3.209,16.71a7.2,7.2,0,0,0,4.277,8.316,1.5,1.5,0,0,1-1.2,2.75A10.2,10.2,0,0,1,.3,15.983a10.582,10.582,0,0,1,9.43-7.848l.223-.016.077-.225A12.154,12.154,0,0,1,17.584.751l.493-.16A13.679,13.679,0,0,1,30.443,2.852a11.2,11.2,0,0,1,4.365,8.683l-.014.565h.292a8.5,8.5,0,0,1,8.491,8.089l.011.412a8.5,8.5,0,0,1-8.5,8.5A1.5,1.5,0,0,1,33.586,27.6Z" transform="translate(2 6)" fill="#212121"></path>
      </svg>
    </div>
    <div class="float-end order-1">
      <p class="lead mb-0">Ship of the imagination star stuff harvesting star light descended from</p>
    </div>
  </div>
</div>

Testimonials

Sammy Lawson Creative Director, Amazon

White dwarf a still more glorious dawn awaits tingling of the spine emerged into consciousness Vangelis shores of the cosmic ocean. Tendrils of gossamer clouds kindling the energy hidden in matter concept of the number one permanence.

Sammy Lawson Creative Director, Amazon

<div class="card rounded-12 shadow-20 border border-gray-200">
  <div class="card-body pt-lg-5">
    <div class="testimonial-author d-flex align-items-center">
      <div class="fabrx-avatar lg"><img src="../assets/images/avatars/avatar-1.png" alt="Avatar"></div>
      <div class="ps-3">
        <strong class="d-block">Sammy Lawson</strong>
        <small class="d-block text-muted">Creative Director, Amazon</small>
      </div>
    </div>
    <p class="font-size-14 lh-28 mb-4">White dwarf a still more glorious dawn awaits tingling of the spine emerged into consciousness Vangelis shores of the cosmic ocean. Tendrils of gossamer clouds kindling the energy hidden in matter concept of the number one permanence.</p>
    <div class="text-end mb-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="22" viewBox="0 0 24 22">
        <path data-name="Icon Color" d="M23.042,22H14.893a.965.965,0,0,1-.958-.969V12.69a21.7,21.7,0,0,1,.547-5.06,12.285,12.285,0,0,1,1.7-4.005A8.341,8.341,0,0,1,19.075.951,8.136,8.136,0,0,1,23.042,0,.965.965,0,0,1,24,.97V4.92a.965.965,0,0,1-.958.969c-1.859,0-2.873,1.962-3.012,5.83h3.012a.965.965,0,0,1,.958.97v8.34A.965.965,0,0,1,23.042,22ZM9.107,22H.958A.965.965,0,0,1,0,21.03V12.69A21.64,21.64,0,0,1,.548,7.63a12.264,12.264,0,0,1,1.7-4.005A8.335,8.335,0,0,1,5.139.951,8.138,8.138,0,0,1,9.107,0a.965.965,0,0,1,.958.97V4.92a.965.965,0,0,1-.958.969c-1.886,0-2.914,1.962-3.056,5.83H9.107a.965.965,0,0,1,.958.97v8.34A.965.965,0,0,1,9.107,22Z" transform="translate(24 22) rotate(-180)" fill="#0d6efd"></path>
      </svg>
    </div>
  </div>
</div>

<div class="card rounded-12 shadow-20 border border-gray-200">
	<div class="card-body text-center pt-0">
	  <div class="testimonial-author stack">
	    <a href="#0" class="fabrx-avatar xl mb-2"><img src="../assets/images/avatars/avatar-1.png" alt="Avatar"></a>
	    <div class="ps-3">
	      <strong class="d-block">Sammy Lawson</strong>
	      <small class="d-block text-muted">Creative Director, Amazon</small>
	    </div>
	  </div>
	  <p class="font-size-14 lh-28 mb-4">White dwarf a still more glorious dawn awaits tingling of the spine emerged into consciousness Vangelis shores of the cosmic ocean. Tendrils of gossamer clouds kindling the energy hidden in matter concept of the number one permanence.</p>
	  <div class="text-end mb-2">
	    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="22" viewBox="0 0 24 22">
	      <path data-name="Icon Color" d="M23.042,22H14.893a.965.965,0,0,1-.958-.969V12.69a21.7,21.7,0,0,1,.547-5.06,12.285,12.285,0,0,1,1.7-4.005A8.341,8.341,0,0,1,19.075.951,8.136,8.136,0,0,1,23.042,0,.965.965,0,0,1,24,.97V4.92a.965.965,0,0,1-.958.969c-1.859,0-2.873,1.962-3.012,5.83h3.012a.965.965,0,0,1,.958.97v8.34A.965.965,0,0,1,23.042,22ZM9.107,22H.958A.965.965,0,0,1,0,21.03V12.69A21.64,21.64,0,0,1,.548,7.63a12.264,12.264,0,0,1,1.7-4.005A8.335,8.335,0,0,1,5.139.951,8.138,8.138,0,0,1,9.107,0a.965.965,0,0,1,.958.97V4.92a.965.965,0,0,1-.958.969c-1.886,0-2.914,1.962-3.056,5.83H9.107a.965.965,0,0,1,.958.97v8.34A.965.965,0,0,1,9.107,22Z" transform="translate(24 22) rotate(-180)" fill="#0d6efd"></path>
	    </svg>
	  </div>
	</div>
</div>

Chips

Examples for close, multicolor, and labeling chips.

Bruce Lee
Bruce Lee
Bruce Lee
Bruce Lee
Bruce Lee

<ul class="component-list list-unstyled">
  <li>
    <div class="fabrx-chip">
      <img src="../assets/images/avatars/avatar-1.png" alt="Avatar">
      <span>Bruce Lee</span>
    </div>
  </li>
  <li>
    <div class="fabrx-chip">
      <img src="../assets/images/avatars/avatar-1.png" alt="Avatar">
      <span>Bruce Lee</span>
      <a href="#0" class="chip-closer">
        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
          <path data-name="Icon Color" d="M6.5,13A6.5,6.5,0,1,1,13,6.5,6.507,6.507,0,0,1,6.5,13ZM6.5.813A5.688,5.688,0,1,0,12.188,6.5,5.694,5.694,0,0,0,6.5.813Zm2.408,8.4a.3.3,0,0,1-.179-.059l-.033-.029-2.2-2.2-2.194,2.2a.3.3,0,0,1-.213.087.3.3,0,0,1-.212-.087.3.3,0,0,1-.029-.392l.029-.033L6.074,6.5,3.88,4.306a.3.3,0,0,1,.391-.454l.034.029L6.5,6.074l2.2-2.194a.3.3,0,0,1,.454.391l-.029.034L6.926,6.5l2.2,2.2a.3.3,0,0,1-.213.513Z" fill="#212121"></path>
        </svg>
      </a>
    </div>
  </li>
  <li>
    <div class="fabrx-chip">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
        <path data-name="Icon Color" d="M0,6.5A6.5,6.5,0,1,1,6.5,13,6.507,6.507,0,0,1,0,6.5Zm1,0A5.5,5.5,0,1,0,6.5,1,5.506,5.506,0,0,0,1,6.5ZM4.476,8.85a.5.5,0,0,1,.715-.7,1.832,1.832,0,0,0,2.619,0,.5.5,0,1,1,.714.7,2.834,2.834,0,0,1-4.048,0ZM8,5.167a.5.5,0,0,1,.433-.5l.074,0a.5.5,0,0,1,.068,1l-.074,0A.5.5,0,0,1,8,5.167Zm-4,0a.5.5,0,0,1,.432-.5l.074,0a.5.5,0,0,1,.068,1l-.074,0A.5.5,0,0,1,4,5.167Z" transform="translate(1.5 1.5)" fill="#212121"></path>
      </svg>
      <span>Bruce Lee</span>
    </div>
  </li>
  <li>
    <div class="fabrx-chip">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
        <path data-name="Icon Color" d="M0,6.5A6.5,6.5,0,1,1,6.5,13,6.507,6.507,0,0,1,0,6.5Zm1,0A5.5,5.5,0,1,0,6.5,1,5.506,5.506,0,0,0,1,6.5ZM4.476,8.85a.5.5,0,0,1,.715-.7,1.832,1.832,0,0,0,2.619,0,.5.5,0,1,1,.714.7,2.834,2.834,0,0,1-4.048,0ZM8,5.167a.5.5,0,0,1,.433-.5l.074,0a.5.5,0,0,1,.068,1l-.074,0A.5.5,0,0,1,8,5.167Zm-4,0a.5.5,0,0,1,.432-.5l.074,0a.5.5,0,0,1,.068,1l-.074,0A.5.5,0,0,1,4,5.167Z" transform="translate(1.5 1.5)" fill="#212121"></path>
      </svg>
      <span>Bruce Lee</span>
      <a href="#0" class="chip-closer">
        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
          <path data-name="Icon Color" d="M6.5,13A6.5,6.5,0,1,1,13,6.5,6.507,6.507,0,0,1,6.5,13ZM6.5.813A5.688,5.688,0,1,0,12.188,6.5,5.694,5.694,0,0,0,6.5.813Zm2.408,8.4a.3.3,0,0,1-.179-.059l-.033-.029-2.2-2.2-2.194,2.2a.3.3,0,0,1-.213.087.3.3,0,0,1-.212-.087.3.3,0,0,1-.029-.392l.029-.033L6.074,6.5,3.88,4.306a.3.3,0,0,1,.391-.454l.034.029L6.5,6.074l2.2-2.194a.3.3,0,0,1,.454.391l-.029.034L6.926,6.5l2.2,2.2a.3.3,0,0,1-.213.513Z" fill="#212121"></path>
        </svg>
      </a>
    </div>
  </li>
  <li>
    <div class="fabrx-chip"><span>Bruce Lee</span></div>
  </li>
</ul>

Outline Chips

Bruce Lee
Bruce Lee
Bruce Lee
Bruce Lee
Bruce Lee

<ul class="component-list list-unstyled">
  <li>
    <div class="fabrx-chip fabrx-outline-primary">
      <img src="../assets/images/avatars/avatar-1.png" alt="Avatar">
      <span>Bruce Lee</span>
    </div>
  </li>
  <li>
    <div class="fabrx-chip fabrx-outline-primary">
      <img src="../assets/images/avatars/avatar-1.png" alt="Avatar">
      <span>Bruce Lee</span>
      <a href="#0" class="chip-closer">
        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
          <path data-name="Icon Color" d="M6.5,13A6.5,6.5,0,1,1,13,6.5,6.507,6.507,0,0,1,6.5,13ZM6.5.813A5.688,5.688,0,1,0,12.188,6.5,5.694,5.694,0,0,0,6.5.813Zm2.408,8.4a.3.3,0,0,1-.179-.059l-.033-.029-2.2-2.2-2.194,2.2a.3.3,0,0,1-.213.087.3.3,0,0,1-.212-.087.3.3,0,0,1-.029-.392l.029-.033L6.074,6.5,3.88,4.306a.3.3,0,0,1,.391-.454l.034.029L6.5,6.074l2.2-2.194a.3.3,0,0,1,.454.391l-.029.034L6.926,6.5l2.2,2.2a.3.3,0,0,1-.213.513Z" fill="#0D6EFD"></path>
        </svg>
      </a>
    </div>
  </li>
  <li>
    <div class="fabrx-chip fabrx-outline-primary">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
        <path data-name="Icon Color" d="M0,6.5A6.5,6.5,0,1,1,6.5,13,6.507,6.507,0,0,1,0,6.5Zm1,0A5.5,5.5,0,1,0,6.5,1,5.506,5.506,0,0,0,1,6.5ZM4.476,8.85a.5.5,0,0,1,.715-.7,1.832,1.832,0,0,0,2.619,0,.5.5,0,1,1,.714.7,2.834,2.834,0,0,1-4.048,0ZM8,5.167a.5.5,0,0,1,.433-.5l.074,0a.5.5,0,0,1,.068,1l-.074,0A.5.5,0,0,1,8,5.167Zm-4,0a.5.5,0,0,1,.432-.5l.074,0a.5.5,0,0,1,.068,1l-.074,0A.5.5,0,0,1,4,5.167Z" transform="translate(1.5 1.5)" fill="#212121"></path>
      </svg>
      <span>Bruce Lee</span>
    </div>
  </li>
  <li>
    <div class="fabrx-chip fabrx-outline-primary">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
        <path data-name="Icon Color" d="M0,6.5A6.5,6.5,0,1,1,6.5,13,6.507,6.507,0,0,1,0,6.5Zm1,0A5.5,5.5,0,1,0,6.5,1,5.506,5.506,0,0,0,1,6.5ZM4.476,8.85a.5.5,0,0,1,.715-.7,1.832,1.832,0,0,0,2.619,0,.5.5,0,1,1,.714.7,2.834,2.834,0,0,1-4.048,0ZM8,5.167a.5.5,0,0,1,.433-.5l.074,0a.5.5,0,0,1,.068,1l-.074,0A.5.5,0,0,1,8,5.167Zm-4,0a.5.5,0,0,1,.432-.5l.074,0a.5.5,0,0,1,.068,1l-.074,0A.5.5,0,0,1,4,5.167Z" transform="translate(1.5 1.5)" fill="#212121"></path>
      </svg>
      <span>Bruce Lee</span>
      <a href="#0" class="chip-closer">
        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
          <path data-name="Icon Color" d="M6.5,13A6.5,6.5,0,1,1,13,6.5,6.507,6.507,0,0,1,6.5,13ZM6.5.813A5.688,5.688,0,1,0,12.188,6.5,5.694,5.694,0,0,0,6.5.813Zm2.408,8.4a.3.3,0,0,1-.179-.059l-.033-.029-2.2-2.2-2.194,2.2a.3.3,0,0,1-.213.087.3.3,0,0,1-.212-.087.3.3,0,0,1-.029-.392l.029-.033L6.074,6.5,3.88,4.306a.3.3,0,0,1,.391-.454l.034.029L6.5,6.074l2.2-2.194a.3.3,0,0,1,.454.391l-.029.034L6.926,6.5l2.2,2.2a.3.3,0,0,1-.213.513Z" fill="#0D6EFD"></path>
        </svg>
      </a>
    </div>
  </li>
  <li>
    <div class="fabrx-chip fabrx-outline-primary"><span>Bruce Lee</span></div>
  </li>
</ul>

Comments

The media object helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox.

Below is an example of a single media object. Only two classes are required—the wrapping .media and the .media-body around your content. Optional padding and margin can be controlled through spacing utilities.

Charles Davies

5 minutes ago

Rich in mystery across the centuries decipherment finite but unbounded Rig Veda globular star cluster. Rich in heavy atoms hydrogen atoms concept of the number one radio telescope at the edge of forever two ghostly white figures in coveralls and helmets are soflty dancing. Encyclopaedia galactica a mote of dust suspended in a sunbeam concept.

56
Reply
Replies (1)

<div class="media">
  <a href="#0" class="fabrx-avatar fabrx-status dnd lg align-self-start me-3"><img src="../assets/images/avatars/avatar-1.png" alt="Avatar"></a>
  <div class="media-body">
    <div class="pt-1 pb-3">
      <h6 class="mb-1">Charles Davies</h6>
      <div class="text-secondary font-size-14">5 minutes ago</div>
    </div>
    <p class="lh-28 mb-4">Rich in mystery across the centuries decipherment finite but unbounded Rig Veda globular star cluster. Rich in heavy atoms hydrogen atoms concept of the number one radio telescope at the edge of forever two ghostly white figures in coveralls and helmets are soflty dancing. Encyclopaedia galactica a mote of dust suspended in a sunbeam concept.</p>
    <ul class="fabrx-media-links list-unstyled d-flex justify-content-end">
      <li>
        <a href="#0">
          <svg xmlns="http://www.w3.org/2000/svg" width="13.01" height="11.674" viewBox="0 0 13.01 11.674"><g data-name="Icon/Heart Fill" transform="translate(0.002 0)"><path data-name="Icon Color" d="M6.509,11.674a.5.5,0,0,1-.3-.1l-.056-.048-5-4.949A3.833,3.833,0,0,1,6.474,1.055l.036.036.037-.035A3.835,3.835,0,0,1,9.661.046l.164.025a3.833,3.833,0,0,1,2.034,6.512l-.031.025L6.861,11.53A.5.5,0,0,1,6.509,11.674ZM3.833,1h0A2.834,2.834,0,0,0,1.751,5.756l.109.112,4.648,4.6,4.648-4.6.02-.018.086-.088A2.833,2.833,0,1,0,6.908,2.146a.5.5,0,0,1-.8,0A2.846,2.846,0,0,0,3.834,1Z" fill="#807e7e"></path></g></svg>
          56
        </a>
      </li>
      <li>
        <a href="#0">
          <svg xmlns="http://www.w3.org/2000/svg" width="13.01" height="11.674" viewBox="0 0 13.01 11.674"><g data-name="Icon/Heart Fill" transform="translate(0.002 0)"><path data-name="Icon Color" d="M6.509,11.674a.5.5,0,0,1-.3-.1l-.056-.048-5-4.949A3.833,3.833,0,0,1,6.474,1.055l.036.036.037-.035A3.835,3.835,0,0,1,9.661.046l.164.025a3.833,3.833,0,0,1,2.034,6.512l-.031.025L6.861,11.53A.5.5,0,0,1,6.509,11.674ZM3.833,1h0A2.834,2.834,0,0,0,1.751,5.756l.109.112,4.648,4.6,4.648-4.6.02-.018.086-.088A2.833,2.833,0,1,0,6.908,2.146a.5.5,0,0,1-.8,0A2.846,2.846,0,0,0,3.834,1Z" fill="#807e7e"></path></g></svg>
          Reply
        </a>
      </li>
      <li>
        <a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="13.01" height="11.674" viewBox="0 0 13.01 11.674"><g data-name="Icon/Heart Fill" transform="translate(0.002 0)"><path data-name="Icon Color" d="M6.509,11.674a.5.5,0,0,1-.3-.1l-.056-.048-5-4.949A3.833,3.833,0,0,1,6.474,1.055l.036.036.037-.035A3.835,3.835,0,0,1,9.661.046l.164.025a3.833,3.833,0,0,1,2.034,6.512l-.031.025L6.861,11.53A.5.5,0,0,1,6.509,11.674ZM3.833,1h0A2.834,2.834,0,0,0,1.751,5.756l.109.112,4.648,4.6,4.648-4.6.02-.018.086-.088A2.833,2.833,0,1,0,6.908,2.146a.5.5,0,0,1-.8,0A2.846,2.846,0,0,0,3.834,1Z" fill="#807e7e"></path></g></svg>Replies (1)</a>
      </li>
    </ul>
  </div>
</div>

Nesting

Media objects can be infinitely nested. Place nested .media within the .media-body of a parent media object.

Charles Davies

5 minutes ago

Rich in mystery across the centuries decipherment finite but unbounded Rig Veda globular star cluster. Rich in heavy atoms hydrogen atoms concept of the number one radio telescope at the edge of forever two ghostly white figures in coveralls and helmets are soflty dancing. Encyclopaedia galactica a mote of dust suspended in a sunbeam concept.
- 56
- Reply
- Replies (1)
1. Charles Davies
  
  5 minutes ago
  
  Yeah right! 😍
  
  It’s really good anyways, sort of brilliant!
  - 56
  - Reply

<div class="component-item">
<ul class="fabrx-comments list-unstyled mb-0">
  <li class="comment-item">
    <div class="media">
      <a href="#0" class="fabrx-avatar fabrx-status dnd lg align-self-start me-3"><img src="../assets/images/avatars/avatar-1.png" alt="Avatar"></a>
      <div class="media-body">
        <div class="pt-1 pb-3">
          <h6 class="mb-1">Charles Davies</h6>
          <div class="text-secondary font-size-14">5 minutes ago</div>
        </div>
        <p class="lh-28 mb-4">Rich in mystery across the centuries decipherment finite but unbounded Rig Veda globular star cluster. Rich in heavy atoms hydrogen atoms concept of the number one radio telescope at the edge of forever two ghostly white figures in coveralls and helmets are soflty dancing. Encyclopaedia galactica a mote of dust suspended in a sunbeam concept.</p>
        <ul class="fabrx-media-links list-unstyled d-flex justify-content-end">
          <li>
            <a href="#0">
              <svg xmlns="http://www.w3.org/2000/svg" width="13.01" height="11.674" viewBox="0 0 13.01 11.674"><g data-name="Icon/Heart Fill" transform="translate(0.002 0)"><path data-name="Icon Color" d="M6.509,11.674a.5.5,0,0,1-.3-.1l-.056-.048-5-4.949A3.833,3.833,0,0,1,6.474,1.055l.036.036.037-.035A3.835,3.835,0,0,1,9.661.046l.164.025a3.833,3.833,0,0,1,2.034,6.512l-.031.025L6.861,11.53A.5.5,0,0,1,6.509,11.674ZM3.833,1h0A2.834,2.834,0,0,0,1.751,5.756l.109.112,4.648,4.6,4.648-4.6.02-.018.086-.088A2.833,2.833,0,1,0,6.908,2.146a.5.5,0,0,1-.8,0A2.846,2.846,0,0,0,3.834,1Z" fill="#807e7e"></path></g></svg>
              56
            </a>
          </li>
          <li>
            <a href="#0">
              <svg xmlns="http://www.w3.org/2000/svg" width="13.01" height="11.674" viewBox="0 0 13.01 11.674"><g data-name="Icon/Heart Fill" transform="translate(0.002 0)"><path data-name="Icon Color" d="M6.509,11.674a.5.5,0,0,1-.3-.1l-.056-.048-5-4.949A3.833,3.833,0,0,1,6.474,1.055l.036.036.037-.035A3.835,3.835,0,0,1,9.661.046l.164.025a3.833,3.833,0,0,1,2.034,6.512l-.031.025L6.861,11.53A.5.5,0,0,1,6.509,11.674ZM3.833,1h0A2.834,2.834,0,0,0,1.751,5.756l.109.112,4.648,4.6,4.648-4.6.02-.018.086-.088A2.833,2.833,0,1,0,6.908,2.146a.5.5,0,0,1-.8,0A2.846,2.846,0,0,0,3.834,1Z" fill="#807e7e"></path></g></svg>
              Reply
            </a>
          </li>
          <li>
            <a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="13.01" height="11.674" viewBox="0 0 13.01 11.674"><g data-name="Icon/Heart Fill" transform="translate(0.002 0)"><path data-name="Icon Color" d="M6.509,11.674a.5.5,0,0,1-.3-.1l-.056-.048-5-4.949A3.833,3.833,0,0,1,6.474,1.055l.036.036.037-.035A3.835,3.835,0,0,1,9.661.046l.164.025a3.833,3.833,0,0,1,2.034,6.512l-.031.025L6.861,11.53A.5.5,0,0,1,6.509,11.674ZM3.833,1h0A2.834,2.834,0,0,0,1.751,5.756l.109.112,4.648,4.6,4.648-4.6.02-.018.086-.088A2.833,2.833,0,1,0,6.908,2.146a.5.5,0,0,1-.8,0A2.846,2.846,0,0,0,3.834,1Z" fill="#807e7e"></path></g></svg>Replies (1)</a>
          </li>
        </ul>
      </div>
    </div>
    <ol class="list-unstyled mb-0 mt-lg-3">
      <li class="comment-item">
        <div class="media">
          <a href="#0" class="fabrx-avatar fabrx-status dnd lg align-self-start me-3"><img src="../assets/images/avatars/avatar-1.png" alt="Avatar"></a>
          <div class="media-body">
            <div class="pt-1 pb-3">
              <h6 class="mb-1">Charles Davies</h6>
              <div class="text-secondary font-size-14">5 minutes ago</div>
            </div>
            <p class="mb-0">Yeah right! 😍</p>
            <p class="lh-28 mb-4">It’s really good anyways, sort of brilliant!</p>
            <ul class="fabrx-media-links list-unstyled d-flex justify-content-end">
              <li>
                <a href="#0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="13.01" height="11.674" viewBox="0 0 13.01 11.674"><g data-name="Icon/Heart Fill" transform="translate(0.002 0)"><path data-name="Icon Color" d="M6.509,11.674a.5.5,0,0,1-.3-.1l-.056-.048-5-4.949A3.833,3.833,0,0,1,6.474,1.055l.036.036.037-.035A3.835,3.835,0,0,1,9.661.046l.164.025a3.833,3.833,0,0,1,2.034,6.512l-.031.025L6.861,11.53A.5.5,0,0,1,6.509,11.674ZM3.833,1h0A2.834,2.834,0,0,0,1.751,5.756l.109.112,4.648,4.6,4.648-4.6.02-.018.086-.088A2.833,2.833,0,1,0,6.908,2.146a.5.5,0,0,1-.8,0A2.846,2.846,0,0,0,3.834,1Z" fill="#807e7e"></path></g></svg>
                  56
                </a>
              </li>
              <li>
                <a href="#0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="13.01" height="11.674" viewBox="0 0 13.01 11.674"><g data-name="Icon/Heart Fill" transform="translate(0.002 0)"><path data-name="Icon Color" d="M6.509,11.674a.5.5,0,0,1-.3-.1l-.056-.048-5-4.949A3.833,3.833,0,0,1,6.474,1.055l.036.036.037-.035A3.835,3.835,0,0,1,9.661.046l.164.025a3.833,3.833,0,0,1,2.034,6.512l-.031.025L6.861,11.53A.5.5,0,0,1,6.509,11.674ZM3.833,1h0A2.834,2.834,0,0,0,1.751,5.756l.109.112,4.648,4.6,4.648-4.6.02-.018.086-.088A2.833,2.833,0,1,0,6.908,2.146a.5.5,0,0,1-.8,0A2.846,2.846,0,0,0,3.834,1Z" fill="#807e7e"></path></g></svg>
                  Reply
                </a>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ol>
  </li>
</ul>
</div>

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the dropdown plugin. Please read the official Bootstrap documentation for a full list of options.

Example

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:

<div class="dropdown">
 <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown button
 </button>
 <div class="dropdown-menu m-0" aria-labelledby="dropdownMenuButton">
  <a href="#0" class="dropdown-item"><span class="dropdown-text">Busan</span></a>
  <a href="#0" class="dropdown-item active"><span class="dropdown-text">Leeds</span></a>
  <a href="#0" class="dropdown-item"><span class="dropdown-text">Fairbanks</span></a>
  <a href="#0" class="dropdown-item"><span class="dropdown-text">Salt Lake City</span></a>
  <a href="#0" class="dropdown-item"><span class="dropdown-text">Guatemala City</span></a>
  <a href="#0" class="dropdown-item"><span class="dropdown-text">Lyon</span></a>
 </div>
</div>

And with <a> elements:

<div class="dropdown">
 <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown button
 </a>
 <div class="dropdown-menu m-0" aria-labelledby="dropdownMenuButton">
  <a href="#0" class="dropdown-item"><span class="dropdown-text">Busan</span></a>
  <a href="#0" class="dropdown-item active"><span class="dropdown-text">Leeds</span></a>
  <a href="#0" class="dropdown-item"><span class="dropdown-text">Fairbanks</span></a>
  <a href="#0" class="dropdown-item"><span class="dropdown-text">Salt Lake City</span></a>
  <a href="#0" class="dropdown-item"><span class="dropdown-text">Guatemala City</span></a>
  <a href="#0" class="dropdown-item"><span class="dropdown-text">Lyon</span></a>
 </div>
</div>

Dropdown Menu dividers

Separate groups of related menu items with a divider.

<div class="dropdown-menu">
 <a href="#0" class="dropdown-item"><span class="dropdown-text">Busan</span></a>
 <a href="#0" class="dropdown-item active"><span class="dropdown-text">Leeds</span></a>
 <a href="#0" class="dropdown-item"><span class="dropdown-text">Fairbanks</span></a>
 <a href="#0" class="dropdown-item"><span class="dropdown-text">Salt Lake City</span></a>
 <a href="#0" class="dropdown-item"><span class="dropdown-text">Guatemala City</span></a>
 <div class="dropdown-divider"></div>
  <a href="#0" class="dropdown-item">
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <path data-name="Combined Shape" d="M4.9,11.74a.652.652,0,0,0-.382-.447.651.651,0,0,0-.587.046,1.645,1.645,0,0,1-.863.251,1.7,1.7,0,0,1-1.446-.869,1.594,1.594,0,0,1,.042-1.649.649.649,0,0,0-.4-.969,1.649,1.649,0,0,1,0-3.205.649.649,0,0,0,.4-.969,1.594,1.594,0,0,1-.043-1.649,1.7,1.7,0,0,1,1.447-.869,1.643,1.643,0,0,1,.863.251.655.655,0,0,0,.338.1.648.648,0,0,0,.631-.5,1.649,1.649,0,0,1,3.205,0,.652.652,0,0,0,.383.447.646.646,0,0,0,.587-.046,1.644,1.644,0,0,1,.863-.251,1.7,1.7,0,0,1,1.447.869,1.594,1.594,0,0,1-.043,1.649.65.65,0,0,0,.4.968,1.649,1.649,0,0,1,0,3.205.65.65,0,0,0-.4.97,1.592,1.592,0,0,1,.043,1.648,1.7,1.7,0,0,1-1.446.87,1.645,1.645,0,0,1-.863-.251.651.651,0,0,0-.338-.094.641.641,0,0,0-.248.049.651.651,0,0,0-.383.446,1.649,1.649,0,0,1-3.205,0Zm0-1.37A1.656,1.656,0,0,1,5.869,11.5a.649.649,0,0,0,1.262,0,1.65,1.65,0,0,1,2.461-1.019l.062.034a.632.632,0,0,0,.277.065.668.668,0,0,0,.57-.343.628.628,0,0,0-.017-.649l-.064-.115A1.648,1.648,0,0,1,11.5,7.131a.649.649,0,0,0,0-1.262,1.649,1.649,0,0,1-1.019-2.461l.034-.062a.625.625,0,0,0-.034-.615.663.663,0,0,0-.553-.314.649.649,0,0,0-.34.1l-.115.064a1.656,1.656,0,0,1-.743.178A1.65,1.65,0,0,1,7.131,1.5l-.024-.079a.65.65,0,0,0-1.238.08A1.647,1.647,0,0,1,3.409,2.515l-.062-.034a.632.632,0,0,0-.277-.065.668.668,0,0,0-.57.343.628.628,0,0,0,.017.649l.064.114A1.65,1.65,0,0,1,1.5,5.869a.649.649,0,0,0,0,1.262A1.649,1.649,0,0,1,2.515,9.592l-.034.062a.625.625,0,0,0,.034.615.663.663,0,0,0,.553.314.649.649,0,0,0,.34-.1l.115-.064A1.647,1.647,0,0,1,4.9,10.369ZM4,6.5A2.5,2.5,0,1,1,6.5,9,2.5,2.5,0,0,1,4,6.5Zm1,0A1.5,1.5,0,1,0,6.5,5,1.5,1.5,0,0,0,5,6.5Z" transform="translate(1.5 1.5)" fill="#212121"></path>
  </svg>
  <span class="dropdown-text">Options</span>
 </a>
</div>

Dropdown Menu with Avatar

Separate groups of related menu items with an avatar.

<div class="dropdown-menu dropdown-menu-between position-static d-block">
 <a href="#0" class="dropdown-item">
  <span><span class="fabrx-avatar"><img src="assets/images/avatars/avatar-5.png" alt="Svyatoslav Taushev"></span><span class="dropdown-text">Svyatoslav Taushev</span></span>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <path data-name="Icon Color" d="M1.012.174a.593.593,0,0,0-.9.772l.057.066L4.5,5.333.174,9.655a.593.593,0,0,0-.057.772l.057.066a.593.593,0,0,0,.772.057l.066-.057L5.752,5.752a.593.593,0,0,0,.057-.772l-.057-.066Z" transform="translate(5.333 2.667)" fill="#212121"></path>
  </svg>
 </a>
 <a href="#0" class="dropdown-item active">
  <span><span class="fabrx-avatar"><img src="assets/images/avatars/avatar-6.png" alt="Naseema Al Morad"></span><span class="dropdown-text">Naseema Al Morad</span></span>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <path data-name="Icon Color" d="M1.012.174a.593.593,0,0,0-.9.772l.057.066L4.5,5.333.174,9.655a.593.593,0,0,0-.057.772l.057.066a.593.593,0,0,0,.772.057l.066-.057L5.752,5.752a.593.593,0,0,0,.057-.772l-.057-.066Z" transform="translate(5.333 2.667)" fill="#212121"></path>
  </svg>
 </a>
 <a href="#0" class="dropdown-item">
  <span><span class="fabrx-avatar"><img src="assets/images/avatars/avatar-7.png" alt="Dashonte Clarke"></span><span class="dropdown-text">Dashonte Clarke</span></span>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <path data-name="Icon Color" d="M1.012.174a.593.593,0,0,0-.9.772l.057.066L4.5,5.333.174,9.655a.593.593,0,0,0-.057.772l.057.066a.593.593,0,0,0,.772.057l.066-.057L5.752,5.752a.593.593,0,0,0,.057-.772l-.057-.066Z" transform="translate(5.333 2.667)" fill="#212121"></path>
  </svg>
 </a>
 <a href="#0" class="dropdown-item">
  <span><span class="fabrx-avatar"><img src="assets/images/avatars/avatar-8.png" alt="Jarrett Cawsey"></span><span class="dropdown-text">Jarrett Cawsey</span></span>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <path data-name="Icon Color" d="M1.012.174a.593.593,0,0,0-.9.772l.057.066L4.5,5.333.174,9.655a.593.593,0,0,0-.057.772l.057.066a.593.593,0,0,0,.772.057l.066-.057L5.752,5.752a.593.593,0,0,0,.057-.772l-.057-.066Z" transform="translate(5.333 2.667)" fill="#212121"></path>
  </svg>
 </a>
 <a href="#0" class="dropdown-item">
  <span><span class="fabrx-avatar"><img src="assets/images/avatars/avatar-9.png" alt="Kung Jiyeon"></span><span class="dropdown-text">Kung Jiyeon</span></span>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <path data-name="Icon Color" d="M1.012.174a.593.593,0,0,0-.9.772l.057.066L4.5,5.333.174,9.655a.593.593,0,0,0-.057.772l.057.066a.593.593,0,0,0,.772.057l.066-.057L5.752,5.752a.593.593,0,0,0,.057-.772l-.057-.066Z" transform="translate(5.333 2.667)" fill="#212121"></path>
  </svg>
 </a>
 <a href="#0" class="dropdown-item">
  <span><span class="fabrx-avatar"><img src="assets/images/avatars/avatar-10.png" alt="Thenjiwe Msutu"></span><span class="dropdown-text">Thenjiwe Msutu</span></span>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <path data-name="Icon Color" d="M1.012.174a.593.593,0,0,0-.9.772l.057.066L4.5,5.333.174,9.655a.593.593,0,0,0-.057.772l.057.066a.593.593,0,0,0,.772.057l.066-.057L5.752,5.752a.593.593,0,0,0,.057-.772l-.057-.066Z" transform="translate(5.333 2.667)" fill="#212121"></path>
  </svg>
 </a>
</div>

Scrollable Dropdown Menu

Separate groups of related menu items with a Scrollable.

<div class="dropdown-menu dropdown-menu-divider position-static d-block fabrx-scroll" data-simplebar>
 <a href="#0" class="dropdown-item"><span class="dropdown-text">Dhaka</span></a>
 <a href="#0" class="dropdown-item active"><span class="dropdown-text">Baku</span></a>
 <a href="#0" class="dropdown-item"><span class="dropdown-text">Hangzhou</span></a>
 <a href="#0" class="dropdown-item"><span class="dropdown-text">El Paso</span></a>
 <a href="#0" class="dropdown-item"><span class="dropdown-text">Hanoi</span></a>
 <a href="#0" class="dropdown-item"><span class="dropdown-text">Brussels</span></a>
 <a href="#0" class="dropdown-item"><span class="dropdown-text">Dhaka</span></a>
 <a href="#0" class="dropdown-item"><span class="dropdown-text">Baku</span></a>
 <a href="#0" class="dropdown-item"><span class="dropdown-text">Hangzhou</span></a>
 <a href="#0" class="dropdown-item"><span class="dropdown-text">El Paso</span></a>
 <a href="#0" class="dropdown-item"><span class="dropdown-text">Hanoi</span></a>
 <a href="#0" class="dropdown-item"><span class="dropdown-text">Brussels</span></a>
</div>

Dropdown Menu with Checkbox

Separate groups of related menu items with a Checkbox.

<div class="dropdown-menu dropdown-menu-controls position-static d-block pt-1">
 <div class="custom-control form-check form-check-rounded">
  <input type="checkbox" id="HongKong" name="HongKong" class="form-check-input">
  <label class="form-check-label" for="HongKong">Hong Kong</label>
 </div>
 <div class="custom-control form-check form-check-rounded">
  <input type="checkbox" id="Yokohama" name="Yokohama" class="form-check-input">
  <label class="form-check-label" for="Yokohama">Yokohama</label>
 </div>
 <div class="custom-control form-check form-check-rounded">
  <input type="checkbox" id="RostovDon" name="RostovDon" class="form-check-input">
  <label class="form-check-label" for="RostovDon">Rostov-on-Don</label>
 </div>
 <div class="custom-control form-check form-check-rounded">
  <input type="checkbox" id="Helsinki" name="Helsinki" class="form-check-input">
  <label class="form-check-label" for="Helsinki">Helsinki</label>
 </div>
 <div class="custom-control form-check form-check-rounded">
  <input type="checkbox" id="Edinburgh" name="Edinburgh" class="form-check-input">
  <label class="form-check-label" for="Edinburgh">Edinburgh</label>
 </div>
 <div class="custom-control form-check form-check-rounded">
  <input type="checkbox" id="Ankara" name="Ankara" class="form-check-input">
  <label class="form-check-label" for="Ankara">Ankara</label>
 </div>
 <div class="text-center pt-1 pb-4"><a href="#0" class="btn btn-primary btn-rounded">Button</a></div>
</div>

Usage

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .show class on the parent list item. The data-bs-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.

On touch-enabled devices, opening a dropdown adds empty ($.noop) mouseover handlers to the immediate children of the <body> element. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty mouseover handlers are removed.

Via data attributes

Add data-bs-toggle="dropdown" to a link or button to toggle a dropdown.

<div class="dropdown">
 <button id="dLabel" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown trigger
 </button>
 <div class="dropdown-menu" aria-labelledby="dLabel">
 ...
 </div>
</div>

Methods

Method	Description
`$().dropdown('toggle')`	Toggles the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('update')`	Updates the position of an element’s dropdown.
`$().dropdown('dispose')`	Destroys an element’s dropdown.

Events

All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element.

Event	Description
`show.bs.dropdown`	This event fires immediately when the show instance method is called.
`shown.bs.dropdown`	This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
`hide.bs.dropdown`	This event is fired immediately when the hide instance method has been called.
`hidden.bs.dropdown`	This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).

Form Elements

Checkboxes and radios

Checkboxes and radio buttons come in different sizes and shapes.

<div class="form-check form-check-rounded">
 <input type="checkbox" checked="checked" class="form-check-input" id="Checkbox10">
</div>

<div class="form-check">
 <input type="checkbox" class="form-check-input" id="Checkbox11">
</div>

<div class="form-check form-check-square">
 <input type="checkbox" class="form-check-input" id="Checkbox12">
</div>

Checkboxes Sizing

Set heights using classes like .custom-control-lg and .custom-control-sm.

<!-- Large Checkbox -->
<div class="form-check form-check-rounded form-check-lg">
 <input type="checkbox" checked="checked" class="form-check-input" id="Checkbox1">
</div>

<div class="form-check form-check-lg">
 <input type="checkbox" class="form-check-input" id="Checkbox2">
</div>

<div class="form-check form-check-square form-check-lg">
 <input type="checkbox" class="form-check-input" id="Checkbox3">
</div>

<!-- Default Checkbox -->
<div class="form-check form-check-rounded">
 <input type="checkbox" checked="checked" class="form-check-input" id="Checkbox13">
</div>

<div class="form-check">
 <input type="checkbox" class="form-check-input" id="Checkbox14">
</div>

<div class="form-check form-check-square">
 <input type="checkbox" class="form-check-input" id="Checkbox15">
</div>

<!-- Small Checkbox -->
<div class="form-check form-check-rounded form-check-sm">
 <input type="checkbox" checked="checked" class="form-check-input" id="Checkbox19">
</div>

<div class="form-check form-check-sm">
 <input type="checkbox" class="form-check-input" id="Checkbox20">
</div>

<div class="form-check form-check-square form-check-sm">
 <input type="checkbox" class="form-check-input" id="Checkbox21">
</div>

Label Checkboxes

Set heights using classes like .custom-control-lg and .custom-control-sm.

Default
Default
Default

<!-- Large Label Checkbox -->
<div class="form-check form-check-rounded form-check-lg">
 <input type="checkbox" class="form-check-input" id="Checkbox28">
 <label class="form-check-label" for="Checkbox28">Default</label>
</div>

<!-- Default Label Checkbox -->
<div class="form-check form-check-rounded">
 <input type="checkbox" class="form-check-input" id="Checkbox29">
 <label class="form-check-label" for="Checkbox29">Default</label>
</div>

<!-- Small Label Checkbox -->
<div class="form-check form-check-rounded form-check-sm">
 <input type="checkbox" class="form-check-input" id="Checkbox30">
 <label class="form-check-label" for="Checkbox30">Default</label>
</div>

Disabled Checkboxes

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

Disabled
Disabled

<div class="form-check form-check-rounded">
 <input type="checkbox" disabled="disabled" class="form-check-input" id="Checkbox34">
 <label class="form-check-label" for="Checkbox34">Disabled</label>
</div>

<div class="form-check">
 <input type="checkbox" disabled="disabled" class="form-check-input" id="Checkbox35">
 <label class="form-check-label" for="Checkbox35">Disabled</label>
</div>

Radio Buttons

<div class="form-check custom-radio form-check-rounded">
 <input type="radio" checked="checked" class="form-check-input" id="radio1">
</div>

<div class="form-check custom-radio">
 <input type="radio" class="form-check-input" id="radio2">
</div>

<div class="form-check custom-radio form-check-square">
 <input type="radio" class="form-check-input" id="radio3">
</div>

Radio Sizing

Set heights using classes like .custom-control-lg and .custom-control-sm.

<!-- Large Checkbox -->
<div class="form-check custom-radio form-check-rounded form-check-lg">
 <input type="radio" checked="checked" class="form-check-input" id="radio4">
</div>

<div class="form-check custom-radio form-check-lg">
 <input type="radio" class="form-check-input" id="radio5">
</div>

<div class="form-check custom-radio form-check-square form-check-lg">
 <input type="radio" class="form-check-input" id="radio6">
</div>

<!-- Default Checkbox -->
<div class="form-check custom-radio form-check-rounded">
 <input type="radio" checked="checked" class="form-check-input" id="radio7">
</div>

<div class="form-check custom-radio">
 <input type="radio" class="form-check-input" id="radio8">
</div>

<div class="form-check custom-radio form-check-square">
 <input type="radio" class="form-check-input" id="radio9">
</div>

<!-- Small Checkbox -->
<div class="form-check custom-radio form-check-rounded form-check-sm">
 <input type="radio" checked="checked" class="form-check-input" id="radio10">
</div>

<div class="form-check custom-radio form-check-sm">
 <input type="radio" class="form-check-input" id="radio11">
</div>

<div class="form-check custom-radio form-check-square form-check-sm">
 <input type="radio" class="form-check-input" id="radio12">
</div>

Label Checkboxes

Set heights using classes like .form-check-lg and .form-check-sm.

Default
Default
Default

<!-- Large Label Checkbox -->
<div class="form-check custom-radio form-check-rounded form-check-lg">
 <input type="radio" class="form-check-input" id="radio13">
 <label class="form-check-label" for="radio13">Default</label>
</div>

<!-- Default Label Checkbox -->
<div class="form-check custom-radio form-check-rounded">
 <input type="radio" class="form-check-input" id="radio14">
 <label class="form-check-label" for="radio14">Default</label>
</div>

<!-- Small Label Checkbox -->
<div class="form-check custom-radio form-check-rounded form-check-sm">
 <input type="radio" class="form-check-input" id="radio15">
 <label class="form-check-label" for="radio15">Default</label>
</div>

Disabled Checkboxes

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

Disabled
Disabled

<div class="form-check custom-radio form-check-rounded">
 <input type="radio" disabled="disabled" class="form-check-input" id="radio16">
 <label class="form-check-label" for="radio16">Disabled</label>
</div>

<div class="form-check custom-radio">
 <input type="radio" disabled="disabled" class="form-check-input" id="radio17">
 <label class="form-check-label" for="radio17">Disabled</label>
</div>

Toggles

Default
Default

<div class="custom-control custom-switch custom-switch-lg custom-switch-stack">
 <input type="checkbox" class="custom-control-input" id="Switch4">
 <label class="custom-control-label" for="Switch4">Default</label>
</div>

<div class="custom-control custom-switch custom-switch-lg">
 <input type="checkbox" class="custom-control-input" id="Switch12">
 <label class="custom-control-label" for="Switch12">Default</label>
</div>

Toggles Sizing

Set heights using classes like .custom-switch-lg and .custom-switch-sm.

Default
Default

<div class="custom-control custom-switch custom-switch-lg custom-switch-stack">
 <input type="checkbox" class="custom-control-input" id="Switch1">
 <label class="custom-control-label" for="Switch1">Default</label>
</div>

<div class="custom-control custom-switch custom-switch-sm">
 <input type="checkbox" class="custom-control-input" id="Switch2">
 <label class="custom-control-label" for="Switch2">Default</label>
</div>

Disabled Toggles

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

Default
Default

<div class="custom-control custom-switch custom-switch-lg custom-switch-stack">
 <input type="checkbox" disabled="disabled" class="custom-control-input" id="Switch8">
 <label class="custom-control-label" for="Switch8">Default</label>
</div>

<div class="custom-control custom-switch custom-switch-sm custom-switch-stack">
 <input type="checkbox" disabled="disabled" class="custom-control-input" id="Switch9">
 <label class="custom-control-label" for="Switch9">Default</label>
</div>

Input Fields (Contained)

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

<input type="text" name="Input1" placeholder="Placeholder" class="form-control" id="Input1">

Validation

Indicate invalid and valid form fields with .is-invalid and .is-valid classes.

How dare you!

<form>
 <div class="row">
  <div class="col-md-4">
   <div class="mb-3">
    <input type="text" name="Input3" placeholder="Placeholder" class="form-control is-valid" id="Input3">
   </div>
  </div>
  <div class="col-md-4">
   <div class="mb-3">
    <label for="Input8" class="control-icon">
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <path data-name="Icon Color" d="M0,8.125A8.125,8.125,0,1,1,8.125,16.25,8.134,8.134,0,0,1,0,8.125Zm1.25,0A6.875,6.875,0,1,0,8.125,1.25,6.883,6.883,0,0,0,1.25,8.125Zm5.669,2.169-.07-.06L5.183,8.567A.625.625,0,0,1,6,7.622l.07.061L7.292,8.908l2.891-2.891a.625.625,0,0,1,.945.814l-.061.07L7.733,10.234a.624.624,0,0,1-.814.06Z" transform="translate(1.875 1.875)" fill="#807e7e"></path>
     </svg>
    </label>
    <input type="text" name="Input8" placeholder="Placeholder" class="form-control is-valid" id="Input8">
   </div>
  </div>
  <div class="col-md-4">
   <div class="mb-3">
    <label for="Input13" class="control-icon control-icon-right">
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <path data-name="Icon Color" d="M0,8.125A8.125,8.125,0,1,1,8.125,16.25,8.134,8.134,0,0,1,0,8.125Zm1.25,0A6.875,6.875,0,1,0,8.125,1.25,6.883,6.883,0,0,0,1.25,8.125Zm5.669,2.169-.07-.06L5.183,8.567A.625.625,0,0,1,6,7.622l.07.061L7.292,8.908l2.891-2.891a.625.625,0,0,1,.945.814l-.061.07L7.733,10.234a.624.624,0,0,1-.814.06Z" transform="translate(1.875 1.875)" fill="#807e7e"></path>
     </svg>
    </label>
    <input type="text" name="Input13" placeholder="Placeholder" class="form-control is-valid" id="Input13">
   </div>
  </div>
 </div>
 <div class="row">
  <div class="col-md-4">
   <div class="mb-3">
    <input type="text" name="Input5" placeholder="Placeholder" class="form-control is-invalid" id="Input5">
    <div class="invalid-feedback">
     <svg xmlns="http://www.w3.org/2000/svg" width="16.001" height="16" viewBox="0 0 16.001 16">
      <g transform="translate(0.001)">
        <path data-name="Icon Color" d="M14.91,14.666H1.092a1.073,1.073,0,0,1-.982-.448,1.118,1.118,0,0,1,.1-1.118L7.13.649A1.061,1.061,0,0,1,8,0a1.062,1.062,0,0,1,.871.649L15.8,13.1a1.117,1.117,0,0,1,.094,1.117A1.071,1.071,0,0,1,14.91,14.666Zm-6.91-4A1.333,1.333,0,1,0,9.334,12,1.335,1.335,0,0,0,8,10.667ZM8,4a1.209,1.209,0,0,0-.871.422,1.211,1.211,0,0,0-.343.906L7.1,8.817A1.3,1.3,0,0,0,8.167,9.98.722.722,0,0,1,8,10h.4a1.317,1.317,0,0,1-.229-.02.937.937,0,0,0,.7-.77l.349-3.882a1.209,1.209,0,0,0-.342-.905A1.21,1.21,0,0,0,8,4Z" transform="translate(-0.001 0.667)" fill="#DC3545"></path>
      </g>
     </svg>
     <span>How dare you!</span>
    </div>
   </div>
  </div>
  <div class="col-md-4">
   <div class="mb-3">
    <label for="Input10" class="control-icon">
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <path data-name="Icon Color" d="M6.143.217a.741.741,0,0,1,1.119.964l-.072.083-5.4,5.4,5.4,5.4a.741.741,0,0,1,.072.964l-.072.083a.741.741,0,0,1-.964.072l-.083-.072L.217,7.19a.741.741,0,0,1-.072-.964l.072-.083Z" transform="translate(3.704 13.704) rotate(-90)" fill="#212121"></path>
     </svg>
    </label>
    <input type="text" name="Input10" placeholder="Placeholder" class="form-control is-invalid" id="Input10">
    <div class="invalid-feedback">
     <svg xmlns="http://www.w3.org/2000/svg" width="16.001" height="16" viewBox="0 0 16.001 16">
      <g transform="translate(0.001)">
        <path data-name="Icon Color" d="M14.91,14.666H1.092a1.073,1.073,0,0,1-.982-.448,1.118,1.118,0,0,1,.1-1.118L7.13.649A1.061,1.061,0,0,1,8,0a1.062,1.062,0,0,1,.871.649L15.8,13.1a1.117,1.117,0,0,1,.094,1.117A1.071,1.071,0,0,1,14.91,14.666Zm-6.91-4A1.333,1.333,0,1,0,9.334,12,1.335,1.335,0,0,0,8,10.667ZM8,4a1.209,1.209,0,0,0-.871.422,1.211,1.211,0,0,0-.343.906L7.1,8.817A1.3,1.3,0,0,0,8.167,9.98.722.722,0,0,1,8,10h.4a1.317,1.317,0,0,1-.229-.02.937.937,0,0,0,.7-.77l.349-3.882a1.209,1.209,0,0,0-.342-.905A1.21,1.21,0,0,0,8,4Z" transform="translate(-0.001 0.667)" fill="#DC3545"></path>
      </g>
     </svg>
     <span>How dare you!</span>
    </div>
   </div>
  </div>
  <div class="col-md-4">
   <div class="mb-3">
    <label for="Input15" class="control-icon control-icon-right">
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <path data-name="Icon Color" d="M6.143.217a.741.741,0,0,1,1.119.964l-.072.083-5.4,5.4,5.4,5.4a.741.741,0,0,1,.072.964l-.072.083a.741.741,0,0,1-.964.072l-.083-.072L.217,7.19a.741.741,0,0,1-.072-.964l.072-.083Z" transform="translate(3.704 13.704) rotate(-90)" fill="#212121"></path>
     </svg>
    </label>
    <input type="text" name="Input15" placeholder="Placeholder" class="form-control is-invalid" id="Input15">
    <div class="invalid-feedback">
     <svg xmlns="http://www.w3.org/2000/svg" width="16.001" height="16" viewBox="0 0 16.001 16">
      <g transform="translate(0.001)">
        <path data-name="Icon Color" d="M14.91,14.666H1.092a1.073,1.073,0,0,1-.982-.448,1.118,1.118,0,0,1,.1-1.118L7.13.649A1.061,1.061,0,0,1,8,0a1.062,1.062,0,0,1,.871.649L15.8,13.1a1.117,1.117,0,0,1,.094,1.117A1.071,1.071,0,0,1,14.91,14.666Zm-6.91-4A1.333,1.333,0,1,0,9.334,12,1.335,1.335,0,0,0,8,10.667ZM8,4a1.209,1.209,0,0,0-.871.422,1.211,1.211,0,0,0-.343.906L7.1,8.817A1.3,1.3,0,0,0,8.167,9.98.722.722,0,0,1,8,10h.4a1.317,1.317,0,0,1-.229-.02.937.937,0,0,0,.7-.77l.349-3.882a1.209,1.209,0,0,0-.342-.905A1.21,1.21,0,0,0,8,4Z" transform="translate(-0.001 0.667)" fill="#DC3545"></path>
      </g>
     </svg>
     <span>How dare you!</span>
    </div>
   </div>
  </div>
 </div>
 <div class="row">
  <div class="col-md-12">
   <button type="submit" class="btn btn-primary">Submit</button>
  </div>
 </div>
</form>

Input group merge

A slightly modified version of the default input groups that always keeps icons as a part of the form control.

How dare you!

<div class="form-group">
  <label for="Input6" class="control-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <path data-name="Icon Color" d="M6.143.217a.741.741,0,0,1,1.119.964l-.072.083-5.4,5.4,5.4,5.4a.741.741,0,0,1,.072.964l-.072.083a.741.741,0,0,1-.964.072l-.083-.072L.217,7.19a.741.741,0,0,1-.072-.964l.072-.083Z" transform="translate(3.704 13.704) rotate(-90)" fill="#212121"></path>
    </svg>
  </label>
  <input type="text" name="Input6" placeholder="Placeholder" class="form-control" id="Input6">
</div>
<div class="form-group">
  <label for="Input11" class="control-icon control-icon-right">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <path data-name="Icon Color" d="M6.143.217a.741.741,0,0,1,1.119.964l-.072.083-5.4,5.4,5.4,5.4a.741.741,0,0,1,.072.964l-.072.083a.741.741,0,0,1-.964.072l-.083-.072L.217,7.19a.741.741,0,0,1-.072-.964l.072-.083Z" transform="translate(3.704 13.704) rotate(-90)" fill="#212121"></path>
    </svg>
  </label>
  <input type="text" name="Input11" placeholder="Placeholder" class="form-control" id="Input11">
</div>
<div class="form-group">
  <label for="Input8" class="control-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <path data-name="Icon Color" d="M0,8.125A8.125,8.125,0,1,1,8.125,16.25,8.134,8.134,0,0,1,0,8.125Zm1.25,0A6.875,6.875,0,1,0,8.125,1.25,6.883,6.883,0,0,0,1.25,8.125Zm5.669,2.169-.07-.06L5.183,8.567A.625.625,0,0,1,6,7.622l.07.061L7.292,8.908l2.891-2.891a.625.625,0,0,1,.945.814l-.061.07L7.733,10.234a.624.624,0,0,1-.814.06Z" transform="translate(1.875 1.875)" fill="#807e7e"></path>
    </svg>
  </label>
  <input type="text" name="Input81" placeholder="Placeholder" class="form-control is-valid" id="Input81">
</div>
<div class="form-group">
  <label for="Input15" class="control-icon control-icon-right">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <path data-name="Icon Color" d="M6.143.217a.741.741,0,0,1,1.119.964l-.072.083-5.4,5.4,5.4,5.4a.741.741,0,0,1,.072.964l-.072.083a.741.741,0,0,1-.964.072l-.083-.072L.217,7.19a.741.741,0,0,1-.072-.964l.072-.083Z" transform="translate(3.704 13.704) rotate(-90)" fill="#212121"></path>
    </svg>
  </label>
  <input type="text" name="Input152" placeholder="Placeholder" class="form-control is-invalid" id="Input152">
  <div class="invalid-feedback">
    <svg xmlns="http://www.w3.org/2000/svg" width="16.001" height="16" viewBox="0 0 16.001 16">
      <g transform="translate(0.001)">
        <path data-name="Icon Color" d="M14.91,14.666H1.092a1.073,1.073,0,0,1-.982-.448,1.118,1.118,0,0,1,.1-1.118L7.13.649A1.061,1.061,0,0,1,8,0a1.062,1.062,0,0,1,.871.649L15.8,13.1a1.117,1.117,0,0,1,.094,1.117A1.071,1.071,0,0,1,14.91,14.666Zm-6.91-4A1.333,1.333,0,1,0,9.334,12,1.335,1.335,0,0,0,8,10.667ZM8,4a1.209,1.209,0,0,0-.871.422,1.211,1.211,0,0,0-.343.906L7.1,8.817A1.3,1.3,0,0,0,8.167,9.98.722.722,0,0,1,8,10h.4a1.317,1.317,0,0,1-.229-.02.937.937,0,0,0,.7-.77l.349-3.882a1.209,1.209,0,0,0-.342-.905A1.21,1.21,0,0,0,8,4Z" transform="translate(-0.001 0.667)" fill="#DC3545"></path>
      </g>
    </svg>
    <span>How dare you!</span>
  </div>
</div>

Input Button

A slightly modified version of the default input Button that always keeps Button as a part of the form control.

How dare you!

<div class="form-group">
  <a href="#0" class="btn btn-primary control-icon control-icon-right">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <path data-name="Icon Color" d="M6.143.217a.741.741,0,0,1,1.119.964l-.072.083-5.4,5.4,5.4,5.4a.741.741,0,0,1,.072.964l-.072.083a.741.741,0,0,1-.964.072l-.083-.072L.217,7.19a.741.741,0,0,1-.072-.964l.072-.083Z" transform="translate(3.704 13.704) rotate(-90)" fill="#ffffff"></path>
    </svg>
  </a>
  <input type="text" name="Input16" placeholder="Placeholder" class="form-control" id="Input16">
</div>
<div class="form-group">
  <a href="#0" class="btn btn-success control-icon control-icon-right">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <path data-name="Icon Color" d="M0,8.125A8.125,8.125,0,1,1,8.125,16.25,8.134,8.134,0,0,1,0,8.125Zm1.25,0A6.875,6.875,0,1,0,8.125,1.25,6.883,6.883,0,0,0,1.25,8.125Zm5.669,2.169-.07-.06L5.183,8.567A.625.625,0,0,1,6,7.622l.07.061L7.292,8.908l2.891-2.891a.625.625,0,0,1,.945.814l-.061.07L7.733,10.234a.624.624,0,0,1-.814.06Z" transform="translate(1.875 1.875)" fill="#807e7e"></path>
    </svg>
  </a>
  <input type="text" name="Input18" placeholder="Placeholder" class="form-control is-valid" id="Input18">
</div>
<div class="form-group">
  <a href="#0" class="btn btn-danger control-icon control-icon-right">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <path data-name="Icon Color" d="M6.143.217a.741.741,0,0,1,1.119.964l-.072.083-5.4,5.4,5.4,5.4a.741.741,0,0,1,.072.964l-.072.083a.741.741,0,0,1-.964.072l-.083-.072L.217,7.19a.741.741,0,0,1-.072-.964l.072-.083Z" transform="translate(3.704 13.704) rotate(-90)" fill="#807e7e"></path>
    </svg>
  </a>
  <input type="text" name="Input20" placeholder="Placeholder" class="form-control is-invalid" id="Input20">
  <div class="invalid-feedback">
    <svg xmlns="http://www.w3.org/2000/svg" width="16.001" height="16" viewBox="0 0 16.001 16">
      <g transform="translate(0.001)">
        <path data-name="Icon Color" d="M14.91,14.666H1.092a1.073,1.073,0,0,1-.982-.448,1.118,1.118,0,0,1,.1-1.118L7.13.649A1.061,1.061,0,0,1,8,0a1.062,1.062,0,0,1,.871.649L15.8,13.1a1.117,1.117,0,0,1,.094,1.117A1.071,1.071,0,0,1,14.91,14.666Zm-6.91-4A1.333,1.333,0,1,0,9.334,12,1.335,1.335,0,0,0,8,10.667ZM8,4a1.209,1.209,0,0,0-.871.422,1.211,1.211,0,0,0-.343.906L7.1,8.817A1.3,1.3,0,0,0,8.167,9.98.722.722,0,0,1,8,10h.4a1.317,1.317,0,0,1-.229-.02.937.937,0,0,0,.7-.77l.349-3.882a1.209,1.209,0,0,0-.342-.905A1.21,1.21,0,0,0,8,4Z" transform="translate(-0.001 0.667)" fill="#DC3545"></path>
      </g>
    </svg>
    <span>How dare you!</span>
  </div>
</div>

Input Search

A slightly modified version of the default input Search that always keeps icon as a part of the form control.

<div class="form-group dropdown">
  <label for="FabrxAutocomplete1" class="control-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <path data-name="Icon Color" d="M6.143.217a.741.741,0,0,1,1.119.964l-.072.083-5.4,5.4,5.4,5.4a.741.741,0,0,1,.072.964l-.072.083a.741.741,0,0,1-.964.072l-.083-.072L.217,7.19a.741.741,0,0,1-.072-.964l.072-.083Z" transform="translate(3.704 13.704) rotate(-90)" fill="#212121"></path>
    </svg>
  </label>
  <label for="FabrxAutocomplete1" class="control-icon control-icon-right">
    <svg data-name="Right Icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <path data-name="Icon Color" d="M5.669,15.983,2.132,12.448a7.3,7.3,0,0,1,0-10.312A7.292,7.292,0,1,1,12.444,12.448L8.908,15.983a2.291,2.291,0,0,1-3.239,0ZM3.016,3.02a6.048,6.048,0,0,0,0,8.544L6.552,15.1a1.041,1.041,0,0,0,1.472,0l3.536-3.536A6.042,6.042,0,0,0,3.016,3.02ZM4.163,7.292a3.125,3.125,0,1,1,3.125,3.124A3.129,3.129,0,0,1,4.163,7.292Zm1.25,0A1.875,1.875,0,1,0,7.288,5.417,1.877,1.877,0,0,0,5.413,7.292Z" transform="translate(2.712 1.875)" fill="#807e7e"></path>
    </svg>
  </label>
  <input type="text" name="FabrxAutocomplete1" placeholder="Search..." autocomplete="off" spellcheck="false" class="form-control dropdown-toggle" id="FabrxAutocomplete1">
</div>

Input Disabled

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.


 <input type="text" name="Input4" placeholder="Placeholder" disabled="disabled" class="form-control" id="Input4">

Input Fields (Line)

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-line-control class. Included are styles for general appearance, focus state, sizing, and more.


 <input type="text" name="Input12" placeholder="Placeholder" class="form-control form-line-control" id="Input12">

Icons

We prefer SVG implementations for full vector support and flexibility.

2fa
3d-cube-sphere
a-b
accessible
access-point
access-point-off
activity
add
adjustments
adjustments-horizontal
aerial-lift
airbnb
alarm
alert
alert-circle
alert-fill
alert-octagon
alien
align-center
align-justified
align-left
align-right
ambulance
anchor
android
antenna
apple
apps
appstore
apreture
archive
arrow-back
arrow-back-up
arrow-bar-down
arrow-bar-left
arrow-bar-right
arrow-bar-to-down
arrow-bar-to-left
arrow-bar-to-up
arrow-bar-up
arrow-big-down
arrow-big-left
arrow-big-right
arrow-big-top
arrow-bottom-bar
arrow-bottom-circle
arrow-bottom-square
arrow-bottom-tail
arrow-down
arrow-down-circle
arrow-down-left-circle
arrow-down-right
arrow-down-right-circle
arrow-forward
arrow-forward-up
arrow-left
arrow-left-bar
arrow-left-circle
arrow-left-square
arrow-left-tail
arrow-loop-left
arrow-loop-right
arrow-narrow-down
arrow-narrow-left
arrows-diagonal
arrows-diagonal-2
arrows-double-ne-sw
arrows-double-nw-se
arrows-down
arrows-down-up
arrows-horizontal
arrows-join-2
arrows-maximize
arrows-minimize
artboard
at
atom
avatar
award
back
back3
backhoe
backspace
backward
bag
ball-football
ball-football
ban
bandage
barcode
basket
battery-4
battery-automotive
battery-charging
bed
behance
behance2
bell
bell-ringing
bike
bin
binary
biohazard
blockquote
bluetooth-connected
bolt
bone
book
bookmark
Bookmark-Fill
border-all
border-bottom
border-horizontal
border-inner
box
box-margin
box-multiple
braces
brackets
brightness-2
brightness-down
browser
brush
bug
building-bank
building-bridge
building-church
building-community
building-factory
building-hospital
building-store
bulb
bus
businessplan
calculator
calendar
camera
capture
car
cart
cash-banknote
cast
ce
certificate
charging-pile
chart-arcs-3
chart-arrows-vertical
chart-bar
chart-pie
chat
check
checkbox
chevrons-down
chevrons-left
christmas-tree
chrome
circle-check
circle-minus
circle-plus
circles
circle-x
clear-all
click
clipboard
clipboard-check
clipboard-list
clock
close
cloud
cloud-download
cloud-off
cloud-storm
cloud-upload
code
code-minus
codepen
code-plus
coin
color-picker
color-swatch
columns
command
comment
compass
confetti
container
contrast
copy
copyright
corner-down-left
corner-down-left-double
credit-card
credit-card-off
crop
crosshair
crown
css3
curly-loop
currency-bath
currency-bitcoin
currency-dollar
currency-euro
currency-pound
currency-riyal
currency-rupee
current-location
cursor-text
cut
dashboard
database
database-export
device-analytics
device-cctv
device-computer-camera
device-desktop
device-gamepad
device-laptop
device-mobile
devices
devices-pc
device-speaker
device-tablet
device-tv
device-watch
diamond
dice
dimensions
direction
directions
disabled
discount
divide
dot-menu
dot-menu-02
dots
dots-circle-horizontal
dots-vertical
down
down3
down4
down5
down6
download
download-cloud
drag
drag-drop
dribbble
dribbble2
drone
droplet
ear
edge
edit
egg
emoji
equal
equal-not
eraser
exchange
exposure
external-link
eye
eyeglass
eye-off
facebook
facebook2
face-id
fall
feather
figma
file
file-alert
file-analytics
file-check
file-download
file-export
file-import
file-music
file-phone
file-text
file-upload
file-zip
fill
filter
filter-02
fingerprint
firefox
firetruck
flag
flame
flask
flip-horizontal
flip-vertical
float-center
float-left
float-none
float-right
focus
fold
fold-down
folder
folder-plus
forward
forward2
forward3
frame
friends
gas-station
gauge
geometry
gift
git-commit
github
glass
glass-full
glass-off
globe
golf
google
google-drive
google-play
gps
grain
grid-dots
grip-horizontal
grip-vertical
growth
hamburger
hamburger-02
hamburger-03
hand-finger
hanger
hash
heading
headset
heart
heart-broken
heart-fill
helicopter
help
hexagon
hexagon-off
hierarchy
hipchat
history
home
home2
html5
ice-cream
ice-cream-2
id
inbox
infinity
info
info-circle
instagram
instagram2
key
keyboard
language
layers-intersect
layers-subtract
layout-align-center
layout-align-left
layout-align-middle
layout-align-top
layout-bottombar
layout-cards
layout-columns
layout-grid
layout-grid-add
leaf
leaf2
leaf3
leaf4
leaf5
letter-a
letter-case
letter-case-lower
letter-case-upper
letter-spacing
license
lifebuoy
line-dashed
line-height
link
linkedin
linkedin2
list
list-check
live-photo
live-view
loader
loader-quarter
location
lock
lock-access
lock-open
login
logout
macro
magnet
mail
mailbox
mail-forward
mail-opened
man
manual-gearbox
map
map-2
marquee
marquee2
mars
mask
massage
math
math-function
maximize
medal
medical-cross
menu-2
message
message-circle
message-dots
messages
messenger
mic-off
mic-on
minimize
minus
mood-boy
mood-confuzed
mood-crazy-happy
mood-empty
mood-happy
mood-neutral
mood-sad
mood-smile
moon
moon-stars
moped
motorbike
mouse
movie
mug
music
name-affiliate
netflix
news
new-section
next
nfc
note
notebook
notes
notification
notification-badge
notification-dot
number-1
octagon
octagon-off
olympics
omega
opera
options-horizontal-2-dots
options-horizontal-3-dots
options-vertical-2-dots
options-vertical-3-dots
package
pacman
paint
palette
paperclip
parachute
parentheses
parking
pause
pause-outline
paypal
peace
pencil
pennant
percentage
phone
phone-call
phone-calling
phone-off
photo
pill
pin
pinned-off
pinterest
pizza
plane
plane-departure
planet
plant
play-border
play-fill
playlist
play-outline
plug
point
pokeball
pool
power
pray
presentation
previous
printer
propeller
puzzle
pyramid
python
qrcode
question-mark
radioactive
rainbow
receipt
recharging
recycle
reddit
refresh
registered
remove-fill
remove-outline
repeat
repeat2
repeat-once
replace
right
right2
right3
right4
rotate
router
rss
safari
sass
scale
scan
school
screen-share
search
selector
send
settings
share
share-02
shuffle
sketch
skype
slack
snapchat
sort
soundcloud
sound-off
sound-on
speakerphone
spotify
stack
star
star-fill
star-half
stop
swap
telegram
thumb-down
thumb-up
tool
trash
trending
twitter
umbrella
up
up3
up4
up5
up6
user
vector
vimeo
volume
wallet
warning
whatsapp
wifi
wiper
world
youtube
zodiac-libra

Lists

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. Please read the official Bootstrap documentation for a full list of options.

Example

Nina Herald

UX Researcher

<div class="card rounded-0 border-bottom">
 <div class="card-body align-items-center justify-content-between d-flex p-3">
  <div class="float-start me-2">
    <div class="d-inline-block me-3">
      <svg xmlns="http://www.w3.org/2000/svg" width="10.833" height="15" viewBox="0 0 10.833 15">
        <path data-name="Icon Color" d="M7.5,13.333A1.667,1.667,0,1,1,9.167,15,1.666,1.666,0,0,1,7.5,13.333Zm-7.5,0A1.667,1.667,0,1,1,1.667,15,1.666,1.666,0,0,1,0,13.333ZM7.5,7.5A1.667,1.667,0,1,1,9.167,9.167,1.667,1.667,0,0,1,7.5,7.5ZM0,7.5A1.667,1.667,0,1,1,1.667,9.167,1.667,1.667,0,0,1,0,7.5ZM7.5,1.667A1.667,1.667,0,1,1,9.167,3.333,1.667,1.667,0,0,1,7.5,1.667Zm-7.5,0A1.667,1.667,0,1,1,1.667,3.333,1.667,1.667,0,0,1,0,1.667Z" fill="#eaeaea"></path>
      </svg>
    </div>
    <div class="fabrx-avatar fabrx-status dnd"><img src="../assets/images/avatars/avatar-1.png" alt="Nina Herald"></div>
    <div class="avatar-name">
      <h6 class="d-block font-size-14 mb-0">Nina Herald</h6>
      <small class="d-block text-secondary">UX Researcher</small>
    </div>
  </div>
  <div class="float-end">
    <div class="dropdown">
      <a href="#" data-bs-toggle="dropdown" role="button" aria-expanded="false" id="Action4">
        <svg data-name="Icon/Options Vertical" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
          <path data-name="Icon Color" d="M9.334,1.166A1.167,1.167,0,1,1,10.5,2.333,1.168,1.168,0,0,1,9.334,1.166Zm1,0A.167.167,0,1,0,10.5,1,.167.167,0,0,0,10.334,1.166Zm-5.667,0A1.167,1.167,0,1,1,5.833,2.333,1.168,1.168,0,0,1,4.667,1.166Zm1,0A.166.166,0,1,0,5.833,1,.167.167,0,0,0,5.667,1.166ZM0,1.166A1.167,1.167,0,1,1,1.166,2.333,1.168,1.168,0,0,1,0,1.166Zm1,0A.167.167,0,1,0,1.166,1,.167.167,0,0,0,1,1.166Z" transform="translate(9.167 2) rotate(90)" fill="#212121"></path>
        </svg>
      </a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action4">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </div>
 </div>
</div>

Default

Nina Herald

UX Researcher

<div class="card rounded-0 border-bottom">
 <div class="card-body align-items-center justify-content-between d-flex p-3">
  <div class="float-start me-2">
    <div class="d-inline-block me-2">
      <svg data-name="Icon/Check Fill" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
        <path data-name="Icon Color" d="M12,24A12,12,0,0,1,3.515,3.515,12,12,0,1,1,20.485,20.485,11.922,11.922,0,0,1,12,24ZM6.273,11.786,5,13.135l4.272,4.532L19,7.35,17.727,6,9.273,14.967Z" fill="#0D6EFD"></path>
      </svg>
    </div>
    <div class="avatar-name">
      <h6 class="d-block font-size-14 mb-0">Nina Herald</h6>
      <small class="d-block text-secondary">UX Researcher</small>
    </div>
  </div>
  <div class="float-end">
    <div class="dropdown">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action6">
        <svg data-name="Icon/Options Vertical" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
          <path data-name="Icon Color" d="M9.334,1.166A1.167,1.167,0,1,1,10.5,2.333,1.168,1.168,0,0,1,9.334,1.166Zm1,0A.167.167,0,1,0,10.5,1,.167.167,0,0,0,10.334,1.166Zm-5.667,0A1.167,1.167,0,1,1,5.833,2.333,1.168,1.168,0,0,1,4.667,1.166Zm1,0A.166.166,0,1,0,5.833,1,.167.167,0,0,0,5.667,1.166ZM0,1.166A1.167,1.167,0,1,1,1.166,2.333,1.168,1.168,0,0,1,0,1.166Zm1,0A.167.167,0,1,0,1.166,1,.167.167,0,0,0,1,1.166Z" transform="translate(9.167 2) rotate(90)" fill="#212121"></path>
        </svg>
      </a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action6">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </div>
 </div>
</div>

12

Netherlands

<div class="card rounded-0 border-bottom">
 <div class="card-body align-items-center justify-content-between d-flex p-3">
  <div class="float-start me-2">
    <div class="d-inline-block me-2"><h6 class="font-size-14 mb-0">12</h6></div>
    <div class="fabrx-avatar sm"><img src="../assets/images/flags/flag1.png" alt="Netherlands"></div>
    <div class="avatar-name">
      <h6 class="d-block font-size-14 mb-0">Netherlands</h6>
    </div>
  </div>
  <div class="float-end">
    <ul class="card-numbers">
      <li>43</li>
      <li>4</li>
      <li>16</li>
    </ul>
  </div>
 </div>
</div>

Nina Herald

UX Researcher

<div class="card rounded-0 border-bottom">
 <div class="card-body align-items-center justify-content-between d-flex p-3">
  <div class="float-start me-2">
    <div class="fabrx-avatar fabrx-status dnd"><img src="../assets/images/avatars/avatar-1.png" alt="Nina Herald"></div>
    <div class="avatar-name">
      <h6 class="d-block font-size-14 mb-0">Nina Herald</h6>
      <small class="d-block text-secondary">UX Researcher</small>
    </div>
  </div>
  <div class="float-end">
    <div class="dropdown">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action7">
        <svg data-name="Icon/Options Vertical" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
          <path data-name="Icon Color" d="M9.334,1.166A1.167,1.167,0,1,1,10.5,2.333,1.168,1.168,0,0,1,9.334,1.166Zm1,0A.167.167,0,1,0,10.5,1,.167.167,0,0,0,10.334,1.166Zm-5.667,0A1.167,1.167,0,1,1,5.833,2.333,1.168,1.168,0,0,1,4.667,1.166Zm1,0A.166.166,0,1,0,5.833,1,.167.167,0,0,0,5.667,1.166ZM0,1.166A1.167,1.167,0,1,1,1.166,2.333,1.168,1.168,0,0,1,0,1.166Zm1,0A.167.167,0,1,0,1.166,1,.167.167,0,0,0,1,1.166Z" transform="translate(9.167 2) rotate(90)" fill="#212121"></path>
        </svg>
      </a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action7">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </div>
 </div>
</div>

Lisanne Viscaal

Hearts of the stars two ghostly white figures in coveralls and helmets ar…

1 min 4

<div class="card rounded-0 border-bottom">
 <div class="card-body justify-content-between d-flex p-3">
  <div class="float-start me-2">
    <div class="fabrx-avatar fabrx-status online lg"><img src="../assets/images/avatars/avatar-1.png" alt="Nina Herald"></div>
  </div>
  <div class="float-end">
    <div class="avatar-name">
      <h6 class="d-block font-size-16 mb-0">Lisanne Viscaal</h6>
      <p class="small mb-0">Hearts of the stars two ghostly white figures in coveralls and helmets ar…</p>
    </div>
  </div>
  <div class="float-start text-nowrap text-center ms-2">
    <small class="d-block text-secondary">1 min</small>
    <span class="badge badge-pill badge-primary">4</span>
  </div>
 </div>
</div>

Modals

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. Please read the official Bootstrap documentation for a full list of options.

Example

Short headline

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled.

Ok, Let Me In

<div class="card rounded-12 shadow-40 text-center border border-gray-200 py-lg-3">
  <div class="card-body">
    <div class="mb-3">
      <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
        <path d="M25,50a24.615,24.615,0,0,1-9.742-1.954A24.881,24.881,0,0,1,1.953,34.741,24.606,24.606,0,0,1,0,25a24.615,24.615,0,0,1,1.953-9.742A24.889,24.889,0,0,1,15.259,1.953,24.615,24.615,0,0,1,25,0a24.606,24.606,0,0,1,9.741,1.953A24.881,24.881,0,0,1,48.047,15.259,24.615,24.615,0,0,1,50,25a24.607,24.607,0,0,1-1.954,9.741A24.873,24.873,0,0,1,34.741,48.047,24.607,24.607,0,0,1,25,50ZM25,3.125a21.194,21.194,0,0,0-8.52,1.733A22.06,22.06,0,0,0,4.858,16.48a21.807,21.807,0,0,0,0,17.041,22.675,22.675,0,0,0,4.688,6.958,22.178,22.178,0,0,0,6.934,4.712,21.807,21.807,0,0,0,17.041,0,22.178,22.178,0,0,0,6.934-4.712,22.688,22.688,0,0,0,4.687-6.958,21.807,21.807,0,0,0,0-17.041A22.054,22.054,0,0,0,33.521,4.858,21.2,21.2,0,0,0,25,3.125Zm-4.663,31.3a1.421,1.421,0,0,1-1.1-.489l-7.763-7.715a1.591,1.591,0,0,1,0-2.2,1.534,1.534,0,0,1,2.245,0l6.592,6.592L34.96,15.869a1.537,1.537,0,0,1,2.246,0,1.594,1.594,0,0,1,0,2.2L21.631,33.74l-.1.1-.049.049-.049.049A1.42,1.42,0,0,1,20.337,34.424Z" fill="#2ed477"></path>
      </svg>
    </div>
    <h6 class="mb-2">Short headline</h6>
    <p class="text-secondary caption">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled.</p>
    <div class="d-grid">
      <a href="#0" class="btn btn-primary">Ok, Let Me In</a>
    </div>
  </div>
</div>

Modal with Checkbox

Short headline

Select with care

Choose

<div class="card rounded-12 shadow-40 border border-gray-200 py-lg-3">
  <div class="card-body">
    <h6 class="mb-3">Short headline</h6>
    <div class="form-check mb-3">
      <input class="form-check-input" type="checkbox" name="Care1" id="Care1">
      <label class="form-check-label" for="Care1">Select with care</label>
    </div>
    <div class="form-check mb-3">
      <input class="form-check-input" type="checkbox" name="Care2" id="Care2">
      <label class="form-check-label" for="Care2">Select with care</label>
    </div>
    <div class="form-check mb-3">
      <input class="form-check-input" type="checkbox" name="Care3" id="Care3">
      <label class="form-check-label" for="Care3">Select with care</label>
    </div>
    <div class="form-check mb-3">
      <input class="form-check-input" type="checkbox" name="Care4" id="Care4">
      <label class="form-check-label" for="Care4">Select with care</label>
    </div>
    <div class="pt-2 d-grid"><a href="#0" class="btn btn-primary">Choose</a></div>
  </div>
</div>

Modal Inline Buttons

Short headline

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled.

Yes No

<div class="card rounded-12 shadow-40 text-center border border-gray-200 py-lg-3">
  <div class="card-body">
    <h6 class="mb-2">Short headline</h6>
    <p class="text-secondary caption">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled.</p>
    <a href="#0" class="btn btn-primary">Yes</a>
    <a href="#0" class="btn btn-outline-primary ms-2 ms-sm-3">No</a>
  </div>
</div>

Examples on how to use navigation components.

Page Control

Three different layout options for page control.

<ul class="fabrx-page-controls">
 <li><span class="page-control active">1</span></li>
 <li><a href="#0" class="page-control">2</a></li>
 <li><a href="#0" class="page-control">3</a></li>
 <li><a href="#0" class="page-control">4</a></li>
</ul>

<ul class="fabrx-page-controls controls-active-stack">
 <li><span class="page-control active">1</span></li>
 <li><a href="#0" class="page-control">2</a></li>
 <li><a href="#0" class="page-control">3</a></li>
 <li><a href="#0" class="page-control">4</a></li>
</ul>

<ul class="fabrx-page-controls controls-stack">
 <li><span class="page-control active">1</span></li>
 <li><a href="#0" class="page-control">2</a></li>
 <li><a href="#0" class="page-control">3</a></li>
 <li><a href="#0" class="page-control">4</a></li>
</ul>

Radio Group

<div class="form-check form-check-rounded form-check-lg form-check-inline radio-has-check control-has-primary">
  <input type="radio" id="Option1" name="RadioGroup1" class="form-check-input">
</div>
<div class="form-check form-check-rounded form-check-lg form-check-inline radio-has-check control-has-pink">
  <input type="radio" id="Option2" name="RadioGroup1" class="form-check-input">
</div>
<div class="form-check form-check-rounded form-check-lg form-check-inline radio-has-check control-has-indigo">
  <input type="radio" id="Option3" name="RadioGroup1" class="form-check-input">
</div>
<div class="form-check form-check-rounded form-check-lg form-check-inline radio-has-check control-has-success">
  <input type="radio" id="Option4" name="RadioGroup1" class="form-check-input">
</div>

Radio Group Sizing

Set heights using classes like .form-check-lg and .form-check-sm.

<!-- Large Size -->
<div class="form-check form-check-rounded form-check-lg form-check-inline radio-has-check control-has-primary">
  <input type="radio" id="Option5" name="RadioGroup1" class="form-check-input">
</div>
<div class="form-check form-check-rounded form-check-lg form-check-inline radio-has-check control-has-pink">
  <input type="radio" id="Option6" name="RadioGroup1" class="form-check-input">
</div>
<div class="form-check form-check-rounded form-check-lg form-check-inline radio-has-check control-has-indigo">
  <input type="radio" id="Option7" name="RadioGroup1" class="form-check-input">
</div>
<div class="form-check form-check-rounded form-check-lg form-check-inline radio-has-check control-has-success">
  <input type="radio" id="Option8" name="RadioGroup1" class="form-check-input">
</div>

<!-- Small Size -->
<div class="form-check form-check-rounded form-check-sm form-check-inline radio-has-check control-has-primary">
  <input type="radio" id="Option9" name="RadioGroup1" class="form-check-input">
</div>
<div class="form-check form-check-rounded form-check-sm form-check-inline radio-has-check control-has-pink">
  <input type="radio" id="Option10" name="RadioGroup1" class="form-check-input">
</div>
<div class="form-check form-check-rounded form-check-sm form-check-inline radio-has-check control-has-indigo">
  <input type="radio" id="Option11" name="RadioGroup1" class="form-check-input">
</div>
<div class="form-check form-check-rounded form-check-sm form-check-inline radio-has-check control-has-success">
  <input type="radio" id="Option12" name="RadioGroup1" class="form-check-input">
</div>

Switchers

Set heights using classes like .nav-tabs-lg and .nav-tabs-sm.

Monthly
Yearly

Monthly
Yearly

<!-- Large Size -->
<ul class="nav nav-tabs nav-tabs-lg nav-tabs-rounded p-0">
 <li class="nav-item">
  <a class="nav-link active" data-bs-toggle="tab" href="#Monthly">Monthly</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#Yearly">Yearly</a>
 </li>
</ul>

<!-- Small Size -->
<ul class="nav nav-tabs nav-tabs-sm nav-tabs-rounded p-0">
 <li class="nav-item">
  <a class="nav-link active" data-bs-toggle="tab" href="#Monthly">Monthly</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#Yearly">Yearly</a>
 </li>
</ul>

Horizontal Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.

<ul class="nav nav-tabs">
 <li class="nav-item">
  <a class="nav-link active" data-bs-toggle="tab" href="#Active">Active</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#Inactive1">Inactive</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#Inactive2">Inactive</a>
 </li>
</ul>

Line Tabs

Takes the basic nav line from above and adds the .nav-tabs-line class to generate a tabbed interface.

<ul class="nav nav-tabs nav-tabs-line">
 <li class="nav-item">
  <a class="nav-link active" data-bs-toggle="tab" href="#Active">Active</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#Inactive1">Inactive</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#Inactive2">Inactive</a>
 </li>
</ul>

Pill Tabs

Takes the basic nav from above and adds the .nav-tabs-rounded class to generate a tabbed interface.

<ul class="nav nav-tabs nav-tabs-lg nav-tabs-rounded">
 <li class="nav-item">
  <a class="nav-link active" data-bs-toggle="tab" href="#Active">Active</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#Inactive1">Inactive</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#Inactive2">Inactive</a>
 </li>
</ul>

Pill Tabs Without Background

Takes the basic nav from above and adds the .nav-tabs-no-bg class to generate a tabbed interface.

<ul class="nav nav-tabs nav-tabs-no-bg nav-tabs-rounded nav-tabs-md">
 <li class="nav-item">
  <a class="nav-link active" data-bs-toggle="tab" href="#Active">Active</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#Inactive1">Inactive</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#Inactive2">Inactive</a>
 </li>
</ul>

Horizontal Features Tabs

<ul class="nav nav-tabs nav-tabs-line nav-tags-stack nav-justified fabrx-justified">
 <li class="nav-item">
  <a class="nav-link active" data-bs-toggle="tab" href="#FeatureOne">
   <span class="fabrx-icon">
    <svg data-name="Icon/Arrows/Chevron/Forward" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
     <path data-name="Icon Color" d="M2.182,24,0,21.818,9.818,12,0,2.182,2.182,0l12,12Z" transform="translate(5)" fill="#3f3b3b"></path>
    </svg>
   </span>
   <div>
    <strong class="h6 d-block mb-2">Feature one</strong>
    <p>We're made of star stuff. We are a way for the cosmos to know itself.</p>
   </div>
  </a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#FeatureTwo">
   <span class="fabrx-icon">
    <svg data-name="Icon/Arrows/Chevron/Forward" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
     <path data-name="Icon Color" d="M2.182,24,0,21.818,9.818,12,0,2.182,2.182,0l12,12Z" transform="translate(5)" fill="#3f3b3b"></path>
    </svg>
   </span>
   <div>
    <strong class="h6 d-block mb-2">Feature two</strong>
    <p>We're made of star stuff. We are a way for the cosmos to know itself.</p>
   </div>
  </a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#FeatureThree">
   <span class="fabrx-icon">
    <svg data-name="Icon/Arrows/Chevron/Forward" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
     <path data-name="Icon Color" d="M2.182,24,0,21.818,9.818,12,0,2.182,2.182,0l12,12Z" transform="translate(5)" fill="#3f3b3b"></path>
    </svg>
   </span>
   <div>
    <strong class="h6 d-block mb-2">Feature three</strong>
     <p>We're made of star stuff. We are a way for the cosmos to know itself.</p>
   </div>
  </a>
 </li>
</ul>

Vertical Features Tabs

<ul class="nav nav-tabs nav-tabs-line nav-tags-stack flex-column">
 <li class="nav-item">
  <a class="nav-link active" data-bs-toggle="tab" href="#FeatureOne">
   <span class="fabrx-icon">
    <svg data-name="Icon/Arrows/Chevron/Forward" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
     <path data-name="Icon Color" d="M2.182,24,0,21.818,9.818,12,0,2.182,2.182,0l12,12Z" transform="translate(5)" fill="#3f3b3b"></path>
    </svg>
   </span>
   <div>
    <strong class="h6 d-block mb-2">Feature one</strong>
    <p>We're made of star stuff. We are a way for the cosmos to know itself.</p>
   </div>
  </a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#FeatureTwo">
   <span class="fabrx-icon">
    <svg data-name="Icon/Arrows/Chevron/Forward" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
     <path data-name="Icon Color" d="M2.182,24,0,21.818,9.818,12,0,2.182,2.182,0l12,12Z" transform="translate(5)" fill="#3f3b3b"></path>
    </svg>
   </span>
   <div>
    <strong class="h6 d-block mb-2">Feature two</strong>
    <p>We're made of star stuff. We are a way for the cosmos to know itself.</p>
   </div>
  </a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#FeatureThree">
   <span class="fabrx-icon">
    <svg data-name="Icon/Arrows/Chevron/Forward" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
     <path data-name="Icon Color" d="M2.182,24,0,21.818,9.818,12,0,2.182,2.182,0l12,12Z" transform="translate(5)" fill="#3f3b3b"></path>
    </svg>
   </span>
   <div>
    <strong class="h6 d-block mb-2">Feature three</strong>
     <p>We're made of star stuff. We are a way for the cosmos to know itself.</p>
   </div>
  </a>
 </li>
</ul>

Tree menu

<ul class="nav nav-tabs nav-tabs-line nav-tags-stack flex-column font-size-16 nav-tabs-children">
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#Components">Components</a>
  <ul class="nav nav-tabs nav-tabs-line nav-tags-stack flex-column">
   <li>
    <a class="nav-link" data-bs-toggle="tab" href="#Toasts">Toasts</a>
   </li>
   <li>
    <a class="nav-link" data-bs-toggle="tab" href="#FormElements">Form Elements</a>
   </li>
   <li>
    <a class="nav-link active" data-bs-toggle="tab" href="#Dropdowns">Dropdowns</a>
   </li>
   <li>
    <a class="nav-link" data-bs-toggle="tab" href="#Toggles">Toggles</a>
   </li>
  </ul>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#Colors">Colors</a>
 </li>
 <li class="nav-item">
  <a class="nav-link active" data-bs-toggle="tab" href="#Styleguide">Style guide</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#Sliders">Sliders</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-bs-toggle="tab" href="#Datepickers">Date pickers</a>
 </li>
</ul>

We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".

<nav aria-label="Page navigation">
 <ul class="pagination">
  <li class="page-item"><a class="page-link primary-page-item" href="#0">First</a></li>
  <li class="page-item active"><a class="page-link" href="#0">1</a></li>
  <li class="page-item"><a class="page-link" href="#0">2</a></li>
  <li class="page-item"><a class="page-link" href="#0">3</a></li>
  <li class="page-item"><a class="page-link" href="#0">4</a></li>
  <li class="page-item"><a class="page-link primary-page-item" href="#0">Last</a></li>
 </ul>
</nav>

<nav aria-label="Page navigation" class="fabrx-pagination">
 <a class="page-link primary-page-item" href="#0">First</a>
 <ul class="pagination mb-0">
  <li class="page-item">
   <a class="page-link" href="#0">
    <svg xmlns="http://www.w3.org/2000/svg" width="7.2" height="12.444" viewBox="0 0 7.2 12.444">
      <path data-name="Previous Icon" d="M7.2,6.222a.763.763,0,0,0-.238-.547L1.363.231A.807.807,0,0,0,.8,0,.8.8,0,0,0,0,.778V11.667a.8.8,0,0,0,.8.778.807.807,0,0,0,.563-.231l5.6-5.444A.763.763,0,0,0,7.2,6.222Z" transform="translate(7.2 12.444) rotate(-180)" fill="#0d6efd"></path>
    </svg>
   </a>
  </li>
  <li class="page-item active"><a class="page-link" href="#0">6</a></li>
  <li class="page-item"><a class="page-link" href="#0">10</a></li>
  <li class="page-item"><a class="page-link" href="#0">11</a></li>
  <li class="page-item"><a class="page-link" href="#0">...</a></li>
  <li class="page-item"><a class="page-link" href="#0">22</a></li>
  <li class="page-item"><a class="page-link" href="#0">23</a></li>
  <li class="page-item">
   <a class="page-link" href="#0">
    <svg xmlns="http://www.w3.org/2000/svg" width="7.2" height="12.444" viewBox="0 0 7.2 12.444">
      <path data-name="Next Icon" d="M-7.2,6.222a.763.763,0,0,1,.238-.547l5.6-5.444A.807.807,0,0,1-.8,0,.8.8,0,0,1,0,.778V11.667a.8.8,0,0,1-.8.778.807.807,0,0,1-.563-.231l-5.6-5.444A.763.763,0,0,1-7.2,6.222Z" transform="translate(0 12.444) rotate(-180)" fill="#0d6efd"></path>
    </svg>
   </a>
  </li>
 </ul>
 <a class="page-link primary-page-item" href="#0">Last</a>
</nav>

Custom Pagination

Rows Page of 366

<div class="fabrix-custom-pagination">
 <label class="me-2 mb-0">Rows</label>
 <select class="custom-select custom-select-sm">
  <option selected="">10</option>
  <option value="1">11</option>
  <option value="2">12</option>
  <option value="3">13</option>
 </select>
 <label class="mx-2 mb-0">Page</label>
 <input type="text" value="1" class="form-control form-control-sm">
 <small class="ms-2 text-nowrap">of 366</small>
</div>

Working with icons

Be sure to provide proper screen reader support with aria attributes

<nav aria-label="Page navigation" class="pagination-default">
 <ul class="pagination mb-0">
  <li class="page-item">
   <a class="page-link" href="#0">
    <svg data-name="Icon Left" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
      <path data-name="Icon Color" d="M.376,3.75a.375.375,0,0,1-.3-.6L.111,3.11l3-3A.375.375,0,0,1,3.6.073L3.641.11,6.657,3.128l.02.024.029.046.015.031.016.046.01.049,0,.025V3.4l0,.025-.01.049-.016.046-.015.032L6.675,3.6a.386.386,0,0,1-.045.051L6.6,3.677l-.046.029-.031.015-.046.016-.049.01H6.414l-.013,0Zm3-2.844h0L1.281,3H5.47L3.376.906Z" transform="translate(4.124 9.375) rotate(-90)" fill="#212121"></path>
    </svg>
   </a>
  </li>
  <li class="page-item"><a class="page-link" href="#0">10</a></li>
  <li class="page-item">
   <a class="page-link" href="#0">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
      <g data-name="Right Icon" transform="translate(12 12) rotate(-180)">
        <path data-name="Icon Color" d="M6.376,0h-6A.367.367,0,0,0,.04.209.371.371,0,0,0,.076.6L.111.64l3,3a.375.375,0,0,0,.488.036l.042-.036L6.657.622,6.677.6,6.706.552,6.721.521,6.737.475l.01-.049L6.75.4V.349l0-.025L6.737.275,6.721.229,6.706.2,6.675.149A.386.386,0,0,0,6.629.1L6.6.073,6.553.045,6.522.029,6.475.013,6.426,0,6.4,0Zm-3,2.844h0L1.281.75H5.47L3.376,2.844Z" transform="translate(7.875 2.625) rotate(90)" fill="#212121"></path>
      </g>
    </svg>
   </a>
  </li>
 </ul>
</nav>

<nav aria-label="Page navigation" class="pagination-default">
 <ul class="pagination mb-0">
  <li class="page-item">
   <a class="page-link" href="#0">
    <svg data-name="Icon Left" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
      <path data-name="Icon Color" d="M.376,3.75a.375.375,0,0,1-.3-.6L.111,3.11l3-3A.375.375,0,0,1,3.6.073L3.641.11,6.657,3.128l.02.024.029.046.015.031.016.046.01.049,0,.025V3.4l0,.025-.01.049-.016.046-.015.032L6.675,3.6a.386.386,0,0,1-.045.051L6.6,3.677l-.046.029-.031.015-.046.016-.049.01H6.414l-.013,0Zm3-2.844h0L1.281,3H5.47L3.376.906Z" transform="translate(4.124 9.375) rotate(-90)" fill="#212121"></path>
    </svg>
   </a>
  </li>
  <li class="page-item">
   <a class="page-link" href="#0">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
      <g data-name="Right Icon" transform="translate(12 12) rotate(-180)">
        <path data-name="Icon Color" d="M6.376,0h-6A.367.367,0,0,0,.04.209.371.371,0,0,0,.076.6L.111.64l3,3a.375.375,0,0,0,.488.036l.042-.036L6.657.622,6.677.6,6.706.552,6.721.521,6.737.475l.01-.049L6.75.4V.349l0-.025L6.737.275,6.721.229,6.706.2,6.675.149A.386.386,0,0,0,6.629.1L6.6.073,6.553.045,6.522.029,6.475.013,6.426,0,6.4,0Zm-3,2.844h0L1.281.75H5.47L3.376,2.844Z" transform="translate(7.875 2.625) rotate(90)" fill="#212121"></path>
      </g>
    </svg>
   </a>
  </li>
 </ul>
</nav>

Pricing Tables

Examples

Free

$0 /month

Single domain
Single domain
Single domain
Single domain
Single domain
Single domain

<div class="card rounded-12 shadow-60 border border-gray-200">
 <div class="card-body p-5">
  <div class="plan-heading">
    <h5 class="mb-0">Free</h5>
    <div class="plan-price"><span class="h5 text-primary font-weight-bold">$0</span>  /month</div>
  </div>
  <ul class="fabrx-checks py-4 mt-3 mb-4">
    <li>Single domain</li>
    <li>Single domain</li>
    <li>Single domain</li>
    <li>Single domain</li>
    <li>Single domain</li>
    <li>Single domain</li>
  </ul>
  <div class="pt-1 text-center"><a href="#0" class="btn btn-lg btn-primary">Subscribe</a></div>
 </div>
</div>

Starter

$20 /mo

Single domain
Single domain
Single domain
Single domain
Single domain
Single domain

<div class="card rounded-12 shadow-20 border border-gray-200">
 <div class="card-body p-0">
  <div class="plan-heading p-5 bg-gray-100 border-bottom rounded-top border-gray-300">
    <div class="text-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="36" height="35" viewBox="0 0 36 35">
        <path data-name="Icon Color" d="M7.125,28.437a4.077,4.077,0,0,1-4.118-3.766L3,24.428V15.312H2.624A2.592,2.592,0,0,1,0,12.761V9.843A2.592,2.592,0,0,1,2.624,7.292H3.766A4.623,4.623,0,0,1,3,4.74,4.8,4.8,0,0,1,7.856,0c2.666-.046,5.037,1.763,6.58,4.7l.188.377.018-.033C16.118,2.022,18.441.1,21.071,0l.3,0A4.807,4.807,0,0,1,26.249,4.74a4.624,4.624,0,0,1-.766,2.551h1.141A2.593,2.593,0,0,1,29.25,9.843v2.918a2.593,2.593,0,0,1-2.626,2.552h-.375v9.115a4.061,4.061,0,0,1-3.873,4l-.251.007Zm15-2.187a1.858,1.858,0,0,0,1.866-1.637L24,24.428V15.312H15.75V26.251ZM5.25,24.428A1.842,1.842,0,0,0,6.934,26.24l.192.011H13.5V15.312H5.25Zm21.375-11.3A.37.37,0,0,0,27,12.761V9.843a.37.37,0,0,0-.375-.364H15.75v3.645ZM2.25,9.843v2.918a.369.369,0,0,0,.374.364H13.5V9.48H2.624A.369.369,0,0,0,2.25,9.843ZM21.375,7.292A2.589,2.589,0,0,0,24,4.74a2.6,2.6,0,0,0-2.645-2.553c-2.059-.035-4.094,1.9-5.232,5.1Zm-8.248,0c-1.138-3.207-3.176-5.139-5.252-5.1A2.589,2.589,0,0,0,5.25,4.74,2.584,2.584,0,0,0,7.66,7.284l.215.008Z" transform="translate(3.375 3.281)" fill="#212121"></path>
      </svg>
      <span class="d-block font-size-14 pt-1">Starter</span>
    </div>
    <div class="plan-price"><span class="h3 font-weight-bold">$20</span> <span class="h6 font-weight-regular">/mo</span></div>
  </div>
  <ul class="fabrx-checks py-4 px-5 mb-0">
    <li>Single domain</li>
    <li>Single domain</li>
    <li>Single domain</li>
    <li>Single domain</li>
    <li>Single domain</li>
    <li>Single domain</li>
  </ul>
  <div class="pt-1 pb-5 text-center"><a href="#0" class="btn btn-lg btn-primary">Subscribe</a></div>
 </div>
</div>

Team License

The carbon in our apple pies with pretty stories for which there's little good evidence

$56

<div class="card rounded-12 shadow-40 h-auto team-pricing">
 <div class="card-body p-5 text-center">
  <h5 class="mb-4">Team License</h5>
  <p>The carbon in our apple pies with pretty stories for which there's little good evidence </p>
  <span class="h2 d-block pt-2 font-weight-bold">$56</span>
  <div class="pt-2 d-grid"><a href="#0" class="btn btn-xl btn-primary">Subscribe</a></div>
 </div>
</div>

Personal

^$20 /mo

Feature
Feature
Feature

<div class="card rounded-0 border-start">
 <div class="card-body px-4 py-5 text-center">
  <h6 class="mb-2 font-weight-normal mt-4">Personal</h6>
  <div class="plan-price d-flex align-items-center justify-content-center"><span class="h2 font-weight-bold"><sup>$</sup>20</span> <span class="h6 ms-2">/mo</span></div>
  <ul class="py-3 fabrx-lines">
   <li>Feature</li>
   <li>
    <svg data-name="Icon/Check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <path data-name="Icon Color" d="M10.146.146A.5.5,0,0,1,10.9.8l-.048.056L4.187,7.52a.5.5,0,0,1-.651.048L3.48,7.52.146,4.187A.5.5,0,0,1,.8,3.431l.056.048,2.98,2.98Z" transform="translate(2.833 4.167)" fill="#212121"></path>
    </svg>
   </li>
   <li>
    <svg data-name="Icon/Check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <path data-name="Icon Color" d="M10.146.146A.5.5,0,0,1,10.9.8l-.048.056L4.187,7.52a.5.5,0,0,1-.651.048L3.48,7.52.146,4.187A.5.5,0,0,1,.8,3.431l.056.048,2.98,2.98Z" transform="translate(2.833 4.167)" fill="#212121"></path>
    </svg>
   </li>
   <li>
    <svg data-name="Icon/Check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <path data-name="Icon Color" d="M10.146.146A.5.5,0,0,1,10.9.8l-.048.056L4.187,7.52a.5.5,0,0,1-.651.048L3.48,7.52.146,4.187A.5.5,0,0,1,.8,3.431l.056.048,2.98,2.98Z" transform="translate(2.833 4.167)" fill="#212121"></path>
    </svg>
   </li>
   <li>Feature</li>
   <li>Feature</li>
  </ul>
  <div class="pb-5"><a href="#0" class="btn btn-lg btn-primary">Subscribe</a></div>
 </div>
</div>

Starter

^$10 /mo

Single domain
Single domain
Single domain
Single domain
Single domain
Single domain

<div class="card rounded-12 shadow-60">
 <div class="card-body p-5">
  <h6 class="mb-4 font-weight-normal">Starter</h6>
  <div class="plan-price d-flex align-items-center"><span class="h1 font-weight-bold"><sup>$</sup>10</span> <span class="h6 ms-2">/mo</span></div>
  <ul class="fabrx-checks py-4">
   <li>Single domain</li>
   <li>Single domain</li>
   <li>Single domain</li>
   <li>Single domain</li>
   <li>Single domain</li>
   <li>Single domain</li>
  </ul>
  <div class="pt-3 text-center"><a href="#0" class="btn btn-lg btn-primary">Subscribe</a></div>
 </div>
</div>

Personal

$10

Single domain
Single domain
Single domain
Single domain

Single domain
Single domain
Single domain
Single domain

<div class="card rounded-0">
 <div class="card-body p-5">
  <div class="row align-items-center">
   <div class="col-xl-3 col-md-4">
    <div class="has-vertical-line py-4">
     <h6 class="mb-2 mb-md-4 font-weight-normal">Personal</h6>
     <div class="plan-price d-flex align-items-center"><span class="h2 font-weight-bold">$10</span></div>
    </div>
   </div>
   <div class="col-xl-6 col-md-8">
    <div class="row">
     <div class="col-sm-6">
      <ul class="fabrx-checks ps-md-4">
       <li>Single domain</li>
       <li>Single domain</li>
       <li>Single domain</li>
       <li>Single domain</li>
      </ul>
     </div>
     <div class="col-sm-6">
      <ul class="fabrx-checks ps-md-4">
       <li>Single domain</li>
       <li>Single domain</li>
       <li>Single domain</li>
       <li>Single domain</li>
      </ul>
     </div>
    </div>
   </div>
   <div class="col-xl-3 col-md-12 pt-3 text-center"><a href="#0" class="btn btn-xl btn-primary">Subscribe</a></div>
  </div>
 </div>
</div>

Table Rows

Our Tables are designed to be opt-in due to the widespread use of tables across third-party widgets like calendars and date pickers.

Keep reading some BootstrapVue Tables examples to see how these tables work.

Example

Marilyn Medina Managing Director

25/8/2020

Offline

Columbus

$1,338.76

<div class="table-responsive-md">
  <table class="table fabrx-table">
    <tbody>
      <tr>
        <td>
          <div class="d-flex align-items-center ps-lg-5 ps-2">
            <div class="form-check form-check-rounded">
              <input type="checkbox" class="form-check-input" id="TableCheckbox">
            </div>
            <div class="ps-lg-4 ps-1">
              <strong class="d-block text-dark font-size-14 font-weight-semibold">Marilyn Medina</strong>
              <small class="text-secondary">Managing Director</small>
            </div>
          </div>
        </td>
        <td>25/8/2020</td>
        <td><span class="fabrx-status status-no-border me-2"></span> Offline</td>
        <td>Columbus</td>
        <td>$1,338.76</td>
        <td>
          <div class="dropdown">
            <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action10">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <g data-name="Cell 06" transform="translate(0 -0.308)">
                  <g transform="translate(0 0.308)">
                    <path data-name="Icon Color" d="M14,1.75A1.75,1.75,0,1,1,15.75,3.5,1.751,1.751,0,0,1,14,1.75Zm1.5,0A.25.25,0,1,0,15.75,1.5.25.25,0,0,0,15.5,1.75ZM7,1.75A1.75,1.75,0,1,1,8.75,3.5,1.751,1.751,0,0,1,7,1.75Zm1.5,0A.25.25,0,1,0,8.75,1.5.25.25,0,0,0,8.5,1.75ZM0,1.75A1.75,1.75,0,1,1,1.75,3.5,1.751,1.751,0,0,1,0,1.75Zm1.5,0A.25.25,0,1,0,1.75,1.5.25.25,0,0,0,1.5,1.75Z" transform="translate(3.25 10.25)" fill="#212121"></path>
                  </g>
                </g>
              </svg>
            </a>
            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action10">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Charles Davies Managing Director

85%

5.4

$85 / Hour

Button

<div class="table-responsive-md">
 <table class="table fabrx-table">
  <tbody>
    <tr>
      <td>
        <div class="d-flex align-items-center ps-lg-5 ps-2">
          <a href="#0" class="fabrx-avatar fabrx-status dnd md"><img src="../assets/images/avatars/avatar-1.png" alt="Avatar"></a>
          <div class="ps-3">
            <strong class="d-block text-dark font-size-14 font-weight-semibold">Charles Davies</strong>
            <small class="text-secondary">Managing Director</small>
          </div>
        </div>
      </td>
      <td>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
        <g data-name="Icon">
          <path data-name="Icon Color" d="M.2,7.568.147,7.52A.5.5,0,0,1,.1,6.869l.049-.056,4-4A.5.5,0,0,1,4.8,2.765l.056.049L7.167,5.126,11.293,1H7.834a.5.5,0,0,1-.5-.433l0-.068A.5.5,0,0,1,7.765,0l.068,0H12.5a.5.5,0,0,1,.165.028h0l.007,0,.005,0h0a.5.5,0,0,1,.268.247h0l0,.008,0,0,0,0A.5.5,0,0,1,13,.432v0a.5.5,0,0,1,0,.058V5.167a.5.5,0,0,1-1,.068l0-.068V1.708L7.521,6.187a.5.5,0,0,1-.651.049l-.056-.049L4.5,3.874.854,7.52A.5.5,0,0,1,.2,7.568Z" transform="translate(1.5 4.167)" fill="#212121"></path>
        </g>
      </svg>
      <span class="ps-1">85%</span></td>
      <td>
        <div class="fabrx-table-star">
          <svg class="vertical-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
            <g data-name="Icon/Star Fill" transform="translate(0)">
              <path data-name="Icon Color" d="M17.434,23.738,12.109,20.25a.169.169,0,0,0-.187,0L6.6,23.738A2.066,2.066,0,0,1,5.659,24a1.6,1.6,0,0,1-1.313-.638,1.526,1.526,0,0,1-.3-1.425l1.5-6.563c0-.075,0-.149-.076-.187L.559,10.762a1.786,1.786,0,0,1-.488-1.8A1.655,1.655,0,0,1,1.534,7.837L7.871,7.35c.075,0,.112-.038.15-.113l2.363-6.151A1.743,1.743,0,0,1,12,0a1.656,1.656,0,0,1,1.575,1.087l2.363,6.151c.038.075.076.113.15.113l6.338.487a1.667,1.667,0,0,1,.975,2.925l-4.912,4.425a.286.286,0,0,0-.076.187l1.538,6.563a1.762,1.762,0,0,1-.3,1.425A1.649,1.649,0,0,1,18.334,24,1.8,1.8,0,0,1,17.434,23.738Z" fill="#FF9138"></path>
            </g>
          </svg>
          <span class="text-warning font-weight-semibold small">5.4</span>
        </div>
      </td>
      <td>$85 / Hour</td>
      <td>
        <a href="#0" class="btn btn-primary btn-sm">Button</a>
      </td>
    </tr>
  </tbody>
 </table>
</div>

Ivan Polo

25/8/2020

Online

Columbus

$911.35

<div class="table-responsive-md">
 <table class="table table-has-noborder table-md">
  <tbody>
   <tr>
    <td>
     <span class="font-size-14 text-dark ps-lg-5 ps-2">Ivan Polo</span>
    </td>
    <td>25/8/2020</td>
    <td>Online</td>
    <td>Columbus</td>
    <td>$911.35</td>
    <td>
     <div class="dropdown">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action10">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <g data-name="Cell 06" transform="translate(0 -0.308)">
            <g transform="translate(0 0.308)">
              <path data-name="Icon Color" d="M14,1.75A1.75,1.75,0,1,1,15.75,3.5,1.751,1.751,0,0,1,14,1.75Zm1.5,0A.25.25,0,1,0,15.75,1.5.25.25,0,0,0,15.5,1.75ZM7,1.75A1.75,1.75,0,1,1,8.75,3.5,1.751,1.751,0,0,1,7,1.75Zm1.5,0A.25.25,0,1,0,8.75,1.5.25.25,0,0,0,8.5,1.75ZM0,1.75A1.75,1.75,0,1,1,1.75,3.5,1.751,1.751,0,0,1,0,1.75Zm1.5,0A.25.25,0,1,0,1.75,1.5.25.25,0,0,0,1.5,1.75Z" transform="translate(3.25 10.25)" fill="#212121"></path>
            </g>
          </g>
        </svg>
      </a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action10">
       <a class="dropdown-item" href="#0">Action</a>
       <a class="dropdown-item" href="#0">Another action</a>
       <a class="dropdown-item" href="#0">Something else here</a>
      </div>
     </div>
    </td>
   </tr>
  </tbody>
 </table>
</div>

Table Filter

Name	Date	Date	Date	Date

<div class="table-responsive-md">
 <table class="table table-lg">
  <thead>
    <tr>
      <th>
        <div class="d-flex align-items-center ps-lg-5 ps-2">
          <div class="form-check form-check-sm form-check-rounded">
            <input type="checkbox" class="form-check-input" id="TableCheckboxa2">
          </div>
          <span class="ps-3 font-weight-semibold">Name</span>
        </div>
      </th>
      <th>
        <span class="font-weight-semibold">Date</span>
        <a href="#0" class="ms-1">
          <svg data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
            <path data-name="Icon Color" d="M5.844,3.437H.344A.344.344,0,0,1,.07,2.886L.1,2.851,2.851.1A.344.344,0,0,1,3.3.067L3.338.1,6.1,2.867l.018.022.027.042.014.029L6.176,3l.009.045,0,.023v.048l0,.023-.009.045-.015.042-.014.029L6.119,3.3a.354.354,0,0,1-.042.047l-.028.023L6.007,3.4l-.028.014-.042.015-.045.009-.023,0ZM3.095.83h0L1.174,2.75h3.84L3.095.83Z" transform="translate(8.594 7.219) rotate(180)" fill="#212121"></path>
          </svg>
        </a>
      </th>
      <th>
        <span class="font-weight-semibold">Date</span>
        <a href="#0" class="ms-1">
          <svg data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
            <path data-name="Icon Color" d="M5.844,3.437H.344A.344.344,0,0,1,.07,2.886L.1,2.851,2.851.1A.344.344,0,0,1,3.3.067L3.338.1,6.1,2.867l.018.022.027.042.014.029L6.176,3l.009.045,0,.023v.048l0,.023-.009.045-.015.042-.014.029L6.119,3.3a.354.354,0,0,1-.042.047l-.028.023L6.007,3.4l-.028.014-.042.015-.045.009-.023,0ZM3.095.83h0L1.174,2.75h3.84L3.095.83Z" transform="translate(8.594 7.219) rotate(180)" fill="#212121"></path>
          </svg>
        </a>
      </th>
      <th>
        <span class="font-weight-semibold">Date</span>
        <a href="#0" class="ms-1">
          <svg data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
            <path data-name="Icon Color" d="M5.844,3.437H.344A.344.344,0,0,1,.07,2.886L.1,2.851,2.851.1A.344.344,0,0,1,3.3.067L3.338.1,6.1,2.867l.018.022.027.042.014.029L6.176,3l.009.045,0,.023v.048l0,.023-.009.045-.015.042-.014.029L6.119,3.3a.354.354,0,0,1-.042.047l-.028.023L6.007,3.4l-.028.014-.042.015-.045.009-.023,0ZM3.095.83h0L1.174,2.75h3.84L3.095.83Z" transform="translate(8.594 7.219) rotate(180)" fill="#212121"></path>
          </svg>
        </a>
      </th>
      <th>
        <span class="font-weight-semibold">Date</span>
        <a href="#0" class="ms-1">
          <svg data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
            <path data-name="Icon Color" d="M5.844,3.437H.344A.344.344,0,0,1,.07,2.886L.1,2.851,2.851.1A.344.344,0,0,1,3.3.067L3.338.1,6.1,2.867l.018.022.027.042.014.029L6.176,3l.009.045,0,.023v.048l0,.023-.009.045-.015.042-.014.029L6.119,3.3a.354.354,0,0,1-.042.047l-.028.023L6.007,3.4l-.028.014-.042.015-.045.009-.023,0ZM3.095.83h0L1.174,2.75h3.84L3.095.83Z" transform="translate(8.594 7.219) rotate(180)" fill="#212121"></path>
          </svg>
        </a>
      </th>
    </tr>
  </thead>
 </table>
</div>

Images

Examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.

Example

<img src="assets/images/placeholders/placeholder-19.jpg" alt="Sharp" class="rounded-0">

Image Rounded

In addition to our border-radius utilities, you can use .rounded-3, .rounded-6 and .rounded-12 for this result.

<img src="assets/images/placeholders/placeholder-19.jpg" alt="3px" class="rounded-3">
<img src="assets/images/placeholders/placeholder-19.jpg" alt="6px" class="rounded-6">
<img src="assets/images/placeholders/placeholder-19.jpg" alt="12px" class="rounded-12">

Use .rounded-24 and .rounded-40 for this result.

<img src="assets/images/placeholders/placeholder-19.jpg" alt="24px" class="rounded-24">
<img src="assets/images/placeholders/placeholder-19.jpg" alt="40px" class="rounded-40">

Use .rounded-top and .rounded-bottom for this result.

<img src="assets/images/placeholders/placeholder-19.jpg" alt="Top Rounded" class="rounded-top">
<img src="assets/images/placeholders/placeholder-19.jpg" alt="Bottom Rounded" class="rounded-bottom">

Use .rounded-left and .rounded-right for this result.

<img src="assets/images/placeholders/placeholder-19.jpg" alt="Left Rounded" class="rounded-left">
<img src="assets/images/placeholders/placeholder-19.jpg" alt="Right Rounded" class="rounded-right">

Use .rounded-circle for this result.

<img src="assets/images/placeholders/placeholder-19.jpg" alt="Circle" class="rounded-circle">

Various

Social Media Icons

<div class="fabrx-social">
  <a href="#0">
    <svg data-name="Social 01" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path data-name="Icon Color" d="M7.75,19.5h-4a.752.752,0,0,1-.743-.649L3,18.75V12.5H.75a.752.752,0,0,1-.743-.648L0,11.75v-4a.753.753,0,0,1,.648-.743L.75,7H3V5.75A5.749,5.749,0,0,1,8.529,0l.22,0h3a.752.752,0,0,1,.743.648l.007.1v4a.753.753,0,0,1-.648.743l-.1.006h-3a.249.249,0,0,0-.243.193L8.5,5.75V7H11.75a.749.749,0,0,1,.744.837l-.017.095-1,4a.747.747,0,0,1-.615.559l-.113.009H8.5v6.25a.752.752,0,0,1-.648.743ZM1.5,8.5V11H3.75a.752.752,0,0,1,.742.648l.007.1V18H7V11.75a.752.752,0,0,1,.648-.743L7.75,11h2.414l.626-2.5H7.75a.753.753,0,0,1-.743-.648L7,7.75v-2A1.758,1.758,0,0,1,8.607,4.006L8.75,4H11V1.5H8.75A4.244,4.244,0,0,0,4.5,5.544l0,.206v2a.752.752,0,0,1-.648.743l-.1.006Z" transform="translate(6.25 2.25)" fill="#212121"></path>
    </svg>
  </a>
  <a href="#0">
    <svg data-name="Social 02" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path data-name="Icon Color" d="M4.75,17.5A4.755,4.755,0,0,1,0,12.75v-8A4.756,4.756,0,0,1,4.75,0h8A4.755,4.755,0,0,1,17.5,4.75v8A4.754,4.754,0,0,1,12.75,17.5ZM1.5,4.75v8A3.254,3.254,0,0,0,4.75,16h8A3.254,3.254,0,0,0,16,12.75v-8A3.254,3.254,0,0,0,12.75,1.5h-8A3.254,3.254,0,0,0,1.5,4.75Zm3.5,4A3.75,3.75,0,1,1,8.751,12.5,3.754,3.754,0,0,1,5,8.751Zm1.5,0A2.25,2.25,0,1,0,8.751,6.5,2.253,2.253,0,0,0,6.5,8.751Zm6.006-4.4-.006-.1a.75.75,0,0,1,1.493-.1l.007.1a.75.75,0,0,1-1.494.1Z" transform="translate(3.25 3.25)" fill="#212121"></path>
    </svg>
  </a>
  <a href="#0">
    <svg data-name="Social 03" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path data-name="Icon Color" d="M7.792,17.532a15.637,15.637,0,0,1-7.4-2.021A.75.75,0,0,1,.747,14.1H.781c.1,0,.2.006.3.006a8.114,8.114,0,0,0,3.951-1.091l.173-.1-.266-.154A7.578,7.578,0,0,1,1,7.093L.966,6.828a9.756,9.756,0,0,1,.992-5.071l.048-.1L2.1,1.485a.75.75,0,0,1,1.264-.069A8.619,8.619,0,0,0,9.821,5.082L10,5.091l0-.447A4.66,4.66,0,0,1,12.9.5l.208-.084A6.064,6.064,0,0,1,15.23,0a4,4,0,0,1,2.617.9l.122.107.572-.157.479-.137L19.395.6l.438-.156c.212-.082.405-.165.59-.256l.111-.044.106-.024.112-.008a.724.724,0,0,1,.611.309.782.782,0,0,1,.1.7l-.006.013-.022.086a9.975,9.975,0,0,1-.519,1.3l-.125.265-.283.575-.454.886-.355.707s0,0-.006-.014l-.005-.066,0,.49a14.619,14.619,0,0,1-.519,3.46,11.733,11.733,0,0,1-8.164,8.259A11.488,11.488,0,0,1,7.792,17.532ZM2.943,3.278l-.086.249a7.954,7.954,0,0,0-.418,2.835l.022.33c.221,2.432,1.723,4.222,4.592,5.473a.75.75,0,0,1,.116,1.311,13.617,13.617,0,0,1-3.4,1.715l-.252.075.441.147a12.766,12.766,0,0,0,3.835.619,10.107,10.107,0,0,0,2.478-.3l.308-.084a10.26,10.26,0,0,0,7.138-7.221,13.1,13.1,0,0,0,.47-3.548V4.82a1.1,1.1,0,0,1,.131-.459l.1-.209.83-1.625.177-.365-.29.084-1.17.327a.752.752,0,0,1-.774-.222A2.52,2.52,0,0,0,15.219,1.5a4.558,4.558,0,0,0-1.584.317A3.192,3.192,0,0,0,11.5,4.853v1a.746.746,0,0,1-.731.75c-.092,0-.186,0-.278,0A10.1,10.1,0,0,1,2.979,3.319Z" transform="translate(1.248 3.147)" fill="#212121"></path>
    </svg>
  </a>
  <a href="#0">
    <svg data-name="Social 04" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path data-name="Icon Color" d="M0,9.75a9.75,9.75,0,1,1,14.714,8.39.746.746,0,0,1-.183.106A9.747,9.747,0,0,1,0,9.75ZM9.75,18a8.2,8.2,0,0,0,3.705-.88,23.114,23.114,0,0,0-1.164-5.3A14.414,14.414,0,0,0,6.384,15.58l-.469.462-.637.638A8.2,8.2,0,0,0,9.75,18Zm5.109-1.777A8.256,8.256,0,0,0,17.89,11.1a22.718,22.718,0,0,0-4.137.357A24.236,24.236,0,0,1,14.859,16.223ZM1.5,9.75a8.23,8.23,0,0,0,2.591,6l.992-.994a16.278,16.278,0,0,1,6.663-4.337,25.2,25.2,0,0,0-1.278-2.56,25.353,25.353,0,0,1-8.952,1.39C1.505,9.413,1.5,9.581,1.5,9.75Zm11.713.286A23.933,23.933,0,0,1,18,9.6a8.212,8.212,0,0,0-1.881-5.088,22.04,22.04,0,0,1-4.264,2.752A26.38,26.38,0,0,1,13.213,10.035ZM1.747,7.743a23.953,23.953,0,0,0,7.929-1.2A45.2,45.2,0,0,0,6.466,2.182,8.285,8.285,0,0,0,1.747,7.743Zm9.334-1.779a20.162,20.162,0,0,0,3.974-2.526A8.248,8.248,0,0,0,8,1.688,44.545,44.545,0,0,1,11.082,5.964Z" transform="translate(2.25 2.25)" fill="#212121"></path>
    </svg>
  </a>
</div>

Indicators

<span class="fabrx-status online lg"> </span>
<span class="fabrx-status away lg"> </span>
<span class="fabrx-status dnd lg"> </span>
<span class="fabrx-status lg"> </span>

Tooltips

Custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Example: Enable tooltips everywhere

One way to initialize all tooltips on a page would be to select them by their data-bs-toggle attribute:

$(function () {
  $('[data-bs-toggle="tooltip"]').tooltip()
})

Examples

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left

<a href="#0" class="btn btn-primary m-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</a>
<a href="#0" class="btn btn-danger m-2" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</a>
<a href="#0" class="btn btn-success m-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a>
<a href="#0" class="btn btn-warning m-2" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</a>

And with custom HTML added:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Usage

The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.

Trigger the tooltip via JavaScript:

$('#example').tooltip(options)

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0", and override the pointer-events on the disabled element.

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
 <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Name	Type	Default	Description
animation	boolean	true	Apply a CSS fade transition to the tooltip
container	string \| element \| false	false	Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.
delay	number \| object	0	Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: `delay: { "show": 500, "hide": 100 }`
html	boolean	false	Allow HTML in the tooltip. If true, HTML tags in the tooltip's `title` will be rendered in the tooltip. If false, jQuery's `text` method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement	string \| function	'top'	How to position the tooltip - auto \| top \| bottom \| left \| right. When `auto` is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the tooltip instance.
selector	string \| false	false	If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
template	string	`'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'`	Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`.
title	string \| element \| function	''	Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the tooltip is attached to.
trigger	string	'hover focus'	How tooltip is triggered - click \| hover \| focus \| manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')` and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.
offset	number \| string	0	Offset of the tooltip relative to its target. For more information refer to Popper.js's offset docs.
fallbackPlacement	string \| array	'flip'	Allow to specify which position Popper will use on fallback. For more information refer to Popper.js's behavior docs
boundary	string \| element	'scrollParent'	Overflow constraint boundary of the tooltip. Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.

Vector

A collection of SVG illustrations used Fabrx UI Kit Pro.

<img src="assets/images/vectors/vector-1.svg" alt="Vector">

<img src="assets/images/vectors/vector-2.svg" alt="Vector">

<img src="assets/images/vectors/vector-3.svg" alt="Vector">
<img src="assets/images/vectors/vector-4.svg" alt="Vector">

<img src="assets/images/vectors/vector-5.svg" alt="Vector">
<img src="assets/images/vectors/vector-6.svg" alt="Vector">
<img src="assets/images/vectors/vector-7.svg" alt="Vector">

<img src="assets/images/vectors/vector-8.svg" alt="Vector">
<img src="assets/images/vectors/vector-9.svg" alt="Vector">
<img src="assets/images/vectors/vector-10.svg" alt="Vector">

<img src="assets/images/vectors/vector-11.svg" alt="Vector">
<img src="assets/images/vectors/vector-12.svg" alt="Vector">
<img src="assets/images/vectors/vector-13.svg" alt="Vector">
<img src="assets/images/vectors/vector-14.svg" alt="Vector">

<img src="assets/images/vectors/vector-15.svg" alt="Vector">

Alerts and Toasts

Provide contextual feedback messages for typical user actions with the handful of flexible alert messages.

Examples

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.

Error message

<div class="alert alert-danger" role="alert">
 <span>Error message</span>
</div>

<div class="alert alert-success" role="alert">
 <span>Error message</span>
</div>

<div class="alert alert-warning" role="alert">
 <span>Error message</span>
</div>

Dismissing

Error message

<div class="alert alert-danger" role="alert">
 <span class="me-2">
  <svg xmlns="http://www.w3.org/2000/svg" width="16.002" height="14.667" viewBox="0 0 16.002 14.667">
   <g data-name="Icon Left" transform="translate(0.001 -0.667)">
    <path data-name="Icon Color" d="M14.909,14.666H1.092a1.073,1.073,0,0,1-.983-.448A1.117,1.117,0,0,1,.2,13.1L7.13.649A1.061,1.061,0,0,1,8,0a1.062,1.062,0,0,1,.871.649L15.8,13.1a1.116,1.116,0,0,1,.095,1.117A1.071,1.071,0,0,1,14.909,14.666Zm-6.91-4A1.333,1.333,0,1,0,9.333,12,1.335,1.335,0,0,0,8,10.666ZM8,4a1.225,1.225,0,0,0-.859.433,1.226,1.226,0,0,0-.354.9l.278,3.091A1.8,1.8,0,0,0,8.312,9.926.736.736,0,0,1,8,10h.794a1.6,1.6,0,0,1-.481-.074.946.946,0,0,0,.552-.716l.349-3.882a1.226,1.226,0,0,0-.354-.9A1.227,1.227,0,0,0,8,4Z" transform="translate(0 0.667)" fill="#fff"></path>
   </g>
  </svg>
 </span>
 <span>Error message</span>
 <a href="#0" class="ms-auto" data-bs-dismiss="alert" aria-label="Close">
  <svg data-name="Close Icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
    <path data-name="Icon Color" d="M12,1.057,10.943,0,6,4.925,1.057,0,0,1.057,4.925,6,0,10.943,1.057,12,6,7.075,10.943,12,12,10.943,7.075,6Z" fill="#fff"></path>
  </svg>
 </a>
</div>

<div class="alert alert-success" role="alert">
 <span class="me-2">
  <svg data-name="Icon/Check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
    <path data-name="Icon Color" d="M7.325,18.857,0,11.532,2.182,9.351l5.143,5.143L21.818,0,24,2.182Z" transform="translate(0 3)" fill="#fff"></path>
  </svg>
 </span>
 <span>Error message</span>
 <a href="#0" class="ms-auto" data-bs-dismiss="alert" aria-label="Close">
  <svg data-name="Close Icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
    <path data-name="Icon Color" d="M12,1.057,10.943,0,6,4.925,1.057,0,0,1.057,4.925,6,0,10.943,1.057,12,6,7.075,10.943,12,12,10.943,7.075,6Z" fill="#fff"></path>
  </svg>
 </a>
</div>

<div class="alert alert-warning" role="alert">
 <span class="me-2">
  <svg data-name="Icon/Alert Fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
   <path data-name="Icon Color" d="M12,24A12,12,0,0,1,3.515,3.515,12,12,0,1,1,20.485,20.485,11.922,11.922,0,0,1,12,24Zm-.082-8.159a1.776,1.776,0,1,0,1.89,1.772A1.836,1.836,0,0,0,11.918,15.842ZM11.918,5a1.928,1.928,0,0,0-1.356.684A1.929,1.929,0,0,0,10.009,7.1l.419,4.439a2.808,2.808,0,0,0,1.981,2.382,1.224,1.224,0,0,1-.467.114h1.13a2.81,2.81,0,0,1-.662-.114,1.508,1.508,0,0,0,.881-1.134L13.828,7.1a1.934,1.934,0,0,0-.554-1.416A1.931,1.931,0,0,0,11.918,5Z" fill="#3f3b3b"></path>
  </svg>
 </span>
 <span>Error message</span>
 <a href="#0" class="ms-auto" data-bs-dismiss="alert" aria-label="Close">
  <svg data-name="Close Icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
    <path data-name="Icon Color" d="M12,1.057,10.943,0,6,4.925,1.057,0,0,1.057,4.925,6,0,10.943,1.057,12,6,7.075,10.943,12,12,10.943,7.075,6Z" fill="#fff"></path>
  </svg>
 </a>
</div>

With Button

Error message Undo

<div class="alert alert-danger" role="alert">
 <span>Error message</span>
 <span class="ms-auto">
  <a href="#0" class="btn btn-sm btn-outline-light">Undo</a>
 </span>
</div>

<div class="alert alert-success" role="alert">
 <span>Error message</span>
 <span class="ms-auto">
  <a href="#0" class="btn btn-sm btn-outline-light">Undo</a>
 </span>
</div>

<div class="alert alert-warning" role="alert">
 <span>Error message</span>
 <span class="ms-auto">
  <a href="#0" class="btn btn-sm btn-outline-light">Undo</a>
 </span>
</div>

Outline

Error message

<div class="alert fabrx-outline-danger" role="alert">
 <span class="text-dark">Error message</span>
</div>

<div class="alert fabrx-outline-success" role="alert">
 <span class="text-dark">Error message</span>
</div>

<div class="alert fabrx-outline-warning" role="alert">
 <span class="text-dark">Error message</span>
</div>

Alerts with extra content

The following alerts are useful when you want to give more information and context to your users.

You got a new message!

Hey, up for a drink tonight?

<div class="fabrx-alert fabrx-alert-stack alert alert-light fade show shadow-40" role="alert">
 <div class="fabrx-icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path data-name="Icon Color" d="M2.75,15.5A2.753,2.753,0,0,1,0,12.75v-10A2.754,2.754,0,0,1,2.75,0h14A2.754,2.754,0,0,1,19.5,2.75v10a2.753,2.753,0,0,1-2.75,2.75ZM1.5,12.75A1.251,1.251,0,0,0,2.75,14h14A1.251,1.251,0,0,0,18,12.75v-8.6L10.166,9.374a.752.752,0,0,1-.734.055l-.1-.055L1.5,4.152Zm8.249-4.9,8.2-5.462a1.252,1.252,0,0,0-1.2-.884h-14a1.252,1.252,0,0,0-1.2.884Z" transform="translate(2.25 4.25)" fill="#212121"></path>
  </svg>
 </div>
 <div class="alert-captions">
  <div class="alert-caption-title">You got a new message!</div>
  <p>Hey, up for a drink tonight?</p>
 </div>
 <div class="alert-actions">
  <div class="list-group">
   <a href="#0" class="list-group-item text-primary">Reply</a>
   <button type="button" data-bs-dismiss="alert" aria-label="Close" class="list-group-item">Dismiss</button>
  </div>
 </div>
</div>

You Recieved a Free Gift!

Expires in 2 hours

Cancel Button

<div class="fabrx-alert alert alert-light fade show shadow-40" role="alert">
 <div class="fabrx-icon">
  <svg data-name="Icon/gift" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 40 40">
    <path data-name="Icon Color" d="M7.917,32.5a4.583,4.583,0,0,1-4.575-4.3l-.009-.279V17.5H2.916A2.919,2.919,0,0,1,0,14.584V11.249A2.919,2.919,0,0,1,2.916,8.333H4.184A5.417,5.417,0,0,1,8.729,0c2.962-.053,5.6,2.014,7.311,5.372l.208.43.02-.037C17.908,2.311,20.49.113,23.412,0l.337,0a5.418,5.418,0,0,1,4.565,8.332h1.268A2.92,2.92,0,0,1,32.5,11.249v3.334A2.92,2.92,0,0,1,29.583,17.5h-.417V27.917a4.584,4.584,0,0,1-4.3,4.575l-.279.007ZM24.583,30a2.086,2.086,0,0,0,2.073-1.87l.01-.213V17.5H17.5V30ZM5.833,27.917A2.082,2.082,0,0,0,7.7,29.989L7.917,30H15V17.5H5.833ZM29.583,15A.417.417,0,0,0,30,14.584V11.249a.417.417,0,0,0-.417-.416H17.5V15ZM2.5,11.249v3.334A.415.415,0,0,0,2.916,15H15V10.834H2.916A.415.415,0,0,0,2.5,11.249ZM23.75,8.333A2.917,2.917,0,1,0,23.729,2.5c-2.288-.04-4.549,2.169-5.813,5.833Zm-9.165,0C13.32,4.669,11.056,2.46,8.75,2.5a2.917,2.917,0,0,0-.238,5.824l.238.009Z" transform="translate(3.75 3.75)" fill="#212121"></path>
  </svg>
 </div>
 <div class="alert-captions">
  <div class="alert-caption-title">You Recieved a Free Gift!</div>
  <p>Expires in 2 hours</p>
 </div>
 <div class="alert-actions">
  <a href="#0" class="btn btn-link">Cancel</a>
  <a href="#0" class="btn btn-primary">Button</a>
 </div>
</div>

This website uses cookies

We use uses cookies for advertisements and analytics

Cancel Button

<div class="fabrx-alert alert alert-light fade show shadow-40" role="alert">
 <div class="alert-captions">
  <div class="alert-caption-title">This website uses cookies</div>
  <p>We use uses cookies for advertisements and analytics</p>
 </div>
 <div class="alert-actions">
  <a href="#0" class="btn btn-link">Cancel</a>
  <a href="#0" class="btn btn-primary">Button</a>
 </div>
</div>

This is a simple alert

Cancel Button

<div class="fabrx-alert fabrx-alert-sm alert alert-light fade show shadow-40" role="alert">
 <div class="fabrx-icon">
  <svg data-name="Icon/gift" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 40 40">
    <path data-name="Icon Color" d="M7.917,32.5a4.583,4.583,0,0,1-4.575-4.3l-.009-.279V17.5H2.916A2.919,2.919,0,0,1,0,14.584V11.249A2.919,2.919,0,0,1,2.916,8.333H4.184A5.417,5.417,0,0,1,8.729,0c2.962-.053,5.6,2.014,7.311,5.372l.208.43.02-.037C17.908,2.311,20.49.113,23.412,0l.337,0a5.418,5.418,0,0,1,4.565,8.332h1.268A2.92,2.92,0,0,1,32.5,11.249v3.334A2.92,2.92,0,0,1,29.583,17.5h-.417V27.917a4.584,4.584,0,0,1-4.3,4.575l-.279.007ZM24.583,30a2.086,2.086,0,0,0,2.073-1.87l.01-.213V17.5H17.5V30ZM5.833,27.917A2.082,2.082,0,0,0,7.7,29.989L7.917,30H15V17.5H5.833ZM29.583,15A.417.417,0,0,0,30,14.584V11.249a.417.417,0,0,0-.417-.416H17.5V15ZM2.5,11.249v3.334A.415.415,0,0,0,2.916,15H15V10.834H2.916A.415.415,0,0,0,2.5,11.249ZM23.75,8.333A2.917,2.917,0,1,0,23.729,2.5c-2.288-.04-4.549,2.169-5.813,5.833Zm-9.165,0C13.32,4.669,11.056,2.46,8.75,2.5a2.917,2.917,0,0,0-.238,5.824l.238.009Z" transform="translate(3.75 3.75)" fill="#212121"></path>
  </svg>
 </div>
 <div class="alert-captions">
  <div class="alert-caption-title font-weight-semibold">This is a simple alert</div>
 </div>
 <div class="alert-actions">
  <a href="#0" class="btn btn-link">Cancel</a>
  <a href="#0" class="btn btn-primary">Button</a>
 </div>
</div>

This is a simple alert

Cancel Button

<div class="fabrx-alert fabrx-alert-sm alert alert-light fade show shadow-40" role="alert">
 <div class="fabrx-icon">
  <svg data-name="Icon/gift" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 40 40">
    <path data-name="Icon Color" d="M7.917,32.5a4.583,4.583,0,0,1-4.575-4.3l-.009-.279V17.5H2.916A2.919,2.919,0,0,1,0,14.584V11.249A2.919,2.919,0,0,1,2.916,8.333H4.184A5.417,5.417,0,0,1,8.729,0c2.962-.053,5.6,2.014,7.311,5.372l.208.43.02-.037C17.908,2.311,20.49.113,23.412,0l.337,0a5.418,5.418,0,0,1,4.565,8.332h1.268A2.92,2.92,0,0,1,32.5,11.249v3.334A2.92,2.92,0,0,1,29.583,17.5h-.417V27.917a4.584,4.584,0,0,1-4.3,4.575l-.279.007ZM24.583,30a2.086,2.086,0,0,0,2.073-1.87l.01-.213V17.5H17.5V30ZM5.833,27.917A2.082,2.082,0,0,0,7.7,29.989L7.917,30H15V17.5H5.833ZM29.583,15A.417.417,0,0,0,30,14.584V11.249a.417.417,0,0,0-.417-.416H17.5V15ZM2.5,11.249v3.334A.415.415,0,0,0,2.916,15H15V10.834H2.916A.415.415,0,0,0,2.5,11.249ZM23.75,8.333A2.917,2.917,0,1,0,23.729,2.5c-2.288-.04-4.549,2.169-5.813,5.833Zm-9.165,0C13.32,4.669,11.056,2.46,8.75,2.5a2.917,2.917,0,0,0-.238,5.824l.238.009Z" transform="translate(3.75 3.75)" fill="#212121"></path>
  </svg>
 </div>
 <div class="alert-captions">
  <div class="alert-caption-title font-weight-semibold">This is a simple alert</div>
 </div>
 <div class="alert-actions">
  <a href="#0" class="btn btn-outline-primary">Cancel</a>
  <a href="#0" class="btn btn-primary">Button</a>
 </div>
</div>

Components

Avatars

Example

Sizing

Group

Badges

Example

Sizes

Breadcrumbs

Example

Buttons

Classes

Examples

Outline buttons

Sizes

Disabled state

Text Links

Button grouped

Cards

Examples

Hidden universe revealed in stunning first images from German telescope

Hubble Telescope Spots ‘Ghostly Face' in Space

Moog Synthesizer

$468.00

Moog Synthesizer

$249.00

Hidden universe revealed in first images from German telescope

An Awesome Product

Nike Air Zoom Structure 21 (Limited Edition)

$99.00

Feature Headline

Dark Energy Survey Evolves

Citizen Science with the Transit of Mercury is amazing

Dark Energy Survey Evolves

Citizen Science with the Transit of Mercury

Data Cards

$129,850

$129,850

Progress

Beginner

6.4k

Feature Cards

Feature Headline

Feature Headline

Feature Headline

Testimonials

Chips

Outline Chips

Comments

Charles Davies

Nesting

Charles Davies

Charles Davies

Dropdowns

Example

Dropdown Menu dividers

Dropdown Menu with Avatar

Scrollable Dropdown Menu

Dropdown Menu with Checkbox

Usage

Via data attributes

Methods

Events

Form Elements

Checkboxes and radios

Checkboxes Sizing

Label Checkboxes

Disabled Checkboxes

Radio Buttons

Radio Sizing

Label Checkboxes

Disabled Checkboxes

Toggles

Toggles Sizing

Disabled Toggles

Input Fields (Contained)

Validation

Input group merge

Input Button

Input Search

Nike Air Zoom Structure 21
(Limited Edition)