<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" name="viewport">
<title>
Bootstrap 5 CheatSheet By ThemeSelection | Classes
</title>
<meta content="An interactive list of Bootstrap 5 classes, variables, and mixins. The only Bootstrap 5 CheatSheet you will ever need." name="description">
<meta content="https://bootstrap-cheatsheet.themeselection.com/assets/images/preview-image.jpg" name="image">
<meta content="bootstrap, bootstrap 5, bootstrap 5 cheatsheet, bootstrap 5 cheat sheet, bootstrap cheatsheet, bootstrap 5 cheat sheet pdf, bootstrap cheat sheet github" name="keywords">
<meta content="ThemeSelection" name="author">
<meta content="Bootstrap 5 CheatSheet 🚀 By ThemeSelection | Classes" itemprop="name">
<meta content="An interactive list of Bootstrap 5 classes, variables, and mixins. The only Bootstrap 5 CheatSheet you will ever need." itemprop="description">
<meta content="https://bootstrap-cheatsheet.themeselection.com/assets/images/preview-image.jpg" itemprop="image">
<meta content="summary_large_image" name="twitter:card">
<meta content="@Theme_Selection" name="twitter:site">
<meta content="Bootstrap 5 CheatSheet 🚀 By ThemeSelection" name="twitter:title">
<meta content="An interactive list of Bootstrap 5 classes, variables, and mixins. 🎁 The only Bootstrap 5 CheatSheet you will ever need. 🎊" name="twitter:description">
<meta content="http://bootstrap-cheatsheet.themeselection.com/assets/images/twitter-preview-image.jpg" name="twitter:image">
<meta content="Bootstrap 5 CheatSheet 🚀 By ThemeSelection | Classes" property="og:title">
<meta content="An interactive list of Bootstrap 5 classes, variables, and mixins. 🎁 The only Bootstrap 5 CheatSheet you will ever need. 🎊" property="og:description">
<meta content="https://bootstrap-cheatsheet.themeselection.com/assets/images/og-preview-image.jpg" property="og:image">
<meta content="Bootstrap 5 CheatSheet By ThemeSelection" property="og:image:alt">
<meta content="image/jpeg" property="og:image:type">
<meta content="https://bootstrap-cheatsheet.themeselection.com/" property="og:url">
<meta content="Bootstrap 5 CheatSheet By ThemeSelection" property="og:site_name">
<meta content="en_US" property="og:locale">
<meta content="678455993062306" property="fb:app_id">
<meta content="website" property="og:type">
<link href="assets/images/ico/favicon.ico" rel="icon" sizes="32x32">
<link href="assets/images/ico/favicon.ico" rel="icon" sizes="192x192">
<link href="assets/images/ico/favicon.ico" rel="apple-touch-icon">
<meta content="assets/images/ico/favicon.ico" name="msapplication-TileImage">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500;1,600;1,700;1,800" rel="stylesheet">
<link href="assets/vendors/css/docs.css" rel="stylesheet">
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-2RZM4864CJ">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-2RZM4864CJ');
</script>
<link href="assets/css/cheatsheet.css" rel="stylesheet" type="text/css">
</head>
<body class="bs-cheatsheet">
<header class="navbar navbar-expand-sm cheatsheet-navbar">
<div class="container">
<a class="navbar-brand" href="index.html">
<img alt="Brand Image" height="32" src="assets/images/logos/cheatsheet-logo.svg">
</a>
<button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse" type="button">
<svg class="bi bi-list" fill="currentColor" height="26" viewBox="0 0 16 16" width="26" xmlns="http://www.w3.org/2000/svg">
<path d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" fill-rule="evenodd">
</path>
</svg>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Menu links-->
<ul class="navbar-nav me-auto mb-2 mb-sm-0 cheatsheet-menu">
<li class="nav-item active">
<a class="nav-link" href="index.html">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="variables.html">
Variables
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mixins.html">
Mixins
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://themeselection.com/#utm_source=bs5-cheatsheet&utm_medium=link&utm_campaign=external-tool" target="_blank">
Admin Templates
</a>
</li>
</ul>
<!-- / Menu links-->
<hr class="d-sm-none text-white-50">
<!-- Social share Icons-->
<ul class="navbar-nav flex-row flex-wrap ms-sm-auto cheatsheet-social">
<li class="nav-item col-6 col-sm-auto">
<a class="nav-link p-2" href="https://github.com/themeselection/bootstrap-cheatsheet" target="_blank">
<svg class="navbar-nav-svg d-inline-block align-text-top" height="20" role="img" viewBox="0 0 512 499.36" width="20" xmlns="http://www.w3.org/2000/svg">
<title>
GitHub
</title>
<path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd">
</path>
</svg>
<small class="d-sm-none ms-2">
GitHub
</small>
</a>
</li>
<li class="nav-item col-6 col-sm-auto">
<a class="nav-link p-2" href="https://twitter.com/Theme_Selection" target="_blank">
<svg class="navbar-nav-svg d-inline-block align-text-top" height="20" role="img" viewBox="0 0 512 416.32" width="20" xmlns="http://www.w3.org/2000/svg">
<title>
Twitter
</title>
<path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor">
</path>
</svg>
<small class="d-sm-none ms-2">
Twitter
</small>
</a>
</li>
<li class="nav-item col-6 col-sm-auto">
<a class="nav-link p-2" href="https://www.facebook.com/ThemeSelections/" target="_blank">
<svg class="navbar-nav-svg d-inline-block align-text-top bi bi-facebook" fill="currentColor" height="20" viewBox="0 0 16 16" width="20" xmlns="http://www.w3.org/2000/svg">
<title>
Facebook
</title>
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z">
</path>
</svg>
<small class="d-sm-none ms-2">
Facebook
</small>
</a>
</li>
<li class="nav-item col-6 col-sm-auto">
<a class="nav-link p-2" href="https://dribbble.com/themeselection/" target="_blank">
<svg class="navbar-nav-svg d-inline-block align-text-top" height="20px" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>
Dribbble
</title>
<path d="M10,20 C4.485625,20 0,15.513125 0,9.999375 C0,4.48625 4.485625,0 10,0 C15.51375,0 20,4.48625 20,9.999375 C20,15.513125 15.51375,20 10,20 Z M18.433125,11.36875 C18.14125,11.275625 15.79,10.575 13.1125,11.00375 C14.23,14.0725 14.685,16.573125 14.77125,17.09375 C16.688125,15.798125 18.0525,13.745625 18.433125,11.36875 Z M13.336875,17.875625 C13.209375,17.12625 12.713125,14.514375 11.514375,11.39875 L11.4575,11.418125 C6.640625,13.09625 4.910625,16.4375 4.756875,16.751875 C6.205,17.88125 8.025,18.555 10,18.555 C11.1825,18.555 12.310625,18.313125 13.336875,17.875625 Z M3.654375,15.724375 C3.848125,15.393125 6.191875,11.51125 10.5975,10.0875 C10.708125,10.05 10.820625,10.0175 10.933125,9.985625 C10.71875,9.5 10.485625,9.014375 10.240625,8.53625 C5.975625,9.8125 1.83625,9.76 1.463125,9.751875 C1.460625,9.839375 1.458125,9.925 1.458125,10.013125 C1.458125,12.20625 2.289375,14.20875 3.654375,15.724375 Z M1.63875,8.263125 C2.02,8.26875 5.539375,8.284375 9.535,7.223125 C8.12,4.706875 6.59375,2.591875 6.368125,2.28375 C3.97875,3.41 2.1925,5.6125 1.63875,8.263125 Z M7.998125,1.708125 C8.234375,2.02375 9.785625,4.138125 11.185,6.708125 C14.223125,5.570625 15.50875,3.841875 15.6625,3.623125 C14.15375,2.285625 12.170625,1.47125 10,1.47125 C9.31,1.47125 8.64,1.553125 7.998125,1.708125 Z M16.61125,4.61125 C16.43125,4.855 15,6.689375 11.841875,7.979375 C12.040625,8.38625 12.230625,8.799375 12.40875,9.21625 C12.47125,9.363125 12.5325,9.510625 12.5925,9.6575 C15.434375,9.3 18.258125,9.873125 18.540625,9.93125 C18.52125,7.915625 17.800625,6.064375 16.61125,4.61125 Z">
</path>
</svg>
<small class="d-sm-none ms-2">
Dribble
</small>
</a>
</li>
</ul>
<!-- / Social share Icons-->
</div>
</div>
</header>
<main>
<!-- CheatSheet Hero -->
<div class="cheatsheet-hero">
<div class="container">
<div class="row align-items-sm-center py-4 py-lg-0">
<div class="col-lg-7 text-start">
<a href="https://themeselection.com/" target="_blank">
<img alt="ThemeSelection" class="mb-2 mb-sm-4" height="44" src="assets/images/logos/brand-logo-small.png">
</a>
<h2 class="cheatsheet-title">
Bootstrap 5 CheatSheet 🚀
</h2>
<p class="cheatsheet-subtitle">
An interactive list of Bootstrap 5
<span class="cheatsheet-subtitle-span">
classes
</span>
,
<span class="cheatsheet-subtitle-span">
variables
</span>
, and
<span class="cheatsheet-subtitle-span">
mixins
</span>
. 🎁 The only Bootstrap 5 CheatSheet you will ever need. 🎊
</p>
<div class="d-flex flex-column flex-md-row align-items-md-center">
<div class="mb-2 mb-md-0 me-md-3">
<a href="https://www.producthunt.com/posts/bootstrap-5-cheatsheet?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-bootstrap-5-cheatsheet" target="_blank">
<img alt="Bootstrap 5 CheatSheet 🚀 - The only Bootstrap 5 CheatSheet you will ever need. 🎊 | Product Hunt" height="43" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=283392&theme=light" style="width: 200px; height: 43px;" width="200">
</a>
</div>
<iframe frameborder="0" height="30" scrolling="0" src="https://ghbtns.com/github-btn.html?user=themeselection&repo=bootstrap-cheatsheet&type=star&count=true&size=large" title="GitHub" width="170">
</iframe>
</div>
</div>
<div class="col-lg-5 d-none d-lg-block">
<img alt="CheatSheet Hero Images" class="img-fluid" height="250" src="assets/images/pose.png">
</div>
</div>
</div>
<div class="cheatsheet-infoline">
<div class="container">
<div class="row text-center">
<div class="col-12">
<span>
Have a look at our newly released
<a class="info-link" href="https://themeselection.com/products/category/bootstrap-admin-templates/#utm_source=bs5-cheatsheet&utm_medium=link&utm_campaign=external-tool" target="_blank">
Bootstrap admin template
</a>
🎉
</span>
</div>
</div>
</div>
</div>
</div>
<!--/ CheatSheet Hero -->
<div class="container bs-content">
<!-- subscription message -->
<div class="alert rounded-0 alert-dismissible subscription-alert hide alert-tip border-top-0 border-bottom-0" role="alert">
<strong>
Congratulations!!
</strong>
You have successfully subscribed to our newsletter. 🥳
<button aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button">
</button>
</div>
<!--/ subscription message -->
<!-- CheatSheet Filter -->
<div class="cheatsheet-filters">
<div class="input-group filter-search">
<span class="input-group-text" id="input-search">
<svg class="bi bi-search" fill="currentColor" height="14" viewBox="0 0 16 16" width="14" xmlns="http://www.w3.org/2000/svg">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z">
</path>
</svg>
</span>
<input aria-describedby="input-search" aria-label="Search..." class="form-control input-search" placeholder="Search..." tabindex="-1" type="text">
</div>
<div class="filter-buttons d-flex">
<div aria-label="collapse/expand all" class="btn-group btn-toggle me-3" role="group">
<input autocomplete="off" checked="" class="btn-check" id="expandAll" name="collapse-toggle" type="radio">
<label class="btn btn-outline-primary" for="expandAll">
Expand All
</label>
<input autocomplete="off" class="btn-check" id="collapseAll" name="collapse-toggle" type="radio">
<label class="btn btn-outline-primary" for="collapseAll">
Collapse All
</label>
</div>
<div class="btn-highlight-toggle">
<input autocomplete="off" class="btn-check" id="btn-toggle-new" type="checkbox">
<label class="btn btn-outline-primary" for="btn-toggle-new">
Highlight new in v5
</label>
</div>
</div>
</div>
<!--/ CheatSheet Filter -->
<div class="notification">
<div aria-atomic="true" aria-live="assertive" class="toast notification-toast text-white bg-info border-0" role="alert">
<div class="toast-body d-flex align-items-center">
<span>
Copied!!! 👍
</span>
<button aria-label="Close" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" type="button">
</button>
</div>
</div>
</div>
<div class="row" id="grid">
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryGrid" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryGrid" role="button">
<span class="item-filter-text">
Grid
</span>
</div>
<div class="card-body collapse show" id="categoryGrid">
<ul class="list-items">
<li class="list-item" data-clipboard-text="container" data-id="container">
<div class="list-item-content">
<a class="list-item-text" href="#container">
<span class="item-filter-text">
container
</span>
</a>
</div>
<div class="code-snippet">
<div class="container">
Max width changes at each breakpoint
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="container-sm" data-id="container-size">
<div class="list-item-content">
<a class="list-item-text" href="#container-size">
<span class="item-filter-text">
container-*
</span>
</a>
</div>
<div class="code-snippet">
<div class="container-sm">
100% wide until small breakpoint
</div>
<div class="container-md">
100% wide until medium breakpoint
</div>
<div class="container-lg">
100% wide until large breakpoint
</div>
<div class="container-xl">
100% wide until extra large breakpoint
</div>
<div class="container-xxl">
100% wide until extra extra large breakpoint
</div>
<!-- New -->
</div>
</li>
<li class="list-item" data-clipboard-text="container-fluid" data-id="container-fluid">
<div class="list-item-content">
<a class="list-item-text" href="#container-fluid">
<span class="item-filter-text">
container-fluid
</span>
</a>
</div>
<div class="code-snippet">
<div class="container-fluid">
Always 100% wide
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="row" data-id="row">
<div class="list-item-content">
<a class="list-item-text" href="#row">
<span class="item-filter-text">
row
</span>
</a>
</div>
<div class="code-snippet">
<div class="row">
<!-- col- elements here -->
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="col-1" data-custom-class="bd-example-row" data-id="col-1">
<div class="list-item-content">
<a class="list-item-text" href="#col-1">
<span class="item-filter-text">
col-#
</span>
</a>
</div>
<div class="code-snippet">
<div class="row">
<div class="col-3">
col-3
</div>
<div class="col-5">
col-5
</div>
<div class="col-4">
col-4
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="col-sm-1" data-custom-class="bd-example-row" data-id="col-sm-1">
<div class="list-item-content">
<a class="list-item-text" href="#col-sm-1">
<span class="item-filter-text">
col-sm-#
</span>
</a>
</div>
<div class="code-snippet">
<div class="row">
<div class="col-sm-3">
col-sm-3
</div>
<div class="col-sm-5">
col-sm-5
</div>
<div class="col-sm-4">
col-sm-4
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="col-md-1" data-custom-class="bd-example-row" data-id="col-md-1">
<div class="list-item-content">
<a class="list-item-text" href="#col-md-1">
<span class="item-filter-text">
col-md-#
</span>
</a>
</div>
<div class="code-snippet">
<div class="row">
<div class="col-md-3">
col-md-3
</div>
<div class="col-md-5">
col-md-5
</div>
<div class="col-md-4">
col-md-4
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="col-lg-1" data-custom-class="bd-example-row" data-id="col-lg-1">
<div class="list-item-content">
<a class="list-item-text" href="#col-lg-1">
<span class="item-filter-text">
col-lg-#
</span>
</a>
</div>
<div class="code-snippet">
<div class="row">
<div class="col-lg-3">
col-lg-3
</div>
<div class="col-lg-5">
col-lg-5
</div>
<div class="col-lg-4">
col-lg-4
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="col-xl-1" data-custom-class="bd-example-row" data-id="col-xl-1">
<div class="list-item-content">
<a class="list-item-text" href="#col-xl-1">
<span class="item-filter-text">
col-xl-#
</span>
</a>
</div>
<div class="code-snippet">
<div class="row">
<div class="col-xl-3">
col-xl-3
</div>
<div class="col-xl-5">
col-xl-5
</div>
<div class="col-xl-4">
col-xl-4
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="col-xxl-1" data-custom-class="bd-example-row" data-id="col-xxl-1">
<div class="list-item-content">
<a class="list-item-text" href="#col-xxl-1">
<span class="item-filter-text">
col-xxl-#
</span>
</a>
</div>
<div class="code-snippet">
<div class="row">
<div class="col-xxl-3">
col-xxl-3
</div>
<div class="col-xxl-5">
col-xxl-5
</div>
<div class="col-xxl-4">
col-xxl-4
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="col" data-custom-class="bd-example-row" data-id="col">
<div class="list-item-content">
<a class="list-item-text" href="#col">
<span class="item-filter-text">
col
</span>
</a>
</div>
<div class="code-snippet">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="col-sm" data-custom-class="bd-example-row" data-id="col-sm">
<div class="list-item-content">
<a class="list-item-text" href="#col-sm">
<span class="item-filter-text">
col-*
</span>
</a>
</div>
<div class="code-snippet">
<div class="row">
<div class="col-sm">
1 of 3
</div>
<div class="col-sm">
1 of 3
</div>
<div class="col-sm">
1 of 3
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="col-sm-auto" data-custom-class="bd-example-row" data-id="col-sm-auto">
<div class="list-item-content">
<a class="list-item-text" href="#col-sm-auto">
<span class="item-filter-text">
col-*-auto
</span>
</a>
</div>
<div class="code-snippet">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="row-cols-1" data-custom-class="bd-example-row" data-id="row-cols-1">
<div class="list-item-content">
<a class="list-item-text" href="#row-cols-1">
<span class="item-filter-text">
row-cols-#
</span>
</a>
</div>
<div class="code-snippet">
<div class="row row-cols-3">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="row-cols-sm-1" data-custom-class="bd-example-row" data-id="row-cols-sm-1">
<div class="list-item-content">
<a class="list-item-text" href="#row-cols-sm-1">
<span class="item-filter-text">
row-cols-*-#
</span>
</a>
</div>
<div class="code-snippet">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xxl-6">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
</li>
<li class="list-item" data-custom-class="bd-example-row" data-id="nesting">
<div class="list-item-content">
<a class="list-item-text" href="#nesting">
<span class="item-filter-text">
nesting
</span>
</a>
</div>
<div class="code-snippet">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="offset-1" data-custom-class="bd-example-row" data-id="offset-1">
<div class="list-item-content">
<a class="list-item-text" href="#offset-1">
<span class="item-filter-text">
offset-#
</span>
</a>
</div>
<div class="code-snippet">
<div class="row">
<div class="col-3">
col-3
</div>
<div class="col-3 offset-6">
col-3 offset-6
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="offset-sm-1" data-custom-class="bd-example-row" data-id="offset-sm-1">
<div class="list-item-content">
<a class="list-item-text" href="#offset-sm-1">
<span class="item-filter-text">
offset-*-#
</span>
</a>
</div>
<div class="code-snippet">
<div class="row">
<div class="col-3">
col-3
</div>
<div class="col-3 offset-md-6">
col-3 offset-md-6
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="gx-1" data-id="gx-1">
<div class="list-item-content">
<a class="list-item-text" href="#gx-1">
<span class="item-filter-text">
gx-{size}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Different sized gutters can be used with the help of .gx-{0|1|2|3|4|5} class -->
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">
Custom column padding
</div>
</div>
<div class="col">
<div class="p-3 border bg-light">
Custom column padding
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="gx-sm-1" data-id="gx-sm-1">
<div class="list-item-content">
<a class="list-item-text" href="#gx-sm-1">
<span class="item-filter-text">
gx-*-{size}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Different sized gutters can be used with the help of .gx-*-{0|1|2|3|4|5} class -->
<div class="row gx-3 gx-xxl-5">
<div class="col">
<div class="p-3 border bg-light">
Custom column padding
</div>
</div>
<div class="col">
<div class="p-3 border bg-light">
Custom column padding
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="gy-1" data-id="gy-1">
<div class="list-item-content">
<a class="list-item-text" href="#gy-1">
<span class="item-filter-text">
gy-{size}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Different sized gutters can be used with the help of .gy-{0|1|2|3|4|5} class -->
<div class="row gy-5">
<div class="col">
<div class="p-3 border bg-light">
Custom column padding
</div>
</div>
<div class="col">
<div class="p-3 border bg-light">
Custom column padding
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="gy-sm-1" data-id="gy-sm-1">
<div class="list-item-content">
<a class="list-item-text" href="#gy-sm-1">
<span class="item-filter-text">
gy-*-{size}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Different sized gutters can be used with the help of .gy-*-{0|1|2|3|4|5} class -->
<div class="row gy-3 gy-xxl-5">
<div class="col">
<div class="p-3 border bg-light">
Custom column padding
</div>
</div>
<div class="col">
<div class="p-3 border bg-light">
Custom column padding
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="g-1" data-id="g-1">
<div class="list-item-content">
<a class="list-item-text" href="#g-1">
<span class="item-filter-text">
g-{size}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Different sized gutters can be used with the help of .g-{1|2|3|4|5} class -->
<div class="row g-3">
<div class="col">
<div class="p-3 border bg-light">
Custom column padding
</div>
</div>
<div class="col">
<div class="p-3 border bg-light">
Custom column padding
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="g-sm-1" data-id="g-sm-1">
<div class="list-item-content">
<a class="list-item-text" href="#g-sm-1">
<span class="item-filter-text">
g-*-{size}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Different sized gutters can be used with the help of .g-*-{0|1|2|3|4|5} class -->
<div class="row g-2 g-xl-4">
<div class="col">
<div class="p-3 border bg-light">
Custom column padding
</div>
</div>
<div class="col">
<div class="p-3 border bg-light">
Custom column padding
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="g-0" data-custom-class="bd-example-row" data-id="g-0">
<div class="list-item-content">
<a class="list-item-text" href="#g-0">
<span class="item-filter-text">
g-0
</span>
</a>
</div>
<div class="code-snippet">
<div class="row g-0">
<div class="col-sm-6 col-md-8">
.col-sm-6 .col-md-8
</div>
<div class="col-6 col-md-4">
.col-6 .col-md-4
</div>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="left" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/layout/grid/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryTypography" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryTypography" role="button">
<span class="item-filter-text">
Typography
</span>
</div>
<div class="card-body collapse show" id="categoryTypography">
<ul class="list-items">
<li class="list-item" data-clipboard-text="h1" data-id="h1-h6">
<div class="list-item-content">
<a class="list-item-text" href="#h1-h6">
<span class="item-filter-text">
h1-h6
</span>
</a>
</div>
<div class="code-snippet">
<p class="h1">
h1. Bootstrap heading
</p>
<p class="h2">
h2. Bootstrap heading
</p>
<p class="h3">
h3. Bootstrap heading
</p>
<p class="h4">
h4. Bootstrap heading
</p>
<p class="h5">
h5. Bootstrap heading
</p>
<p class="h6">
h6. Bootstrap heading
</p>
</div>
</li>
<li class="list-item" data-clipboard-text="text-muted" data-id="text-muted">
<div class="list-item-content">
<a class="list-item-text" href="#text-muted">
<span class="item-filter-text">
text-muted
</span>
</a>
</div>
<div class="code-snippet">
<h3>
Fancy display heading
<small class="text-muted">
With faded secondary text
</small>
</h3>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="display-1" data-id="display-1">
<div class="list-item-content">
<a class="list-item-text" href="#display-1">
<span class="item-filter-text">
display-{size}
</span>
</a>
</div>
<div class="code-snippet">
<h1 class="display-1">
Display 1
</h1>
<h1 class="display-2">
Display 2
</h1>
<h1 class="display-3">
Display 3
</h1>
<h1 class="display-4">
Display 4
</h1>
<h1 class="display-5">
Display 5
</h1>
<!-- New -->
<h1 class="display-6">
Display 6
</h1>
<!-- New -->
</div>
</li>
<li class="list-item" data-clipboard-text="lead" data-id="lead">
<div class="list-item-content">
<a class="list-item-text" href="#lead">
<span class="item-filter-text">
lead
</span>
</a>
</div>
<div class="code-snippet">
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
</div>
</li>
<li class="list-item" data-clipboard-text="mark" data-id="mark">
<div class="list-item-content">
<a class="list-item-text" href="#mark">
<span class="item-filter-text">
mark
</span>
</a>
</div>
<div class="code-snippet">
<p>
You can use .mark class to
<span class="mark">
highlight
</span>
text.
</p>
</div>
</li>
<li class="list-item" data-clipboard-text="small" data-id="small">
<div class="list-item-content">
<a class="list-item-text" href="#small">
<span class="item-filter-text">
small
</span>
</a>
</div>
<div class="code-snippet">
<p class="small">
This line of text is meant to be treated as fine print.
</p>
</div>
</li>
<li class="list-item" data-clipboard-text="initialism" data-id="initialism">
<div class="list-item-content">
<a class="list-item-text" href="#initialism">
<span class="item-filter-text">
initialism
</span>
</a>
</div>
<div class="code-snippet">
<p>
<abbr class="initialism" title="attribute">
attr
</abbr>
</p>
</div>
</li>
<li class="list-item" data-clipboard-text="blockquote" data-id="blockquote">
<div class="list-item-content">
<a class="list-item-text" href="#blockquote">
<span class="item-filter-text">
blockquote
</span>
</a>
</div>
<div class="code-snippet">
<blockquote class="blockquote">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</blockquote>
</div>
</li>
<li class="list-item" data-clipboard-text="blockquote-footer" data-id="blockquote-footer">
<div class="list-item-content">
<a class="list-item-text" href="#blockquote-footer">
<span class="item-filter-text">
blockquote-footer
</span>
</a>
</div>
<div class="code-snippet">
<figure>
<blockquote class="blockquote">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in
<cite title="Source Title">
Source Title
</cite>
</figcaption>
</figure>
</div>
</li>
<li class="list-item" data-clipboard-text="list-unstyled" data-id="list-unstyled">
<div class="list-item-content">
<a class="list-item-text" href="#list-unstyled">
<span class="item-filter-text">
list-unstyled
</span>
</a>
</div>
<div class="code-snippet">
<ul class="list-unstyled">
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Nulla volutpat aliquam velit
<ul>
<li>
Phasellus iaculis neque
</li>
<li>
Purus sodales ultricies
</li>
</ul>
</li>
<li>
Aenean sit amet erat nunc
</li>
<li>
Eget porttitor lorem
</li>
</ul>
</div>
</li>
<li class="list-item" data-clipboard-text="list-inline" data-id="list-inline">
<div class="list-item-content">
<a class="list-item-text" href="#list-inline">
<span class="item-filter-text">
list-inline
</span>
</a>
</div>
<div class="code-snippet">
<ul class="list-inline">
<li class="list-inline-item">
Lorem ipsum
</li>
<li class="list-inline-item">
Phasellus iaculis
</li>
<li class="list-inline-item">
Nulla volutpat
</li>
</ul>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="left" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/content/typography/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryImages" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryImages" role="button">
<span class="item-filter-text">
Images
</span>
</div>
<div class="card-body collapse show" id="categoryImages">
<ul class="list-items">
<li class="list-item" data-clipboard-text="img-fluid" data-id="img-fluid">
<div class="list-item-content">
<a class="list-item-text" href="#img-fluid">
<span class="item-filter-text">
img-fluid
</span>
</a>
</div>
<div class="code-snippet">
<img alt="img-fluid" class="img-fluid" src="assets/images/bs-images/img-2x1.png">
</div>
</li>
<li class="list-item" data-clipboard-text="img-thumbnail" data-id="img-thumbnail">
<div class="list-item-content">
<a class="list-item-text" href="#img-thumbnail">
<span class="item-filter-text">
img-thumbnail
</span>
</a>
</div>
<div class="code-snippet">
<img alt="img-thumbnail" class="img-thumbnail" src="assets/images/bs-images/img-2x2.png">
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="left" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/content/images/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryTables" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryTables" role="button">
<span class="item-filter-text">
Tables
</span>
</div>
<div class="card-body collapse show" id="categoryTables">
<ul class="list-items">
<li class="list-item" data-clipboard-text="table" data-id="table">
<div class="list-item-content">
<a class="list-item-text" href="#table">
<span class="item-filter-text">
table
</span>
</a>
</div>
<div class="code-snippet">
<table class="table">
<thead>
<tr>
<th scope="col">
#
</th>
<th scope="col">
First
</th>
<th scope="col">
Last
</th>
<th scope="col">
Handle
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
1
</th>
<td>
Mark
</td>
<td>
Otto
</td>
<td>
@mdo
</td>
</tr>
<tr>
<th scope="row">
2
</th>
<td>
Jacob
</td>
<td>
Thornton
</td>
<td>
@fat
</td>
</tr>
<tr>
<th scope="row">
3
</th>
<td colspan="2">
Larry the Bird
</td>
<td>
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</li>
<li class="list-item" data-clipboard-text="table-primary" data-id="table-primary">
<div class="list-item-content">
<a class="list-item-text" href="#table-primary">
<span class="item-filter-text">
table-{color}
</span>
</a>
</div>
<div class="code-snippet">
<!-- .table-{color} can be use with .table, thead, tbody, tr, th and td -->
<table class="table">
<thead>
<tr>
<th scope="col">
Class
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Default
</th>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
<tr class="table-primary">
<th scope="row">
.table-primary
</th>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
<tr class="table-secondary">
<th scope="row">
.table-secondary
</th>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
<tr class="table-success">
<th scope="row">
.table-success
</th>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
<tr class="table-danger">
<th scope="row">
.table-danger
</th>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
<tr class="table-warning">
<th scope="row">
.table-warning
</th>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
<tr class="table-info">
<th scope="row">
.table-info
</th>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
<tr class="table-light">
<th scope="row">
.table-light
</th>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
<tr class="table-dark">
<th scope="row">
.table-dark
</th>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
</tbody>
</table>
</div>
</li>
<li class="list-item" data-clipboard-text="table-striped" data-id="table-striped">
<div class="list-item-content">
<a class="list-item-text" href="#table-striped">
<span class="item-filter-text">
table-striped
</span>
</a>
</div>
<div class="code-snippet">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">
#
</th>
<th scope="col">
First
</th>
<th scope="col">
Last
</th>
<th scope="col">
Handle
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
1
</th>
<td>
Mark
</td>
<td>
Otto
</td>
<td>
@mdo
</td>
</tr>
<tr>
<th scope="row">
2
</th>
<td>
Jacob
</td>
<td>
Thornton
</td>
<td>
@fat
</td>
</tr>
<tr>
<th scope="row">
3
</th>
<td colspan="2">
Larry the Bird
</td>
<td>
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</li>
<li class="list-item" data-clipboard-text="table-hover" data-id="table-hover">
<div class="list-item-content">
<a class="list-item-text" href="#table-hover">
<span class="item-filter-text">
table-hover
</span>
</a>
</div>
<div class="code-snippet">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">
#
</th>
<th scope="col">
First
</th>
<th scope="col">
Last
</th>
<th scope="col">
Handle
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
1
</th>
<td>
Mark
</td>
<td>
Otto
</td>
<td>
@mdo
</td>
</tr>
<tr>
<th scope="row">
2
</th>
<td>
Jacob
</td>
<td>
Thornton
</td>
<td>
@fat
</td>
</tr>
<tr>
<th scope="row">
3
</th>
<td colspan="2">
Larry the Bird
</td>
<td>
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</li>
<li class="list-item" data-clipboard-text="table-active" data-id="table-active">
<div class="list-item-content">
<a class="list-item-text" href="#table-active">
<span class="item-filter-text">
table-active
</span>
</a>
</div>
<div class="code-snippet">
<table class="table">
<thead>
<tr>
<th scope="col">
#
</th>
<th scope="col">
First
</th>
<th scope="col">
Last
</th>
<th scope="col">
Handle
</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">
1
</th>
<td>
Mark
</td>
<td>
Otto
</td>
<td>
@mdo
</td>
</tr>
<tr>
<th scope="row">
2
</th>
<td>
Jacob
</td>
<td>
Thornton
</td>
<td>
@fat
</td>
</tr>
<tr>
<th scope="row">
3
</th>
<td class="table-active" colspan="2">
Larry the Bird
</td>
<td>
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</li>
<li class="list-item" data-clipboard-text="table-bordered" data-id="table-bordered">
<div class="list-item-content">
<a class="list-item-text" href="#table-bordered">
<span class="item-filter-text">
table-bordered
</span>
</a>
</div>
<div class="code-snippet">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">
#
</th>
<th scope="col">
First
</th>
<th scope="col">
Last
</th>
<th scope="col">
Handle
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
1
</th>
<td>
Mark
</td>
<td>
Otto
</td>
<td>
@mdo
</td>
</tr>
<tr>
<th scope="row">
2
</th>
<td>
Jacob
</td>
<td>
Thornton
</td>
<td>
@fat
</td>
</tr>
<tr>
<th scope="row">
3
</th>
<td colspan="2">
Larry the Bird
</td>
<td>
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</li>
<li class="list-item" data-clipboard-text="table-borderless" data-id="table-borderless">
<div class="list-item-content">
<a class="list-item-text" href="#table-borderless">
<span class="item-filter-text">
table-borderless
</span>
</a>
</div>
<div class="code-snippet">
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">
#
</th>
<th scope="col">
First
</th>
<th scope="col">
Last
</th>
<th scope="col">
Handle
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
1
</th>
<td>
Mark
</td>
<td>
Otto
</td>
<td>
@mdo
</td>
</tr>
<tr>
<th scope="row">
2
</th>
<td>
Jacob
</td>
<td>
Thornton
</td>
<td>
@fat
</td>
</tr>
<tr>
<th scope="row">
3
</th>
<td colspan="2">
Larry the Bird
</td>
<td>
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</li>
<li class="list-item" data-clipboard-text="table-sm" data-id="table-sm">
<div class="list-item-content">
<a class="list-item-text" href="#table-sm">
<span class="item-filter-text">
table-sm
</span>
</a>
</div>
<div class="code-snippet">
<table class="table table-sm">
<thead>
<tr>
<th scope="col">
#
</th>
<th scope="col">
First
</th>
<th scope="col">
Last
</th>
<th scope="col">
Handle
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
1
</th>
<td>
Mark
</td>
<td>
Otto
</td>
<td>
@mdo
</td>
</tr>
<tr>
<th scope="row">
2
</th>
<td>
Jacob
</td>
<td>
Thornton
</td>
<td>
@fat
</td>
</tr>
<tr>
<th scope="row">
3
</th>
<td colspan="2">
Larry the Bird
</td>
<td>
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</li>
<li class="list-item" data-clipboard-text="caption-top" data-id="caption-top">
<div class="list-item-content">
<a class="list-item-text" href="#caption-top">
<span class="item-filter-text">
caption-top
</span>
</a>
</div>
<div class="code-snippet">
<table class="table caption-top">
<caption>
List of users
</caption>
<thead>
<tr>
<th scope="col">
#
</th>
<th scope="col">
First
</th>
<th scope="col">
Last
</th>
<th scope="col">
Handle
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
1
</th>
<td>
Mark
</td>
<td>
Otto
</td>
<td>
@mdo
</td>
</tr>
<tr>
<th scope="row">
2
</th>
<td>
Jacob
</td>
<td>
Thornton
</td>
<td>
@fat
</td>
</tr>
<tr>
<th scope="row">
3
</th>
<td colspan="2">
Larry the Bird
</td>
<td>
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</li>
<li class="list-item" data-clipboard-text="table-responsive" data-id="table-responsive">
<div class="list-item-content">
<a class="list-item-text" href="#table-responsive">
<span class="item-filter-text">
table-responsive
</span>
</a>
</div>
<div class="code-snippet">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">
#
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
1
</th>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
<tr>
<th scope="row">
2
</th>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
<tr>
<th scope="row">
3
</th>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="table-responsive-sm" data-id="table-responsive-sm">
<div class="list-item-content">
<a class="list-item-text" href="#table-responsive-sm">
<span class="item-filter-text">
table-responsive-*
</span>
</a>
</div>
<div class="code-snippet">
<div class="table-responsive-xl">
<table class="table">
<thead>
<tr>
<th scope="col">
#
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
<th scope="col">
Heading
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
1
</th>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
<tr>
<th scope="row">
2
</th>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
<tr>
<th scope="row">
3
</th>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
<td>
Cell
</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="left" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/content/tables/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryFigures" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryFigures" role="button">
<span class="item-filter-text">
Figures
</span>
</div>
<div class="card-body collapse show" id="categoryFigures">
<ul class="list-items">
<li class="list-item" data-clipboard-text="figure" data-id="figure">
<div class="list-item-content">
<a class="list-item-text" href="#figure">
<span class="item-filter-text">
figure
</span>
</a>
</div>
<div class="code-snippet">
<figure class="figure">
<img alt="figure-img" class="figure-img img-fluid rounded" src="assets/images/bs-images/img-4x3.png">
<figcaption class="figure-caption">
A caption for the above image.
</figcaption>
</figure>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/content/figures/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryForms" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryForms" role="button">
<span class="item-filter-text">
Forms
</span>
</div>
<div class="card-body collapse show" id="categoryForms">
<ul class="list-items">
<li class="list-item" data-clipboard-text="form-control" data-id="form-control">
<div class="list-item-content">
<a class="list-item-text" href="#form-control">
<span class="item-filter-text">
form-control
</span>
</a>
</div>
<div class="code-snippet">
<input class="form-control" placeholder="Default Input" type="text">
</div>
</li>
<li class="list-item" data-clipboard-text="form-label" data-id="form-label" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#form-label">
<span class="item-filter-text">
form-label
</span>
</a>
</div>
<div class="code-snippet">
<label class="form-label" for="formControlInput">
Email address
</label>
<input class="form-control" id="formControlInput" placeholder="[email protected]" type="email">
</div>
</li>
<li class="list-item" data-clipboard-text="form-control-lg" data-id="form-control-lg">
<div class="list-item-content">
<a class="list-item-text" href="#form-control-lg">
<span class="item-filter-text">
form-control-lg
</span>
</a>
</div>
<div class="code-snippet">
<input aria-label=".form-control-lg" class="form-control form-control-lg" placeholder=".form-control-lg" type="text">
</div>
</li>
<li class="list-item" data-clipboard-text="form-control-sm" data-id="form-control-sm">
<div class="list-item-content">
<a class="list-item-text" href="#form-control-sm">
<span class="item-filter-text">
form-control-sm
</span>
</a>
</div>
<div class="code-snippet">
<input aria-label=".form-control-sm" class="form-control form-control-sm" placeholder=".form-control-sm" type="text">
</div>
</li>
<li class="list-item" data-clipboard-text="form-control-plaintext" data-id="form-control-plaintext" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#form-control-plaintext">
<span class="item-filter-text">
form-control-plaintext
</span>
</a>
</div>
<div class="code-snippet">
<label class="form-label" for="staticInput">
Email
</label>
<input class="form-control-plaintext" id="staticInput" readonly="" type="text" value="[email protected]">
</div>
</li>
<li class="list-item" data-id="file-input" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#file-input">
<span class="item-filter-text">
file input
</span>
</a>
</div>
<div class="code-snippet">
<label class="form-label" for="formFile">
Default file input
</label>
<input class="form-control" id="formFile" type="file">
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="form-control-color" data-id="form-control-color" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#form-control-color">
<span class="item-filter-text">
form-control-color
</span>
</a>
</div>
<div class="code-snippet">
<label class="form-label" for="colorInput">
Color picker
</label>
<input class="form-control form-control-color" id="colorInput" title="Choose your color" type="color" value="#563d7c">
</div>
</li>
<li class="list-item" data-clipboard-text="form-select" data-id="form-select">
<div class="list-item-content">
<a class="list-item-text" href="#form-select">
<span class="item-filter-text">
form-select
</span>
</a>
</div>
<div class="code-snippet">
<select aria-label="Default select" class="form-select">
<option selected="">
Open this select menu
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</option>
</select>
</div>
</li>
<li class="list-item" data-clipboard-text="form-select-lg" data-id="form-select-lg">
<div class="list-item-content">
<a class="list-item-text" href="#form-select-lg">
<span class="item-filter-text">
form-select-lg
</span>
</a>
</div>
<div class="code-snippet">
<select aria-label="Large select" class="form-select form-select-lg">
<option selected="">
Open this select menu
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</option>
</select>
</div>
</li>
<li class="list-item" data-clipboard-text="form-select-sm" data-id="form-select-sm">
<div class="list-item-content">
<a class="list-item-text" href="#form-select-sm">
<span class="item-filter-text">
form-select-sm
</span>
</a>
</div>
<div class="code-snippet">
<select aria-label="Small select" class="form-select form-select-sm">
<option selected="">
Open this select menu
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</option>
</select>
</div>
</li>
<li class="list-item" data-clipboard-text="form-check" data-id="form-check-checkbox" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#form-check-checkbox">
<span class="item-filter-text">
form-check (checkbox)
</span>
</a>
</div>
<div class="code-snippet">
<div class="form-check">
<input class="form-check-input" id="formCheckDefault" type="checkbox" value="">
<label class="form-check-label" for="formCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input checked="" class="form-check-input" id="formCheckChecked" type="checkbox" value="">
<label class="form-check-label" for="formCheckChecked">
Checked checkbox
</label>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="form-check-inline" data-id="form-check-inline-checkbox" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#form-check-inline-checkbox">
<span class="item-filter-text">
form-check-inline (checkbox)
</span>
</a>
</div>
<div class="code-snippet">
<div class="form-check form-check-inline">
<input class="form-check-input" id="inlineCheckDefault" type="checkbox" value="">
<label class="form-check-label" for="inlineCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check form-check-inline">
<input checked="" class="form-check-input" id="inlineCheckChecked" type="checkbox" value="">
<label class="form-check-label" for="inlineCheckChecked">
Checked checkbox
</label>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="form-check" data-id="form-check-radio" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#form-check-radio">
<span class="item-filter-text">
form-check (radio)
</span>
</a>
</div>
<div class="code-snippet">
<div class="form-check">
<input class="form-check-input" id="formRadioDefault" name="radioDefault" type="radio">
<label class="form-check-label" for="formRadioDefault">
Default radio
</label>
</div>
<div class="form-check">
<input checked="" class="form-check-input" id="formRadioChecked" name="radioDefault" type="radio">
<label class="form-check-label" for="formRadioChecked">
Default checked radio
</label>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="form-check-inline" data-id="form-check-inline-radio" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#form-check-inline-radio">
<span class="item-filter-text">
form-check-inline (radio)
</span>
</a>
</div>
<div class="code-snippet">
<div class="form-check form-check-inline">
<input class="form-check-input" id="inlineRadioDefault" name="radioInline" type="radio">
<label class="form-check-label" for="inlineRadioDefault">
Default radio
</label>
</div>
<div class="form-check form-check-inline">
<input checked="" class="form-check-input" id="inlineRadioChecked" name="radioInline" type="radio">
<label class="form-check-label" for="inlineRadioChecked">
Default checked radio
</label>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="form-switch" data-id="form-switch" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#form-switch">
<span class="item-filter-text">
form-switch
</span>
</a>
</div>
<div class="code-snippet">
<div class="form-check form-switch">
<input class="form-check-input" id="formSwitchCheckDefault" type="checkbox">
<label class="form-check-label" for="formSwitchCheckDefault">
Default switch checkbox input
</label>
</div>
<div class="form-check form-switch">
<input checked="" class="form-check-input" id="formSwitchCheckChecked" type="checkbox">
<label class="form-check-label" for="formSwitchCheckChecked">
Checked switch checkbox input
</label>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="form-range" data-id="form-range" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#form-range">
<span class="item-filter-text">
form-range
</span>
</a>
</div>
<div class="code-snippet">
<label class="form-label" for="formRange">
Example range
</label>
<input class="form-range" id="formRange" max="5" min="0" step="0.5" type="range">
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/forms/form-control/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryInputGroup" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryInputGroup" role="button">
<span class="item-filter-text">
Input Group
</span>
</div>
<div class="card-body collapse show" id="categoryInputGroup">
<ul class="list-items">
<li class="list-item" data-clipboard-text="input-group" data-id="input-group-left">
<div class="list-item-content">
<a class="list-item-text" href="#input-group-left">
<span class="item-filter-text">
input-group (left side)
</span>
</a>
</div>
<div class="code-snippet">
<div class="input-group">
<span class="input-group-text" id="input-group-left-example">
@
</span>
<input aria-describedby="input-group-left" aria-label="Username" class="form-control" placeholder="Username" type="text">
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="input-group" data-id="input-group-right">
<div class="list-item-content">
<a class="list-item-text" href="#input-group-right">
<span class="item-filter-text">
input-group (right side)
</span>
</a>
</div>
<div class="code-snippet">
<div class="input-group">
<input aria-describedby="input-group-right" aria-label="Username" class="form-control" placeholder="Username" type="text">
<span class="input-group-text" id="input-group-right-example">
@
</span>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="input-group" data-id="input-group-both">
<div class="list-item-content">
<a class="list-item-text" href="#input-group-both">
<span class="item-filter-text">
input-group (both side)
</span>
</a>
</div>
<div class="code-snippet">
<div class="input-group">
<span class="input-group-text">
$
</span>
<input aria-label="Amount (to the nearest dollar)" class="form-control" type="text">
<span class="input-group-text">
.00
</span>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="input-group-lg" data-id="input-group-lg">
<div class="list-item-content">
<a class="list-item-text" href="#input-group-lg">
<span class="item-filter-text">
input-group-lg
</span>
</a>
</div>
<div class="code-snippet">
<div class="input-group input-group-lg">
<span class="input-group-text" id="input-group-lg-example">
Large
</span>
<input aria-describedby="input-group-lg" aria-label="Large input group" class="form-control" type="text">
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="input-group-sm" data-id="input-group-sm">
<div class="list-item-content">
<a class="list-item-text" href="#input-group-sm">
<span class="item-filter-text">
input-group-sm
</span>
</a>
</div>
<div class="code-snippet">
<div class="input-group input-group-sm">
<span class="input-group-text" id="input-group-sm-example">
Small
</span>
<input aria-describedby="input-group-sm" aria-label="Small input group" class="form-control" type="text">
</div>
</div>
</li>
<li class="list-item" data-id="input-group-checkbox">
<div class="list-item-content">
<a class="list-item-text" href="#input-group-checkbox">
<span class="item-filter-text">
input-group with checkbox
</span>
</a>
</div>
<div class="code-snippet">
<div class="input-group">
<div class="input-group-text">
<input aria-label="Checkbox for following text input" class="form-check-input" type="checkbox" value="">
</div>
<input aria-label="Text input with checkbox" class="form-control" type="text">
</div>
</div>
</li>
<li class="list-item" data-id="input-group-radio">
<div class="list-item-content">
<a class="list-item-text" href="#input-group-radio">
<span class="item-filter-text">
input-group with radio
</span>
</a>
</div>
<div class="code-snippet">
<div class="input-group">
<div class="input-group-text">
<input aria-label="Radio for following text input" class="form-check-input" type="radio" value="">
</div>
<input aria-label="Text input with radio" class="form-control" type="text">
</div>
</div>
</li>
<li class="list-item" data-id="input-group-button">
<div class="list-item-content">
<a class="list-item-text" href="#input-group-button">
<span class="item-filter-text">
input-group with button
</span>
</a>
</div>
<div class="code-snippet">
<div class="input-group mb-2">
<button class="btn btn-outline-secondary" id="input-group-button-left" type="button">
Button
</button>
<input aria-describedby="input-group-button-left" aria-label="Username" class="form-control" placeholder="Username" type="text">
</div>
<div class="input-group">
<input aria-describedby="input-group-button-right" aria-label="Username" class="form-control" placeholder="Username" type="text">
<button class="btn btn-outline-secondary" id="input-group-button-right" type="button">
Button
</button>
</div>
</div>
</li>
<li class="list-item" data-id="input-group-dropdown">
<div class="list-item-content">
<a class="list-item-text" href="#input-group-dropdown">
<span class="item-filter-text">
input-group with dropdown
</span>
</a>
</div>
<div class="code-snippet">
<div class="input-group mb-2">
<button aria-expanded="false" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
Dropdown
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#">
Separated link
</a>
</li>
</ul>
<input aria-label="Text input with dropdown button" class="form-control" type="text">
</div>
<div class="input-group">
<input aria-label="Text input with segmented dropdown button" class="form-control" type="text">
<button class="btn btn-outline-secondary" type="button">
Action
</button>
<button aria-expanded="false" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" type="button">
<span class="visually-hidden">
Toggle Dropdown
</span>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#">
Separated link
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/forms/input-group/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryFloatingLabels" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryFloatingLabels" role="button">
<span class="item-filter-text">
Floating Labels
</span>
</div>
<div class="card-body collapse show" id="categoryFloatingLabels">
<ul class="list-items">
<li class="list-item list-item-bs-new" data-clipboard-text="form-floating" data-id="form-floating">
<div class="list-item-content">
<a class="list-item-text" href="#form-floating">
<span class="item-filter-text">
form-floating
</span>
</a>
</div>
<div class="code-snippet">
<div class="form-floating mb-3">
<input class="form-control" id="floatingInput" placeholder="[email protected]" type="email">
<label for="floatingInput">
Email address
</label>
</div>
<div class="form-floating">
<input class="form-control" id="floatingPassword" placeholder="Password" type="password">
<label for="floatingPassword">
Password
</label>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-id="form-floating-textarea">
<div class="list-item-content">
<a class="list-item-text" href="#form-floating-textarea">
<span class="item-filter-text">
form-floating with textarea
</span>
</a>
</div>
<div class="code-snippet">
<div class="form-floating">
<textarea class="form-control" id="floatingTextarea" placeholder="Leave a comment here" style="height: 100px"></textarea>
<label for="floatingTextarea">
Comments
</label>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-id="form-floating-select">
<div class="list-item-content">
<a class="list-item-text" href="#form-floating-select">
<span class="item-filter-text">
form-floating with select
</span>
</a>
</div>
<div class="code-snippet">
<div class="form-floating">
<select aria-label="Floating label select example" class="form-select" id="floatingSelect">
<option selected="">
Open this select menu
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</option>
</select>
<label for="floatingSelect">
Works with selects
</label>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/forms/floating-labels/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryFormLayout" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryFormLayout" role="button">
<span class="item-filter-text">
Form Layout
</span>
</div>
<div class="card-body collapse show" id="categoryFormLayout">
<ul class="list-items">
<li class="list-item" data-id="form-horizontal" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#form-horizontal">
<span class="item-filter-text">
horizontal form
</span>
</a>
</div>
<div class="code-snippet">
<form>
<div class="row mb-3">
<label class="col-sm-2 col-form-label" for="inputEmail3">
Email
</label>
<div class="col-sm-10">
<input class="form-control" id="inputEmail3" type="email">
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label" for="inputPassword3">
Password
</label>
<div class="col-sm-10">
<input class="form-control" id="inputPassword3" type="password">
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">
Radios
</legend>
<div class="col-sm-10">
<div class="form-check">
<input checked="" class="form-check-input" id="gridRadios1" name="gridRadios" type="radio" value="option1">
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" id="gridRadios2" name="gridRadios" type="radio" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" disabled="" id="gridRadios3" name="gridRadios" type="radio" value="option3">
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" id="gridCheck1" type="checkbox">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">
Sign in
</button>
</form>
</div>
</li>
<li class="list-item" data-clipboard-text="col-form-label-sm" data-id="col-form-label-sm" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#col-form-label-sm">
<span class="item-filter-text">
col-form-label-{size}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Different sized labels for horizontal form can be used with the help of .col-form-label-{sm|lg} class -->
<div class="row mb-3">
<label class="col-sm-2 col-form-label col-form-label-lg" for="colFormLabelLg">
Email
</label>
<div class="col-sm-10">
<input class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg" type="email">
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label" for="colFormLabel">
Email
</label>
<div class="col-sm-10">
<input class="form-control" id="colFormLabel" placeholder="col-form-label" type="email">
</div>
</div>
<div class="row">
<label class="col-sm-2 col-form-label col-form-label-sm" for="colFormLabelSm">
Email
</label>
<div class="col-sm-10">
<input class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm" type="email">
</div>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/forms/layout/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryFormValidation" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryFormValidation" role="button">
<span class="item-filter-text">
Form Validation
</span>
</div>
<div class="card-body collapse show" id="categoryFormValidation">
<ul class="list-items">
<li class="list-item" data-clipboard-text="valid-feedback" data-id="valid-feedback" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#valid-feedback">
<span class="item-filter-text">
valid-feedback
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate validation:
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
-->
<form class="row g-3 needs-validation" novalidate="">
<div class="col-md-4">
<label class="form-label" for="validationCustom01">
First name
</label>
<input class="form-control" id="validationCustom01" required="" type="text" value="Mark">
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label class="form-label" for="validationCustom02">
Last name
</label>
<input class="form-control" id="validationCustom02" required="" type="text" value="Otto">
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label class="form-label" for="validationCustomUsername">
Username
</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">
@
</span>
<input aria-describedby="inputGroupPrepend" class="form-control" id="validationCustomUsername" required="" type="text">
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label" for="validationCustom03">
City
</label>
<input class="form-control" id="validationCustom03" required="" type="text">
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label class="form-label" for="validationCustom04">
State
</label>
<select class="form-select" id="validationCustom04" required="">
<option disabled="" selected="" value="">
Choose...
</option>
<option>
Option 1
</option>
<option>
Option 2
</option>
<option>
Option 3
</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label class="form-label" for="validationCustom05">
Zip
</label>
<input class="form-control" id="validationCustom05" required="" type="text">
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" id="invalidCheck" required="" type="checkbox" value="">
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">
Submit form
</button>
</div>
</form>
</div>
</li>
<li class="list-item" data-clipboard-text="valid-tooltip" data-id="valid-tooltip" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#valid-tooltip">
<span class="item-filter-text">
valid-tooltip
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate validation:
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
-->
<form class="row g-3 needs-validation" novalidate="">
<div class="col-md-4 position-relative">
<label class="form-label" for="validationTooltip01">
First name
</label>
<input class="form-control" id="validationTooltip01" required="" type="text" value="Mark">
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 position-relative">
<label class="form-label" for="validationTooltip02">
Last name
</label>
<input class="form-control" id="validationTooltip02" required="" type="text" value="Otto">
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 position-relative">
<label class="form-label" for="validationTooltipUsername">
Username
</label>
<div class="input-group has-validation">
<span class="input-group-text" id="validationTooltipUsernamePrepend">
@
</span>
<input aria-describedby="validationTooltipUsernamePrepend" class="form-control" id="validationTooltipUsername" required="" type="text">
<div class="invalid-tooltip">
Please choose a unique and valid username.
</div>
</div>
</div>
<div class="col-md-6 position-relative">
<label class="form-label" for="validationTooltip03">
City
</label>
<input class="form-control" id="validationTooltip03" required="" type="text">
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 position-relative">
<label class="form-label" for="validationTooltip04">
State
</label>
<select class="form-select" id="validationTooltip04" required="">
<option disabled="" selected="" value="">
Choose...
</option>
<option>
...
</option>
</select>
<div class="invalid-tooltip">
Please select a valid state.
</div>
</div>
<div class="col-md-3 position-relative">
<label class="form-label" for="validationTooltip05">
Zip
</label>
<input class="form-control" id="validationTooltip05" required="" type="text">
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">
Submit form
</button>
</div>
</form>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/forms/validation/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryAccordion" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryAccordion" role="button">
<span class="item-filter-text">
Accordion
</span>
</div>
<div class="card-body collapse show" id="categoryAccordion">
<ul class="list-items">
<li class="list-item" data-clipboard-text="accordion" data-id="accordion" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#accordion">
<span class="item-filter-text">
accordion
</span>
</a>
</div>
<div class="code-snippet">
<div class="accordion" id="accordionBasic">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button aria-controls="collapseOne" aria-expanded="true" class="accordion-button" data-bs-target="#collapseOne" data-bs-toggle="collapse" type="button">
Accordion Item #1
</button>
</h2>
<div aria-labelledby="headingOne" class="accordion-collapse collapse show" data-bs-parent="#accordionBasic" id="collapseOne">
<div class="accordion-body">
<strong>
This is the first item's accordion body.
</strong>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
<code>
.accordion-body
</code>
, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button aria-controls="collapseTwo" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapseTwo" data-bs-toggle="collapse" type="button">
Accordion Item #2
</button>
</h2>
<div aria-labelledby="headingTwo" class="accordion-collapse collapse" data-bs-parent="#accordionBasic" id="collapseTwo">
<div class="accordion-body">
<strong>
This is the second item's accordion body.
</strong>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
<code>
.accordion-body
</code>
, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button aria-controls="collapseThree" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapseThree" data-bs-toggle="collapse" type="button">
Accordion Item #3
</button>
</h2>
<div aria-labelledby="headingThree" class="accordion-collapse collapse" data-bs-parent="#accordionBasic" id="collapseThree">
<div class="accordion-body">
<strong>
This is the third item's accordion body.
</strong>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
<code>
.accordion-body
</code>
, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="accordion-flush" data-id="accordion-flush" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#accordion-flush">
<span class="item-filter-text">
accordion-flush
</span>
</a>
</div>
<div class="code-snippet">
<div class="accordion accordion-flush" id="accordionFlush">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button aria-controls="flush-collapseOne" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapseOne" data-bs-toggle="collapse" type="button">
Accordion Item #1
</button>
</h2>
<div aria-labelledby="flush-headingOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlush" id="flush-collapseOne">
<div class="accordion-body">
<strong>
This is the first item's accordion body.
</strong>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
<code>
.accordion-body
</code>
, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button aria-controls="flush-collapseTwo" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapseTwo" data-bs-toggle="collapse" type="button">
Accordion Item #2
</button>
</h2>
<div aria-labelledby="flush-headingTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlush" id="flush-collapseTwo">
<div class="accordion-body">
<strong>
This is the second item's accordion body.
</strong>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
<code>
.accordion-body
</code>
, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button aria-controls="flush-collapseThree" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapseThree" data-bs-toggle="collapse" type="button">
Accordion Item #3
</button>
</h2>
<div aria-labelledby="flush-headingThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlush" id="flush-collapseThree">
<div class="accordion-body">
<strong>
This is the third item's accordion body.
</strong>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
<code>
.accordion-body
</code>
, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/accordion/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryAlerts" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryAlerts" role="button">
<span class="item-filter-text">
Alerts
</span>
</div>
<div class="card-body collapse show" id="categoryAlerts">
<ul class="list-items">
<li class="list-item" data-clipboard-text="alert-primary" data-id="alert-primary">
<div class="list-item-content">
<a class="list-item-text" href="#alert-primary">
<span class="item-filter-text">
alert-primary
</span>
</a>
</div>
<div class="code-snippet">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="alert-secondary" data-id="alert-secondary">
<div class="list-item-content">
<a class="list-item-text" href="#alert-secondary">
<span class="item-filter-text">
alert-secondary
</span>
</a>
</div>
<div class="code-snippet">
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="alert-success" data-id="alert-success">
<div class="list-item-content">
<a class="list-item-text" href="#alert-success">
<span class="item-filter-text">
alert-success
</span>
</a>
</div>
<div class="code-snippet">
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="alert-danger" data-id="alert-danger">
<div class="list-item-content">
<a class="list-item-text" href="#alert-danger">
<span class="item-filter-text">
alert-danger
</span>
</a>
</div>
<div class="code-snippet">
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="alert-warning" data-id="alert-warning">
<div class="list-item-content">
<a class="list-item-text" href="#alert-warning">
<span class="item-filter-text">
alert-warning
</span>
</a>
</div>
<div class="code-snippet">
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="alert-info" data-id="alert-info">
<div class="list-item-content">
<a class="list-item-text" href="#alert-info">
<span class="item-filter-text">
alert-info
</span>
</a>
</div>
<div class="code-snippet">
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="alert-light" data-custom-class="bg-secondary" data-id="alert-light">
<div class="list-item-content">
<a class="list-item-text" href="#alert-light">
<span class="item-filter-text">
alert-light
</span>
</a>
</div>
<div class="code-snippet">
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="alert-dark" data-id="alert-dark">
<div class="list-item-content">
<a class="list-item-text" href="#alert-dark">
<span class="item-filter-text">
alert-dark
</span>
</a>
</div>
<div class="code-snippet">
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="alert-link" data-id="alert-link">
<div class="list-item-content">
<a class="list-item-text" href="#alert-link">
<span class="item-filter-text">
alert-link
</span>
</a>
</div>
<div class="code-snippet">
<div class="alert alert-primary" role="alert">
A simple primary alert with
<a class="alert-link" href="#">
an example link
</a>
. Give it a click if you like.
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="alert-dismissible" data-id="alert-dismissible">
<div class="list-item-content">
<a class="list-item-text" href="#alert-dismissible">
<span class="item-filter-text">
alert-dismissible
</span>
</a>
</div>
<div class="code-snippet">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>
Holy guacamole!
</strong>
You should check in on some of those fields below.
<button aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button">
</button>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/alerts/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryBadge" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryBadge" role="button">
<span class="item-filter-text">
Badge
</span>
</div>
<div class="card-body collapse show" id="categoryBadge">
<ul class="list-items">
<li class="list-item" data-clipboard-text="badge bg-primary" data-id="badge-primary">
<div class="list-item-content">
<a class="list-item-text" href="#badge-primary">
<span class="item-filter-text">
primary
</span>
</a>
</div>
<div class="code-snippet">
<span class="badge bg-primary">
Primary
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="badge bg-secondary" data-id="badge-secondary">
<div class="list-item-content">
<a class="list-item-text" href="#badge-secondary">
<span class="item-filter-text">
secondary
</span>
</a>
</div>
<div class="code-snippet">
<span class="badge bg-secondary">
Secondary
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="badge bg-success" data-id="badge-success">
<div class="list-item-content">
<a class="list-item-text" href="#badge-success">
<span class="item-filter-text">
success
</span>
</a>
</div>
<div class="code-snippet">
<span class="badge bg-success">
Success
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="badge bg-danger" data-id="badge-danger">
<div class="list-item-content">
<a class="list-item-text" href="#badge-danger">
<span class="item-filter-text">
danger
</span>
</a>
</div>
<div class="code-snippet">
<span class="badge bg-danger">
Danger
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="badge bg-warning text-dark" data-id="badge-warning">
<div class="list-item-content">
<a class="list-item-text" href="#badge-warning">
<span class="item-filter-text">
warning
</span>
</a>
</div>
<div class="code-snippet">
<span class="badge bg-warning text-dark">
Warning
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="badge bg-info text-dark" data-id="badge-info">
<div class="list-item-content">
<a class="list-item-text" href="#badge-info">
<span class="item-filter-text">
info
</span>
</a>
</div>
<div class="code-snippet">
<span class="badge bg-info text-dark">
Info
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="badge bg-light text-dark" data-id="badge-light">
<div class="list-item-content">
<a class="list-item-text" href="#badge-light">
<span class="item-filter-text">
light
</span>
</a>
</div>
<div class="code-snippet">
<span class="badge bg-light text-dark">
Light
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="badge bg-dark" data-id="badge-dark">
<div class="list-item-content">
<a class="list-item-text" href="#badge-dark">
<span class="item-filter-text">
dark
</span>
</a>
</div>
<div class="code-snippet">
<span class="badge bg-dark">
Dark
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="badge bg-primary rounded-pill" data-id="badge-pill">
<div class="list-item-content">
<a class="list-item-text" href="#badge-pill">
<span class="item-filter-text">
pill badge
</span>
</a>
</div>
<div class="code-snippet">
<span class="badge bg-primary rounded-pill">
Pill Badge
</span>
</div>
</li>
<li class="list-item" data-id="badge-notification">
<div class="list-item-content">
<a class="list-item-text" href="#badge-notification">
<span class="item-filter-text">
notification badge
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-primary" type="button">
Notifications
<span class="badge bg-secondary">
4
</span>
</button>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/badge/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryBreadcrumb" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryBreadcrumb" role="button">
<span class="item-filter-text">
Breadcrumb
</span>
</div>
<div class="card-body collapse show" id="categoryBreadcrumb">
<ul class="list-items">
<li class="list-item" data-clipboard-text="breadcrumb" data-id="breadcrumb">
<div class="list-item-content">
<a class="list-item-text" href="#breadcrumb">
<span class="item-filter-text">
breadcrumb
</span>
</a>
</div>
<div class="code-snippet">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li aria-current="page" class="breadcrumb-item active">
Home
</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">
Home
</a>
</li>
<li aria-current="page" class="breadcrumb-item active">
Library
</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">
Home
</a>
</li>
<li class="breadcrumb-item">
<a href="#">
Library
</a>
</li>
<li aria-current="page" class="breadcrumb-item active">
Data
</li>
</ol>
</nav>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="--bs-breadcrumb-divider" data-id="breadcrumb-change-divider">
<div class="list-item-content">
<a class="list-item-text" href="#breadcrumb-change-divider">
<span class="item-filter-text">
change divider
</span>
</a>
</div>
<div class="code-snippet">
<nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">
Home
</a>
</li>
<li aria-current="page" class="breadcrumb-item active">
Library
</li>
</ol>
</nav>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/breadcrumb/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryButtons" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryButtons" role="button">
<span class="item-filter-text">
Buttons
</span>
</div>
<div class="card-body collapse show" id="categoryButtons">
<ul class="list-items">
<li class="list-item" data-clipboard-text="btn-primary" data-id="btn-primary">
<div class="list-item-content">
<a class="list-item-text" href="#btn-primary">
<span class="item-filter-text">
btn-primary
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-primary" type="button">
Primary
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-secondary" data-id="btn-secondary">
<div class="list-item-content">
<a class="list-item-text" href="#btn-secondary">
<span class="item-filter-text">
btn-secondary
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-secondary" type="button">
Secondary
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-success" data-id="btn-success">
<div class="list-item-content">
<a class="list-item-text" href="#btn-success">
<span class="item-filter-text">
btn-success
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-success" type="button">
Success
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-danger" data-id="btn-danger">
<div class="list-item-content">
<a class="list-item-text" href="#btn-danger">
<span class="item-filter-text">
btn-danger
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-danger" type="button">
Danger
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-warning" data-id="btn-warning">
<div class="list-item-content">
<a class="list-item-text" href="#btn-warning">
<span class="item-filter-text">
btn-warning
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-warning" type="button">
Warning
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-info" data-id="btn-info">
<div class="list-item-content">
<a class="list-item-text" href="#btn-info">
<span class="item-filter-text">
btn-info
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-info" type="button">
Info
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-light" data-id="btn-light">
<div class="list-item-content">
<a class="list-item-text" href="#btn-light">
<span class="item-filter-text">
btn-light
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-light" type="button">
Light
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-dark" data-id="btn-dark">
<div class="list-item-content">
<a class="list-item-text" href="#btn-dark">
<span class="item-filter-text">
btn-dark
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-dark" type="button">
Dark
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-link" data-id="btn-link">
<div class="list-item-content">
<a class="list-item-text" href="#btn-link">
<span class="item-filter-text">
btn-link
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-link" type="button">
Link
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-outline-primary" data-id="btn-outline-primary">
<div class="list-item-content">
<a class="list-item-text" href="#btn-outline-primary">
<span class="item-filter-text">
btn-outline-primary
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-outline-primary" type="button">
Primary
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-outline-secondary" data-id="btn-outline-secondary">
<div class="list-item-content">
<a class="list-item-text" href="#btn-outline-secondary">
<span class="item-filter-text">
btn-outline-secondary
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-outline-secondary" type="button">
Secondary
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-outline-success" data-id="btn-outline-success">
<div class="list-item-content">
<a class="list-item-text" href="#btn-outline-success">
<span class="item-filter-text">
btn-outline-success
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-outline-success" type="button">
Success
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-outline-danger" data-id="btn-outline-danger">
<div class="list-item-content">
<a class="list-item-text" href="#btn-outline-danger">
<span class="item-filter-text">
btn-outline-danger
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-outline-danger" type="button">
Danger
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-outline-warning" data-id="btn-outline-warning">
<div class="list-item-content">
<a class="list-item-text" href="#btn-outline-warning">
<span class="item-filter-text">
btn-outline-warning
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-outline-warning" type="button">
Warning
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-outline-info" data-id="btn-outline-info">
<div class="list-item-content">
<a class="list-item-text" href="#btn-outline-info">
<span class="item-filter-text">
btn-outline-info
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-outline-info" type="button">
Info
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-outline-light" data-custom-class="bg-secondary" data-id="btn-outline-light">
<div class="list-item-content">
<a class="list-item-text" href="#btn-outline-light">
<span class="item-filter-text">
btn-outline-light
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-outline-light" type="button">
Light
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-outline-dark" data-id="btn-outline-dark">
<div class="list-item-content">
<a class="list-item-text" href="#btn-outline-dark">
<span class="item-filter-text">
btn-outline-dark
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-outline-dark" type="button">
Dark
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-lg" data-id="btn-lg">
<div class="list-item-content">
<a class="list-item-text" href="#btn-lg">
<span class="item-filter-text">
btn-lg
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-primary btn-lg" type="button">
Large button
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-sm" data-id="btn-sm">
<div class="list-item-content">
<a class="list-item-text" href="#btn-sm">
<span class="item-filter-text">
btn-sm
</span>
</a>
</div>
<div class="code-snippet">
<button class="btn btn-primary btn-sm" type="button">
Small button
</button>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="d-grid gap-2" data-id="button-block">
<div class="list-item-content">
<a class="list-item-text" href="#button-block">
<span class="item-filter-text">
block buttons
</span>
</a>
</div>
<div class="code-snippet">
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">
Button
</button>
<button class="btn btn-primary" type="button">
Button
</button>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="btn-close" data-id="btn-close">
<div class="list-item-content">
<a class="list-item-text" href="#btn-close">
<span class="item-filter-text">
btn-close
</span>
</a>
</div>
<div class="code-snippet">
<button aria-label="Close" class="btn-close" type="button">
</button>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="btn-close-white" data-custom-class="bg-secondary" data-id="btn-close-white">
<div class="list-item-content">
<a class="list-item-text" href="#btn-close-white">
<span class="item-filter-text">
btn-close-white
</span>
</a>
</div>
<div class="code-snippet">
<button aria-label="Close" class="btn-close btn-close-white" type="button">
</button>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/buttons/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryButtonGroup" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryButtonGroup" role="button">
<span class="item-filter-text">
Button Group
</span>
</div>
<div class="card-body collapse show" id="categoryButtonGroup">
<ul class="list-items">
<li class="list-item" data-clipboard-text="btn-group" data-id="btn-group">
<div class="list-item-content">
<a class="list-item-text" href="#btn-group">
<span class="item-filter-text">
btn-group
</span>
</a>
</div>
<div class="code-snippet">
<div aria-label="Basic button group" class="btn-group" role="group">
<button class="btn btn-primary" type="button">
Left
</button>
<button class="btn btn-primary" type="button">
Middle
</button>
<button class="btn btn-primary" type="button">
Right
</button>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-group" data-id="btn-group-link">
<div class="list-item-content">
<a class="list-item-text" href="#btn-group-link">
<span class="item-filter-text">
btn-group with links
</span>
</a>
</div>
<div class="code-snippet">
<div class="btn-group">
<a aria-current="page" class="btn btn-primary active" href="#">
Active link
</a>
<a class="btn btn-primary" href="#">
Link
</a>
<a class="btn btn-primary" href="#">
Link
</a>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-group" data-id="btn-group-outline">
<div class="list-item-content">
<a class="list-item-text" href="#btn-group-outline">
<span class="item-filter-text">
outlined btn-group
</span>
</a>
</div>
<div class="code-snippet">
<div aria-label="Basic outlined button group" class="btn-group" role="group">
<button class="btn btn-outline-primary" type="button">
Left
</button>
<button class="btn btn-outline-primary" type="button">
Middle
</button>
<button class="btn btn-outline-primary" type="button">
Right
</button>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-toolbar" data-id="btn-toolbar">
<div class="list-item-content">
<a class="list-item-text" href="#btn-toolbar">
<span class="item-filter-text">
btn-toolbar
</span>
</a>
</div>
<div class="code-snippet">
<div aria-label="Toolbar with button groups" class="btn-toolbar" role="toolbar">
<div aria-label="First group" class="btn-group me-2" role="group">
<button class="btn btn-primary" type="button">
1
</button>
<button class="btn btn-primary" type="button">
2
</button>
<button class="btn btn-primary" type="button">
3
</button>
<button class="btn btn-primary" type="button">
4
</button>
</div>
<div aria-label="Second group" class="btn-group me-2" role="group">
<button class="btn btn-secondary" type="button">
5
</button>
<button class="btn btn-secondary" type="button">
6
</button>
<button class="btn btn-secondary" type="button">
7
</button>
</div>
<div aria-label="Third group" class="btn-group" role="group">
<button class="btn btn-info" type="button">
8
</button>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-group-lg" data-id="btn-group-lg">
<div class="list-item-content">
<a class="list-item-text" href="#btn-group-lg">
<span class="item-filter-text">
btn-group-lg
</span>
</a>
</div>
<div class="code-snippet">
<div aria-label="Large button group" class="btn-group btn-group-lg" role="group">
<button class="btn btn-primary" type="button">
Left
</button>
<button class="btn btn-primary" type="button">
Middle
</button>
<button class="btn btn-primary" type="button">
Right
</button>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-group-sm" data-id="btn-group-sm">
<div class="list-item-content">
<a class="list-item-text" href="#btn-group-sm">
<span class="item-filter-text">
btn-group-sm
</span>
</a>
</div>
<div class="code-snippet">
<div aria-label="Small button group" class="btn-group btn-group-sm" role="group">
<button class="btn btn-primary" type="button">
Left
</button>
<button class="btn btn-primary" type="button">
Middle
</button>
<button class="btn btn-primary" type="button">
Right
</button>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="btn-group-vertical" data-id="btn-group-vertical">
<div class="list-item-content">
<a class="list-item-text" href="#btn-group-vertical">
<span class="item-filter-text">
btn-group-vertical
</span>
</a>
</div>
<div class="code-snippet">
<div aria-label="Vertical button group" class="btn-group-vertical" role="group">
<button class="btn btn-primary" type="button">
Button
</button>
<button class="btn btn-primary" type="button">
Button
</button>
<button class="btn btn-primary" type="button">
Button
</button>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/button-group/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryButtonPlugin" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryButtonPlugin" role="button">
<span class="item-filter-text">
Button Plugin
</span>
</div>
<div class="card-body collapse show" id="categoryButtonPlugin">
<ul class="list-items">
<li class="list-item" data-clipboard-text="data-bs-toggle='button'" data-id="button-toggle-single">
<div class="list-item-content">
<a class="list-item-text" href="#button-toggle-single">
<span class="item-filter-text">
single button toggle
</span>
</a>
</div>
<div class="code-snippet">
<button autocomplete="off" class="btn btn-outline-primary" data-bs-toggle="button" type="button">
Toggle button
</button>
</div>
</li>
<li class="list-item" data-id="btn-group-checkbox" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#btn-group-checkbox">
<span class="item-filter-text">
btn-group with checkbox
</span>
</a>
</div>
<div class="code-snippet">
<div aria-label="Basic checkbox toggle button group" class="btn-group" role="group">
<input autocomplete="off" class="btn-check" id="btnCheck1" type="checkbox">
<label class="btn btn-outline-primary" for="btnCheck1">
Checkbox 1
</label>
<input autocomplete="off" class="btn-check" id="btnCheck2" type="checkbox">
<label class="btn btn-outline-primary" for="btnCheck2">
Checkbox 2
</label>
<input autocomplete="off" class="btn-check" id="btnCheck3" type="checkbox">
<label class="btn btn-outline-primary" for="btnCheck3">
Checkbox 3
</label>
</div>
</div>
</li>
<li class="list-item" data-id="btn-group-radio" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#btn-group-radio">
<span class="item-filter-text">
btn-group with radio
</span>
</a>
</div>
<div class="code-snippet">
<div aria-label="Basic radio toggle button group" class="btn-group" role="group">
<input autocomplete="off" checked="" class="btn-check" id="btnRadio1" name="btnGroupRadio" type="radio">
<label class="btn btn-outline-primary" for="btnRadio1">
Radio 1
</label>
<input autocomplete="off" class="btn-check" id="btnRadio2" name="btnGroupRadio" type="radio">
<label class="btn btn-outline-primary" for="btnRadio2">
Radio 2
</label>
<input autocomplete="off" class="btn-check" id="btnRadio3" name="btnGroupRadio" type="radio">
<label class="btn btn-outline-primary" for="btnRadio3">
Radio 3
</label>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/buttons/#button-plugin" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryCard" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryCard" role="button">
<span class="item-filter-text">
Card
</span>
</div>
<div class="card-body collapse show" id="categoryCard">
<ul class="list-items">
<li class="list-item" data-clipboard-text="card" data-id="card">
<div class="list-item-content">
<a class="list-item-text" href="#card">
<span class="item-filter-text">
card
</span>
</a>
</div>
<div class="code-snippet">
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">
Special title treatment
</h5>
<p class="card-text">
With supporting text below as a natural lead-in to additional content.
</p>
<a class="btn btn-primary" href="#">
Go somewhere
</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="card-body" data-id="card-body">
<div class="list-item-content">
<a class="list-item-text" href="#card-body">
<span class="item-filter-text">
card-body
</span>
</a>
</div>
<div class="code-snippet">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</li>
<li class="list-item" data-id="card-titles-text-links">
<div class="list-item-content">
<a class="list-item-text" href="#card-titles-text-links">
<span class="item-filter-text">
titles, text, links
</span>
</a>
</div>
<div class="code-snippet">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Card title
</h5>
<h6 class="card-subtitle mb-2 text-muted">
Card subtitle
</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="card-link" href="#">
Card link
</a>
<a class="card-link" href="#">
Another link
</a>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="list-group list-group-flush" data-id="card-list-group">
<div class="list-item-content">
<a class="list-item-text" href="#card-list-group">
<span class="item-filter-text">
list-group
</span>
</a>
</div>
<div class="code-snippet">
<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">
Cras justo odio
</li>
<li class="list-group-item">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="card-header" data-id="card-header">
<div class="list-item-content">
<a class="list-item-text" href="#card-header">
<span class="item-filter-text">
card-header
</span>
</a>
</div>
<div class="code-snippet">
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">
Special title treatment
</h5>
<p class="card-text">
With supporting text below as a natural lead-in to additional content.
</p>
<a class="btn btn-primary" href="#">
Go somewhere
</a>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="card-footer" data-id="card-footer">
<div class="list-item-content">
<a class="list-item-text" href="#card-footer">
<span class="item-filter-text">
card-footer
</span>
</a>
</div>
<div class="code-snippet">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Special title treatment
</h5>
<p class="card-text">
With supporting text below as a natural lead-in to additional content.
</p>
<a class="btn btn-primary" href="#">
Go somewhere
</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="card-header-tabs" data-id="card-navigation" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#card-navigation">
<span class="item-filter-text">
navigation in card
</span>
</a>
</div>
<div class="code-snippet">
<!-- Tabs or Pills can be used in a card with the help of .nav-{tabs|pills} and .card-header-{tabs|pills} classes -->
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a aria-controls="home" aria-selected="true" class="nav-link active" data-bs-toggle="tab" href="#home" id="home-tab" role="tab">
Home
</a>
</li>
<li class="nav-item" role="presentation">
<a aria-controls="profile" aria-selected="false" class="nav-link" data-bs-toggle="tab" href="#profile" id="profile-tab" role="tab">
Profile
</a>
</li>
<li class="nav-item">
<a aria-controls="disabled" aria-disabled="true" class="nav-link disabled" data-bs-toggle="tab" href="#disabled" id="disabled-tab" role="tab" tabindex="-1">
Disabled
</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="myTabContent">
<div aria-labelledby="home-tab" class="tab-pane fade show active" id="home" role="tabpanel">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi alias praesentium illo omnis adipisci ipsa suscipit rerum quidem doloribus magnam?
</div>
<div aria-labelledby="profile-tab" class="tab-pane fade" id="profile" role="tabpanel">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, asperiores provident ea eaque quis omnis adipisci in exercitationem necessitatibus dolorem.
</div>
<div aria-labelledby="disabled-tab" class="tab-pane fade" id="disabled" role="tabpanel">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit rem accusamus officia quia eos ducimus consequuntur! Impedit aliquid vero suscipit.
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="card-img-top" data-id="card-img-top">
<div class="list-item-content">
<a class="list-item-text" href="#card-img-top">
<span class="item-filter-text">
card-img-top
</span>
</a>
</div>
<div class="code-snippet">
<div class="card">
<img alt="card-img-top" class="card-img-top" src="assets/images/bs-images/img-2x1.png">
<div class="card-body">
<h5 class="card-title">
Card title
</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
<p class="card-text">
<small class="text-muted">
Last updated 3 mins ago
</small>
</p>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="card-img-bottom" data-id="card-img-bottom">
<div class="list-item-content">
<a class="list-item-text" href="#card-img-bottom">
<span class="item-filter-text">
card-img-bottom
</span>
</a>
</div>
<div class="code-snippet">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Card title
</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
<p class="card-text">
<small class="text-muted">
Last updated 3 mins ago
</small>
</p>
</div>
<img alt="card-img-bottom" class="card-img-bottom" src="assets/images/bs-images/img-2x1.png">
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="card-img-overlay" data-id="card-img-overlay">
<div class="list-item-content">
<a class="list-item-text" href="#card-img-overlay">
<span class="item-filter-text">
card-img-overlay
</span>
</a>
</div>
<div class="code-snippet">
<div class="card bg-dark text-dark">
<img alt="card-img-overlay" class="card-img" src="assets/images/bs-images/img-2x1.png">
<div class="card-img-overlay">
<h5 class="card-title">
Card title
</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text">
Last updated 3 mins ago
</p>
</div>
</div>
</div>
</li>
<li class="list-item" data-id="card-horizontal">
<div class="list-item-content">
<a class="list-item-text" href="#card-horizontal">
<span class="item-filter-text">
horizontal card
</span>
</a>
</div>
<div class="code-snippet">
<div class="card">
<div class="row g-0">
<div class="col-5 col-sm-4">
<img alt="card-horizontal-image" class="img-fluid w-100" src="assets/images/bs-images/img-3x4.png">
</div>
<div class="col-7 col-sm-8">
<div class="card-body">
<h5 class="card-title">
Card title
</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text">
<small class="text-muted">
Last updated 3 mins ago
</small>
</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="bg-primary text-white" data-id="card-bg-primary">
<div class="list-item-content">
<a class="list-item-text" href="#card-bg-primary">
<span class="item-filter-text">
bg-{color}
</span>
</a>
</div>
<div class="code-snippet">
<div class="card text-white bg-primary">
<div class="card-header">
Header
</div>
<div class="card-body">
<h5 class="card-title">
Primary card title
</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="border-primary text-primary" data-id="card-border-text">
<div class="list-item-content">
<a class="list-item-text" href="#card-border-text">
<span class="item-filter-text">
border-{color}, text-{color}
</span>
</a>
</div>
<div class="code-snippet">
<div class="card border-primary text-primary">
<div class="card-header border-primary">
Header
</div>
<div class="card-body">
<h5 class="card-title">
Primary card title
</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="bg-transparent" data-id="card-bg-transparent">
<div class="list-item-content">
<a class="list-item-text" href="#card-bg-transparent">
<span class="item-filter-text">
bg-transparent
</span>
</a>
</div>
<div class="code-snippet">
<div class="card">
<div class="card-header bg-transparent">
Header
</div>
<div class="card-body">
<h5 class="card-title">
Card title
</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
<div class="card-footer bg-transparent">
Footer
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="card-group" data-id="card-group">
<div class="list-item-content">
<a class="list-item-text" href="#card-group">
<span class="item-filter-text">
card-group
</span>
</a>
</div>
<div class="code-snippet">
<div class="card-group">
<div class="card">
<img alt="card-group-image" class="card-img-top" src="assets/images/bs-images/img-2x1.png">
<div class="card-body">
<h5 class="card-title">
Card title
</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
</div>
<div class="card-footer">
<small class="text-muted">
Last updated 3 mins ago
</small>
</div>
</div>
<div class="card">
<img alt="card-group-image" class="card-img-top" src="assets/images/bs-images/img-2x1.png">
<div class="card-body">
<h5 class="card-title">
Card title
</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
</div>
<div class="card-footer">
<small class="text-muted">
Last updated 3 mins ago
</small>
</div>
</div>
<div class="card">
<img alt="card-group-image" class="card-img-top" src="assets/images/bs-images/img-2x1.png">
<div class="card-body">
<h5 class="card-title">
Card title
</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
</p>
</div>
<div class="card-footer">
<small class="text-muted">
Last updated 3 mins ago
</small>
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="row-cols-1 row-cols-sm-2" data-id="card-grid">
<div class="list-item-content">
<a class="list-item-text" href="#card-grid">
<span class="item-filter-text">
grid cards
</span>
</a>
</div>
<div class="code-snippet">
<div class="row row-cols-1 row-cols-sm-2 g-3">
<div class="col">
<div class="card">
<img alt="card-grid-image" class="card-img-top" src="assets/images/bs-images/img-2x1.png">
<div class="card-body">
<h5 class="card-title">
Card title
</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img alt="card-grid-image" class="card-img-top" src="assets/images/bs-images/img-2x1.png">
<div class="card-body">
<h5 class="card-title">
Card title
</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img alt="card-grid-image" class="card-img-top" src="assets/images/bs-images/img-2x1.png">
<div class="card-body">
<h5 class="card-title">
Card title
</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to additional content.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img alt="card-grid-image" class="card-img-top" src="assets/images/bs-images/img-2x1.png">
<div class="card-body">
<h5 class="card-title">
Card title
</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/card/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryCarousel" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryCarousel" role="button">
<span class="item-filter-text">
Carousel
</span>
</div>
<div class="card-body collapse show" id="categoryCarousel">
<ul class="list-items">
<li class="list-item" data-clipboard-text="carousel" data-id="carousel">
<div class="list-item-content">
<a class="list-item-text" href="#carousel">
<span class="item-filter-text">
carousel (slides only)
</span>
</a>
</div>
<div class="code-snippet">
<div class="carousel slide" data-bs-ride="carousel" id="carouselSlidesOnly">
<div class="carousel-inner">
<div class="carousel-item active">
<img alt="Slide 1" class="d-block w-100" src="assets/images/bs-images/carousel-slide-1.png">
</div>
<div class="carousel-item">
<img alt="Slide 2" class="d-block w-100" src="assets/images/bs-images/carousel-slide-2.png">
</div>
<div class="carousel-item">
<img alt="Slide 3" class="d-block w-100" src="assets/images/bs-images/carousel-slide-3.png">
</div>
</div>
</div>
</div>
</li>
<li class="list-item" data-id="carousel-controls">
<div class="list-item-content">
<a class="list-item-text" href="#carousel-controls">
<span class="item-filter-text">
carousel with controls
</span>
</a>
</div>
<div class="code-snippet">
<div class="carousel slide" data-bs-ride="carousel" id="carouselWithControls">
<div class="carousel-inner">
<div class="carousel-item active">
<img alt="Slide 1" class="d-block w-100" src="assets/images/bs-images/carousel-slide-1.png">
</div>
<div class="carousel-item">
<img alt="Slide 2" class="d-block w-100" src="assets/images/bs-images/carousel-slide-2.png">
</div>
<div class="carousel-item">
<img alt="Slide 3" class="d-block w-100" src="assets/images/bs-images/carousel-slide-3.png">
</div>
</div>
<a class="carousel-control-prev" data-bs-slide="prev" href="#carouselWithControls" role="button">
<span aria-hidden="true" class="carousel-control-prev-icon">
</span>
<span class="visually-hidden">
Previous
</span>
</a>
<a class="carousel-control-next" data-bs-slide="next" href="#carouselWithControls" role="button">
<span aria-hidden="true" class="carousel-control-next-icon">
</span>
<span class="visually-hidden">
Next
</span>
</a>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="carousel-indicators" data-id="carousel-indicators">
<div class="list-item-content">
<a class="list-item-text" href="#carousel-indicators">
<span class="item-filter-text">
carousel-indicators
</span>
</a>
</div>
<div class="code-snippet">
<div class="carousel slide" data-bs-ride="carousel" id="carouselWithIndicators">
<ol class="carousel-indicators">
<li class="active" data-bs-slide-to="0" data-bs-target="#carouselWithIndicators">
</li>
<li data-bs-slide-to="1" data-bs-target="#carouselWithIndicators">
</li>
<li data-bs-slide-to="2" data-bs-target="#carouselWithIndicators">
</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img alt="Slide 1" class="d-block w-100" src="assets/images/bs-images/carousel-slide-1.png">
</div>
<div class="carousel-item">
<img alt="Slide 2" class="d-block w-100" src="assets/images/bs-images/carousel-slide-2.png">
</div>
<div class="carousel-item">
<img alt="Slide 3" class="d-block w-100" src="assets/images/bs-images/carousel-slide-3.png">
</div>
</div>
<a class="carousel-control-prev" data-bs-slide="prev" href="#carouselWithIndicators" role="button">
<span aria-hidden="true" class="carousel-control-prev-icon">
</span>
<span class="visually-hidden">
Previous
</span>
</a>
<a class="carousel-control-next" data-bs-slide="next" href="#carouselWithIndicators" role="button">
<span aria-hidden="true" class="carousel-control-next-icon">
</span>
<span class="visually-hidden">
Next
</span>
</a>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="carousel-caption" data-id="carousel-caption">
<div class="list-item-content">
<a class="list-item-text" href="#carousel-caption">
<span class="item-filter-text">
carousel-caption
</span>
</a>
</div>
<div class="code-snippet">
<div class="carousel slide" data-bs-ride="carousel" id="carouselWithCaptions">
<ol class="carousel-indicators">
<li class="active" data-bs-slide-to="0" data-bs-target="#carouselWithCaptions">
</li>
<li data-bs-slide-to="1" data-bs-target="#carouselWithCaptions">
</li>
<li data-bs-slide-to="2" data-bs-target="#carouselWithCaptions">
</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img alt="Slide 1" class="d-block w-100" src="assets/images/bs-images/carousel-slide-1.png">
<div class="carousel-caption d-none d-sm-block">
<h5>
First slide label
</h5>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.
</p>
</div>
</div>
<div class="carousel-item">
<img alt="Slide 2" class="d-block w-100" src="assets/images/bs-images/carousel-slide-2.png">
<div class="carousel-caption d-none d-sm-block">
<h5>
Second slide label
</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="carousel-item">
<img alt="Slide 3" class="d-block w-100" src="assets/images/bs-images/carousel-slide-3.png">
<div class="carousel-caption d-none d-sm-block">
<h5>
Third slide label
</h5>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</div>
</div>
</div>
<a class="carousel-control-prev" data-bs-slide="prev" href="#carouselWithCaptions" role="button">
<span aria-hidden="true" class="carousel-control-prev-icon">
</span>
<span class="visually-hidden">
Previous
</span>
</a>
<a class="carousel-control-next" data-bs-slide="next" href="#carouselWithCaptions" role="button">
<span aria-hidden="true" class="carousel-control-next-icon">
</span>
<span class="visually-hidden">
Next
</span>
</a>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="carousel-fade" data-id="carousel-fade">
<div class="list-item-content">
<a class="list-item-text" href="#carousel-fade">
<span class="item-filter-text">
carousel-fade
</span>
</a>
</div>
<div class="code-snippet">
<div class="carousel slide carousel-fade" data-bs-ride="carousel" id="carouselCrossfade">
<div class="carousel-inner">
<div class="carousel-item active">
<img alt="Slide 1" class="d-block w-100" src="assets/images/bs-images/carousel-slide-1.png">
</div>
<div class="carousel-item">
<img alt="Slide 2" class="d-block w-100" src="assets/images/bs-images/carousel-slide-2.png">
</div>
<div class="carousel-item">
<img alt="Slide 3" class="d-block w-100" src="assets/images/bs-images/carousel-slide-3.png">
</div>
</div>
<a class="carousel-control-prev" data-bs-slide="prev" href="#carouselCrossfade" role="button">
<span aria-hidden="true" class="carousel-control-prev-icon">
</span>
<span class="visually-hidden">
Previous
</span>
</a>
<a class="carousel-control-next" data-bs-slide="next" href="#carouselCrossfade" role="button">
<span aria-hidden="true" class="carousel-control-next-icon">
</span>
<span class="visually-hidden">
Next
</span>
</a>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="data-bs-interval" data-id="carousel-intervals">
<div class="list-item-content">
<a class="list-item-text" href="#carousel-intervals">
<span class="item-filter-text">
carousel with intervals
</span>
</a>
</div>
<div class="code-snippet">
<div class="carousel slide" data-bs-ride="carousel" id="carouselWithInterval">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img alt="Slide 1" class="d-block w-100" src="assets/images/bs-images/carousel-slide-1.png">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img alt="Slide 2" class="d-block w-100" src="assets/images/bs-images/carousel-slide-2.png">
</div>
<div class="carousel-item">
<img alt="Slide 3" class="d-block w-100" src="assets/images/bs-images/carousel-slide-3.png">
</div>
</div>
<a class="carousel-control-prev" data-bs-slide="prev" href="#carouselWithInterval" role="button">
<span aria-hidden="true" class="carousel-control-prev-icon">
</span>
<span class="visually-hidden">
Previous
</span>
</a>
<a class="carousel-control-next" data-bs-slide="next" href="#carouselWithInterval" role="button">
<span aria-hidden="true" class="carousel-control-next-icon">
</span>
<span class="visually-hidden">
Next
</span>
</a>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="carousel-dark" data-id="carousel-dark">
<div class="list-item-content">
<a class="list-item-text" href="#carousel-dark">
<span class="item-filter-text">
carousel-dark
</span>
</a>
</div>
<div class="code-snippet">
<div class="carousel carousel-dark slide" data-bs-ride="carousel" id="carouselDark">
<ol class="carousel-indicators">
<li class="active" data-bs-slide-to="0" data-bs-target="#carouselDark">
</li>
<li data-bs-slide-to="1" data-bs-target="#carouselDark">
</li>
<li data-bs-slide-to="2" data-bs-target="#carouselDark">
</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img alt="Slide 1" class="d-block w-100" src="assets/images/bs-images/carousel-dark-slide-1.png">
<div class="carousel-caption d-none d-sm-block">
<h5>
First slide label
</h5>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.
</p>
</div>
</div>
<div class="carousel-item">
<img alt="Slide 2" class="d-block w-100" src="assets/images/bs-images/carousel-dark-slide-2.png">
<div class="carousel-caption d-none d-sm-block">
<h5>
Second slide label
</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="carousel-item">
<img alt="Slide 3" class="d-block w-100" src="assets/images/bs-images/carousel-dark-slide-3.png">
<div class="carousel-caption d-none d-sm-block">
<h5>
Third slide label
</h5>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</div>
</div>
</div>
<a class="carousel-control-prev" data-bs-slide="prev" href="#carouselDark" role="button">
<span aria-hidden="true" class="carousel-control-prev-icon">
</span>
<span class="visually-hidden">
Previous
</span>
</a>
<a class="carousel-control-next" data-bs-slide="next" href="#carouselDark" role="button">
<span aria-hidden="true" class="carousel-control-next-icon">
</span>
<span class="visually-hidden">
Next
</span>
</a>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/carousel/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryCollapse" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryCollapse" role="button">
<span class="item-filter-text">
Collapse
</span>
</div>
<div class="card-body collapse show" id="categoryCollapse">
<ul class="list-items">
<li class="list-item" data-clipboard-text="collapse" data-id="collapse">
<div class="list-item-content">
<a class="list-item-text" href="#collapse">
<span class="item-filter-text">
collapse
</span>
</a>
</div>
<div class="code-snippet">
<p>
<a aria-controls="collapseExample" aria-expanded="false" class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button">
Link with href
</a>
<button aria-controls="collapseExample" aria-expanded="false" class="btn btn-primary" data-bs-target="#collapseExample" data-bs-toggle="collapse" type="button">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="multi-collapse" data-id="collapse-multi">
<div class="list-item-content">
<a class="list-item-text" href="#collapse-multi">
<span class="item-filter-text">
multi-collapse
</span>
</a>
</div>
<div class="code-snippet">
<p>
<a aria-controls="multiCollapse1" aria-expanded="false" class="btn btn-primary mb-1" data-bs-toggle="collapse" href="#multiCollapse1" role="button">
Toggle first element
</a>
<button aria-controls="multiCollapse2" aria-expanded="false" class="btn btn-primary mb-1" data-bs-target="#multiCollapse2" data-bs-toggle="collapse" type="button">
Toggle second element
</button>
<button aria-controls="multiCollapse1 multiCollapse2" aria-expanded="false" class="btn btn-primary mb-1" data-bs-target=".multi-collapse" data-bs-toggle="collapse" type="button">
Toggle both elements
</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapse1">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapse2">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="collapse-horizontal" data-id="collapse-horizontal">
<div class="list-item-content">
<a class="list-item-text" href="#collapse-horizontal">
<span class="item-filter-text">
collapse-horizontal
</span>
</a>
</div>
<div class="code-snippet">
<p>
<button aria-controls="collapseWidthExample" aria-expanded="false" class="btn btn-primary" data-bs-target="#collapseWidthExample" data-bs-toggle="collapse" type="button">
Toggle width collapse
</button>
</p>
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/collapse/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryDropdowns" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryDropdowns" role="button">
<span class="item-filter-text">
Dropdowns
</span>
</div>
<div class="card-body collapse show" id="categoryDropdowns">
<ul class="list-items">
<li class="list-item" data-clipboard-text="dropdown" data-id="dropdown">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown">
<span class="item-filter-text">
dropdown
</span>
</a>
</div>
<div class="code-snippet">
<div class="dropdown">
<button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="dropdownMenuButton" type="button">
Dropdown button
</button>
<ul aria-labelledby="dropdownMenuButton" class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="dropdown-toggle-split" data-id="dropdown-toggle-split">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown-toggle-split">
<span class="item-filter-text">
dropdown-toggle-split
</span>
</a>
</div>
<div class="code-snippet">
<div class="btn-group">
<button class="btn btn-primary" type="button">
Split Button
</button>
<button aria-expanded="false" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" type="button">
<span class="visually-hidden">
Toggle Dropdown
</span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="dropdown-menu-dark" data-id="dropdown-menu-dark">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown-menu-dark">
<span class="item-filter-text">
dropdown-menu-dark
</span>
</a>
</div>
<div class="code-snippet">
<div class="dropdown">
<button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="dropdownMenuDark" type="button">
Dropdown Menu Dark
</button>
<ul aria-labelledby="dropdownMenuDark" class="dropdown-menu dropdown-menu-dark">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="dropup" data-custom-class="dropup-basic" data-id="dropdown-dropup">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown-dropup">
<span class="item-filter-text">
dropup
</span>
</a>
</div>
<div class="code-snippet">
<div class="btn-group dropup">
<button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button">
Dropup
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="dropdown-toggle-split" data-custom-class="dropup-split" data-id="dropdown-dropup-split">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown-dropup-split">
<span class="item-filter-text">
dropup (split)
</span>
</a>
</div>
<div class="code-snippet">
<div class="btn-group dropup">
<button class="btn btn-primary" type="button">
Split dropup
</button>
<button aria-expanded="false" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" type="button">
<span class="visually-hidden">
Toggle Dropdown
</span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="dropend" data-id="dropdown-dropend">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown-dropend">
<span class="item-filter-text">
dropend
</span>
</a>
</div>
<div class="code-snippet">
<div class="btn-group dropend">
<button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button">
Dropend
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="dropstart" data-id="dropdown-dropstart">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown-dropstart">
<span class="item-filter-text">
dropstart
</span>
</a>
</div>
<div class="code-snippet">
<div class="btn-group dropstart">
<button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button">
Dropstart
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="dropdown-item-text" data-id="dropdown-item-text">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown-item-text">
<span class="item-filter-text">
dropdown-item-text
</span>
</a>
</div>
<div class="code-snippet">
<div class="btn-group">
<button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button">
Dropdown item text
</button>
<ul class="dropdown-menu">
<li>
<span class="dropdown-item-text">
Dropdown item text
</span>
</li>
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="dropdown-item active" data-id="dropdown-item-active">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown-item-active">
<span class="item-filter-text">
active dropdown-item
</span>
</a>
</div>
<div class="code-snippet">
<div class="btn-group">
<button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button">
Dropdown
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Regular link
</a>
</li>
<li>
<a aria-current="true" class="dropdown-item active" href="#">
Active link
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another link
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="dropdown-item disabled" data-id="dropdown-item-disabled">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown-item-disabled">
<span class="item-filter-text">
disabled dropdown-item
</span>
</a>
</div>
<div class="code-snippet">
<div class="btn-group">
<button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button">
Dropdown
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Regular link
</a>
</li>
<li>
<a aria-disabled="true" class="dropdown-item disabled" href="#" tabindex="-1">
Disabled link
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another link
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="dropdown-menu-end" data-id="dropdown-menu-end">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown-menu-end">
<span class="item-filter-text">
dropdown-menu-end
</span>
</a>
</div>
<div class="code-snippet">
<div class="btn-group">
<button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button">
Right-aligned dropdown-menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="dropdown-menu-sm-end" data-custom-class="multiple-dropdown-direction" data-id="dropdown-menu-sm-end">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown-menu-sm-end">
<span class="item-filter-text">
dropdown-menu-*-{direction}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Right or left aligned dropdown menu can be use at different breakpoints with the help of .dropdown-menu-*-{end|start} class -->
<div class="btn-group">
<button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button">
Dropdown
</button>
<ul class="dropdown-menu dropdown-menu-sm-end dropdown-menu-xl-start">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="dropdown-header" data-id="dropdown-header">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown-header">
<span class="item-filter-text">
dropdown-header
</span>
</a>
</div>
<div class="code-snippet">
<div class="btn-group">
<button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button">
Dropdown
</button>
<ul class="dropdown-menu">
<li>
<h6 class="dropdown-header">
Dropdown header
</h6>
</li>
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="dropdown-divider" data-id="dropdown-divider">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown-divider">
<span class="item-filter-text">
dropdown-divider
</span>
</a>
</div>
<div class="code-snippet">
<div class="btn-group">
<button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button">
Dropdown
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#">
Separated link
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="data-bs-reference" data-id="dropdown-reference">
<div class="list-item-content">
<a class="list-item-text" href="#dropdown-reference">
<span class="item-filter-text">
dropdown reference
</span>
</a>
</div>
<div class="code-snippet">
<div class="btn-group">
<button class="btn btn-primary" type="button">
Reference
</button>
<button aria-expanded="false" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-reference="parent" data-bs-toggle="dropdown" id="dropdownMenuReference" type="button">
<span class="visually-hidden">
Toggle Dropdown
</span>
</button>
<ul aria-labelledby="dropdownMenuReference" class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/dropdowns/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryListGroup" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryListGroup" role="button">
<span class="item-filter-text">
List Group
</span>
</div>
<div class="card-body collapse show" id="categoryListGroup">
<ul class="list-items">
<li class="list-item" data-clipboard-text="list-group" data-id="list-group">
<div class="list-item-content">
<a class="list-item-text" href="#list-group">
<span class="item-filter-text">
list-group
</span>
</a>
</div>
<div class="code-snippet">
<ul class="list-group">
<li class="list-group-item">
Cras justo odio
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul>
</div>
</li>
<li class="list-item" data-clipboard-text="list-group-item active" data-id="list-group-item-active">
<div class="list-item-content">
<a class="list-item-text" href="#list-group-item-active">
<span class="item-filter-text">
list-group-item active
</span>
</a>
</div>
<div class="code-snippet">
<ul class="list-group">
<li aria-current="true" class="list-group-item active">
Cras justo odio
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul>
</div>
</li>
<li class="list-item" data-clipboard-text="list-group-item disabled" data-id="list-group-item-disabled">
<div class="list-item-content">
<a class="list-item-text" href="#list-group-item-disabled">
<span class="item-filter-text">
list-group-item disabled
</span>
</a>
</div>
<div class="code-snippet">
<ul class="list-group">
<li aria-disabled="true" class="list-group-item disabled">
Cras justo odio
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul>
</div>
</li>
<li class="list-item" data-clipboard-text="list-group-flush" data-id="list-group-flush">
<div class="list-item-content">
<a class="list-item-text" href="#list-group-flush">
<span class="item-filter-text">
list-group-flush
</span>
</a>
</div>
<div class="code-snippet">
<ul class="list-group list-group-flush">
<li class="list-group-item">
Cras justo odio
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul>
</div>
</li>
<li class="list-item" data-clipboard-text="list-group-numbered" data-id="list-group-numbered">
<div class="list-item-content">
<a class="list-item-text" href="#list-group-numbered">
<span class="item-filter-text">
list-group-numbered
</span>
</a>
</div>
<div class="code-snippet">
<ul class="list-group list-group-numbered">
<li class="list-group-item">
Cras justo odio
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul>
</div>
</li>
<li class="list-item" data-clipboard-text="list-group-horizontal" data-id="list-group-horizontal">
<div class="list-item-content">
<a class="list-item-text" href="#list-group-horizontal">
<span class="item-filter-text">
list-group-horizontal
</span>
</a>
</div>
<div class="code-snippet">
<ul class="list-group list-group-horizontal">
<li class="list-group-item">
Cras justo odio
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul>
</div>
</li>
<li class="list-item" data-clipboard-text="list-group-horizontal-sm" data-id="list-group-horizontal-sm">
<div class="list-item-content">
<a class="list-item-text" href="#list-group-horizontal-sm">
<span class="item-filter-text">
list-group-horizontal-*
</span>
</a>
</div>
<div class="code-snippet">
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">
Cras justo odio
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul>
</div>
</li>
<li class="list-item" data-clipboard-text="list-group-item-primary" data-id="list-group-item-primary">
<div class="list-item-content">
<a class="list-item-text" href="#list-group-item-primary">
<span class="item-filter-text">
list-group-item-{color}
</span>
</a>
</div>
<div class="code-snippet">
<ul class="list-group">
<li class="list-group-item">
Dapibus ac facilisis in
</li>
<li class="list-group-item list-group-item-primary">
A simple primary list group item
</li>
<li class="list-group-item list-group-item-secondary">
A simple secondary list group item
</li>
<li class="list-group-item list-group-item-success">
A simple success list group item
</li>
<li class="list-group-item list-group-item-danger">
A simple danger list group item
</li>
<li class="list-group-item list-group-item-warning">
A simple warning list group item
</li>
<li class="list-group-item list-group-item-info">
A simple info list group item
</li>
<li class="list-group-item list-group-item-light">
A simple light list group item
</li>
<li class="list-group-item list-group-item-dark">
A simple dark list group item
</li>
</ul>
</div>
</li>
<li class="list-item" data-clipboard-text="list-group-item-action" data-id="list-group-item-action">
<div class="list-item-content">
<a class="list-item-text" href="#list-group-item-action">
<span class="item-filter-text">
list-group-item-action
</span>
</a>
</div>
<div class="code-snippet">
<ul class="list-group">
<li class="list-group-item list-group-item-action">
Cras justo odio
</li>
<li class="list-group-item list-group-item-action">
Morbi leo risus
</li>
<li class="list-group-item list-group-item-action">
Porta ac consectetur ac
</li>
<li class="list-group-item list-group-item-action">
Vestibulum at eros
</li>
</ul>
</div>
</li>
<li class="list-item" data-id="list-group-custom">
<div class="list-item-content">
<a class="list-item-text" href="#list-group-custom">
<span class="item-filter-text">
custom content
</span>
</a>
</div>
<div class="code-snippet">
<div class="list-group">
<a aria-current="true" class="list-group-item list-group-item-action active" href="#">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">
List group item heading
</h5>
<small>
3 days ago
</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</p>
<small>
Donec id elit non mi porta.
</small>
</a>
<a class="list-group-item list-group-item-action" href="#">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">
List group item heading
</h5>
<small class="text-muted">
3 days ago
</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</p>
<small class="text-muted">
Donec id elit non mi porta.
</small>
</a>
<a class="list-group-item list-group-item-action" href="#">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">
List group item heading
</h5>
<small class="text-muted">
3 days ago
</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</p>
<small class="text-muted">
Donec id elit non mi porta.
</small>
</a>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-id="list-group-checkbox">
<div class="list-item-content">
<a class="list-item-text" href="#list-group-checkbox">
<span class="item-filter-text">
list-group with checkbox
</span>
</a>
</div>
<div class="code-snippet">
<!-- To have radio, change input type to radio and add same name attribute to all inputs -->
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox">
Cras justo odio
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox">
Dapibus ac facilisis in
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox">
Morbi leo risus
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox">
Porta ac consectetur ac
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox">
Vestibulum at eros
</label>
</div>
</div>
</li>
<li class="list-item" data-id="list-group-javascript-behavior" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#list-group-javascript-behavior">
<span class="item-filter-text">
javascript behavior
</span>
</a>
</div>
<div class="code-snippet">
<div class="row">
<div class="col-5 col-lg-4">
<div class="list-group" id="list-tab" role="tablist">
<a aria-controls="home" class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#list-home" id="list-home-list" role="tab">
Home
</a>
<a aria-controls="profile" class="list-group-item list-group-item-action" data-bs-toggle="list" href="#list-profile" id="list-profile-list" role="tab">
Profile
</a>
<a aria-controls="messages" class="list-group-item list-group-item-action" data-bs-toggle="list" href="#list-messages" id="list-messages-list" role="tab">
Messages
</a>
<a aria-controls="settings" class="list-group-item list-group-item-action" data-bs-toggle="list" href="#list-settings" id="list-settings-list" role="tab">
Settings
</a>
</div>
</div>
<div class="col-7 col-lg-8">
<div class="tab-content" id="list-nav-tabContent">
<div aria-labelledby="list-home-list" class="tab-pane fade show active" id="list-home" role="tabpanel">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime consequatur inventore neque laborum, dolores nemo magnam perspiciatis aperiam nisi, in dignissimos quas sint rem placeat.
</div>
<div aria-labelledby="list-profile-list" class="tab-pane fade" id="list-profile" role="tabpanel">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore, omnis fugit consectetur labore error iusto esse repellat vel expedita ad eligendi asperiores cupiditate molestias consequatur!
</div>
<div aria-labelledby="list-messages-list" class="tab-pane fade" id="list-messages" role="tabpanel">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, quod aliquam esse, iste nostrum aut, aspernatur eaque dolore nulla mollitia vero ex. Illum, in ipsa!
</div>
<div aria-labelledby="list-settings-list" class="tab-pane fade" id="list-settings" role="tabpanel">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta facilis aspernatur harum eaque, quibusdam consectetur voluptatem illum maxime mollitia vitae excepturi praesentium enim, sint maiores?
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/list-group/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryModal" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryModal" role="button">
<span class="item-filter-text">
Modal
</span>
</div>
<div class="card-body collapse show" id="categoryModal">
<ul class="list-items">
<li class="list-item" data-clipboard-text="modal" data-id="modal">
<div class="list-item-content">
<a class="list-item-text" href="#modal">
<span class="item-filter-text">
modal
</span>
</a>
</div>
<div class="code-snippet">
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalBasicLabel">
Modal title
</h5>
<button aria-label="Close" class="btn-close" type="button">
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button">
Close
</button>
<button class="btn btn-primary" type="button">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="data-bs-backdrop" data-id="modal-static-backdrop">
<div class="list-item-content">
<a class="list-item-text" href="#modal-static-backdrop">
<span class="item-filter-text">
static backdrop
</span>
</a>
</div>
<div class="code-snippet">
<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalStaticBackdropLabel">
Modal title
</h5>
<button aria-label="Close" class="btn-close" type="button">
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button">
Close
</button>
<button class="btn btn-primary" type="button">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="modal-dialog-scrollable" data-id="modal-dialog-scrollable">
<div class="list-item-content">
<a class="list-item-text" href="#modal-dialog-scrollable">
<span class="item-filter-text">
modal-dialog-scrollable
</span>
</a>
</div>
<div class="code-snippet">
<div class="modal" tabindex="-1">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalScrollableLabel">
Modal title
</h5>
<button aria-label="Close" class="btn-close" type="button">
</button>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio numquam, saepe repellat perspiciatis rerum magnam, sapiente vel molestiae cum beatae error corporis eum atque eveniet!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia vero odio quos error dolorem numquam, nemo explicabo modi similique! Eveniet porro exercitationem autem ratione.
</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button">
Close
</button>
<button class="btn btn-primary" type="button">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="modal-dialog-centered" data-id="modal-dialog-centered">
<div class="list-item-content">
<a class="list-item-text" href="#modal-dialog-centered">
<span class="item-filter-text">
modal-dialog-centered
</span>
</a>
</div>
<div class="code-snippet">
<div class="modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalVerticallyCenteredLabel">
Modal title
</h5>
<button aria-label="Close" class="btn-close" type="button">
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button">
Close
</button>
<button class="btn btn-primary" type="button">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="modal-sm" data-id="modal-sm">
<div class="list-item-content">
<a class="list-item-text" href="#modal-sm">
<span class="item-filter-text">
modal-{size}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Different sized modals can be used with the help of .modal-{sm|lg|xl} class -->
<div class="modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalSizeLabel">
Modal title
</h5>
<button aria-label="Close" class="btn-close" type="button">
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button">
Close
</button>
<button class="btn btn-primary" type="button">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="modal-fullscreen" data-id="modal-fullscreen">
<div class="list-item-content">
<a class="list-item-text" href="#modal-fullscreen">
<span class="item-filter-text">
modal-fullscreen
</span>
</a>
</div>
<div class="code-snippet">
<div class="modal" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalFullscreenLabel">
Modal title
</h5>
<button aria-label="Close" class="btn-close" type="button">
</button>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio numquam, saepe repellat perspiciatis rerum magnam, sapiente vel molestiae cum beatae error corporis eum atque eveniet!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia vero odio quos error dolorem numquam, nemo explicabo modi similique! Eveniet porro exercitationem autem ratione.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint et sunt dolorum, non velit minus reprehenderit eaque, vero voluptas excepturi maxime? Atque explicabo accusantium facilis.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor illo corrupti reiciendis sapiente amet error odio repudiandae doloremque cumque, quasi eius quis possimus commodi dolorem.
</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button">
Close
</button>
<button class="btn btn-primary" type="button">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="modal-fullscreen-sm-down" data-id="modal-fullscreen-sm-down">
<div class="list-item-content">
<a class="list-item-text" href="#modal-fullscreen-sm-down">
<span class="item-filter-text">
modal-fullscreen-*-down
</span>
</a>
</div>
<div class="code-snippet">
<div class="modal" tabindex="-1">
<div class="modal-dialog modal-fullscreen-md-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalFullscreenSizeLabel">
Modal title
</h5>
<button aria-label="Close" class="btn-close" type="button">
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button">
Close
</button>
<button class="btn btn-primary" type="button">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/modal/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryNavsTabsPills" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryNavsTabsPills" role="button">
<span class="item-filter-text">
Navs, Tabs, Pills
</span>
</div>
<div class="card-body collapse show" id="categoryNavsTabsPills">
<ul class="list-items">
<li class="list-item" data-clipboard-text="nav" data-id="nav-ul">
<div class="list-item-content">
<a class="list-item-text" href="#nav-ul">
<span class="item-filter-text">
ul.nav
</span>
</a>
</div>
<div class="code-snippet">
<ul class="nav">
<li class="nav-item">
<a aria-current="page" class="nav-link active" href="#">
Active
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link
</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</li>
</ul>
</div>
</li>
<li class="list-item" data-clipboard-text="nav" data-id="nav-nav">
<div class="list-item-content">
<a class="list-item-text" href="#nav-nav">
<span class="item-filter-text">
nav.nav
</span>
</a>
</div>
<div class="code-snippet">
<nav class="nav">
<a aria-current="page" class="nav-link active" href="#">
Active
</a>
<a class="nav-link" href="#">
Link
</a>
<a class="nav-link" href="#">
Link
</a>
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="nav flex-column" data-id="nav-flex-column">
<div class="list-item-content">
<a class="list-item-text" href="#nav-flex-column">
<span class="item-filter-text">
vertical nav
</span>
</a>
</div>
<div class="code-snippet">
<nav class="nav flex-column">
<a aria-current="page" class="nav-link active" href="#">
Active
</a>
<a class="nav-link" href="#">
Link
</a>
<a class="nav-link" href="#">
Link
</a>
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="nav-tabs" data-id="nav-tabs" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#nav-tabs">
<span class="item-filter-text">
nav-tabs
</span>
</a>
</div>
<div class="code-snippet">
<nav class="nav nav-tabs" id="nav-tab" role="tablist">
<a aria-controls="nav-home" aria-selected="true" class="nav-link active" data-bs-toggle="tab" href="#nav-home" id="nav-home-tab" role="tab">
Home
</a>
<a aria-controls="nav-profile" aria-selected="false" class="nav-link" data-bs-toggle="tab" href="#nav-profile" id="nav-profile-tab" role="tab">
Profile
</a>
<a aria-controls="nav-disabled" aria-disabled="true" class="nav-link disabled" data-bs-toggle="tab" href="#nav-disabled" id="nav-disabled-tab" role="tab" tabindex="-1">
Disabled
</a>
</nav>
<div class="tab-content" id="nav-tabContent">
<div aria-labelledby="nav-home-tab" class="tab-pane fade show active" id="nav-home" role="tabpanel">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid tempore tempora molestiae pariatur, voluptate fuga corrupti est reiciendis maxime totam dolores, voluptates, dolorem eaque sequi.
</div>
<div aria-labelledby="nav-profile-tab" class="tab-pane fade" id="nav-profile" role="tabpanel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, natus sed soluta necessitatibus tempore aspernatur? Praesentium, odit explicabo distinctio dolore adipisci officia iure, ut magnam optio aliquam at similique veritatis.
</div>
<div aria-labelledby="nav-disabled-tab" class="tab-pane fade" id="nav-disabled" role="tabpanel">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium minima repellat incidunt facilis obcaecati blanditiis corrupti ad officia doloribus ullam sapiente ipsum, nemo a, excepturi voluptatem voluptatibus velit eum dignissimos ut, nam tempora? Reiciendis illo itaque veritatis eligendi fuga, mollitia ratione totam veniam esse in.
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="nav-pills" data-id="nav-pills" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#nav-pills">
<span class="item-filter-text">
nav-pills
</span>
</a>
</div>
<div class="code-snippet">
<nav class="nav nav-pills" id="pills-tab" role="tablist">
<a aria-controls="pills-home" aria-selected="true" class="nav-link active" data-bs-toggle="pill" href="#pills-home" id="pills-home-tab" role="tab">
Home
</a>
<a aria-controls="pills-profile" aria-selected="false" class="nav-link" data-bs-toggle="pill" href="#pills-profile" id="pills-profile-tab" role="tab">
Profile
</a>
<a aria-controls="pills-disabled" aria-disabled="true" class="nav-link disabled" data-bs-toggle="pill" href="#pills-disabled" id="pills-disabled-tab" role="tab" tabindex="-1">
Disabled
</a>
</nav>
<div class="tab-content" id="pills-tabContent">
<div aria-labelledby="pills-home-tab" class="tab-pane fade show active" id="pills-home" role="tabpanel">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid tempore tempora molestiae pariatur, voluptate fuga corrupti est reiciendis maxime totam dolores, voluptates, dolorem eaque sequi.
</div>
<div aria-labelledby="pills-profile-tab" class="tab-pane fade" id="pills-profile" role="tabpanel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, natus sed soluta necessitatibus tempore aspernatur? Praesentium, odit explicabo distinctio dolore adipisci officia iure, ut magnam optio aliquam at similique veritatis.
</div>
<div aria-labelledby="pills-disabled-tab" class="tab-pane fade" id="pills-disabled" role="tabpanel">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium minima repellat incidunt facilis obcaecati blanditiis corrupti ad officia doloribus ullam sapiente ipsum, nemo a, excepturi voluptatem voluptatibus velit eum dignissimos ut, nam tempora? Reiciendis illo itaque veritatis eligendi fuga, mollitia ratione totam veniam esse in.
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="nav-fill" data-id="nav-fill">
<div class="list-item-content">
<a class="list-item-text" href="#nav-fill">
<span class="item-filter-text">
nav-fill
</span>
</a>
</div>
<div class="code-snippet">
<nav class="nav nav-pills nav-fill">
<a aria-current="page" class="nav-link active" href="#">
Active
</a>
<a class="nav-link" href="#">
Much longer nav link
</a>
<a class="nav-link" href="#">
Link
</a>
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="nav-justified" data-id="nav-justified">
<div class="list-item-content">
<a class="list-item-text" href="#nav-justified">
<span class="item-filter-text">
nav-justified
</span>
</a>
</div>
<div class="code-snippet">
<nav class="nav nav-pills nav-justified">
<a aria-current="page" class="nav-link active" href="#">
Active
</a>
<a class="nav-link" href="#">
Much longer nav link
</a>
<a class="nav-link" href="#">
Link
</a>
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</nav>
</div>
</li>
<li class="list-item" data-id="nav-tabs-dropdown">
<div class="list-item-content">
<a class="list-item-text" href="#nav-tabs-dropdown">
<span class="item-filter-text">
nav-tabs with dropdown
</span>
</a>
</div>
<div class="code-snippet">
<ul class="nav nav-tabs">
<li class="nav-item">
<a aria-current="page" class="nav-link active" href="#">
Active
</a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button">
Dropdown
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#">
Separated link
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link
</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</li>
</ul>
</div>
</li>
<li class="list-item" data-id="nav-pills-dropdown">
<div class="list-item-content">
<a class="list-item-text" href="#nav-pills-dropdown">
<span class="item-filter-text">
nav-pills with dropdown
</span>
</a>
</div>
<div class="code-snippet">
<ul class="nav nav-pills">
<li class="nav-item">
<a aria-current="page" class="nav-link active" href="#">
Active
</a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button">
Dropdown
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#">
Separated link
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link
</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</li>
</ul>
</div>
</li>
<li class="list-item" data-id="nav-pills-vertical" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#nav-pills-vertical">
<span class="item-filter-text">
vertical pills
</span>
</a>
</div>
<div class="code-snippet">
<div class="d-flex align-items-start">
<div aria-orientation="vertical" class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist">
<a aria-controls="v-pills-home" aria-selected="true" class="nav-link active" data-bs-toggle="pill" href="#v-pills-home" id="v-pills-home-tab" role="tab">
Home
</a>
<a aria-controls="v-pills-profile" aria-selected="false" class="nav-link" data-bs-toggle="pill" href="#v-pills-profile" id="v-pills-profile-tab" role="tab">
Profile
</a>
<a aria-controls="v-pills-messages" aria-selected="false" class="nav-link" data-bs-toggle="pill" href="#v-pills-messages" id="v-pills-messages-tab" role="tab">
Messages
</a>
<a aria-controls="v-pills-settings" aria-selected="false" class="nav-link" data-bs-toggle="pill" href="#v-pills-settings" id="v-pills-settings-tab" role="tab">
Settings
</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div aria-labelledby="v-pills-home-tab" class="tab-pane fade show active" id="v-pills-home" role="tabpanel">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis aperiam accusantium facere minus totam, id cumque sequi ea harum necessitatibus animi inventore, sunt iste dicta libero consectetur ab eligendi repudiandae.
</div>
<div aria-labelledby="v-pills-profile-tab" class="tab-pane fade" id="v-pills-profile" role="tabpanel">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id ducimus veniam optio porro impedit amet odio aliquam officia non nobis quisquam soluta repudiandae, earum nulla.
</div>
<div aria-labelledby="v-pills-messages-tab" class="tab-pane fade" id="v-pills-messages" role="tabpanel">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, dolores blanditiis labore praesentium sunt aperiam adipisci voluptatem minus tempore voluptatibus, aspernatur illum temporibus! Rem, quidem? Reiciendis ex explicabo perferendis nobis.
</div>
<div aria-labelledby="v-pills-settings-tab" class="tab-pane fade" id="v-pills-settings" role="tabpanel">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum consectetur voluptates inventore adipisci quaerat asperiores ab blanditiis excepturi sunt, assumenda est ad voluptatum, iste provident?
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/navs-tabs/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryNavbar" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryNavbar" role="button">
<span class="item-filter-text">
Navbar
</span>
</div>
<div class="card-body collapse show" id="categoryNavbar">
<ul class="list-items">
<li class="list-item" data-clipboard-text="navbar" data-id="navbar">
<div class="list-item-content">
<a class="list-item-text" href="#navbar">
<span class="item-filter-text">
navbar
</span>
</a>
</div>
<div class="code-snippet">
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Navbar
</a>
<button aria-controls="navbarBasic" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarBasic" data-bs-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarBasic">
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
<li class="nav-item">
<a aria-current="page" class="nav-link active" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link
</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</li>
</ul>
<form class="d-flex">
<input aria-label="Search" class="form-control me-2" placeholder="Search" type="search">
<button class="btn btn-outline-success" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="navbar-brand" data-id="navbar-brand">
<div class="list-item-content">
<a class="list-item-text" href="#navbar-brand">
<span class="item-filter-text">
navbar-brand
</span>
</a>
</div>
<div class="code-snippet">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Navbar
</a>
</div>
</nav>
</div>
</li>
<li class="list-item" data-id="navbar-without-list">
<div class="list-item-content">
<a class="list-item-text" href="#navbar-without-list">
<span class="item-filter-text">
navbar without using list
</span>
</a>
</div>
<div class="code-snippet">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Navbar
</a>
<button aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarNavAltMarkup" data-bs-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a aria-current="page" class="nav-link active" href="#">
Home
</a>
<a class="nav-link" href="#">
Features
</a>
<a class="nav-link" href="#">
Pricing
</a>
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</div>
</div>
</div>
</nav>
</div>
</li>
<li class="list-item" data-id="navbar-dropdown">
<div class="list-item-content">
<a class="list-item-text" href="#navbar-dropdown">
<span class="item-filter-text">
navbar with dropdown
</span>
</a>
</div>
<div class="code-snippet">
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Navbar
</a>
<button aria-controls="navbarWithDropdown" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarWithDropdown" data-bs-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarWithDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a aria-current="page" class="nav-link active" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="navbarDropdownMenuLink" role="button">
Dropdown link
</a>
<ul aria-labelledby="navbarDropdownMenuLink" class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="navbar-text" data-id="navbar-text">
<div class="list-item-content">
<a class="list-item-text" href="#navbar-text">
<span class="item-filter-text">
navbar-text
</span>
</a>
</div>
<div class="code-snippet">
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Navbar
</a>
<button aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarText" data-bs-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
<li class="nav-item">
<a aria-current="page" class="nav-link active" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</div>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="navbar-dark bg-dark" data-id="navbar-dark">
<div class="list-item-content">
<a class="list-item-text" href="#navbar-dark">
<span class="item-filter-text">
navbar-dark
</span>
</a>
</div>
<div class="code-snippet">
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Navbar
</a>
<button aria-controls="navbarDark" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarDark" data-bs-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarDark">
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
<li class="nav-item">
<a aria-current="page" class="nav-link active" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</li>
</ul>
<form class="d-flex">
<input aria-label="Search" class="form-control me-2" placeholder="Search" type="search">
<button class="btn btn-outline-light" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="navbar-light bg-light" data-id="navbar-light">
<div class="list-item-content">
<a class="list-item-text" href="#navbar-light">
<span class="item-filter-text">
navbar-light
</span>
</a>
</div>
<div class="code-snippet">
<nav class="navbar navbar-expand-xl navbar-light" style="background-color: #e3f2fd;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Navbar
</a>
<button aria-controls="navbarLight" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarLight" data-bs-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarLight">
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
<li class="nav-item">
<a aria-current="page" class="nav-link active" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</li>
</ul>
<form class="d-flex">
<input aria-label="Search" class="form-control me-2" placeholder="Search" type="search">
<button class="btn btn-outline-primary" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="fixed-top" data-id="navbar-fixed-top">
<div class="list-item-content">
<a class="list-item-text" href="#navbar-fixed-top">
<span class="item-filter-text">
fixed-top
</span>
</a>
</div>
<div class="code-snippet">
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Fixed top
</a>
</div>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="fixed-bottom" data-id="navbar-fixed-bottom">
<div class="list-item-content">
<a class="list-item-text" href="#navbar-fixed-bottom">
<span class="item-filter-text">
fixed-bottom
</span>
</a>
</div>
<div class="code-snippet">
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Fixed bottom
</a>
</div>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="sticky-top" data-id="navbar-sticky-top">
<div class="list-item-content">
<a class="list-item-text" href="#navbar-sticky-top">
<span class="item-filter-text">
sticky-top
</span>
</a>
</div>
<div class="code-snippet">
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Sticky top
</a>
</div>
</nav>
</div>
</li>
<li class="list-item" data-id="navbar-brand-collapse">
<div class="list-item-content">
<a class="list-item-text" href="#navbar-brand-collapse">
<span class="item-filter-text">
brand in collapse
</span>
</a>
</div>
<div class="code-snippet">
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<div class="container-fluid">
<button aria-controls="navbarTogglerDemo1" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarTogglerDemo1" data-bs-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo1">
<a class="navbar-brand" href="#">
Hidden brand
</a>
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
<li class="nav-item">
<a aria-current="page" class="nav-link active" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link
</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</li>
</ul>
<form class="d-flex">
<input aria-label="Search" class="form-control me-2" placeholder="Search" type="search">
<button class="btn btn-outline-success" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="navbar-toggler" data-id="navbar-toggler-right">
<div class="list-item-content">
<a class="list-item-text" href="#navbar-toggler-right">
<span class="item-filter-text">
navbar-toggler on right
</span>
</a>
</div>
<div class="code-snippet">
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Navbar
</a>
<button aria-controls="navbarTogglerDemo2" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarTogglerDemo2" data-bs-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo2">
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
<li class="nav-item">
<a aria-current="page" class="nav-link active" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link
</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</li>
</ul>
<form class="d-flex">
<input aria-label="Search" class="form-control me-2" placeholder="Search" type="search">
<button class="btn btn-outline-success" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="navbar-toggler" data-id="navbar-toggler-left">
<div class="list-item-content">
<a class="list-item-text" href="#navbar-toggler-left">
<span class="item-filter-text">
navbar-toggler on left
</span>
</a>
</div>
<div class="code-snippet">
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<div class="container-fluid">
<button aria-controls="navbarTogglerDemo3" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarTogglerDemo3" data-bs-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<a class="navbar-brand" href="#">
Navbar
</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo3">
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
<li class="nav-item">
<a aria-current="page" class="nav-link active" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link
</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1">
Disabled
</a>
</li>
</ul>
<form class="d-flex">
<input aria-label="Search" class="form-control me-2" placeholder="Search" type="search">
<button class="btn btn-outline-success" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/navbar/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryPagination" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryOffcanvas" role="button">
<span class="item-filter-text">
Offcanvas Start
</span>
</div>
<div class="card-body collapse show" id="categoryOffcanvas">
<ul class="list-items">
<li class="list-item list-item-bs-new" data-clipboard-text="offcanvas-start" data-id="offcanvas-start">
<div class="list-item-content">
<a class="list-item-text" href="#offcanvas-start">
<span class="item-filter-text">
offcanvas-start(Default)
</span>
</a>
<div class="code-snippet">
<div aria-labelledby="offcanvasStart" class="offcanvas offcanvas-start" id="offcanvasStart" tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasStart">
Offcanvas
</h5>
<button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button">
</button>
</div>
<div class="offcanvas-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="offcanvas-end" data-id="offcanvas-end">
<div class="list-item-content">
<a class="list-item-text" href="#offcanvas-end">
<span class="item-filter-text">
offcanvas-end
</span>
</a>
<div class="code-snippet">
<div aria-labelledby="offcanvasEndLabel" class="offcanvas offcanvas-end" id="offcanvasEnd" tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasEndLabel">
Offcanvas End
</h5>
<button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button">
</button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="offcanvas-top" data-id="offcanvas-top">
<div class="list-item-content">
<a class="list-item-text" href="#offcanvas-top">
<span class="item-filter-text">
offcanvas-top
</span>
</a>
<div class="code-snippet">
<div aria-labelledby="offcanvasTopLabel" class="offcanvas offcanvas-top" id="offcanvasTop" tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasTopLabel">
Offcanvas Top
</h5>
<button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button">
</button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="offcanvas-bottom" data-id="offcanvas-bottom">
<div class="list-item-content">
<a class="list-item-text" href="#offcanvas-bottom">
<span class="item-filter-text">
offcanvas-bottom
</span>
</a>
<div class="code-snippet">
<div aria-labelledby="offcanvasBottomLabel" class="offcanvas offcanvas-bottom" id="offcanvasBottom" tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">
Offcanvas Bottom
</h5>
<button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button">
</button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/pagination/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryPagination" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryPagination" role="button">
<span class="item-filter-text">
Pagination
</span>
</div>
<div class="card-body collapse show" id="categoryPagination">
<ul class="list-items">
<li class="list-item" data-clipboard-text="pagination" data-id="pagination">
<div class="list-item-content">
<a class="list-item-text" href="#pagination">
<span class="item-filter-text">
pagination
</span>
</a>
</div>
<div class="code-snippet">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a aria-label="Previous" class="page-link" href="#">
<span aria-hidden="true">
«
</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
1
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
2
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
3
</a>
</li>
<li class="page-item">
<a aria-label="Next" class="page-link" href="#">
<span aria-hidden="true">
»
</span>
</a>
</li>
</ul>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="page-item disabled" data-id="pagination-page-item-disabled">
<div class="list-item-content">
<a class="list-item-text" href="#pagination-page-item-disabled">
<span class="item-filter-text">
disabled page-item
</span>
</a>
</div>
<div class="code-snippet">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item disabled">
<a aria-disabled="true" class="page-link" href="#" tabindex="-1">
Previous
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
1
</a>
</li>
<li aria-current="page" class="page-item active">
<a class="page-link" href="#">
2
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
3
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
Next
</a>
</li>
</ul>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="page-item active" data-id="pagination-page-item-active">
<div class="list-item-content">
<a class="list-item-text" href="#pagination-page-item-active">
<span class="item-filter-text">
active page-item
</span>
</a>
</div>
<div class="code-snippet">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item disabled">
<a aria-disabled="true" class="page-link" href="#" tabindex="-1">
Previous
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
1
</a>
</li>
<li aria-current="page" class="page-item active">
<a class="page-link" href="#">
2
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
3
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
Next
</a>
</li>
</ul>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="pagination-lg" data-id="pagination-lg">
<div class="list-item-content">
<a class="list-item-text" href="#pagination-lg">
<span class="item-filter-text">
pagination-lg
</span>
</a>
</div>
<div class="code-snippet">
<nav aria-label="Large page navigation">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<span class="page-link">
Previous
</span>
</li>
<li aria-current="page" class="page-item active">
<a class="page-link" href="#">
1
</a>
</li>
<li class="page-item">
<span class="page-link">
2
</span>
</li>
<li class="page-item">
<a class="page-link" href="#">
3
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
Next
</a>
</li>
</ul>
</nav>
</div>
</li>
<li class="list-item" data-clipboard-text="pagination-sm" data-id="pagination-sm">
<div class="list-item-content">
<a class="list-item-text" href="#pagination-sm">
<span class="item-filter-text">
pagination-sm
</span>
</a>
</div>
<div class="code-snippet">
<nav aria-label="Small page navigation">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<span class="page-link">
Previous
</span>
</li>
<li aria-current="page" class="page-item active">
<a class="page-link" href="#">
1
</a>
</li>
<li class="page-item">
<span class="page-link">
2
</span>
</li>
<li class="page-item">
<a class="page-link" href="#">
3
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
Next
</a>
</li>
</ul>
</nav>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/pagination/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryPlaceholders" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryPlaceholders" role="button">
<span class="item-filter-text">
Placeholders
</span>
</div>
<div class="card-body collapse show" id="categoryPlaceholders">
<ul class="list-items">
<li class="list-item list-item-bs-new" data-clipboard-text="placeholder" data-id="placeholder">
<div class="list-item-content">
<a class="list-item-text" href="#placeholder">
<span class="item-filter-text">
placeholder
</span>
</a>
</div>
<div class="code-snippet">
<p aria-hidden="true">
<span class="placeholder col-6">
</span>
</p>
<a aria-hidden="true" class="btn btn-primary disabled placeholder col-4" href="#">
</a>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="placeholder bg-primary" data-id="placeholder-bg">
<div class="list-item-content">
<a class="list-item-text" href="#placeholder-bg">
<span class="item-filter-text">
placeholder bg-{color}
</span>
</a>
</div>
<div class="code-snippet">
<span class="placeholder col-12 bg-primary">
</span>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="placeholder-lg" data-id="placeholder-lg">
<div class="list-item-content">
<a class="list-item-text" href="#placeholder-lg">
<span class="item-filter-text">
placeholder-lg
</span>
</a>
</div>
<div class="code-snippet">
<span class="placeholder col-12 placeholder-lg">
</span>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="placeholder-sm" data-id="placeholder-sm">
<div class="list-item-content">
<a class="list-item-text" href="#placeholder-sm">
<span class="item-filter-text">
placeholder-sm
</span>
</a>
</div>
<div class="code-snippet">
<span class="placeholder col-12 placeholder-sm">
</span>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="placeholder-xs" data-id="placeholder-xs">
<div class="list-item-content">
<a class="list-item-text" href="#placeholder-xs">
<span class="item-filter-text">
placeholder-xs
</span>
</a>
</div>
<div class="code-snippet">
<span class="placeholder col-12 placeholder-xs">
</span>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="placeholder-glow" data-id="placeholder-glow">
<div class="list-item-content">
<a class="list-item-text" href="#placeholder-glow">
<span class="item-filter-text">
placeholder-glow
</span>
</a>
</div>
<div class="code-snippet">
<p class="placeholder-glow">
<span class="placeholder col-12">
</span>
</p>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="placeholder-wave" data-id="placeholder-wave">
<div class="list-item-content">
<a class="list-item-text" href="#placeholder-wave">
<span class="item-filter-text">
placeholder-wave
</span>
</a>
</div>
<div class="code-snippet">
<p class="placeholder-wave">
<span class="placeholder col-12">
</span>
</p>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/placeholders/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryPopovers" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryPopovers" role="button">
<span class="item-filter-text">
Popovers
</span>
</div>
<div class="card-body collapse show" id="categoryPopovers">
<ul class="list-items">
<li class="list-item" data-clipboard-text="data-bs-toggle='popover'" data-id="popover-right">
<div class="list-item-content">
<a class="list-item-text" href="#popover-right">
<span class="item-filter-text">
popover on right
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate popovers:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
-->
<button class="btn btn-primary" data-bs-container="body" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-placement="right" data-bs-toggle="popover" type="button">
Popover on right
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="data-bs-placement='top'" data-custom-class="modal-content-center" data-id="popover-top">
<div class="list-item-content">
<a class="list-item-text" href="#popover-top">
<span class="item-filter-text">
popover on top
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate popovers:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
-->
<button class="btn btn-primary" data-bs-container="body" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-placement="top" data-bs-toggle="popover" type="button">
Popover on top
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="data-bs-placement='bottom'" data-custom-class="modal-content-center" data-id="popover-bottom">
<div class="list-item-content">
<a class="list-item-text" href="#popover-bottom">
<span class="item-filter-text">
popover on bottom
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate popovers:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
-->
<button class="btn btn-primary" data-bs-container="body" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-placement="bottom" data-bs-toggle="popover" type="button">
Popover on bottom
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="data-bs-placement='left'" data-custom-class="modal-content-center" data-id="popover-left">
<div class="list-item-content">
<a class="list-item-text" href="#popover-left">
<span class="item-filter-text">
popover on left
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate popovers:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
-->
<button class="btn btn-primary" data-bs-container="body" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-placement="left" data-bs-toggle="popover" type="button">
Popover on left
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="data-bs-trigger='focus'" data-id="popover-dismissible">
<div class="list-item-content">
<a class="list-item-text" href="#popover-dismissible">
<span class="item-filter-text">
dismissible popover
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate popovers:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
-->
<a class="btn btn-primary" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-toggle="popover" data-bs-trigger="focus" role="button" tabindex="0" title="Dismissible popover">
Dismissible popover
</a>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/popovers/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryProgress" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryProgress" role="button">
<span class="item-filter-text">
Progress
</span>
</div>
<div class="card-body collapse show" id="categoryProgress">
<ul class="list-items">
<li class="list-item" data-clipboard-text="progress" data-id="progress">
<div class="list-item-content">
<a class="list-item-text" href="#progress">
<span class="item-filter-text">
progress
</span>
</a>
</div>
<div class="code-snippet">
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" class="progress-bar" role="progressbar" style="width: 35%">
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="progress-bar" data-id="progress-bar">
<div class="list-item-content">
<a class="list-item-text" href="#progress-bar">
<span class="item-filter-text">
progress-bar
</span>
</a>
</div>
<div class="code-snippet">
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" class="progress-bar" role="progressbar" style="width: 35%">
</div>
</div>
</div>
</li>
<li class="list-item" data-id="progress-label">
<div class="list-item-content">
<a class="list-item-text" href="#progress-label">
<span class="item-filter-text">
progress with label
</span>
</a>
</div>
<div class="code-snippet">
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" class="progress-bar" role="progressbar" style="width: 35%">
35%
</div>
</div>
</div>
</li>
<li class="list-item" data-id="progress-height">
<div class="list-item-content">
<a class="list-item-text" href="#progress-height">
<span class="item-filter-text">
progress with height
</span>
</a>
</div>
<div class="code-snippet">
<div class="progress" style="height: 4px;">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" class="progress-bar" role="progressbar" style="width: 35%">
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="progress-bar bg-primary" data-id="progress-bar-bg-primary">
<div class="list-item-content">
<a class="list-item-text" href="#progress-bar-bg-primary">
<span class="item-filter-text">
progress-bar bg-{color}
</span>
</a>
</div>
<div class="code-snippet">
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" class="progress-bar bg-danger" role="progressbar" style="width: 35%">
</div>
</div>
</div>
</li>
<li class="list-item" data-id="progress-bar-multiple">
<div class="list-item-content">
<a class="list-item-text" href="#progress-bar-multiple">
<span class="item-filter-text">
multiple progress-bar
</span>
</a>
</div>
<div class="code-snippet">
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" class="progress-bar bg-success" role="progressbar" style="width: 30%">
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="15" class="progress-bar bg-warning" role="progressbar" style="width: 15%">
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar bg-danger" role="progressbar" style="width: 25%">
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="progress-bar-striped" data-id="progress-bar-striped">
<div class="list-item-content">
<a class="list-item-text" href="#progress-bar-striped">
<span class="item-filter-text">
progress-bar-striped
</span>
</a>
</div>
<div class="code-snippet">
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="55" class="progress-bar progress-bar-striped" role="progressbar" style="width: 55%">
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="progress-bar-striped bg-primary" data-id="progress-bar-striped-success">
<div class="list-item-content">
<a class="list-item-text" href="#progress-bar-striped-success">
<span class="item-filter-text">
progress-bar-striped bg-{color}
</span>
</a>
</div>
<div class="code-snippet">
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="55" class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 55%">
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="progress-bar-animated" data-id="progress-bar-animated">
<div class="list-item-content">
<a class="list-item-text" href="#progress-bar-animated">
<span class="item-filter-text">
progress-bar-animated
</span>
</a>
</div>
<div class="code-snippet">
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="55" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 55%">
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="progress-bar-animated bg-secondary" data-id="progress-bar-animated-secondary">
<div class="list-item-content">
<a class="list-item-text" href="#progress-bar-animated-secondary">
<span class="item-filter-text">
progress-bar-animated bg-{color}
</span>
</a>
</div>
<div class="code-snippet">
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="55" class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" role="progressbar" style="width: 55%">
</div>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/progress/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryScrollspy" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryScrollspy" role="button">
<span class="item-filter-text">
Scrollspy
</span>
</div>
<div class="card-body collapse show" id="categoryScrollspy">
<ul class="list-items">
<li class="list-item" data-clipboard-text="data-bs-spy='scroll'" data-id="scrollspy" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#scrollspy">
<span class="item-filter-text">
data-bs-spy
</span>
</a>
</div>
<div class="code-snippet">
<!-- Custom css that makes this example work like it does: -->
<style type="text/css">
.scrollspy-example {
position : relative;
height : 200px;
margin-top : .5rem;
overflow : auto;
}
</style>
<nav class="navbar navbar-light bg-light px-3" id="navbar-scrollspy">
<a class="navbar-brand" href="#">
Navbar
</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">
@fat
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">
@mdo
</a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#one">
one
</a>
</li>
<li>
<a class="dropdown-item" href="#two">
two
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#three">
three
</a>
</li>
</ul>
</li>
</ul>
</nav>
<div class="scrollspy-example" data-bs-offset="0" data-bs-spy="scroll" data-bs-target="#navbar-scrollspy" tabindex="0">
<h4 id="fat">
@fat
</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corrupti perspiciatis distinctio, officia ipsam debitis animi hic? Iusto autem est accusantium quas recusandae consectetur eligendi at et praesentium placeat dignissimos, quasi ipsum neque explicabo non, maxime nemo reprehenderit corporis doloribus amet ab omnis dolorum, debitis ipsam? Nulla veritatis, fugiat cum possimus minima reiciendis eos exercitationem numquam a officia sunt voluptatibus. Ducimus et porro non necessitatibus quae possimus voluptate libero ratione, iure sint! Aspernatur autem saepe doloribus perferendis eos eaque quo ex. Reiciendis neque quidem odio, beatae, similique eaque iusto voluptatem quae eveniet unde accusamus iure pariatur consequatur distinctio qui error?
</p>
<h4 id="mdo">
@mdo
</h4>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam corporis esse fugiat alias, aut libero assumenda saepe neque doloribus ducimus sit pariatur repudiandae sequi sed dolore culpa vero itaque! Iure quos rerum odit, ducimus culpa quidem nisi voluptas possimus accusantium iusto, harum hic vel? Unde illum, odit repellendus impedit magni dolores. Minus sunt laboriosam quisquam eligendi cumque aliquam quas pariatur minima ut ea odio ipsum accusamus amet nostrum, consectetur ullam deleniti esse debitis repellat harum nemo illum saepe. Molestias autem inventore libero nam aliquam molestiae, aliquid temporibus magnam quod iste ut laudantium, adipisci illo enim mollitia cupiditate reiciendis veniam pariatur.
</p>
<h4 id="one">
one
</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates rem quidem ea exercitationem adipisci non a quaerat ducimus reprehenderit officiis ad aliquid laborum tempora repellendus cupiditate, perferendis officia inventore unde temporibus. Assumenda iste maiores vitae ea quibusdam omnis vero porro doloremque. Dolore officia cumque ad consectetur harum asperiores, expedita sit dolores dolorum laboriosam laudantium dolor repellendus, tempora, aliquam omnis quis itaque totam laborum quaerat. Iure tempora ab vero. Doloribus maxime distinctio dignissimos alias est error incidunt repudiandae. Tenetur incidunt cupiditate dolore, odio possimus ab voluptatem minima! Odit non culpa ad fugit ab. Accusamus dicta beatae rem, obcaecati corrupti aut quaerat!
</p>
<h4 id="two">
two
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod asperiores unde illo labore, neque rerum. Dignissimos cum voluptatum expedita recusandae ullam suscipit ipsam in perferendis porro error autem nulla consequuntur delectus ipsa sint magnam voluptate asperiores excepturi dolor, nisi perspiciatis? Consequatur doloremque laudantium facere quae impedit nemo deleniti in delectus recusandae enim neque officia molestiae voluptatibus sed ad, maxime ratione? Fugit reprehenderit iusto voluptates, facilis, impedit delectus quis eum praesentium, expedita qui hic fuga neque nobis. Et ad necessitatibus illum blanditiis suscipit excepturi nobis autem ipsam nulla laboriosam quasi fugiat aliquid quas dolorem, fugit accusantium eaque ex neque atque ea!
</p>
<h4 id="three">
three
</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit eum quod autem temporibus, voluptatem doloribus optio alias deleniti aperiam architecto sit rem accusamus voluptas eius facilis! Aperiam, vitae laboriosam ullam doloremque iure ut ipsam blanditiis aliquid non sunt quae voluptatem hic nisi cum. Nulla, incidunt harum perferendis provident ad odit perspiciatis quis accusamus maiores nam saepe at necessitatibus temporibus corrupti in voluptas, aut fugit quod rerum est minima esse iste! Mollitia modi officia temporibus repellat praesentium reiciendis quam officiis magnam perspiciatis nulla nobis tenetur nesciunt reprehenderit autem deserunt animi sed a quae, earum quasi! Expedita nisi nemo accusamus nesciunt ipsum!
</p>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="data-bs-spy='scroll'" data-id="scrollspy-nested" data-id-update="true">
<div class="list-item-content">
<a class="list-item-text" href="#scrollspy-nested">
<span class="item-filter-text">
nested data-bs-spy
</span>
</a>
</div>
<div class="code-snippet">
<!-- Custom css that makes this example work like it does: -->
<style type="text/css">
.scrollspy-example-2 {
position : relative;
height : 350px;
overflow : auto;
}
</style>
<div class="row">
<div class="col-4">
<nav class="navbar navbar-light bg-light flex-column" id="nested-navbar-scrollspy">
<a class="navbar-brand" href="#">
Navbar
</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">
Item 1
</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">
Item 1-1
</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">
Item 1-2
</a>
</nav>
<a class="nav-link" href="#item-2">
Item 2
</a>
<a class="nav-link" href="#item-3">
Item 3
</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">
Item 3-1
</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">
Item 3-2
</a>
</nav>
</nav>
</nav>
</div>
<div class="col-8">
<div class="scrollspy-example-2" data-bs-offset="0" data-bs-spy="scroll" data-bs-target="#nested-navbar-scrollspy" tabindex="0">
<h4 id="item-1">
Item 1
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur assumenda voluptates minima natus, consequatur dolor porro. Facilis dolorem dolor necessitatibus architecto hic iste porro consectetur officia rem velit voluptates expedita, in quia ab nesciunt magnam. Aut cum repellat laudantium eligendi. Debitis quis, ex mollitia consequuntur maxime deleniti atque beatae omnis iste excepturi iusto inventore tenetur autem ipsum placeat vero modi neque quibusdam architecto id? Placeat soluta, enim, vero blanditiis iusto ad aperiam hic a atque delectus impedit, in repellat molestiae nulla libero sit? Iste corrupti quisquam cumque eveniet iure error voluptatum quasi incidunt, maiores quam blanditiis repellat, in sint neque.
</p>
<h5 id="item-1-1">
Item 1-1
</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae, nihil sed id nostrum possimus iste commodi! Necessitatibus, magni, est cupiditate animi voluptas sequi sapiente dolor ullam voluptatem assumenda tempore. Natus necessitatibus aliquid, reiciendis assumenda officiis doloribus nam eaque. Eum magni eos odio vel cum magnam, tenetur iusto esse illum voluptate possimus, dolorem quos alias, suscipit porro at ratione quasi repellendus facilis dolor eligendi a! Maxime, aliquam earum, suscipit labore sint, repellat minus doloremque rerum beatae ratione quas fugiat iste eum veritatis quod modi quae quasi adipisci ullam nobis nam? Quae, asperiores. Cumque architecto doloremque blanditiis quas ad aut temporibus eum.
</p>
<h5 id="item-1-2">
Item 1-2
</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores distinctio earum qui eius ducimus ab ratione culpa aspernatur error repellendus! Possimus facere aliquam architecto, quam tenetur nemo, magnam aut quidem laborum quae vel, totam libero? Quos in aperiam consequatur provident nesciunt pariatur ipsa, illo nemo aut fuga porro, architecto maiores. Cupiditate, qui tempore. Vero porro delectus assumenda quia neque tempora unde debitis voluptates fuga? Reprehenderit neque iure id voluptate quam deserunt officiis minima, eligendi accusamus labore porro, sapiente repudiandae debitis beatae est non quia culpa incidunt excepturi praesentium distinctio voluptas iste! Enim, autem porro quod cum similique ab at hic.
</p>
<h4 id="item-2">
Item 2
</h4>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, quo. Odio veniam dicta fugiat nobis sed suscipit quos eos quaerat molestiae atque rem distinctio sit consectetur nemo quia reprehenderit nesciunt exercitationem harum ipsum aliquam, alias necessitatibus eum ullam! Sit quibusdam, fugiat quos sapiente pariatur ipsam ipsum esse nostrum voluptatem, ipsa neque, cumque a aspernatur. Eveniet itaque dicta, saepe explicabo dignissimos corrupti ab ipsa quod minus repellendus obcaecati id, consectetur distinctio fugiat sequi nulla numquam magnam voluptatum veniam? Aut praesentium omnis asperiores iure tenetur mollitia repudiandae excepturi sapiente voluptatem exercitationem, voluptate dolorum? Omnis eveniet natus, nemo vel aliquam vitae dignissimos. Sapiente!
</p>
<h4 id="item-3">
Item 3
</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, architecto consequuntur voluptatem voluptatum debitis quidem ipsum! Vel repellat aspernatur quod delectus? Assumenda iusto beatae pariatur tenetur aliquam veritatis modi unde repudiandae voluptates laudantium perferendis maxime necessitatibus inventore rem earum quasi dolor dolore sapiente nemo cum voluptate, ut quibusdam culpa facilis! Reprehenderit accusantium neque ipsum autem! Officia impedit libero aspernatur placeat atque a eos, aperiam aut incidunt fugit cum minus quasi numquam dolor eius adipisci earum sunt iste quos distinctio mollitia sint id optio vel? Et nesciunt expedita ad nemo tempora provident doloremque. Voluptatibus iste ad, autem eligendi saepe blanditiis aut!
</p>
<h5 id="item-3-1">
Item 3-1
</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique tempore culpa voluptatibus nostrum ut nulla mollitia. Nisi dignissimos unde adipisci dolorum suscipit nesciunt maxime ducimus iusto et quos modi provident nihil, magni commodi facilis, omnis at, error eius. Labore, ipsam! Perspiciatis molestiae rem ipsam consequuntur voluptatibus quia non consectetur, enim, nisi eum impedit? Eligendi minima iste minus perspiciatis quo enim, dignissimos culpa reiciendis optio nisi, corporis aliquam iusto corrupti laborum. Expedita, eum quibusdam explicabo, harum perferendis optio placeat perspiciatis earum delectus animi, beatae corporis fugit repudiandae dicta voluptate iste. Tenetur aspernatur quaerat ab impedit dignissimos reiciendis atque iure pariatur earum!
</p>
<h5 id="item-3-2">
Item 3-2
</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto numquam quidem, fugit accusantium magnam quod tenetur et libero aliquam quibusdam corporis minus. Unde illum nisi labore omnis numquam esse impedit minima facere quam doloribus illo suscipit deleniti commodi facilis perspiciatis quasi animi dolore libero, sequi reprehenderit doloremque accusantium magnam aut. Vel quaerat voluptatibus ab consectetur blanditiis facilis repellendus voluptatum consequatur beatae illum ratione pariatur mollitia deleniti quisquam expedita ea doloremque sint, dignissimos quo commodi sed. Earum omnis blanditiis officiis odit magnam quo facere voluptate aliquam ut dignissimos dolore sequi, voluptas quod corrupti sed doloribus porro quaerat, fugit accusantium reprehenderit fugiat!
</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/scrollspy/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categorySpinners" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categorySpinners" role="button">
<span class="item-filter-text">
Spinners
</span>
</div>
<div class="card-body collapse show" id="categorySpinners">
<ul class="list-items">
<li class="list-item" data-clipboard-text="spinner-border" data-id="spinner-border">
<div class="list-item-content">
<a class="list-item-text" href="#spinner-border">
<span class="item-filter-text">
spinner-border
</span>
</a>
</div>
<div class="code-snippet">
<div class="spinner-border" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="spinner-border text-primary" data-id="spinner-border-primary">
<div class="list-item-content">
<a class="list-item-text" href="#spinner-border-primary">
<span class="item-filter-text">
spinner-border text-{color}
</span>
</a>
</div>
<div class="code-snippet">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="spinner-border-sm" data-id="spinner-border-sm">
<div class="list-item-content">
<a class="list-item-text" href="#spinner-border-sm">
<span class="item-filter-text">
spinner-border-sm
</span>
</a>
</div>
<div class="code-snippet">
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="spinner-grow" data-id="spinner-grow">
<div class="list-item-content">
<a class="list-item-text" href="#spinner-grow">
<span class="item-filter-text">
spinner-grow
</span>
</a>
</div>
<div class="code-snippet">
<div class="spinner-grow" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="spinner-grow text-primary" data-id="spinner-grow-primary">
<div class="list-item-content">
<a class="list-item-text" href="#spinner-grow-primary">
<span class="item-filter-text">
spinner-grow text-{color}
</span>
</a>
</div>
<div class="code-snippet">
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="spinner-grow-sm" data-id="spinner-grow-sm">
<div class="list-item-content">
<a class="list-item-text" href="#spinner-grow-sm">
<span class="item-filter-text">
spinner-grow-sm
</span>
</a>
</div>
<div class="code-snippet">
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/spinners/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryToasts" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryToasts" role="button">
<span class="item-filter-text">
Toasts
</span>
</div>
<div class="card-body collapse show" id="categoryToasts">
<ul class="list-items">
<li class="list-item" data-clipboard-text="toast" data-id="toast">
<div class="list-item-content">
<a class="list-item-text" href="#toast">
<span class="item-filter-text">
toast
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate toasts:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, {
autohide: false
}).show()
})
-->
<div aria-atomic="true" aria-live="assertive" class="toast toast-demo" role="alert">
<div class="toast-header">
<strong class="me-auto">
Bootstrap
</strong>
<small>
11 mins ago
</small>
<button aria-label="Close" class="btn-close" data-bs-dismiss="toast" type="button">
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="data-bs-dismiss='toast'" data-id="toast-button">
<div class="list-item-content">
<a class="list-item-text" href="#toast-button">
<span class="item-filter-text">
toast with button
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate toasts:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, {
autohide: false
}).show()
})
-->
<div aria-atomic="true" aria-live="assertive" class="toast toast-demo" role="alert">
<div class="toast-body">
Hello, world! This is a toast message.
<div class="mt-2 pt-2 border-top">
<button class="btn btn-primary btn-sm" type="button">
Take action
</button>
<button class="btn btn-secondary btn-sm" data-bs-dismiss="toast" type="button">
Close
</button>
</div>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="toast bg-primary text-white" data-id="toast-primary">
<div class="list-item-content">
<a class="list-item-text" href="#toast-primary">
<span class="item-filter-text">
toast bg-{color} text-{color}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate toasts:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, {
autohide: false
}).show()
})
-->
<div aria-atomic="true" aria-live="assertive" class="toast toast-demo d-flex align-items-center text-white bg-primary border-0" role="alert">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button aria-label="Close" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" type="button">
</button>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/toasts/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryTooltips" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryTooltips" role="button">
<span class="item-filter-text">
Tooltips
</span>
</div>
<div class="card-body collapse show" id="categoryTooltips">
<ul class="list-items">
<li class="list-item" data-clipboard-text="data-bs-toggle='tooltip'" data-custom-class="modal-content-center" data-id="tooltip-top">
<div class="list-item-content">
<a class="list-item-text" href="#tooltip-top">
<span class="item-filter-text">
tooltip on top
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate tooltips:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
-->
<button class="btn btn-primary" data-bs-placement="top" data-bs-toggle="tooltip" title="Tooltip on top" type="button">
Tooltip on top
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="data-bs-placement='right'" data-custom-class="modal-content-center" data-id="tooltip-right">
<div class="list-item-content">
<a class="list-item-text" href="#tooltip-right">
<span class="item-filter-text">
tooltip on right
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate tooltips:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
-->
<button class="btn btn-primary" data-bs-placement="right" data-bs-toggle="tooltip" title="Tooltip on right" type="button">
Tooltip on right
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="data-bs-placement='bottom'" data-custom-class="modal-content-center" data-id="tooltip-bottom">
<div class="list-item-content">
<a class="list-item-text" href="#tooltip-bottom">
<span class="item-filter-text">
tooltip on bottom
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate tooltips:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
-->
<button class="btn btn-primary" data-bs-placement="bottom" data-bs-toggle="tooltip" title="Tooltip on bottom" type="button">
Tooltip on bottom
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="data-bs-placement='left'" data-custom-class="modal-content-center" data-id="tooltip-left">
<div class="list-item-content">
<a class="list-item-text" href="#tooltip-left">
<span class="item-filter-text">
tooltip on left
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate tooltips:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
-->
<button class="btn btn-primary" data-bs-placement="left" data-bs-toggle="tooltip" title="Tooltip on left" type="button">
Tooltip on left
</button>
</div>
</li>
<li class="list-item" data-clipboard-text="data-bs-html='true'" data-custom-class="modal-content-center" data-id="tooltip-html">
<div class="list-item-content">
<a class="list-item-text" href="#tooltip-html">
<span class="item-filter-text">
tooltip with HTML
</span>
</a>
</div>
<div class="code-snippet">
<!-- Note: A custom script is used to activate tooltips:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
-->
<button class="btn btn-primary" data-bs-html="true" data-bs-toggle="tooltip" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>" type="button">
Tooltip with HTML
</button>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/components/tooltips/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryHelpers" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryHelpers" role="button">
<span class="item-filter-text">
Helpers
</span>
</div>
<div class="card-body collapse show" id="categoryHelpers">
<ul class="list-items">
<li class="list-item" data-clipboard-text="clearfix" data-id="clearfix">
<div class="list-item-content">
<a class="list-item-text" href="#clearfix">
<span class="item-filter-text">
clearfix
</span>
</a>
</div>
<div class="code-snippet">
<div class="clearfix">
...
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="link-primary" data-id="link-primary">
<div class="list-item-content">
<a class="list-item-text" href="#link-primary">
<span class="item-filter-text">
link-{color}
</span>
</a>
</div>
<div class="code-snippet">
<a class="link-primary" href="#">
Primary link
</a>
</div>
</li>
<li class="list-item" data-clipboard-text="ratio ratio-16x9" data-id="ratio-16x9">
<div class="list-item-content">
<a class="list-item-text" href="#ratio-16x9">
<span class="item-filter-text">
ratio-{ratio}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Different radio can be used with the help of .ratio-{1x1|4x3|16x9|21x9} class -->
<div class="ratio ratio-16x9 mb-3">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video">
</iframe>
</div>
<!-- To have a custom ratio, use the following: -->
<div class="ratio" style="--aspect-ratio: 30%;">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video">
</iframe>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="fixed-top" data-id="fixed-top">
<div class="list-item-content">
<a class="list-item-text" href="#fixed-top">
<span class="item-filter-text">
fixed-top
</span>
</a>
</div>
<div class="code-snippet">
<div class="fixed-top bd-highlight">
Fixed top
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="fixed-bottom" data-id="fixed-bottom">
<div class="list-item-content">
<a class="list-item-text" href="#fixed-bottom">
<span class="item-filter-text">
fixed-bottom
</span>
</a>
</div>
<div class="code-snippet">
<div class="fixed-bottom bd-highlight">
Fixed bottom
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="sticky-top" data-id="sticky-top">
<div class="list-item-content">
<a class="list-item-text" href="#sticky-top">
<span class="item-filter-text">
sticky-top
</span>
</a>
</div>
<div class="code-snippet">
<div class="sticky-top bd-highlight">
Sticky top
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="sticky-sm-top" data-id="sticky-sm-top">
<div class="list-item-content">
<a class="list-item-text" href="#sticky-sm-top">
<span class="item-filter-text">
sticky-*-top
</span>
</a>
</div>
<div class="code-snippet">
<div class="sticky-md-top bd-highlight">
Sticky top
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="visually-hidden" data-id="visually-hidden">
<div class="list-item-content">
<a class="list-item-text" href="#visually-hidden">
<span class="item-filter-text">
visually-hidden
</span>
</a>
</div>
<div class="code-snippet">
<h2 class="visually-hidden">
Title for screen readers
</h2>
</div>
</li>
<li class="list-item" data-clipboard-text="visually-hidden-focusable" data-id="visually-hidden-focusable">
<div class="list-item-content">
<a class="list-item-text" href="#visually-hidden-focusable">
<span class="item-filter-text">
visually-hidden-focusable
</span>
</a>
</div>
<div class="code-snippet">
<a class="visually-hidden-focusable" href="#content">
Skip to main content
</a>
</div>
</li>
<li class="list-item" data-clipboard-text="stretched-link" data-id="stretched-link">
<div class="list-item-content">
<a class="list-item-text" href="#stretched-link">
<span class="item-filter-text">
stretched-link
</span>
</a>
</div>
<div class="code-snippet">
<!-- .stretched-link class will work properly only if it's parent element gets position: relative; or some transform property -->
<div class="card">
<img alt="card-img-top" class="card-img-top" src="assets/images/bs-images/img-2x1.png">
<div class="card-body">
<h5 class="card-title">
Card with stretched link
</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary stretched-link" href="#">
Go somewhere
</a>
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="text-truncate" data-id="text-truncate">
<div class="list-item-content">
<a class="list-item-text" href="#text-truncate">
<span class="item-filter-text">
text-truncate
</span>
</a>
</div>
<div class="code-snippet">
<!-- .text-truncate class requires display: inline-block; or display: block; -->
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate nisi, animi odit repellendus eos unde.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate nisi, animi odit repellendus eos unde.
</span>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="vstack" data-id="vstack">
<div class="list-item-content">
<a class="list-item-text" href="#vstack">
<span class="item-filter-text">
vstack
</span>
</a>
</div>
<div class="code-snippet">
<div class="vstack gap-3">
<div class="bg-light border">
First item
</div>
<div class="bg-light border">
Second item
</div>
<div class="bg-light border">
Third item
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="hstack" data-id="hstack">
<div class="list-item-content">
<a class="list-item-text" href="#hstack">
<span class="item-filter-text">
hstack
</span>
</a>
</div>
<div class="code-snippet">
<div class="hstack gap-3">
<div class="bg-light border">
First item
</div>
<div class="bg-light border">
Second item
</div>
<div class="bg-light border">
Third item
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="vr" data-id="vertical-rule">
<div class="list-item-content">
<a class="list-item-text" href="#vertical-rule">
<span class="item-filter-text">
vr
</span>
</a>
</div>
<div class="code-snippet">
<div class="hstack gap-3">
<span>
Second item
</span>
<div class="vr">
</div>
<span>
Third item
</span>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/helpers/clearfix/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryUtilityBorders" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryUtilityBorders" role="button">
<span class="item-filter-text">
Utility: Borders
</span>
</div>
<div class="card-body collapse show" id="categoryUtilityBorders">
<ul class="list-items">
<li class="list-item" data-clipboard-text="border" data-custom-class="bd-example-border-utils" data-id="border">
<div class="list-item-content">
<a class="list-item-text" href="#border">
<span class="item-filter-text">
border
</span>
</a>
</div>
<div class="code-snippet">
<span class="border">
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="border-top" data-custom-class="bd-example-border-utils" data-id="border-top">
<div class="list-item-content">
<a class="list-item-text" href="#border-top">
<span class="item-filter-text">
border-{direction}
</span>
</a>
</div>
<div class="code-snippet">
<span class="border-top">
</span>
<span class="border-end">
</span>
<span class="border-bottom">
</span>
<span class="border-start">
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="border-0" data-custom-class="bd-example-border-utils bd-example-border-utils-0" data-id="border-0">
<div class="list-item-content">
<a class="list-item-text" href="#border-0">
<span class="item-filter-text">
border-0
</span>
</a>
</div>
<div class="code-snippet">
<span class="border-0">
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="border-top-0" data-custom-class="bd-example-border-utils bd-example-border-utils-0" data-id="border-top-0">
<div class="list-item-content">
<a class="list-item-text" href="#border-top-0">
<span class="item-filter-text">
border-{direction}-0
</span>
</a>
</div>
<div class="code-snippet">
<span class="border-top-0">
</span>
<span class="border-end-0">
</span>
<span class="border-bottom-0">
</span>
<span class="border-start-0">
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="border-primary" data-custom-class="bd-example-border-utils" data-id="border-primary">
<div class="list-item-content">
<a class="list-item-text" href="#border-primary">
<span class="item-filter-text">
border-{color}
</span>
</a>
</div>
<div class="code-snippet">
<span class="border border-primary">
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="border-2" data-custom-class="bd-example-border-utils" data-id="border-2">
<div class="list-item-content">
<a class="list-item-text" href="#border-2">
<span class="item-filter-text">
border-{size}
</span>
</a>
</div>
<div class="code-snippet">
<span class="border border-1">
</span>
<span class="border border-2">
</span>
<span class="border border-3">
</span>
<span class="border border-4">
</span>
<span class="border border-5">
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="rounded" data-custom-class="bd-example-rounded-utils" data-id="rounded">
<div class="list-item-content">
<a class="list-item-text" href="#rounded">
<span class="item-filter-text">
rounded
</span>
</a>
</div>
<div class="code-snippet">
<img alt="Rounded image" class="rounded" src="assets/images/bs-images/img-2x2.png">
</div>
</li>
<li class="list-item" data-clipboard-text="rounded-top" data-custom-class="bd-example-rounded-utils" data-id="rounded-top">
<div class="list-item-content">
<a class="list-item-text" href="#rounded-top">
<span class="item-filter-text">
rounded-{corner}
</span>
</a>
</div>
<div class="code-snippet">
<img alt="Rounded top image" class="rounded-top" src="assets/images/bs-images/img-2x2.png">
<img alt="Rounded end image" class="rounded-end" src="assets/images/bs-images/img-2x2.png">
<img alt="Rounded bottom image" class="rounded-bottom" src="assets/images/bs-images/img-2x2.png">
<img alt="Rounded start image" class="rounded-start" src="assets/images/bs-images/img-2x2.png">
<img alt="Rounded circle image" class="rounded-circle" src="assets/images/bs-images/img-2x2.png">
<img alt="Rounded pill image" class="rounded-pill" height="200" src="assets/images/bs-images/img-2x1.png">
</div>
</li>
<li class="list-item" data-clipboard-text="rounded-1" data-custom-class="bd-example-rounded-utils" data-id="rounded-1">
<div class="list-item-content">
<a class="list-item-text" href="#rounded-1">
<span class="item-filter-text">
rounded-{size}
</span>
</a>
</div>
<div class="code-snippet">
<img alt="Rounded 0 image" class="rounded-0" src="assets/images/bs-images/img-2x2.png">
<img alt="Rounded 1 image" class="rounded-1" src="assets/images/bs-images/img-2x2.png">
<img alt="Rounded 2 image" class="rounded-2" src="assets/images/bs-images/img-2x2.png">
<img alt="Rounded 3 image" class="rounded-3" src="assets/images/bs-images/img-2x2.png">
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/utilities/borders/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryUtilityColors" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryUtilityColors" role="button">
<span class="item-filter-text">
Utility: Colors
</span>
</div>
<div class="card-body collapse show" id="categoryUtilityColors">
<ul class="list-items">
<li class="list-item" data-clipboard-text="text-primary" data-id="text-primary">
<div class="list-item-content">
<a class="list-item-text" href="#text-primary">
<span class="item-filter-text">
text-{color}
</span>
</a>
</div>
<div class="code-snippet">
<p class="text-primary">
.text-primary
</p>
<p class="text-secondary">
.text-secondary
</p>
<p class="text-success">
.text-success
</p>
<p class="text-danger">
.text-danger
</p>
<p class="text-warning">
.text-warning
</p>
<p class="text-info">
.text-info
</p>
<p class="text-light bg-dark">
.text-light
</p>
<p class="text-dark">
.text-dark
</p>
</div>
</li>
<li class="list-item" data-clipboard-text="text-body" data-id="text-body">
<div class="list-item-content">
<a class="list-item-text" href="#text-body">
<span class="item-filter-text">
text-body
</span>
</a>
</div>
<div class="code-snippet">
<p class="text-body">
.text-body
</p>
</div>
</li>
<li class="list-item" data-clipboard-text="text-white" data-custom-class="bg-secondary" data-id="text-white">
<div class="list-item-content">
<a class="list-item-text" href="#text-white">
<span class="item-filter-text">
text-white
</span>
</a>
</div>
<div class="code-snippet">
<p class="text-white">
.text-white
</p>
</div>
</li>
<li class="list-item" data-clipboard-text="text-black-50" data-id="text-black-50">
<div class="list-item-content">
<a class="list-item-text" href="#text-black-50">
<span class="item-filter-text">
text-black-50
</span>
</a>
</div>
<div class="code-snippet">
<p class="text-black-50">
.text-black-50
</p>
</div>
</li>
<li class="list-item" data-clipboard-text="text-white-50" data-id="text-white-50">
<div class="list-item-content">
<a class="list-item-text" href="#text-white-50">
<span class="item-filter-text">
text-white-50
</span>
</a>
</div>
<div class="code-snippet">
<p class="text-white-50 bg-dark">
.text-white-50
</p>
</div>
</li>
<li class="list-item" data-clipboard-text="bg-primary" data-id="bg-primary">
<div class="list-item-content">
<a class="list-item-text" href="#bg-primary">
<span class="item-filter-text">
bg-{color}
</span>
</a>
</div>
<div class="code-snippet">
<div class="p-3 mb-2 bg-primary text-white">
.bg-primary
</div>
<div class="p-3 mb-2 bg-secondary text-white">
.bg-secondary
</div>
<div class="p-3 mb-2 bg-success text-white">
.bg-success
</div>
<div class="p-3 mb-2 bg-danger text-white">
.bg-danger
</div>
<div class="p-3 mb-2 bg-warning text-white">
.bg-warning
</div>
<div class="p-3 mb-2 bg-info text-white">
.bg-info
</div>
<div class="p-3 mb-2 bg-light text-dark">
.bg-light
</div>
<div class="p-3 bg-dark text-white">
.bg-dark
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="bg-white" data-custom-class="bg-secondary" data-id="bg-white">
<div class="list-item-content">
<a class="list-item-text" href="#bg-white">
<span class="item-filter-text">
bg-white
</span>
</a>
</div>
<div class="code-snippet">
<div class="p-3 bg-white text-dark">
.bg-white
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="bg-transparent" data-id="bg-transparent">
<div class="list-item-content">
<a class="list-item-text" href="#bg-transparent">
<span class="item-filter-text">
bg-transparent
</span>
</a>
</div>
<div class="code-snippet">
<div class="p-3 bg-transparent text-dark">
.bg-transparent
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="bg-gradient" data-id="bg-gradient">
<div class="list-item-content">
<a class="list-item-text" href="#bg-gradient">
<span class="item-filter-text">
bg-gradient
</span>
</a>
</div>
<div class="code-snippet">
<div class="p-3 bg-primary bg-gradient text-white">
.bg-primary.bg-gradient
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/utilities/colors/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryUtilityDisplay" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryUtilityDisplay" role="button">
<span class="item-filter-text">
Utility: Display
</span>
</div>
<div class="card-body collapse show" id="categoryUtilityDisplay">
<ul class="list-items">
<li class="list-item" data-clipboard-text="d-none" data-id="d-none">
<div class="list-item-content">
<a class="list-item-text" href="#d-none">
<span class="item-filter-text">
d-*-none
</span>
</a>
</div>
<div class="code-snippet">
<div class="d-none p-2 bd-highlight">
d-none
</div>
<div class="d-sm-none p-2 bd-highlight">
d-sm-none
</div>
<div class="d-md-none p-2 bd-highlight">
d-md-none
</div>
<div class="d-lg-none p-2 bd-highlight">
d-lg-none
</div>
<div class="d-xl-none p-2 bd-highlight">
d-xl-none
</div>
<div class="d-xxl-none p-2 bd-highlight">
d-xxl-none
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="d-inline" data-id="d-inline">
<div class="list-item-content">
<a class="list-item-text" href="#d-inline">
<span class="item-filter-text">
d-*-inline
</span>
</a>
</div>
<div class="code-snippet">
<div class="d-inline p-2 bd-highlight">
d-inline
</div>
<div class="d-sm-inline p-2 bd-highlight">
d-sm-inline
</div>
<div class="d-md-inline p-2 bd-highlight">
d-md-inline
</div>
<div class="d-lg-inline p-2 bd-highlight">
d-lg-inline
</div>
<div class="d-xl-inline p-2 bd-highlight">
d-xl-inline
</div>
<div class="d-xxl-inline p-2 bd-highlight">
d-xxl-inline
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="d-inline-block" data-id="d-inline-block">
<div class="list-item-content">
<a class="list-item-text" href="#d-inline-block">
<span class="item-filter-text">
d-*-inline-block
</span>
</a>
</div>
<div class="code-snippet">
<div class="d-inline-block p-2 bd-highlight">
d-inline-block
</div>
<div class="d-sm-inline-block p-2 bd-highlight">
d-sm-inline-block
</div>
<div class="d-md-inline-block p-2 bd-highlight">
d-md-inline-block
</div>
<div class="d-lg-inline-block p-2 bd-highlight">
d-lg-inline-block
</div>
<div class="d-xl-inline-block p-2 bd-highlight">
d-xl-inline-block
</div>
<div class="d-xxl-inline-block p-2 bd-highlight">
d-xxl-inline-block
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="d-block" data-id="d-block">
<div class="list-item-content">
<a class="list-item-text" href="#d-block">
<span class="item-filter-text">
d-*-block
</span>
</a>
</div>
<div class="code-snippet">
<span class="d-block p-2 bd-highlight">
d-block
</span>
<span class="d-sm-block p-2 bd-highlight">
d-sm-block
</span>
<span class="d-md-block p-2 bd-highlight">
d-md-block
</span>
<span class="d-lg-block p-2 bd-highlight">
d-lg-block
</span>
<span class="d-xl-block p-2 bd-highlight">
d-xl-block
</span>
<span class="d-xxl-block p-2 bd-highlight">
d-xxl-block
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="d-grid" data-id="d-grid">
<div class="list-item-content">
<a class="list-item-text" href="#d-grid">
<span class="item-filter-text">
d-*-grid
</span>
</a>
</div>
<div class="code-snippet">
<span class="d-grid p-2 bd-highlight">
d-grid
</span>
<span class="d-sm-grid p-2 bd-highlight">
d-sm-grid
</span>
<span class="d-md-grid p-2 bd-highlight">
d-md-grid
</span>
<span class="d-lg-grid p-2 bd-highlight">
d-lg-grid
</span>
<span class="d-xl-grid p-2 bd-highlight">
d-xl-grid
</span>
<span class="d-xxl-grid p-2 bd-highlight">
d-xxl-grid
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="d-table" data-id="d-table">
<div class="list-item-content">
<a class="list-item-text" href="#d-table">
<span class="item-filter-text">
d-*-table
</span>
</a>
</div>
<div class="code-snippet">
<span class="d-table p-2 bd-highlight">
d-table
</span>
<span class="d-sm-table p-2 bd-highlight">
d-sm-table
</span>
<span class="d-md-table p-2 bd-highlight">
d-md-table
</span>
<span class="d-lg-table p-2 bd-highlight">
d-lg-table
</span>
<span class="d-xl-table p-2 bd-highlight">
d-xl-table
</span>
<span class="d-xxl-table p-2 bd-highlight">
d-xxl-table
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="d-table-cell" data-id="d-table-cell">
<div class="list-item-content">
<a class="list-item-text" href="#d-table-cell">
<span class="item-filter-text">
d-*-table-cell
</span>
</a>
</div>
<div class="code-snippet">
<div class="d-table-cell p-2 bd-highlight">
d-table-cell
</div>
<div class="d-sm-table-cell p-2 bd-highlight">
d-sm-table-cell
</div>
<div class="d-md-table-cell p-2 bd-highlight">
d-md-table-cell
</div>
<div class="d-lg-table-cell p-2 bd-highlight">
d-lg-table-cell
</div>
<div class="d-xl-table-cell p-2 bd-highlight">
d-xl-table-cell
</div>
<div class="d-xxl-table-cell p-2 bd-highlight">
d-xxl-table-cell
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="d-table-row" data-id="d-table-row">
<div class="list-item-content">
<a class="list-item-text" href="#d-table-row">
<span class="item-filter-text">
d-*-table-row
</span>
</a>
</div>
<div class="code-snippet">
<span class="d-table-row p-2 bd-highlight">
d-table-row
</span>
<span class="d-sm-table-row p-2 bd-highlight">
d-sm-table-row
</span>
<span class="d-md-table-row p-2 bd-highlight">
d-md-table-row
</span>
<span class="d-lg-table-row p-2 bd-highlight">
d-lg-table-row
</span>
<span class="d-xl-table-row p-2 bd-highlight">
d-xl-table-row
</span>
<span class="d-xxl-table-row p-2 bd-highlight">
d-xxl-table-row
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="d-flex" data-id="d-flex">
<div class="list-item-content">
<a class="list-item-text" href="#d-flex">
<span class="item-filter-text">
d-*-flex
</span>
</a>
</div>
<div class="code-snippet">
<span class="d-flex p-2 bd-highlight">
d-flex
</span>
<span class="d-sm-flex p-2 bd-highlight">
d-sm-flex
</span>
<span class="d-md-flex p-2 bd-highlight">
d-md-flex
</span>
<span class="d-lg-flex p-2 bd-highlight">
d-lg-flex
</span>
<span class="d-xl-flex p-2 bd-highlight">
d-xl-flex
</span>
<span class="d-xxl-flex p-2 bd-highlight">
d-xxl-flex
</span>
</div>
</li>
<li class="list-item" data-clipboard-text="d-inline-flex" data-id="d-inline-flex">
<div class="list-item-content">
<a class="list-item-text" href="#d-inline-flex">
<span class="item-filter-text">
d-*-inline-flex
</span>
</a>
</div>
<div class="code-snippet">
<div class="d-inline-flex p-2 bd-highlight">
d-inline-flex
</div>
<div class="d-sm-inline-flex p-2 bd-highlight">
d-sm-inline-flex
</div>
<div class="d-md-inline-flex p-2 bd-highlight">
d-md-inline-flex
</div>
<div class="d-lg-inline-flex p-2 bd-highlight">
d-lg-inline-flex
</div>
<div class="d-xl-inline-flex p-2 bd-highlight">
d-xl-inline-flex
</div>
<div class="d-xxl-inline-flex p-2 bd-highlight">
d-xxl-inline-flex
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="d-print-none" data-id="d-print-none">
<div class="list-item-content">
<a class="list-item-text" href="#d-print-none">
<span class="item-filter-text">
d-print-{display}
</span>
</a>
</div>
<div class="code-snippet">
<div class="d-print-none p-2 bd-highlight">
d-print-none
</div>
<div class="d-print-inline p-2 bd-highlight">
d-print-inline
</div>
<div class="d-print-inline-block p-2 bd-highlight">
d-print-inline-block
</div>
<div class="d-print-block p-2 bd-highlight">
d-print-block
</div>
<div class="d-print-grid p-2 bd-highlight">
d-print-grid
</div>
<div class="d-print-table p-2 bd-highlight">
d-print-table
</div>
<div class="d-print-table-row p-2 bd-highlight">
d-print-table-row
</div>
<div class="d-print-table-cell p-2 bd-highlight">
d-print-table-cell
</div>
<div class="d-print-flex p-2 bd-highlight">
d-print-flex
</div>
<div class="d-print-inline-flex p-2 bd-highlight">
d-print-inline-flex
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/utilities/display/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryUtilityFlex" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryUtilityFlex" role="button">
<span class="item-filter-text">
Utility: Flex
</span>
</div>
<div class="card-body collapse show" id="categoryUtilityFlex">
<ul class="list-items">
<li class="list-item" data-clipboard-text="flex-row" data-id="flex-row">
<div class="list-item-content">
<a class="list-item-text" href="#flex-row">
<span class="item-filter-text">
flex-*-row
</span>
</a>
</div>
<div class="code-snippet">
<!-- Display flex can be used for responsive cases as well with the help of .flex-{sm|md|lg|xl|xxl}-row class -->
<div class="d-flex flex-row bd-highlight">
<div class="p-2 bd-highlight">
Flex item 1
</div>
<div class="p-2 bd-highlight">
Flex item 2
</div>
<div class="p-2 bd-highlight">
Flex item 3
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="flex-row-reverse" data-id="flex-row-reverse">
<div class="list-item-content">
<a class="list-item-text" href="#flex-row-reverse">
<span class="item-filter-text">
flex-*-row-reverse
</span>
</a>
</div>
<div class="code-snippet">
<!-- Display flex can be used for responsive cases as well with the help of .flex-{sm|md|lg|xl|xxl}-row-reverse class -->
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">
Flex item 1
</div>
<div class="p-2 bd-highlight">
Flex item 2
</div>
<div class="p-2 bd-highlight">
Flex item 3
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="flex-column" data-id="flex-column">
<div class="list-item-content">
<a class="list-item-text" href="#flex-column">
<span class="item-filter-text">
flex-*-column
</span>
</a>
</div>
<div class="code-snippet">
<!-- Display flex can be used for responsive cases as well with the help of .flex-{sm|md|lg|xl|xxl}-column class -->
<div class="d-flex flex-column bd-highlight">
<div class="p-2 bd-highlight">
Flex item 1
</div>
<div class="p-2 bd-highlight">
Flex item 2
</div>
<div class="p-2 bd-highlight">
Flex item 3
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="flex-column-reverse" data-id="flex-column-reverse">
<div class="list-item-content">
<a class="list-item-text" href="#flex-column-reverse">
<span class="item-filter-text">
flex-*-column-reverse
</span>
</a>
</div>
<div class="code-snippet">
<!-- Display flex can be used for responsive cases as well with the help of .flex-{sm|md|lg|xl|xxl}-column-reverse class -->
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">
Flex item 1
</div>
<div class="p-2 bd-highlight">
Flex item 2
</div>
<div class="p-2 bd-highlight">
Flex item 3
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="justify-content-start" data-id="justify-content-start">
<div class="list-item-content">
<a class="list-item-text" href="#justify-content-start">
<span class="item-filter-text">
justify-content-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- justify-content can be used for responsive cases as well with the help of .justify-content-{sm|md|lg|xl|xxl}-{start|end|center|between|around|evenly} class -->
<div class="d-flex justify-content-start bd-highlight mb-2">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex justify-content-end bd-highlight mb-2">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex justify-content-center bd-highlight mb-2">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex justify-content-between bd-highlight mb-2">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex justify-content-around bd-highlight mb-2">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex justify-content-evenly bd-highlight">
<!-- New -->
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="align-items-start" data-id="align-items-start">
<div class="list-item-content">
<a class="list-item-text" href="#align-items-start">
<span class="item-filter-text">
align-items-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- align-items can be used for responsive cases as well with the help of .align-items-{sm|md|lg|xl|xxl}-{start|end|center|baseline|stretch} class -->
<div class="d-flex align-items-start bd-highlight mb-2" style="height: 100px;">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex align-items-end bd-highlight mb-2" style="height: 100px;">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex align-items-center bd-highlight mb-2" style="height: 100px;">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex align-items-baseline bd-highlight mb-2" style="height: 100px;">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex align-items-stretch bd-highlight" style="height: 100px;">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="align-self-start" data-id="align-self-start">
<div class="list-item-content">
<a class="list-item-text" href="#align-self-start">
<span class="item-filter-text">
align-self-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- align-self can be used for responsive cases as well with the help of .align-self-{sm|md|lg|xl|xxl}-{start|end|center|baseline|stretch} class -->
<div class="d-flex bd-highlight mb-2" style="height: 100px;">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="align-self-start p-2 bd-highlight">
Aligned flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex bd-highlight mb-2" style="height: 100px;">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="align-self-end p-2 bd-highlight">
Aligned flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex bd-highlight mb-2" style="height: 100px;">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="align-self-center p-2 bd-highlight">
Aligned flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex bd-highlight mb-2" style="height: 100px;">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="align-self-baseline p-2 bd-highlight">
Aligned flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex bd-highlight" style="height: 100px;">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="align-self-stretch p-2 bd-highlight">
Aligned flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="flex-fill" data-id="flex-fill">
<div class="list-item-content">
<a class="list-item-text" href="#flex-fill">
<span class="item-filter-text">
flex-*-fill
</span>
</a>
</div>
<div class="code-snippet">
<!-- flex-fill can be used for responsive cases as well with the help of .flex-{sm|md|lg|xl|xxl}-fill class -->
<div class="d-flex bd-highlight">
<div class="flex-fill p-2 bd-highlight">
Flex item with a lot of content
</div>
<div class="flex-fill p-2 bd-highlight">
Flex item
</div>
<div class="flex-fill p-2 bd-highlight">
Flex item
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="flex-grow-1" data-id="flex-grow-1">
<div class="list-item-content">
<a class="list-item-text" href="#flex-grow-1">
<span class="item-filter-text">
flex-grow-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- flex-grow can be used for responsive cases as well with the help of .flex-{sm|md|lg|xl|xxl}-grow-{0|1} class -->
<div class="d-flex bd-highlight">
<div class="flex-grow-1 p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Third flex item
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="flex-shrink-1" data-id="flex-shrink-1">
<div class="list-item-content">
<a class="list-item-text" href="#flex-shrink-1">
<span class="item-filter-text">
flex-shrink-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- flex-shrink can be used for responsive cases as well with the help of .flex-{sm|md|lg|xl|xxl}-shrink-{0|1} class -->
<div class="d-flex bd-highlight">
<div class="w-100 p-2 bd-highlight">
Flex item
</div>
<div class="flex-shrink-1 p-2 bd-highlight">
Flex item
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="flex-nowrap" data-id="flex-nowrap">
<div class="list-item-content">
<a class="list-item-text" href="#flex-nowrap">
<span class="item-filter-text">
flex-*-nowrap
</span>
</a>
</div>
<div class="code-snippet">
<!-- flex-nowrap can be used for responsive cases as well with the help of .flex-{sm|md|lg|xl|xxl}-nowrap class -->
<div class="d-flex flex-nowrap bd-highlight" style="width: 8rem;">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="flex-wrap" data-id="flex-wrap">
<div class="list-item-content">
<a class="list-item-text" href="#flex-wrap">
<span class="item-filter-text">
flex-*-wrap
</span>
</a>
</div>
<div class="code-snippet">
<!-- flex-wrap can be used for responsive cases as well with the help of .flex-{sm|md|lg|xl|xxl}-wrap class -->
<div class="d-flex flex-wrap bd-highlight">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="flex-wrap-reverse" data-id="flex-wrap-reverse">
<div class="list-item-content">
<a class="list-item-text" href="#flex-wrap-reverse">
<span class="item-filter-text">
flex-*-wrap-reverse
</span>
</a>
</div>
<div class="code-snippet">
<!-- flex-wrap-reverse can be used for responsive cases as well with the help of .flex-{sm|md|lg|xl|xxl}-wrap-reverse class -->
<div class="d-flex flex-wrap-reverse bd-highlight">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="order-1" data-id="order-1">
<div class="list-item-content">
<a class="list-item-text" href="#order-1">
<span class="item-filter-text">
order-*-{order-number}
</span>
</a>
</div>
<div class="code-snippet">
<!-- order can be used for responsive cases as well with the help of .order-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5} class -->
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">
First flex item
</div>
<div class="order-2 p-2 bd-highlight">
Second flex item
</div>
<div class="order-5 p-2 bd-highlight">
Third flex item
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="order-first" data-id="order-first">
<div class="list-item-content">
<a class="list-item-text" href="#order-first">
<span class="item-filter-text">
order-*-{order-name}
</span>
</a>
</div>
<div class="code-snippet">
<!-- order can be used for responsive cases as well with the help of .order-{sm|md|lg|xl|xxl}-{first|last} class -->
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">
First flex item
</div>
<div class="order-last p-2 bd-highlight">
Second flex item
</div>
<div class="order-first p-2 bd-highlight">
Third flex item
</div>
<div class="order-1 p-2 bd-highlight">
Fourth flex item
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="align-content-start" data-id="align-content-start">
<div class="list-item-content">
<a class="list-item-text" href="#align-content-start">
<span class="item-filter-text">
align-content-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- align-content can be used for responsive cases as well with the help of .align-content-{sm|md|lg|xl|xxl}-{start|end|center|around|stretch} class -->
<div class="d-flex align-content-start flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex align-content-end flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex align-content-center flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex align-content-around flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
<div class="d-flex align-content-stretch flex-wrap bd-highlight" style="height: 200px">
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
<div class="p-2 bd-highlight">
Flex item
</div>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/utilities/flex/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryUtilityMisc" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryUtilityMisc" role="button">
<span class="item-filter-text">
Utility: Misc
</span>
</div>
<div class="card-body collapse show" id="categoryUtilityMisc">
<ul class="list-items">
<li class="list-item" data-clipboard-text="user-select-all" data-id="user-select-all">
<div class="list-item-content">
<a class="list-item-text" href="#user-select-all">
<span class="item-filter-text">
user-select-{option}
</span>
</a>
</div>
<div class="code-snippet">
<p class="user-select-all">
This paragraph will be entirely selected when clicked by the user.
</p>
<p class="user-select-auto">
This paragraph has default select behavior.
</p>
<p class="user-select-none">
This paragraph will not be selectable when clicked by the user.
</p>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="pe-none" data-id="pe-none">
<div class="list-item-content">
<a class="list-item-text" href="#pe-none">
<span class="item-filter-text">
pe-{option}
</span>
</a>
</div>
<div class="code-snippet">
<p>
<a aria-disabled="true" class="pe-none" href="#" tabindex="-1">
This link
</a>
can not be clicked.
</p>
<p>
<a class="pe-auto" href="#">
This link
</a>
can be clicked (this is default behavior).
</p>
<p class="pe-none">
<a aria-disabled="true" href="#" tabindex="-1">
This link
</a>
can not be clicked because the
<code>
pointer-events
</code>
property is inherited from its parent. However,
<a class="pe-auto" href="#">
this link
</a>
has a
<code>
pe-auto
</code>
class and can be clicked.
</p>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="overflow-auto" data-id="overflow-auto">
<div class="list-item-content">
<a class="list-item-text" href="#overflow-auto">
<span class="item-filter-text">
overflow-{option}
</span>
</a>
</div>
<div class="code-snippet">
<div class="d-sm-flex d-md-block d-xxl-flex">
<div class="overflow-auto p-3 mb-3 me-sm-3 bg-light" style="max-width: 260px; max-height: 100px;">
This is an example of using
<code>
.overflow-auto
</code>
on an element with set width and height dimensions. By design, this content will vertically scroll.
</div>
<div class="overflow-hidden p-3 mb-3 me-sm-3 bg-light" style="max-width: 260px; max-height: 100px;">
This is an example of using
<code>
.overflow-hidden
</code>
on an element with set width and height dimensions.
</div>
</div>
<div class="d-sm-flex d-md-block d-xxl-flex">
<div class="overflow-visible p-3 mb-3 me-sm-3 bg-light" style="max-width: 260px; max-height: 100px;">
<!-- New -->
This is an example of using
<code>
.overflow-visible
</code>
on an element with set width and height dimensions.
</div>
<div class="overflow-scroll p-3 bg-light" style="max-width: 260px; max-height: 100px;">
<!-- New -->
This is an example of using
<code>
.overflow-scroll
</code>
on an element with set width and height dimensions.
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="shadow" data-id="shadow">
<div class="list-item-content">
<a class="list-item-text" href="#shadow">
<span class="item-filter-text">
shadow / shadow-{option}
</span>
</a>
</div>
<div class="code-snippet">
<div class="shadow-none p-3 mb-5 bg-light rounded">
No shadow
</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">
Small shadow
</div>
<div class="shadow p-3 mb-5 bg-white rounded">
Regular shadow
</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">
Larger shadow
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="w-25" data-id="w-25">
<div class="list-item-content">
<a class="list-item-text" href="#w-25">
<span class="item-filter-text">
w-{option}
</span>
</a>
</div>
<div class="code-snippet">
<div class="w-25 p-3" style="background-color: #eee;">
Width 25%
</div>
<div class="w-50 p-3" style="background-color: #eee;">
Width 50%
</div>
<div class="w-75 p-3" style="background-color: #eee;">
Width 75%
</div>
<div class="w-100 p-3" style="background-color: #eee;">
Width 100%
</div>
<div class="w-auto p-3" style="background-color: #eee;">
Width auto
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="h-25" data-id="h-25">
<div class="list-item-content">
<a class="list-item-text" href="#h-25">
<span class="item-filter-text">
h-{option}
</span>
</a>
</div>
<div class="code-snippet">
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">
Height 25%
</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">
Height 50%
</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">
Height 75%
</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">
Height 100%
</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">
Height auto
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="mw-100" data-id="mw-100">
<div class="list-item-content">
<a class="list-item-text" href="#mw-100">
<span class="item-filter-text">
mw-100
</span>
</a>
</div>
<div class="code-snippet">
<img alt="Max-width-100" class="mw-100" src="assets/images/bs-images/img-2x1.png">
</div>
</li>
<li class="list-item" data-clipboard-text="mh-100" data-id="mh-100">
<div class="list-item-content">
<a class="list-item-text" href="#mh-100">
<span class="item-filter-text">
mh-100
</span>
</a>
</div>
<div class="code-snippet">
<div style="height: 100px; background-color: rgba(255,0,0,.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.1);">
Max-height 100%
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="vh-100" data-id="vh-100">
<div class="list-item-content">
<a class="list-item-text" href="#vh-100">
<span class="item-filter-text">
viewport
</span>
</a>
</div>
<div class="code-snippet">
<div class="min-vw-100 bg-light mb-3">
Min-width 100vw
</div>
<div class="min-vh-100 bg-light mb-3">
Min-height 100vh
</div>
<div class="vw-100 bg-light mb-3">
Width 100vw
</div>
<div class="vh-100 bg-light">
Height 100vh
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="visible" data-id="visible">
<div class="list-item-content">
<a class="list-item-text" href="#visible">
<span class="item-filter-text">
visible
</span>
</a>
</div>
<div class="code-snippet">
<div class="visible">
...
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="invisible" data-id="invisible">
<div class="list-item-content">
<a class="list-item-text" href="#invisible">
<span class="item-filter-text">
invisible
</span>
</a>
</div>
<div class="code-snippet">
<div class="invisible">
...
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/utilities/interactions/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryUtilityPosition" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryUtilityPosition" role="button">
<span class="item-filter-text">
Utility: Position
</span>
</div>
<div class="card-body collapse show" id="categoryUtilityPosition">
<ul class="list-items">
<li class="list-item" data-clipboard-text="float-start" data-id="float-start">
<div class="list-item-content">
<a class="list-item-text" href="#float-start">
<span class="item-filter-text">
float-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- float can be used for responsive cases with the help of .float-{sm|md|lg|xl|xxl}-{start|end|none} class -->
<div class="float-start">
Float start on all viewport sizes
</div>
<br>
<div class="float-end">
Float end on all viewport sizes
</div>
<br>
<div class="float-none">
Don't float on all viewport sizes
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="position-relative" data-id="position-relative">
<div class="list-item-content">
<a class="list-item-text" href="#position-relative">
<span class="item-filter-text">
position-{option}
</span>
</a>
</div>
<div class="code-snippet">
<div class="position-static">
position-static
</div>
<div class="position-relative">
position-relative
</div>
<div class="position-absolute">
position-absolute
</div>
<div class="position-fixed">
position-fixed
</div>
<div class="position-sticky">
position-sticky
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="top-50" data-custom-class="bd-example-position-utils" data-id="top-50">
<div class="list-item-content">
<a class="list-item-text" href="#top-50">
<span class="item-filter-text">
{direction}-{position}
</span>
</a>
</div>
<div class="code-snippet">
<div class="position-relative">
<div class="position-absolute top-0 start-0">
</div>
<div class="position-absolute top-0 end-0">
</div>
<div class="position-absolute top-50 start-50">
</div>
<div class="position-absolute bottom-50 end-50">
</div>
<div class="position-absolute bottom-0 start-0">
</div>
<div class="position-absolute bottom-0 end-0">
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="translate-middle" data-custom-class="bd-example-position-utils" data-id="translate-middle">
<div class="list-item-content">
<a class="list-item-text" href="#translate-middle">
<span class="item-filter-text">
translate-middle
</span>
</a>
</div>
<div class="code-snippet">
<div class="position-relative">
<div class="position-absolute top-0 start-0 translate-middle">
</div>
<div class="position-absolute top-0 start-50 translate-middle">
</div>
<div class="position-absolute top-0 start-100 translate-middle">
</div>
<div class="position-absolute top-50 start-0 translate-middle">
</div>
<div class="position-absolute top-50 start-50 translate-middle">
</div>
<div class="position-absolute top-50 start-100 translate-middle">
</div>
<div class="position-absolute top-100 start-0 translate-middle">
</div>
<div class="position-absolute top-100 start-50 translate-middle">
</div>
<div class="position-absolute top-100 start-100 translate-middle">
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="translate-middle-x" data-custom-class="bd-example-position-utils" data-id="translate-middle-x">
<div class="list-item-content">
<a class="list-item-text" href="#translate-middle-x">
<span class="item-filter-text">
translate-middle-{direction}
</span>
</a>
</div>
<div class="code-snippet">
<div class="position-relative">
<div class="position-absolute top-0 start-0">
</div>
<div class="position-absolute top-0 start-50 translate-middle-x">
</div>
<div class="position-absolute top-0 end-0">
</div>
<div class="position-absolute top-50 start-0 translate-middle-y">
</div>
<div class="position-absolute top-50 start-50 translate-middle">
</div>
<div class="position-absolute top-50 end-0 translate-middle-y">
</div>
<div class="position-absolute bottom-0 start-0">
</div>
<div class="position-absolute bottom-0 start-50 translate-middle-x">
</div>
<div class="position-absolute bottom-0 end-0">
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="align-middle" data-id="align-middle">
<div class="list-item-content">
<a class="list-item-text" href="#align-middle">
<span class="item-filter-text">
align-{option}
</span>
</a>
</div>
<div class="code-snippet">
<span class="align-baseline">
baseline
</span>
<span class="align-top">
top
</span>
<span class="align-middle">
middle
</span>
<span class="align-bottom">
bottom
</span>
<span class="align-text-top">
text-top
</span>
<span class="align-text-bottom">
text-bottom
</span>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/utilities/position/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryUtilitySpacing" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryUtilitySpacing" role="button">
<span class="item-filter-text">
Utility: Spacing
</span>
</div>
<div class="card-body collapse show" id="categoryUtilitySpacing">
<ul class="list-items">
<li class="list-item" data-clipboard-text="m-0" data-id="m-0">
<div class="list-item-content">
<a class="list-item-text" href="#m-0">
<span class="item-filter-text">
m-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Margin can be used for responsive cases with the help of .m-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} class -->
<div class="d-flex flex-wrap align-items-start">
<div class="m-0 bd-highlight d-inline-block">
.m-0
</div>
<div class="m-1 bd-highlight d-inline-block">
.m-1
</div>
<div class="m-2 bd-highlight d-inline-block">
.m-2
</div>
<div class="m-3 bd-highlight d-inline-block">
.m-3
</div>
<div class="m-4 bd-highlight d-inline-block">
.m-4
</div>
<div class="m-5 bd-highlight d-inline-block">
.m-5
</div>
<div class="m-auto bd-highlight d-inline-block">
.m-auto
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="mt-0" data-id="mt-0">
<div class="list-item-content">
<a class="list-item-text" href="#mt-0">
<span class="item-filter-text">
mt-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Margin on top can be used for responsive cases with the help of .mt-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} class -->
<div class="d-flex flex-wrap align-items-start">
<div class="mt-0 bd-highlight d-inline-block">
.mt-0
</div>
<div class="mt-1 bd-highlight d-inline-block">
.mt-1
</div>
<div class="mt-2 bd-highlight d-inline-block">
.mt-2
</div>
<div class="mt-3 bd-highlight d-inline-block">
.mt-3
</div>
<div class="mt-4 bd-highlight d-inline-block">
.mt-4
</div>
<div class="mt-5 bd-highlight d-inline-block">
.mt-5
</div>
<div class="mt-auto bd-highlight d-inline-block">
.mt-auto
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="me-0" data-id="me-0">
<div class="list-item-content">
<a class="list-item-text" href="#me-0">
<span class="item-filter-text">
me-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Margin on right can be used for responsive cases with the help of .me-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} class -->
<div class="d-flex flex-wrap align-items-start">
<div class="me-0 bd-highlight d-inline-block">
.me-0
</div>
<div class="me-1 bd-highlight d-inline-block">
.me-1
</div>
<div class="me-2 bd-highlight d-inline-block">
.me-2
</div>
<div class="me-3 bd-highlight d-inline-block">
.me-3
</div>
<div class="me-4 bd-highlight d-inline-block">
.me-4
</div>
<div class="me-5 bd-highlight d-inline-block">
.me-5
</div>
<div class="me-auto bd-highlight d-inline-block">
.me-auto
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="mb-0" data-id="mb-0">
<div class="list-item-content">
<a class="list-item-text" href="#mb-0">
<span class="item-filter-text">
mb-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Margin on bottom can be used for responsive cases with the help of .mb-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} class -->
<div class="mb-0 bd-highlight">
.mb-0
</div>
<div class="mb-1 bd-highlight">
.mb-1
</div>
<div class="mb-2 bd-highlight">
.mb-2
</div>
<div class="mb-3 bd-highlight">
.mb-3
</div>
<div class="mb-4 bd-highlight">
.mb-4
</div>
<div class="mb-5 bd-highlight">
.mb-5
</div>
<div class="mb-auto bd-highlight">
.mb-auto
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="ms-0" data-id="ms-0">
<div class="list-item-content">
<a class="list-item-text" href="#ms-0">
<span class="item-filter-text">
ms-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Margin on left can be used for responsive cases with the help of .ms-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} class -->
<div class="d-flex flex-wrap align-items-start">
<div class="ms-0 bd-highlight d-inline-block">
.ms-0
</div>
<div class="ms-1 bd-highlight d-inline-block">
.ms-1
</div>
<div class="ms-2 bd-highlight d-inline-block">
.ms-2
</div>
<div class="ms-3 bd-highlight d-inline-block">
.ms-3
</div>
<div class="ms-4 bd-highlight d-inline-block">
.ms-4
</div>
<div class="ms-5 bd-highlight d-inline-block">
.ms-5
</div>
<div class="ms-auto bd-highlight d-inline-block">
.ms-auto
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="mx-0" data-id="mx-0">
<div class="list-item-content">
<a class="list-item-text" href="#mx-0">
<span class="item-filter-text">
mx-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Margin on right and left can be used for responsive cases with the help of .mx-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} class -->
<div class="d-flex flex-wrap align-items-start">
<div class="mx-0 bd-highlight d-inline-block">
.mx-0
</div>
<div class="mx-1 bd-highlight d-inline-block">
.mx-1
</div>
<div class="mx-2 bd-highlight d-inline-block">
.mx-2
</div>
<div class="mx-3 bd-highlight d-inline-block">
.mx-3
</div>
<div class="mx-4 bd-highlight d-inline-block">
.mx-4
</div>
<div class="mx-5 bd-highlight d-inline-block">
.mx-5
</div>
<div class="mx-auto bd-highlight d-inline-block">
.mx-auto
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="my-0" data-id="my-0">
<div class="list-item-content">
<a class="list-item-text" href="#my-0">
<span class="item-filter-text">
my-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Margin on top and bottom can be used for responsive cases with the help of .my-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} class -->
<div class="d-flex flex-wrap align-items-start">
<div class="my-0 bd-highlight d-inline-block">
.my-0
</div>
<div class="my-1 bd-highlight d-inline-block">
.my-1
</div>
<div class="my-2 bd-highlight d-inline-block">
.my-2
</div>
<div class="my-3 bd-highlight d-inline-block">
.my-3
</div>
<div class="my-4 bd-highlight d-inline-block">
.my-4
</div>
<div class="my-5 bd-highlight d-inline-block">
.my-5
</div>
<div class="my-auto bd-highlight d-inline-block">
.my-auto
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="p-0" data-id="p-0">
<div class="list-item-content">
<a class="list-item-text" href="#p-0">
<span class="item-filter-text">
p-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Padding can be used for responsive cases with the help of .p-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5} class -->
<div class="d-flex flex-wrap align-items-start">
<div class="p-0 me-1 bd-highlight d-inline-block">
.p-0
</div>
<div class="p-1 me-1 bd-highlight d-inline-block">
.p-1
</div>
<div class="p-2 me-1 bd-highlight d-inline-block">
.p-2
</div>
<div class="p-3 me-1 bd-highlight d-inline-block">
.p-3
</div>
<div class="p-4 me-1 bd-highlight d-inline-block">
.p-4
</div>
<div class="p-5 bd-highlight d-inline-block">
.p-5
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="pt-0" data-id="pt-0">
<div class="list-item-content">
<a class="list-item-text" href="#pt-0">
<span class="item-filter-text">
pt-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Padding on top can be used for responsive cases with the help of .pt-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5} class -->
<div class="d-flex flex-wrap align-items-start">
<div class="pt-0 me-1 bd-highlight d-inline-block">
.pt-0
</div>
<div class="pt-1 me-1 bd-highlight d-inline-block">
.pt-1
</div>
<div class="pt-2 me-1 bd-highlight d-inline-block">
.pt-2
</div>
<div class="pt-3 me-1 bd-highlight d-inline-block">
.pt-3
</div>
<div class="pt-4 me-1 bd-highlight d-inline-block">
.pt-4
</div>
<div class="pt-5 bd-highlight d-inline-block">
.pt-5
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="pe-0" data-id="pe-0">
<div class="list-item-content">
<a class="list-item-text" href="#pe-0">
<span class="item-filter-text">
pe-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Padding on right can be used for responsive cases with the help of .pe-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5} class -->
<div class="d-flex flex-wrap align-items-start">
<div class="pe-0 me-1 bd-highlight d-inline-block">
.pe-0
</div>
<div class="pe-1 me-1 bd-highlight d-inline-block">
.pe-1
</div>
<div class="pe-2 me-1 bd-highlight d-inline-block">
.pe-2
</div>
<div class="pe-3 me-1 bd-highlight d-inline-block">
.pe-3
</div>
<div class="pe-4 me-1 bd-highlight d-inline-block">
.pe-4
</div>
<div class="pe-5 bd-highlight d-inline-block">
.pe-5
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="pb-0" data-id="pb-0">
<div class="list-item-content">
<a class="list-item-text" href="#pb-0">
<span class="item-filter-text">
pb-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Padding on bottom can be used for responsive cases with the help of .pb-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5} class -->
<div class="d-flex flex-wrap align-items-start">
<div class="pb-0 me-1 bd-highlight d-inline-block">
.pb-0
</div>
<div class="pb-1 me-1 bd-highlight d-inline-block">
.pb-1
</div>
<div class="pb-2 me-1 bd-highlight d-inline-block">
.pb-2
</div>
<div class="pb-3 me-1 bd-highlight d-inline-block">
.pb-3
</div>
<div class="pb-4 me-1 bd-highlight d-inline-block">
.pb-4
</div>
<div class="pb-5 bd-highlight d-inline-block">
.pb-5
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="ps-0" data-id="ps-0">
<div class="list-item-content">
<a class="list-item-text" href="#ps-0">
<span class="item-filter-text">
ps-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Padding on left can be used for responsive cases with the help of .ps-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5} class -->
<div class="d-flex flex-wrap align-items-start">
<div class="ps-0 me-1 bd-highlight d-inline-block">
.ps-0
</div>
<div class="ps-1 me-1 bd-highlight d-inline-block">
.ps-1
</div>
<div class="ps-2 me-1 bd-highlight d-inline-block">
.ps-2
</div>
<div class="ps-3 me-1 bd-highlight d-inline-block">
.ps-3
</div>
<div class="ps-4 me-1 bd-highlight d-inline-block">
.ps-4
</div>
<div class="ps-5 bd-highlight d-inline-block">
.ps-5
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="px-0" data-id="px-0">
<div class="list-item-content">
<a class="list-item-text" href="#px-0">
<span class="item-filter-text">
px-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Padding on right and left can be used for responsive cases with the help of .px-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5} class -->
<div class="d-flex flex-wrap align-items-start">
<div class="px-0 me-1 bd-highlight d-inline-block">
.px-0
</div>
<div class="px-1 me-1 bd-highlight d-inline-block">
.px-1
</div>
<div class="px-2 me-1 bd-highlight d-inline-block">
.px-2
</div>
<div class="px-3 me-1 bd-highlight d-inline-block">
.px-3
</div>
<div class="px-4 me-1 bd-highlight d-inline-block">
.px-4
</div>
<div class="px-5 bd-highlight d-inline-block">
.px-5
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="py-0" data-id="py-0">
<div class="list-item-content">
<a class="list-item-text" href="#py-0">
<span class="item-filter-text">
py-*-{option}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Padding on top and bottom can be used for responsive cases with the help of .py-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5} class -->
<div class="d-flex flex-wrap align-items-start">
<div class="py-0 me-1 bd-highlight d-inline-block">
.py-0
</div>
<div class="py-1 me-1 bd-highlight d-inline-block">
.py-1
</div>
<div class="py-2 me-1 bd-highlight d-inline-block">
.py-2
</div>
<div class="py-3 me-1 bd-highlight d-inline-block">
.py-3
</div>
<div class="py-4 me-1 bd-highlight d-inline-block">
.py-4
</div>
<div class="py-5 bd-highlight d-inline-block">
.py-5
</div>
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="m-n1" data-id="m-n1">
<div class="list-item-content">
<a class="list-item-text" href="#m-n1">
<span class="item-filter-text">
m{direction}-*-n{size}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Negative margins are disabled by default, but can be enabled in Sass by setting $enable-negative-margins: true.
This class can be used as .m{t|e|b|s|x|y}-{sm|md|lg|xl|xxl}-n{0|1|2|3|4|5} -->
<div class="d-flex flex-wrap align-items-start">
<div class="m-n0 bd-highlight d-inline-block">
Spaced Div
</div>
<div class="mt-n1 bd-highlight d-inline-block">
Spaced Div
</div>
<div class="me-n2 bd-highlight d-inline-block">
Spaced Div
</div>
<div class="mb-n3 bd-highlight d-inline-block">
Spaced Div
</div>
<div class="ms-n4 bd-highlight d-inline-block">
Spaced Div
</div>
<div class="mx-n5 bd-highlight d-inline-block">
Spaced Div
</div>
<div class="my-md-n3 bd-highlight d-inline-block">
Spaced Div
</div>
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="gap-2" data-id="gap-2">
<div class="list-item-content">
<a class="list-item-text" href="#gap-2">
<span class="item-filter-text">
gap-*-{size}
</span>
</a>
</div>
<div class="code-snippet">
<!-- Gap can be used for responsive cases with the help of .dap-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5} class -->
<div class="d-grid gap-3">
<div class="p-2 bg-light border">
Grid item 1
</div>
<div class="p-2 bg-light border">
Grid item 2
</div>
<div class="p-2 bg-light border">
Grid item 3
</div>
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/utilities/spacing/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryUtilityText" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryUtilityText" role="button">
<span class="item-filter-text">
Utility: Text
</span>
</div>
<div class="card-body collapse show" id="categoryUtilityText">
<ul class="list-items">
<li class="list-item list-item-bs-new" data-clipboard-text="text-start" data-id="text-start">
<div class="list-item-content">
<a class="list-item-text" href="#text-start">
<span class="item-filter-text">
text-*-start
</span>
</a>
</div>
<div class="code-snippet">
<!-- text-start can be used for responsive cases with the help of .text-{sm|md|lg|xl|xxl}-start class -->
<p class="text-start">
Start aligned text on all viewport sizes.
</p>
<p class="text-sm-start">
Start aligned text on viewports sized SM (small) or wider.
</p>
<p class="text-md-start">
Start aligned text on viewports sized MD (medium) or wider.
</p>
<p class="text-lg-start">
Start aligned text on viewports sized LG (large) or wider.
</p>
<p class="text-xl-start">
Start aligned text on viewports sized XL (extra-large) or wider.
</p>
<p class="text-xxl-start">
Start aligned text on viewports sized XXL (extra-extra-large) or wider.
</p>
<!-- New -->
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="text-center" data-id="text-center">
<div class="list-item-content">
<a class="list-item-text" href="#text-center">
<span class="item-filter-text">
text-*-center
</span>
</a>
</div>
<div class="code-snippet">
<!-- text-center can be used for responsive cases with the help of .text-{sm|md|lg|xl|xxl}-center class -->
<p class="text-center">
Center aligned text on all viewport sizes.
</p>
<p class="text-sm-center">
Center aligned text on viewports sized SM (small) or wider.
</p>
<p class="text-md-center">
Center aligned text on viewports sized MD (medium) or wider.
</p>
<p class="text-lg-center">
Center aligned text on viewports sized LG (large) or wider.
</p>
<p class="text-xl-center">
Center aligned text on viewports sized XL (extra-large) or wider.
</p>
<p class="text-xxl-center">
Center aligned text on viewports sized XXL (extra-extra-large) or wider.
</p>
<!-- New -->
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="text-end" data-id="text-end">
<div class="list-item-content">
<a class="list-item-text" href="#text-end">
<span class="item-filter-text">
text-*-end
</span>
</a>
</div>
<div class="code-snippet">
<!-- text-end can be used for responsive cases with the help of .text-{sm|md|lg|xl|xxl}-end class -->
<p class="text-end">
End aligned text on all viewport sizes.
</p>
<p class="text-sm-end">
End aligned text on viewports sized SM (small) or wider.
</p>
<p class="text-md-end">
End aligned text on viewports sized MD (medium) or wider.
</p>
<p class="text-lg-end">
End aligned text on viewports sized LG (large) or wider.
</p>
<p class="text-xl-end">
End aligned text on viewports sized XL (extra-large) or wider.
</p>
<p class="text-xxl-end">
End aligned text on viewports sized XXL (extra-extra-large) or wider.
</p>
<!-- New -->
</div>
</li>
<li class="list-item" data-clipboard-text="text-wrap" data-id="text-wrap">
<div class="list-item-content">
<a class="list-item-text" href="#text-wrap">
<span class="item-filter-text">
text-wrap
</span>
</a>
</div>
<div class="code-snippet">
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="text-nowrap" data-id="text-nowrap">
<div class="list-item-content">
<a class="list-item-text" href="#text-nowrap">
<span class="item-filter-text">
text-nowrap
</span>
</a>
</div>
<div class="code-snippet">
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
</div>
</li>
<li class="list-item" data-clipboard-text="text-break" data-id="text-break">
<div class="list-item-content">
<a class="list-item-text" href="#text-break">
<span class="item-filter-text">
text-break
</span>
</a>
</div>
<div class="code-snippet">
<p class="text-break">
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
</p>
</div>
</li>
<li class="list-item" data-clipboard-text="text-uppercase" data-id="text-uppercase">
<div class="list-item-content">
<a class="list-item-text" href="#text-uppercase">
<span class="item-filter-text">
text-{option}
</span>
</a>
</div>
<div class="code-snippet">
<p class="text-lowercase">
Lowercased text.
</p>
<p class="text-uppercase">
Uppercased text.
</p>
<p class="text-capitalize">
CapiTaliZed text.
</p>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="fs-1" data-id="fs-1">
<div class="list-item-content">
<a class="list-item-text" href="#fs-1">
<span class="item-filter-text">
fs-{size}
</span>
</a>
</div>
<div class="code-snippet">
<p class="fs-1">
.fs-1 text
</p>
<p class="fs-2">
.fs-2 text
</p>
<p class="fs-3">
.fs-3 text
</p>
<p class="fs-4">
.fs-4 text
</p>
<p class="fs-5">
.fs-5 text
</p>
<p class="fs-6">
.fs-6 text
</p>
</div>
</li>
<li class="list-item" data-clipboard-text="fw-bold" data-id="fw-bold">
<div class="list-item-content">
<a class="list-item-text" href="#fw-bold">
<span class="item-filter-text">
fw-{weight}
</span>
</a>
</div>
<div class="code-snippet">
<p class="fw-bold">
Bold text.
</p>
<p class="fw-bolder">
Bolder weight text (relative to the parent element).
</p>
<p class="fw-normal">
Normal weight text.
</p>
<p class="fw-light">
Light weight text.
</p>
<p class="fw-lighter">
Lighter weight text (relative to the parent element).
</p>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="fst-italic" data-id="fst-italic">
<div class="list-item-content">
<a class="list-item-text" href="#fst-italic">
<span class="item-filter-text">
fst-{style}
</span>
</a>
</div>
<div class="code-snippet">
<p class="fst-italic">
Italic text.
</p>
<p class="fst-normal">
Text with normal font style
</p>
<!-- New -->
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="lh-1" data-id="lh-1">
<div class="list-item-content">
<a class="list-item-text" href="#lh-1">
<span class="item-filter-text">
lh-{style}
</span>
</a>
</div>
<div class="code-snippet">
<p class="lh-1">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
</p>
<p class="lh-sm">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
</p>
<p class="lh-base">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
</p>
<p class="lh-lg">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
</p>
</div>
</li>
<li class="list-item" data-clipboard-text="font-monospace" data-id="font-monospace">
<div class="list-item-content">
<a class="list-item-text" href="#font-monospace">
<span class="item-filter-text">
font-monospace
</span>
</a>
</div>
<div class="code-snippet">
<p class="font-monospace">
This is in monospace
</p>
</div>
</li>
<li class="list-item" data-clipboard-text="text-reset" data-id="text-reset">
<div class="list-item-content">
<a class="list-item-text" href="#text-reset">
<span class="item-filter-text">
text-reset
</span>
</a>
</div>
<div class="code-snippet">
<p class="text-muted">
Muted text with a
<a class="text-reset" href="#">
reset link
</a>
.
</p>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="text-decoration-underline" data-id="text-decoration-underline">
<div class="list-item-content">
<a class="list-item-text" href="#text-decoration-underline">
<span class="item-filter-text">
text-decoration-{option}
</span>
</a>
</div>
<div class="code-snippet">
<p class="text-decoration-underline">
This text has a line underneath it.
</p>
<!-- New -->
<p class="text-decoration-line-through">
This text has a line going through it.
</p>
<!-- New -->
<a class="text-decoration-none" href="#">
This link has its text decoration removed
</a>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/utilities/text/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 category">
<div class="card">
<div aria-controls="categoryUtilityOpacity" aria-expanded="false" class="card-header" data-bs-toggle="collapse" href="#categoryUtilityOpacity" role="button">
<span class="item-filter-text">
Utility: Opacity
</span>
</div>
<div class="card-body collapse show" id="categoryUtilityOpacity">
<ul class="list-items">
<li class="list-item list-item-bs-new" data-clipboard-text="opacity-75" data-id="opacity">
<div class="list-item-content">
<a class="list-item-text" href="#opacity">
<span class="item-filter-text">
opacity-{value}
</span>
</a>
</div>
<div class="code-snippet">
<div class="opacity-100 p-2 m-1 bg-primary text-light fw-bold rounded">
100%
</div>
<div class="opacity-75 p-2 m-1 bg-primary text-light fw-bold rounded">
75%
</div>
<div class="opacity-50 p-2 m-1 bg-primary text-light fw-bold rounded">
50%
</div>
<div class="opacity-25 p-2 m-1 bg-primary text-light fw-bold rounded">
25%
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="bg-opacity-75" data-id="bg-opacity">
<div class="list-item-content">
<a class="list-item-text" href="#bg-opacity">
<span class="item-filter-text">
bg-opacity-{value}
</span>
</a>
</div>
<div class="code-snippet">
<div class="bg-success p-2 text-white">
This is default success background
</div>
<div class="bg-success p-2 text-white bg-opacity-75">
This is 75% opacity success background
</div>
<div class="bg-success p-2 text-dark bg-opacity-50">
This is 50% opacity success background
</div>
<div class="bg-success p-2 text-dark bg-opacity-25">
This is 25% opacity success background
</div>
<div class="bg-success p-2 text-dark bg-opacity-10">
This is 10% opacity success background
</div>
</div>
</li>
<li class="list-item list-item-bs-new" data-clipboard-text="text-opacity-75" data-id="text-opacity">
<div class="list-item-content">
<a class="list-item-text" href="#text-opacity">
<span class="item-filter-text">
text-opacity-{value}
</span>
</a>
</div>
<div class="code-snippet">
<div class="text-primary">
This is default primary text
</div>
<div class="text-primary text-opacity-75">
This is 75% opacity primary text
</div>
<div class="text-primary text-opacity-50">
This is 50% opacity primary text
</div>
<div class="text-primary text-opacity-25">
This is 25% opacity primary text
</div>
</div>
</li>
</ul>
</div>
<a class="item-link" data-bs-placement="top" data-bs-toggle="tooltip" href="https://getbootstrap.com/docs/5.1/utilities/opacity/" target="_blank" title="See Official Documentation">
<img alt="External link" src="assets/images/fonts/box-arrow-up-right.png">
</a>
</div>
</div>
<!-- Modal Code Snippet & Preview -->
<div aria-hidden="true" class="modal" id="modal-snippet" role="dialog" tabindex="-1">
<div class="modal-dialog modal-fullscreen bs-modal-dialog" role="document">
<div class="modal-content bs-modal-content">
<div class="modal-header bs-modal-header">
<div class="header-actions bs-header-actions mx-sm-auto">
<button class="btn btn-action bs-btn-action prev">
<svg class="bi bi-arrow-left" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" fill-rule="evenodd">
</path>
</svg>
</button>
<h5 class="modal-title snippet-title bs-modal-title">
Modal title
</h5>
<button class="btn btn-action bs-btn-action next">
<svg class="bi bi-arrow-right" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" fill-rule="evenodd">
</path>
</svg>
</button>
</div>
<button aria-label="Close" class="btn-close bs-btn-close ms-0" data-bs-dismiss="modal" type="button">
<svg class="bi bi-x" fill="currentColor" height="30" viewBox="0 0 16 16" width="30" xmlns="http://www.w3.org/2000/svg">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z">
</path>
</svg>
</button>
</div>
<div class="modal-body bs-modal-body">
<div class="row">
<div class="col-md-6 position-relative">
<h6 class="text-white">
Code Snippet
</h6>
<span class="copy-snippet-code">
copy
</span>
<pre id="editor"></pre>
</div>
<div class="col-md-6">
<h6 class="text-white">
Preview
</h6>
<div id="preview">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Modal Code Snippet & Preview -->
</div>
<h4 class="no-search-items align-items-center d-flex d-none">
<svg class="bi bi-x-circle" fill="currentColor" height="20" viewBox="0 0 16 16" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z">
</path>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z">
</path>
</svg>
<span class="ms-2">
No Items Found
</span>
</h4>
<div class="alert-tip">
<div class="alert-tip-title">
Tip
</div>
<ul class="m-0">
<li>
<code>
.col-*
</code>
where
<code>
*
</code>
value can be
<code>
{ sm | md | lg | xl | xxl }
</code>
</li>
<li>
<code>
.col-#
</code>
where
<code>
#
</code>
value can be from
<code>
1 to 12
</code>
</li>
<li>
<code>
.bg-{color}
</code>
where
<code>
color
</code>
value can be
<code>
{ primary | secondary | success | danger | warning | info | light | dark }
</code>
</li>
<li>
<code>
.bd-highlight
</code>
class is for demo purpose only
</li>
</ul>
</div>
</div>
</main>
<footer class="cheatsheet-footer">
<div class="container">
<div class="row py-md-5 py-3 gx-0 gx-md-5">
<div class="col-md-6 col-12">
<ul class="footer-links row">
<li class="nav-item col-12 col-sm-6 col-md-12 col-lg-6">
<a href="https://themeselection.com/products/category/download-free-admin-templates/" target="_blank">
Freebies
</a>
</li>
<li class="nav-item col-12 col-sm-6 col-md-12 col-lg-6">
<a href="https://themeselection.com/products/category/bootstrap-admin-templates/" target="_blank">
Bootstrap Admin Templates
</a>
</li>
<li class="nav-item col-12 col-sm-6 col-md-12 col-lg-6">
<a href="https://themeselection.com/blog/" target="_blank">
Blog
</a>
</li>
<li class="nav-item col-12 col-sm-6 col-md-12 col-lg-6">
<a href="https://themeselection.com/products/category/vuejs-admin-templates/" target="_blank">
Vuejs Admin Templates
</a>
</li>
<li class="nav-item col-12">
<a href="https://themeselection.com/category/collections/" target="_blank">
Collections
</a>
</li>
</ul>
</div>
<hr class="d-md-none footer-hr">
<div class="col-md-6 col-12">
<h6 class="subscription-title">
Subscribe to our newsletter
</h6>
<small class="subscription-info">
A weekly latest Articles, UI Kits, Free & Premium Resources
</small>
<div class="subscription-form mt-3 mb-md-4 mb-0">
<!-- <input type="email"> -->
<link href="https://themeselection.com/wp-content/plugins/mailster/assets/css/form-default-style.min.css?ver=2.4.16" id="mailster-form-default-css" media="all" rel="stylesheet">
<form action="https://themeselection.com/mailster/subscribe" class="mailster-form mailster-form-submit extern mailster-form-5 mb-md-3 mb-2" method="post" novalidate="">
<input name="_action" type="hidden" value="subscribe">
<input name="_referer" type="hidden" value="extern">
<input name="_nonce" type="hidden" value="342601d290">
<input name="formid" type="hidden" value="5">
<div class="mailster-form-fields mb-sm-0 mb-2">
<div class="mailster-wrapper mailster-email-wrapper">
<input aria-label="Email" aria-required="true" class="input mailster-email mailster-required form-control" id="mailster-email-5" name="email" placeholder="Email *" spellcheck="false" type="email" value="">
</div>
<div class="mailster-wrapper mailster-submit-wrapper form-submit">
<input aria-label="Subscribe" class="btn btn-primary btn-sm submit-button button" name="submit" type="submit" value="Subscribe">
</div>
</div>
</form>
</div>
<!-- Social share Icons -->
<ul class="navbar-nav flex-row flex-wrap ms-sm-auto cheatsheet-social">
<li class="col-12 col-sm-auto">
<span class="social-title me-2">
Follow us:
</span>
</li>
<li class="nav-item col-6 col-sm-auto">
<a class="nav-link p-2" href="https://github.com/themeselection" target="_blank">
<svg class="d-inline-block align-text-top" height="20" role="img" viewBox="0 0 512 499.36" width="20" xmlns="http://www.w3.org/2000/svg">
<title>
GitHub
</title>
<path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd">
</path>
</svg>
<small class="d-sm-none ms-2">
GitHub
</small>
</a>
</li>
<li class="nav-item col-6 col-sm-auto">
<a class="nav-link p-2" href="https://twitter.com/Theme_Selection" target="_blank">
<svg class="d-inline-block align-text-top" height="20" role="img" viewBox="0 0 512 416.32" width="20" xmlns="http://www.w3.org/2000/svg">
<title>
Twitter
</title>
<path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor">
</path>
</svg>
<small class="d-sm-none ms-2">
Twitter
</small>
</a>
</li>
<li class="nav-item col-6 col-sm-auto">
<a class="nav-link p-2" href="https://www.facebook.com/ThemeSelections/" target="_blank">
<svg class="d-inline-block align-text-top bi bi-facebook" fill="currentColor" height="20" viewBox="0 0 16 16" width="20" xmlns="http://www.w3.org/2000/svg">
<title>
Facebook
</title>
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z">
</path>
</svg>
<small class="d-sm-none ms-2">
Facebook
</small>
</a>
</li>
<li class="nav-item col-6 col-sm-auto">
<a class="nav-link p-2" href="https://dribbble.com/themeselection/" target="_blank">
<svg class="d-inline-block align-text-top" height="20px" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>
Dribbble
</title>
<path d="M10,20 C4.485625,20 0,15.513125 0,9.999375 C0,4.48625 4.485625,0 10,0 C15.51375,0 20,4.48625 20,9.999375 C20,15.513125 15.51375,20 10,20 Z M18.433125,11.36875 C18.14125,11.275625 15.79,10.575 13.1125,11.00375 C14.23,14.0725 14.685,16.573125 14.77125,17.09375 C16.688125,15.798125 18.0525,13.745625 18.433125,11.36875 Z M13.336875,17.875625 C13.209375,17.12625 12.713125,14.514375 11.514375,11.39875 L11.4575,11.418125 C6.640625,13.09625 4.910625,16.4375 4.756875,16.751875 C6.205,17.88125 8.025,18.555 10,18.555 C11.1825,18.555 12.310625,18.313125 13.336875,17.875625 Z M3.654375,15.724375 C3.848125,15.393125 6.191875,11.51125 10.5975,10.0875 C10.708125,10.05 10.820625,10.0175 10.933125,9.985625 C10.71875,9.5 10.485625,9.014375 10.240625,8.53625 C5.975625,9.8125 1.83625,9.76 1.463125,9.751875 C1.460625,9.839375 1.458125,9.925 1.458125,10.013125 C1.458125,12.20625 2.289375,14.20875 3.654375,15.724375 Z M1.63875,8.263125 C2.02,8.26875 5.539375,8.284375 9.535,7.223125 C8.12,4.706875 6.59375,2.591875 6.368125,2.28375 C3.97875,3.41 2.1925,5.6125 1.63875,8.263125 Z M7.998125,1.708125 C8.234375,2.02375 9.785625,4.138125 11.185,6.708125 C14.223125,5.570625 15.50875,3.841875 15.6625,3.623125 C14.15375,2.285625 12.170625,1.47125 10,1.47125 C9.31,1.47125 8.64,1.553125 7.998125,1.708125 Z M16.61125,4.61125 C16.43125,4.855 15,6.689375 11.841875,7.979375 C12.040625,8.38625 12.230625,8.799375 12.40875,9.21625 C12.47125,9.363125 12.5325,9.510625 12.5925,9.6575 C15.434375,9.3 18.258125,9.873125 18.540625,9.93125 C18.52125,7.915625 17.800625,6.064375 16.61125,4.61125 Z">
</path>
</svg>
<small class="d-sm-none ms-2">
Dribbble
</small>
</a>
</li>
</ul>
<!--/ Social share Icons -->
</div>
</div>
</div>
<div class="footer">
<div class="container footer-container">
<a class="footer-brand" href="https://themeselection.com/" target="_blank">
<img alt="ThemeSelection" height="38" src="assets/images/logos/brand-logo-small.png">
</a>
<span class="d-none d-md-block">
©
<script>
document.write(new Date().getFullYear());
</script>
, Made with Love by
<a class="text-dark fw-bold" href="https://themeselection.com/" target="_blank">
ThemeSelection
</a>
</span>
</div>
</div>
</footer>
<!--/ CheatSheet Footer -->
<!-- Scroll to top -->
<button class="btn btn-primary scroll-top" type="button">
<svg class="bi bi-arrow-up" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z" fill-rule="evenodd">
</path>
</svg>
</button>
<!--/ Scroll to top -->
<script src="assets/vendors/js/jquery/jquery.min.js">
</script>
<script src="assets/vendors/js/bootstrap/bootstrap.bundle.min.js">
</script>
<script src="assets/vendors/js/ace/ace.js">
</script>
<script src="assets/js/cheatsheet.js">
</script>
<script src="assets/js/shuffle.js">
</script>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-58d9fa1af7a79649">
</script>
<!-- END: App JS-->
</body>
<!-- CheatSheet Footer -->
</html>