<div class="bd-example tooltip-demo">
<a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Hover or focus to see default tooltip">
- <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
+ <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true">
<rect width="100%" height="100%" fill="#563d7c"/>
<circle cx="50" cy="50" r="30" fill="#007bff"/>
</svg>
<div class="d-flex gap-2 justify-content-center py-5">
<span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill">
- <span class="px-1">Primary</span>
- <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+ <span class="px-1">Primary 1</span>
+ <a href="#" aria-label="Delete primary 1"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill">
- <span class="px-1">Primary</span>
- <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+ <span class="px-1">Primary 2</span>
+ <a href="#" aria-label="Delete primary 2"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
- <span class="px-1">Primary</span>
- <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+ <span class="px-1">Primary 3</span>
+ <a href="#" aria-label="Delete primary 3"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
</div>
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Primary
<span class="vr mx-2"></span>
- <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+ <a href="#" aria-label="Delete primary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Secondary
<span class="vr mx-2"></span>
- <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+ <a href="#" aria-label="Delete secondary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Success
<span class="vr mx-2"></span>
- <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+ <a href="#" aria-label="Delete success"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Danger
<span class="vr mx-2"></span>
- <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+ <a href="#" aria-label="Delete danger"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Warning
<span class="vr mx-2"></span>
- <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+ <a href="#" aria-label="Delete warning"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Info
<span class="vr mx-2"></span>
- <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+ <a href="#" aria-label="Delete info"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Light
<span class="vr mx-2"></span>
- <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+ <a href="#" aria-label="Delete light"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Dark
<span class="vr mx-2"></span>
- <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+ <a href="#" aria-label="Delete dark"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
</div>
<p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
أكمل القراءة
- <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="col-auto d-none d-lg-block">
<p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
أكمل القراءة
- <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="col-auto d-none d-lg-block">
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading
- <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="col-auto d-none d-lg-block">
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading
- <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="col-auto d-none d-lg-block">
<ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
<li class="breadcrumb-item">
<a class="link-body-emphasis" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
<span class="visually-hidden">Home</span>
</a>
</li>
<ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
<li class="breadcrumb-item">
<a class="link-body-emphasis" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
<span class="visually-hidden">Home</span>
</a>
</li>
<ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
<li class="breadcrumb-item">
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
Home
</a>
</li>
<div class="d-flex gap-2 justify-content-center pt-5 pb-4">
<button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
- <svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span>
</button>
<button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
- <svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span>
</button>
</div>
<div class="d-flex gap-2 justify-content-center pb-5">
<button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
- <svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span>
</button>
<button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
- <svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span>
</button>
</div>
<ul class="navbar-nav flex-row d-md-none">
<li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث">
- <svg class="bi"><use xlink:href="#search"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
</button>
</li>
<li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
- <svg class="bi"><use xlink:href="#list"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
</button>
</li>
</ul>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
- <svg class="bi"><use xlink:href="#house-fill"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
لوحة القيادة
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#file-earmark"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
الطلبات
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#cart"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
المنتجات
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#people"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
الزبائن
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#graph-up"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
التقارير
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#puzzle"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
التكاملات
</a>
</li>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>التقارير المحفوظة</span>
<a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
- <svg class="bi"><use xlink:href="#plus-circle"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
</a>
</h6>
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
الشهر الحالي
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
الربع الأخير
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
التفاعل الإجتماعي
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
مبيعات نهاية العام
</a>
</li>
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
إعدادات
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#door-closed"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
خروج
</a>
</li>
<button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
- <svg class="bi"><use xlink:href="#calendar3"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
هذا الأسبوع
</button>
</div>
<ul class="navbar-nav flex-row d-md-none">
<li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search">
- <svg class="bi"><use xlink:href="#search"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
</button>
</li>
<li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="bi"><use xlink:href="#list"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
</button>
</li>
</ul>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
- <svg class="bi"><use xlink:href="#house-fill"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#file-earmark"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#cart"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#people"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#graph-up"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#puzzle"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
Integrations
</a>
</li>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report">
- <svg class="bi"><use xlink:href="#plus-circle"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
</a>
</h6>
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Last quarter
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Social engagement
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Year-end sale
</a>
</li>
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
Settings
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi"><use xlink:href="#door-closed"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
Sign out
</a>
</li>
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
- <svg class="bi"><use xlink:href="#calendar3"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
This week
</button>
</div>
<ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light">
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
Documents
</a>
</li>
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
Photos
</a>
</li>
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
Movies
</a>
</li>
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
Music
</a>
</li>
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
Games
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
Trash
</a>
</li>
<ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark">
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
Documents
</a>
</li>
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
Photos
</a>
</li>
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
Movies
</a>
</li>
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
Music
</a>
</li>
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
Games
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
- <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
Trash
</a>
</li>
<div class="cal">
<div class="cal-month">
<button class="btn cal-btn" type="button" aria-label="previous month">
- <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
</button>
<strong class="cal-month-name">June</strong>
<select class="form-select cal-month-name d-none">
<div class="cal">
<div class="cal-month">
<button class="btn cal-btn" type="button" aria-label="previous month">
- <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
</button>
<strong class="cal-month-name">June</strong>
<select class="form-select cal-month-name d-none">
<ul class="list-unstyled d-flex flex-column gap-2">
<li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
- <svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
<div>
<strong class="d-block">Main product</strong>
<small>Take a tour through the product</small>
</li>
<li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
- <svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
<div>
<strong class="d-block">Another product</strong>
<small>Explore this other product we offer</small>
</li>
<li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
- <svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
<div>
<strong class="d-block">Support</strong>
<small>Get help from our support crew</small>
<ul class="list-unstyled d-flex flex-column gap-2">
<li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
- <svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
<div>
<strong class="d-block">Main product</strong>
<small>Take a tour through the product</small>
</li>
<li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
- <svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
<div>
<strong class="d-block">Another product</strong>
<small>Explore this other product we offer</small>
</li>
<li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
- <svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
<div>
<strong class="d-block">Support</strong>
<small>Get help from our support crew</small>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
- <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
+ <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#collection"/></svg>
</div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link">
Call to action
- <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
- <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
+ <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
</div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link">
Call to action
- <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
- <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
+ <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
</div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link">
Call to action
- <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
</div>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="col d-flex align-items-start">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
- <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
+ <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
</div>
<div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
</div>
<div class="col d-flex align-items-start">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
- <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
+ <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
</div>
<div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
</div>
<div class="col d-flex align-items-start">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
- <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
+ <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#tools"/></svg>
</div>
<div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
</li>
<li class="d-flex align-items-center me-3">
- <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
+ <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
<small>Earth</small>
</li>
<li class="d-flex align-items-center">
- <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
+ <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
<small>3d</small>
</li>
</ul>
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
</li>
<li class="d-flex align-items-center me-3">
- <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
+ <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
<small>Pakistan</small>
</li>
<li class="d-flex align-items-center">
- <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
+ <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
<small>4d</small>
</li>
</ul>
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
</li>
<li class="d-flex align-items-center me-3">
- <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
+ <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
<small>California</small>
</li>
<li class="d-flex align-items-center">
- <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
+ <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
<small>5d</small>
</li>
</ul>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#home"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#geo-fill"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#tools"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
<div class="row row-cols-1 row-cols-sm-2 g-4">
<div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
- <svg class="bi" width="1em" height="1em">
+ <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#collection" />
</svg>
</div>
<div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
- <svg class="bi" width="1em" height="1em">
+ <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#gear-fill" />
</svg>
</div>
<div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
- <svg class="bi" width="1em" height="1em">
+ <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#speedometer" />
</svg>
</div>
<div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
- <svg class="bi" width="1em" height="1em">
+ <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#table" />
</svg>
</div>
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-body-secondary">© {{< year >}} Company, Inc</p>
- <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
- <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+ <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
+ <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a>
<ul class="nav col-md-4 justify-content-end">
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
- <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
- <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
+ <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1" aria-label="Bootstrap">
+ <svg class="bi" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a>
<span class="mb-3 mb-md-0 text-body-secondary">© {{< year >}} Company, Inc</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
- <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
- <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
- <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
+ <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
+ <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#instagram"/></svg></a></li>
+ <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
</ul>
</footer>
</div>
<div class="container">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
<div class="col mb-3">
- <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
- <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+ <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
+ <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a>
<p class="text-body-secondary">© {{< year >}}</p>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>© {{< year >}} Company, Inc. All rights reserved.</p>
<ul class="list-unstyled d-flex">
- <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
- <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
- <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
+ <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
+ <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
+ <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#facebook"/></svg></a></li>
</ul>
</div>
</footer>
<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
- <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Simple header</span>
</a>
<header class="py-3 mb-3 border-bottom">
<div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
<div class="dropdown">
- <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
- <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+ <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Bootstrap menu">
+ <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a>
<ul class="dropdown-menu text-small shadow">
<li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
<header class="py-3 mb-4 border-bottom">
<div class="container d-flex flex-wrap justify-content-center">
<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none">
- <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Double header</span>
</a>
<form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search">
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
<li>
<a href="#" class="nav-link text-secondary">
- <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg>
+ <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#home"/></svg>
Home
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
- <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg>
+ <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
- <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg>
+ <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#table"/></svg>
Orders
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
- <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg>
+ <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#grid"/></svg>
Products
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
- <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg>
+ <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
Customers
</a>
</li>
<div class="container my-5">
<div class="p-5 text-center bg-body-tertiary rounded-3">
- <svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<h1 class="text-body-emphasis">Jumbotron with icon</h1>
<p class="col-lg-8 mx-auto fs-5 text-muted">
This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
<div class="container my-5">
<div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5">
<button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button>
- <svg class="bi mt-5 mb-3" width="48" height="48"><use xlink:href="#check2-circle"/></svg>
+ <svg class="bi mt-5 mb-3" width="48" height="48" aria-hidden="true"><use xlink:href="#check2-circle"/></svg>
<h1 class="text-body-emphasis">Placeholder jumbotron</h1>
<p class="col-lg-6 mx-auto mb-4">
This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action.
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
- <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
+ <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">List group item heading</h6>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
- <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
+ <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Another title here</h6>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
- <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
+ <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<span class="pt-1 form-checked-content">
<strong>Finish sales report</strong>
<small class="d-block text-body-secondary">
- <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
+ <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
1:00–2:00pm
</small>
</span>
<span class="pt-1 form-checked-content">
<strong>Weekly All Hands</strong>
<small class="d-block text-body-secondary">
- <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
+ <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
2:00–2:30pm
</small>
</span>
<span class="pt-1 form-checked-content">
<strong>Out of office</strong>
<small class="d-block text-body-secondary">
- <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg>
+ <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Reminder"><use xlink:href="#alarm"/></svg>
Tomorrow
</small>
</span>
<span class="pt-1 form-checked-content">
<span contenteditable="true" class="w-100">Add new task...</span>
<small class="d-block text-body-secondary">
- <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg>
+ <svg class="bi me-1" width="1em" height="1em" aria-hidden="true"><use xlink:href="#list-check"/></svg>
Choose list...
</small>
</span>
<ul class="d-grid gap-4 my-5 list-unstyled small">
<li class="d-flex gap-4">
- <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#grid-fill"/></svg>
<div>
<h5 class="mb-0">Grid view</h5>
Not into lists? Try the new grid view.
</div>
</li>
<li class="d-flex gap-4">
- <svg class="bi text-warning flex-shrink-0" width="48" height="48"><use xlink:href="#bookmark-star"/></svg>
+ <svg class="bi text-warning flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#bookmark-star"/></svg>
<div>
<h5 class="mb-0">Bookmarks</h5>
Save items you love for easy access later.
</div>
</li>
<li class="d-flex gap-4">
- <svg class="bi text-primary flex-shrink-0" width="48" height="48"><use xlink:href="#film"/></svg>
+ <svg class="bi text-primary flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#film"/></svg>
<div>
<h5 class="mb-0">Video embeds</h5>
Share videos wherever you go.
<hr class="my-4">
<h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2>
<button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
- <svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg>
+ <svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#twitter"/></svg>
Sign up with Twitter
</button>
<button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="submit">
- <svg class="bi me-1" width="16" height="16"><use xlink:href="#facebook"/></svg>
+ <svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#facebook"/></svg>
Sign up with Facebook
</button>
<button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
- <svg class="bi me-1" width="16" height="16"><use xlink:href="#github"/></svg>
+ <svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#github"/></svg>
Sign up with GitHub
</button>
</form>
<tbody>
<tr>
<th scope="row" class="text-start">Public</th>
- <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
- <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
- <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Private</th>
<td></td>
- <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
- <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row" class="text-start">Permissions</th>
- <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
- <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
- <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Sharing</th>
<td></td>
- <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
- <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Unlimited members</th>
<td></td>
- <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
- <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Extra security</th>
<td></td>
<td></td>
- <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr>
</tbody>
</table>
<nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark">
<div class="container">
<a class="navbar-brand d-md-none" href="#">
- <svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
Aperture
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation">
</div>
<div class="offcanvas-body">
<ul class="navbar-nav flex-grow-1 justify-content-between">
- <li class="nav-item"><a class="nav-link" href="#">
- <svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg>
+ <li class="nav-item"><a class="nav-link" href="#" aria-label="Aperture">
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
</a></li>
<li class="nav-item"><a class="nav-link" href="#">Tour</a></li>
<li class="nav-item"><a class="nav-link" href="#">Product</a></li>
<li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li>
<li class="nav-item"><a class="nav-link" href="#">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
- <li class="nav-item"><a class="nav-link" href="#">
- <svg class="bi" width="24" height="24"><use xlink:href="#cart"/></svg>
+ <li class="nav-item"><a class="nav-link" href="#" aria-label="Cart">
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#cart"/></svg>
</a></li>
</ul>
</div>
<div class="d-flex gap-3 justify-content-center lead fw-normal">
<a class="icon-link" href="#">
Learn more
- <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a>
<a class="icon-link" href="#">
Buy
- <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
</div>
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
- <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
- <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#home"/></svg>
Home
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
- <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
- <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#table"/></svg>
Orders
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
- <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#grid"/></svg>
Products
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
- <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
Customers
</a>
</li>
<div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
- <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
- <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#home"/></svg>
Home
</a>
</li>
<li>
<a href="#" class="nav-link link-body-emphasis">
- <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link link-body-emphasis">
- <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#table"/></svg>
Orders
</a>
</li>
<li>
<a href="#" class="nav-link link-body-emphasis">
- <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#grid"/></svg>
Products
</a>
</li>
<li>
<a href="#" class="nav-link link-body-emphasis">
- <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
Customers
</a>
</li>
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
<a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
- <svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi pe-none" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="visually-hidden">Icon-only</span>
</a>
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
<div class="flex-shrink-0 p-3" style="width: 280px;">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
- <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">Collapsible</span>
</a>
<ul class="list-unstyled ps-0">
<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
- <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">List group</span>
</a>
<div class="list-group list-group-flush border-bottom scrollarea">
<div class="col-lg-8 mx-auto p-4 py-md-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
- <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Starter template</span>
</a>
</header>
</button>
<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
- Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
+ Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</div>
<button type="button" class="btn btn-primary position-relative">
<li>
<a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
Latest ({{ .Site.Params.docs_version }}.x)
- <svg class="bi"><use xlink:href="#check2"></use></svg>
+ <svg class="bi" aria-hidden="true"><use xlink:href="#check2"></use></svg>
</a>
</li>
<li>
-<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="evenodd" 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"/>
</svg>
data-bs-toggle="dropdown"
{{ if not $isExamples }}data-bs-display="static"{{ end }}
aria-label="Toggle theme (auto)">
- <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
+ <svg class="bi my-1 theme-icon-active" aria-hidden="true"><use href="#circle-half"></use></svg>
<span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
- <svg class="bi me-2 opacity-50"><use href="#sun-fill"></use></svg>
+ <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#sun-fill"></use></svg>
Light
- <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+ <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
- <svg class="bi me-2 opacity-50"><use href="#moon-stars-fill"></use></svg>
+ <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#moon-stars-fill"></use></svg>
Dark
- <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+ <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
- <svg class="bi me-2 opacity-50"><use href="#circle-half"></use></svg>
+ <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#circle-half"></use></svg>
Auto
- <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+ <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
</button>
</li>
</ul>
projects / thirdparty / bootstrap.git / commitdiff
