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.

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

Avatar Avatar Avatar Avatar +9
<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.

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

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

<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>
<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>
<a href="#0" class="btn btn-primary">Medium button</a>
<a href="#0" class="btn btn-outline-primary">Medium button</a>
<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.

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

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

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

<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
<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>
Card Image
For you
Hubble Telescope Spots ‘Ghostly Face' in Space
<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
Card Image
Electronics
Moog Synthesizer
$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>
Card Image
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>
<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>
Card Image
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

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

Feature Headline

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

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

Dark Energy Survey Evolves

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

<div class="card card-transparent rounded-0 border-0">
 <img class="card-img-top rounded-0" src="assets/images/placeholders/placeholder-14.jpg" alt="Card Image">
  <div class="card-body">
    <h4 class="card-title"><a href="#0">Dark Energy Survey Evolves</a></h4>
    <p>Ship of the imagination star stuff harvesting star light descended from astronomers finite but unbounded realm of the galaxies.</p>
    <div class="clearfix">
      <a href="#0" class="btn btn-link btn-lg">
        <span class="btn-text">Link</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="ms-1" 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>
<div class="card card-sm card-transparent border-0">
	<a href="#0" class="badge badge-primary badge-absolute circle stack lg">
	  <svg data-name="Icon/Star Fill" xmlns="http://www.w3.org/2000/svg" width="23" height="24" viewBox="0 0 23 24">
	    <path data-name="Icon Color" d="M.292,11.353l-.081-.072a.775.775,0,0,1-.07-.977l.07-.085,5.75-6A.7.7,0,0,1,6.9,4.147l.08.073L10.3,7.689,16.233,1.5H11.261a.73.73,0,0,1-.712-.649l-.007-.1a.74.74,0,0,1,.621-.743l.1-.007h6.708a.691.691,0,0,1,.237.042h0l.011,0,.007,0,0,0a.716.716,0,0,1,.248.169.75.75,0,0,1,.138.2h0l.005.011,0,.006,0,.006a.768.768,0,0,1,.055.2v0a.788.788,0,0,1,.006.087V7.75a.717.717,0,0,1-1.431.1l-.007-.1V2.561L10.811,9.28a.7.7,0,0,1-.936.073L9.794,9.28,6.469,5.811,1.228,11.281a.7.7,0,0,1-.936.072Z" transform="translate(2.156 6.25)" fill="#fff"></path>
	  </svg>
	</a>
	<a href="#0"><img class="card-img-top" src="assets/images/placeholders/placeholder-16.jpg" alt="Card Image"></a>
	<div class="card-body">
	   <h6 class="card-title mb-2"><a href="#0">Citizen Science with the Transit of Mercury is amazing</a></h6>
	  </div>
	</div>
</div>
Card Image
Dark Energy Survey Evolves

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

<div class="card card-sm card-transparent rounded-0">
 <a href="#0"><img class="card-img-top rounded-0" src="assets/images/placeholders/placeholder-15.jpg" alt="Card Image"></a>
 <div class="card-body">
  <h6 class="card-title mb-2">Dark Energy Survey Evolves</h6>
  <p class="mb-4 pb-lg-3">Ship of the imagination star stuff harvesting star light descended from astronomers finite but unbounded realm of the galaxies.</p>
  <div class="clearfix">
    <a href="#0" class="btn btn-link">
      <span class="btn-text">Link</span>
      <svg xmlns="http://www.w3.org/2000/svg" class="ms-1" 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>

