500+ responsive components ready for action.
A collection of avatars with different shapes, sizes and the possibility to group them.
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>
Use the .sm .md .lg
to control Avatar size.
<div class="fabrx-avatar fabrx-status dnd sm"><img src="assets/images/avatars/avatar-1.png" alt="Avatar"></div>
<div class="fabrx-avatar fabrx-status dnd"><img src="assets/images/avatars/avatar-1.png" alt="Avatar"></div>
<div class="fabrx-avatar fabrx-status dnd md"><img src="assets/images/avatars/avatar-1.png" alt="Avatar"></div>
<div class="fabrx-avatar fabrx-status dnd lg"><img src="assets/images/avatars/avatar-1.png" alt="Avatar"></div>
Include multiple avatar items inside a .fabrx-avatar-group
container.
<div class="fabrx-avatar-group">
<a href="#0" class="fabrx-avatar lg"><img src="assets/images/avatars/avatar-1.png" alt="Avatar"></a>
<a href="#0" class="fabrx-avatar lg"><img src="assets/images/avatars/avatar-2.png" alt="Avatar"></a>
<a href="#0" class="fabrx-avatar lg"><img src="assets/images/avatars/avatar-3.png" alt="Avatar"></a>
<a href="#0" class="fabrx-avatar lg"><img src="assets/images/avatars/avatar-4.png" alt="Avatar"></a>
<a href="#0" class="fabrx-avatar lg more"><span class="avatar-wrap">+9</span></a>
</div>
Badges 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>
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.
<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>
Use Bootstrap buttons and BootstrapVue custom styles for actions in forms, dialogues, and more with support for multiple sizes, states, and more.
.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
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>
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>
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>
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>
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>
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>
Flexible and extensible content container with multiple variants and options. Please read the official Bootstrap Documentation for a full list of options.
<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>
<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>
<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>
<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>
<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>
<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>
<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>
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>
<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>
<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>
<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>
<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>
You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.
Ship of the imagination star stuff harvesting star light descended from astronomers finite but
Learn moreShip 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>
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>
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.
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>
Examples for close, multicolor, and labeling chips.
<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>
<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>
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.
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>
Media objects can be infinitely nested. Place nested .media
within the .media-body
of a parent media object.
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="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.
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>
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>
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>
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>
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>
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.
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>
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. |
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). |
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>
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>
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>
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>
<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>
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>
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>
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>
<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>
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>
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>
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">
Indicate invalid and valid form fields with .is-invalid
and .is-valid
classes.
<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>
A slightly modified version of the default input groups that always keeps icons as a part of the form control.
<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>
A slightly modified version of the default input Button that always keeps Button as a part of the form control.
<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>
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>
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">
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">
We prefer SVG implementations for full vector support and flexibility.