<div class="card card-sm card-transparent">
 <a href="#0" class="badge badge-primary badge-absolute circle stack">
  <svg data-name="Icon/Star Fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 23 24">
    <path data-name="Icon Color" d="M.292,11.353l-.081-.072a.775.775,0,0,1-.07-.977l.07-.085,5.75-6A.7.7,0,0,1,6.9,4.147l.08.073L10.3,7.689,16.233,1.5H11.261a.73.73,0,0,1-.712-.649l-.007-.1a.74.74,0,0,1,.621-.743l.1-.007h6.708a.691.691,0,0,1,.237.042h0l.011,0,.007,0,0,0a.716.716,0,0,1,.248.169.75.75,0,0,1,.138.2h0l.005.011,0,.006,0,.006a.768.768,0,0,1,.055.2v0a.788.788,0,0,1,.006.087V7.75a.717.717,0,0,1-1.431.1l-.007-.1V2.561L10.811,9.28a.7.7,0,0,1-.936.073L9.794,9.28,6.469,5.811,1.228,11.281a.7.7,0,0,1-.936.072Z" transform="translate(2.156 6.25)" fill="#fff"></path>
  </svg>
 </a>
 <a href="#0"><img class="card-img-top rounded-0" src="assets/images/placeholders/placeholder-17.jpg" alt="Card Image"></a>
 <div class="card-body p-0">
  <h6 class="card-title mb-2"><a href="#0">Citizen Science with the Transit of Mercury</a></h6>
 </div>
</div>
Data Cards
Revenue
$129,850
<div class="card rounded-6">
  <div class="card-body d-flex align-items-center justify-content-between">
    <div class="float-start">
      <div class="card-subtitle mb-1 text-muted font-size-14">Revenue</div>
      <h6 class="card-title mb-0">$129,850</h6>
    </div>
    <div class="float-end">
      <div class="dropdown">
        <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="card-meter rounded-3 bg-primary" id="Action2">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
            <path data-name="Icon Color" d="M4.3.152a.519.519,0,0,1,.784.675l-.05.058L1.252,4.667,5.033,8.448a.519.519,0,0,1,.05.675l-.05.058a.519.519,0,0,1-.675.05L4.3,9.181.152,5.033A.519.519,0,0,1,.1,4.358L.152,4.3Z" transform="translate(11.926 4.407) rotate(90)" fill="#fff"></path>
          </svg>
          <span class="ps-0">15%</span>
        </a>
        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action2">
          <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>

<!-- Revenue Card --> 
<div class="card rounded-6 py-1">
  <div class="card-body d-flex align-items-center justify-content-between">
    <div class="float-start">
      <div class="card-subtitle mb-1 text-muted font-size-14">
        <svg class="me-1" data-name="Left Icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
          <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>
        </svg>
        Revenue
      </div>
      <h6 class="card-title mb-0">$129,850</h6>
    </div>
    <div class="float-end">
      <a href="#0" class="card-action">
        <svg data-name="Right Icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
          <path data-name="Icon Color" d="M7,15.85a7,7,0,0,1-.2-14L5.65.7l.7-.7L8.7,2.35,6.35,4.7,5.65,4,6.8,2.85a6,6,0,1,0,6.2,6h1A7.021,7.021,0,0,1,7,15.85Z" transform="translate(1.333 0.15)" fill="#3f3b3b"></path>
        </svg>
      </a>
    </div>
  </div>
</div>
This Week
Progress
Rank
Beginner
Avatar
<div class="card rounded-6 py-1">
  <div class="card-body d-flex align-items-center justify-content-between">
    <div class="float-start">
      <div class="card-subtitle mb-1 text-muted font-size-14">This Week</div>
      <h6 class="card-title mb-0">Progress</h6>
    </div>
    <div class="float-end">
      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" 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>
</div>

<div class="card rounded-6 py-1">
  <div class="card-body d-flex align-items-center justify-content-between">
    <div class="float-start">
      <div class="card-subtitle mb-1 text-muted font-size-14">Rank</div>
      <h6 class="card-title mb-0">Beginner</h6>
    </div>
    <div class="float-end">
      <a href="#0" class="fabrx-avatar fabrx-status dnd md"><img src="../assets/images/avatars/avatar-1.png" alt="Avatar"></a>
    </div>
  </div>
</div>
Today

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

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

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

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


  • Avatar Bruce Lee
  • Avatar 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
  • Avatar Bruce Lee
  • Avatar 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.

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

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

  • Avatar
    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.

    1. Avatar
      Charles Davies
      5 minutes ago

      Yeah right! 😍

      It’s really good anyways, sort of brilliant!

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

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.

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

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

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

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

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

<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!
How dare you!
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
  • Icon/arrows/arrow-back arrow-back
  • Icon/arrows/arrow-back-up arrow-back-up
  • Icon/arrows/arrow-bar-down arrow-bar-down
  • Icon/arrows/arrow-bar-left arrow-bar-left
  • Icon/arrows/arrow-bar-right arrow-bar-right
  • Icon/arrows/arrow-bar-to-down arrow-bar-to-down
  • Icon/arrows/arrow-bar-to-left arrow-bar-to-left
  • Icon/arrows/arrow-bar-to-up arrow-bar-to-up
  • Icon/arrows/arrow-bar-up arrow-bar-up
  • Icon/arrows/arrow-big-down arrow-big-down
  • Icon/arrows/arrow-big-left arrow-big-left
  • Icon/arrows/arrow-big-right arrow-big-right
  • Icon/arrows/arrow-big-top arrow-big-top
  • Icon/arrows/arrow-bottom-bar arrow-bottom-bar
  • Icon/arrows/arrow-bottom-circle arrow-bottom-circle
  • Icon/arrows/arrow-bottom-square arrow-bottom-square
  • Icon/arrows/arrow-bottom-tail arrow-bottom-tail
  • Icon/arrows/arrow-down arrow-down
  • Icon/arrows/arrow-down-circle arrow-down-circle
  • Icon/arrows/arrow-down-left-circle arrow-down-left-circle
  • Icon/arrows/arrow-down-right arrow-down-right
  • Icon/arrows/arrow-down-right-circle arrow-down-right-circle
  • Icon/arrows/arrow-forward arrow-forward
  • Icon/arrows/arrow-forward-up arrow-forward-up
  • Icon/arrows/arrow-left arrow-left
  • Icon/arrows/arrow-left-bar arrow-left-bar
  • Icon/arrows/arrow-left-circle arrow-left-circle
  • Icon/arrows/arrow-left-square arrow-left-square
  • Icon/arrows/arrow-left-tail arrow-left-tail
  • Icon/arrows/arrow-loop-left arrow-loop-left
  • Icon/arrows/arrow-loop-right arrow-loop-right
  • Icon/arrows/arrow-narrow-down arrow-narrow-down
  • Icon/arrows/arrow-narrow-left arrow-narrow-left
  • Icon/arrows/arrows-diagonal arrows-diagonal
  • Icon/arrows/arrows-diagonal-2 arrows-diagonal-2
  • Icon/arrows/arrows-double-ne-sw arrows-double-ne-sw
  • Icon/arrows/arrows-double-nw-se arrows-double-nw-se
  • Icon/arrows/arrows-down arrows-down
  • Icon/arrows/arrows-down-up arrows-down-up
  • Icon/arrows/arrows-horizontal arrows-horizontal
  • Icon/arrows/arrows-join-2 arrows-join-2
  • Icon/arrows/arrows-maximize arrows-maximize
  • Icon/arrows/arrows-minimize arrows-minimize
  • Icon/artboard artboard
  • Icon/at at
  • Icon/atom atom
  • Icon/avatar avatar
  • Icon/award award
  • Icon/arrows/caret/back back
  • Icon/arrows/chevron/back back3
  • Icon/backhoe backhoe
  • Icon/backspace backspace
  • Icon/media/backward backward
  • Icon/bag bag
  • Icon/ball-football ball-football
  • Icon/ball-football ball-football
  • Icon/ban ban
  • Icon/bandage bandage
  • Icon/barcode barcode
  • Icon/basket basket
  • Icon/battery-4 battery-4
  • Icon/battery-automotive battery-automotive
  • Icon/battery-charging battery-charging
  • Icon/bed bed
  • Icon/social/default/behance behance
  • Icon/social/outline/behance behance2
  • Icon/bell bell
  • Icon/bell-ringing bell-ringing
  • Icon/bike bike
  • Icon/bin bin
  • Icon/binary binary
  • Icon/biohazard biohazard
  • Icon/blockquote blockquote
  • Icon/bluetooth-connected bluetooth-connected
  • Icon/bolt bolt
  • Icon/bone bone
  • Icon/book book
  • Icon/bookmark bookmark
  • Icon/Bookmark Fill Bookmark-Fill
  • Icon/border-all border-all
  • Icon/border-bottom border-bottom
  • Icon/border-horizontal border-horizontal
  • Icon/border-inner border-inner
  • Icon/box box
  • Icon/box-margin box-margin
  • Icon/box-multiple box-multiple
  • Icon/braces braces
  • Icon/brackets brackets
  • Icon/brightness-2 brightness-2
  • Icon/brightness-down brightness-down
  • Icon/browser browser
  • Icon/brush brush
  • Icon/bug bug
  • Icon/building-bank building-bank
  • Icon/building-bridge building-bridge
  • Icon/building-church building-church
  • Icon/building-community building-community
  • Icon/building-factory building-factory
  • Icon/building-hospital building-hospital
  • Icon/building-store building-store
  • Icon/bulb bulb
  • Icon/bus bus
  • Icon/businessplan businessplan
  • Icon/calculator calculator
  • Icon/calendar calendar
  • Icon/camera camera
  • Icon/capture capture
  • Icon/car car
  • Icon/cart cart
  • Icon/cash-banknote cash-banknote
  • Icon/cast cast
  • Icon/ce ce
  • Icon/certificate certificate
  • Icon/charging-pile charging-pile
  • Icon/chart-arcs-3 chart-arcs-3
  • Icon/chart-arrows-vertical chart-arrows-vertical
  • Icon/chart-bar chart-bar
  • Icon/chart-pie chart-pie
  • Icon/chat chat
  • Icon/check check
  • Icon/checkbox checkbox
  • Icon/chevrons/chevrons-down chevrons-down
  • Icon/chevrons/chevrons-left chevrons-left
  • Icon/christmas-tree christmas-tree
  • Icon/brand/chrome chrome
  • Icon/circle-check circle-check
  • Icon/circle-minus circle-minus
  • Icon/circle-plus circle-plus
  • Icon/circles circles
  • Icon/circle-x circle-x
  • Icon/clear-all clear-all
  • Icon/click click
  • Icon/clipboard clipboard
  • Icon/clipboard-check clipboard-check
  • Icon/clipboard-list clipboard-list
  • Icon/clock clock
  • Icon/close close
  • Icon/cloud cloud
  • Icon/cloud-download cloud-download
  • Icon/cloud-off cloud-off
  • Icon/cloud-storm cloud-storm
  • Icon/cloud-upload cloud-upload
  • Icon/code code
  • Icon/code-minus code-minus
  • Icon/brand/codepen codepen
  • Icon/code-plus code-plus
  • Icon/coin coin
  • Icon/color-picker color-picker
  • Icon/color-swatch color-swatch
  • Icon/columns columns
  • Icon/command command
  • Icon/comment comment
  • Icon/compass compass
  • Icon/confetti confetti
  • Icon/container container
  • Icon/contrast contrast
  • Icon/copy copy
  • Icon/copyright copyright
  • Icon/corner-down-left corner-down-left
  • Icon/corner-down-left-double corner-down-left-double
  • Icon/credit-card credit-card
  • Icon/credit-card-off credit-card-off
  • Icon/crop crop
  • Icon/crosshair crosshair
  • Icon/crown crown
  • Icon/brand/css3 css3
  • Icon/curly-loop curly-loop
  • Icon/currency-bath currency-bath
  • Icon/currency-bitcoin currency-bitcoin
  • Icon/currency-dollar currency-dollar
  • Icon/currency-euro currency-euro
  • Icon/currency-pound currency-pound
  • Icon/currency-riyal currency-riyal
  • Icon/currency-rupee currency-rupee
  • Icon/current-location current-location
  • Icon/cursor-text cursor-text
  • Icon/cut cut
  • Icon/dashboard dashboard
  • Icon/database database
  • Icon/database-export database-export
  • Icon/device-analytics device-analytics
  • Icon/device-cctv device-cctv
  • Icon/device-computer-camera device-computer-camera
  • Icon/device-desktop device-desktop
  • Icon/device-gamepad device-gamepad
  • Icon/device-laptop device-laptop
  • Icon/device-mobile device-mobile
  • Icon/devices devices
  • Icon/devices-pc devices-pc
  • Icon/device-speaker device-speaker
  • Icon/device-tablet device-tablet
  • Icon/device-tv device-tv
  • Icon/device-watch device-watch
  • Icon/diamond diamond
  • Icon/dice dice
  • Icon/dimensions dimensions
  • Icon/direction direction
  • Icon/directions directions
  • Icon/disabled disabled
  • Icon/discount discount
  • Icon/divide divide
  • Icon/dot menu dot-menu
  • Icon/dot menu 02 dot-menu-02
  • Icon/dots dots
  • Icon/dots-circle-horizontal dots-circle-horizontal
  • Icon/dots-vertical dots-vertical
  • Icon/arrows/caret/down down
  • Icon/arrows/chevron/down down3
  • Icon/arrows/circle/Fill/down down4
  • Icon/arrows/circle/outline/down down5
  • Icon/arrows/normal/down down6
  • Icon/download download
  • Icon/download cloud download-cloud
  • Icon/drag drag
  • Icon/drag-drop drag-drop
  • Icon/spcial/default/dribbble dribbble
  • Icon/social/outline/dribbble dribbble2
  • Icon/drone drone
  • Icon/droplet droplet
  • Icon/ear ear
  • Icon/brand/edge edge
  • Icon/edit edit
  • Icon/egg egg
  • Icon/emoji emoji
  • Icon/equal equal
  • Icon/equal-not equal-not
  • Icon/eraser eraser
  • Icon/exchange exchange
  • Icon/exposure exposure
  • Icon/external-link external-link
  • Icon/eye eye
  • Icon/eyeglass eyeglass
  • Icon/eye off eye-off
  • Icon/facebook facebook
  • Icon/social/outline/facebook facebook2
  • Icon/face-id face-id
  • Icon/fall fall
  • Icon/feather feather
  • Icon/brand/figma figma
  • Icon/file file
  • Icon/file-alert file-alert
  • Icon/file-analytics file-analytics
  • Icon/file-check file-check
  • Icon/file-download file-download
  • Icon/file-export file-export
  • Icon/file-import file-import
  • Icon/file-music file-music
  • Icon/file-phone file-phone
  • Icon/file-text file-text
  • Icon/file-upload file-upload
  • Icon/file-zip file-zip
  • Icon/placeholder/fill fill
  • Icon/filter filter
  • Icon/filter 02 filter-02
  • Icon/fingerprint fingerprint
  • Icon/brand/firefox firefox
  • Icon/firetruck firetruck
  • Icon/flag flag
  • Icon/flame flame
  • Icon/flask flask
  • Icon/flip-horizontal flip-horizontal
  • Icon/flip-vertical flip-vertical
  • Icon/float-center float-center
  • Icon/float-left float-left
  • Icon/float-none float-none
  • Icon/float-right float-right
  • Icon/focus focus
  • Icon/fold fold
  • Icon/fold-down fold-down
  • Icon/folder folder
  • Icon/folder-plus folder-plus
  • Icon/media/forward forward
  • Icon/arrows/caret/forward forward2
  • Icon/arrows/chevron/forward forward3
  • Icon/frame frame