<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 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>
+ <a href="#" aria-label="Delete primary 1"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use 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 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>
+ <a href="#" aria-label="Delete primary 2"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use 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 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>
+ <a href="#" aria-label="Delete primary 3"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use 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="#" aria-label="Delete primary"><svg class="bi" width="16" height="16" aria-hidden="true"><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 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="#" aria-label="Delete secondary"><svg class="bi" width="16" height="16" aria-hidden="true"><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 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="#" aria-label="Delete success"><svg class="bi" width="16" height="16" aria-hidden="true"><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 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="#" aria-label="Delete danger"><svg class="bi" width="16" height="16" aria-hidden="true"><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 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="#" aria-label="Delete warning"><svg class="bi" width="16" height="16" aria-hidden="true"><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 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="#" aria-label="Delete info"><svg class="bi" width="16" height="16" aria-hidden="true"><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 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="#" aria-label="Delete light"><svg class="bi" width="16" height="16" aria-hidden="true"><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 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="#" aria-label="Delete dark"><svg class="bi" width="16" height="16" aria-hidden="true"><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 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" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#house-door-fill"></use></svg>
Home
</a>
</li>
<div class="d-flex gap-2 justify-content-center py-5">
<button class="btn btn-primary d-inline-flex align-items-center" type="button">
Primary icon
- <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+ <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use href="#arrow-right-short"/></svg>
</button>
<button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button">
Secondary icon
- <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+ <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use href="#arrow-right-short"/></svg>
</button>
</div>
<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" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#search"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#list"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#cart"/></svg>
+ <svg class="bi" aria-hidden="true"><use href="#cart"/></svg>
المنتجات
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
+ <svg class="bi" aria-hidden="true"><use href="#people"/></svg>
الزبائن
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
- <svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#search"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#list"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#cart"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#people"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
+ <svg class="bi" aria-hidden="true"><use href="#calendar3"/></svg>
This week
</button>
</div>
<div class="dialog-body">
<ul class="list-unstyled mb-0">
<li class="d-flex gap-3 mb-3">
- <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"><use href="#grid-fill"/></svg>
<div>
<h6 class="mb-1 fw-bold">Grid view</h6>
<p class="mb-0 text-body-secondary">Not into lists? Try the new grid view.</p>
</div>
</li>
<li class="d-flex gap-3 mb-3">
- <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"><use href="#bookmark-star"/></svg>
<div>
<h6 class="mb-1 fw-bold">Bookmarks</h6>
<p class="mb-0 text-body-secondary">Save items you love for easy access later.</p>
</div>
</li>
<li class="d-flex gap-3">
- <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"><use href="#film"/></svg>
<div>
<h6 class="mb-1 fw-bold">Video embeds</h6>
<p class="mb-0 text-body-secondary">Share videos wherever you go.</p>
<hr class="my-4">
<h6 class="fw-bold mb-3">Or use a third-party</h6>
<button type="button" class="btn btn-outline theme-inverse w-100 py-2 mb-2">
- <svg class="bi" width="16" height="16"><use xlink:href="#google"/></svg>
+ <svg class="bi" width="16" height="16"><use href="#google"/></svg>
Sign up with Google
</button>
<button type="button" class="btn btn-outline theme-facebook w-100 py-2 mb-2">
- <svg class="bi" width="16" height="16" fill="currentColor"><use xlink:href="#facebook"/></svg>
+ <svg class="bi" width="16" height="16" fill="currentColor"><use href="#facebook"/></svg>
Sign up with Facebook
</button>
<button type="button" class="btn btn-outline theme-success w-100 py-2">
- <svg class="bi" width="16" height="16"><use xlink:href="#github"/></svg>
+ <svg class="bi" width="16" height="16"><use href="#github"/></svg>
Sign up with GitHub
</button>
</form>
<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" aria-hidden="true"><use xlink:href="#files"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#film"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#joystick"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#trash"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#files"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#film"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#joystick"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#trash"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-left-short"/></svg>
</button>
<strong class="cal-month-name">June</strong>
<select class="form-select cal-month-name d-none">
<option value="December">December</option>
</select>
<button class="btn cal-btn" type="button" aria-label="next month">
- <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-short"/></svg>
</button>
</div>
<div class="cal-weekdays text-body-secondary">
<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" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-left-short"/></svg>
</button>
<strong class="cal-month-name">June</strong>
<select class="form-select cal-month-name d-none">
<option value="December">December</option>
</select>
<button class="btn cal-btn" type="button" aria-label="next month">
- <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-short"/></svg>
</button>
</div>
<div class="cal-weekdays text-body-secondary">
<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" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#collection"/></svg>
+ <svg class="bi" width="1em" height="1em" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
+ <svg class="bi" width="1em" height="1em" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
+ <svg class="bi" width="1em" height="1em" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
+ <svg class="bi" width="1em" height="1em" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
+ <svg class="bi" width="1em" height="1em" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#tools"/></svg>
+ <svg class="bi" width="1em" height="1em" aria-hidden="true"><use 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" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
+ <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use href="#geo-fill"/></svg>
<small>Earth</small>
</li>
<li class="d-flex align-items-center">
- <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
+ <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use 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" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
+ <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use href="#geo-fill"/></svg>
<small>Pakistan</small>
</li>
<li class="d-flex align-items-center">
- <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
+ <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use 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" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
+ <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use href="#geo-fill"/></svg>
<small>California</small>
</li>
<li class="d-flex align-items-center">
- <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
+ <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use 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" aria-hidden="true"><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 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" aria-hidden="true"><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 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" aria-hidden="true"><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 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" aria-hidden="true"><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 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" aria-hidden="true"><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 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" aria-hidden="true"><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 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" aria-hidden="true"><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 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" aria-hidden="true"><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 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="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" aria-hidden="true">
- <use xlink:href="#collection" />
+ <use href="#collection" />
</svg>
</div>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<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" aria-hidden="true">
- <use xlink:href="#gear-fill" />
+ <use href="#gear-fill" />
</svg>
</div>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<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" aria-hidden="true">
- <use xlink:href="#speedometer" />
+ <use href="#speedometer" />
</svg>
</div>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<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" aria-hidden="true">
- <use xlink:href="#table" />
+ <use href="#table" />
</svg>
</div>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<p class="col-md-4 mb-0 text-body-secondary">© {new Date().getFullYear()} 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" aria-label="Bootstrap">
- <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
</a>
<ul class="nav col-md-4 justify-content-end">
<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" aria-label="Bootstrap">
- <svg class="bi" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi" width="30" height="24" aria-hidden="true"><use href="#bootstrap"/></svg>
</a>
<span class="mb-3 mb-md-0 text-body-secondary">© {new Date().getFullYear()} 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="#" 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>
+ <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use 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 href="#facebook"/></svg></a></li>
</ul>
</footer>
</div>
<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" aria-label="Bootstrap">
- <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
</a>
<p class="text-body-secondary">© {new Date().getFullYear()}</p>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>© {new Date().getFullYear()} Company, Inc. All rights reserved.</p>
<ul class="list-unstyled d-flex">
- <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>
+ <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use 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 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" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
<span class="fs-4">Simple header</span>
</a>
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
<div class="col-md-3 mb-2 mb-md-0">
<a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
- <svg class="bi" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
</a>
</div>
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
- <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none">
- <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<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" aria-label="Bootstrap menu">
- <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use 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">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
- <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
</a>
<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" aria-hidden="true"><use xlink:href="#home"/></svg>
+ <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
+ <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#table"/></svg>
+ <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#grid"/></svg>
+ <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
+ <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use 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" aria-hidden="true"><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 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="d-inline-flex gap-2 mb-5">
<button class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill" type="button">
Call to action
- <svg class="bi ms-2" width="24" height="24" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+ <svg class="bi ms-2" width="24" height="24" aria-hidden="true"><use href="#arrow-right-short"/></svg>
</button>
<button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
Secondary link
<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" aria-hidden="true"><use xlink:href="#check2-circle"/></svg>
+ <svg class="bi mt-5 mb-3" width="48" height="48" aria-hidden="true"><use 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.
<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" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
+ <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use 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" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
+ <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use 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" role="img" aria-label="Reminder"><use xlink:href="#alarm"/></svg>
+ <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Reminder"><use 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" aria-hidden="true"><use xlink:href="#list-check"/></svg>
+ <svg class="bi me-1" width="1em" height="1em" aria-hidden="true"><use href="#list-check"/></svg>
Choose list...
</small>
</span>
<tbody>
<tr>
<th scope="row" class="text-start">Public</th>
- <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>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Private</th>
<td></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 href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row" class="text-start">Permissions</th>
- <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>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Sharing</th>
<td></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 href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use 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" 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 href="#check"/></svg></td>
+ <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use 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" 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 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" aria-hidden="true"><use xlink:href="#aperture"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use 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 class="offcanvas-body">
<ul class="navbar-nav flex-grow-1 justify-content-between">
<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>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use 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="#">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<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>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use href="#chevron-right"/></svg>
</a>
<a class="icon-link" href="#">
Buy
- <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#home"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#table"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#grid"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#home"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#table"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#grid"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
+ <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi pe-none" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
<span class="visually-hidden">Icon-only</span>
</a>
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
<li class="nav-item">
<a href="#" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
- <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg>
+ <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><use href="#home"/></svg>
</a>
</li>
<li>
<a href="#" class="nav-link py-3 border-bottom rounded-0" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
- <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Dashboard"><use xlink:href="#speedometer2"/></svg>
+ <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Dashboard"><use href="#speedometer2"/></svg>
</a>
</li>
<li>
<a href="#" class="nav-link py-3 border-bottom rounded-0" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
- <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Orders"><use xlink:href="#table"/></svg>
+ <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Orders"><use href="#table"/></svg>
</a>
</li>
<li>
<a href="#" class="nav-link py-3 border-bottom rounded-0" title="Products" data-bs-toggle="tooltip" data-bs-placement="right">
- <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Products"><use xlink:href="#grid"/></svg>
+ <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Products"><use href="#grid"/></svg>
</a>
</li>
<li>
<a href="#" class="nav-link py-3 border-bottom rounded-0" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right">
- <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Customers"><use xlink:href="#people-circle"/></svg>
+ <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Customers"><use href="#people-circle"/></svg>
</a>
</li>
</ul>
<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" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use 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" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use 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" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
<span class="fs-4">Starter template</span>
</a>
</header>
<ul class="list-unstyled ps-0">
<li>
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/icons-font" rel="noopener" target="_blank">
- <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
Bootstrap npm starter
</a>
</li>
<li>
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/parcel" rel="noopener" target="_blank">
- <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
Bootstrap Parcel starter
</a>
</li>
<li>
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/vite" rel="noopener" target="_blank">
- <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
Bootstrap Vite starter
</a>
</li>
<li>
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/webpack" rel="noopener" target="_blank">
- <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
Bootstrap Webpack starter
</a>
</li>
<ul class="list-unstyled ps-0">
<li>
<a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/introduction')}>
- <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
Bootstrap quick start guide
</a>
</li>
<li>
<a class="icon-link mb-1" href={getVersionedDocsPath('/guides/webpack')}>
- <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
Bootstrap Webpack guide
</a>
</li>
<li>
<a class="icon-link mb-1" href={getVersionedDocsPath('/guides/parcel')}>
- <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
Bootstrap Parcel guide
</a>
</li>
<li>
<a class="icon-link mb-1" href={getVersionedDocsPath('/guides/vite')}>
- <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
Bootstrap Vite guide
</a>
</li>
<li>
<a class="icon-link mb-1" href={getVersionedDocsPath('/guides/contribute')}>
- <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+ <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
Contributing to Bootstrap
</a>
</li>
style={group.icon_color && `color: light-dark(var(--bs-${group.icon_color}-500), var(--bs-${group.icon_color}-400));`}
aria-hidden="true"
>
- <use xlink:href={`#${group.icon}`} />
+ <use href={`#${group.icon}`} />
</svg>
)}
{group.title}
aria-controls="bdNavbar"
aria-label="Toggle navigation"
>
- <svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
+ <svg class="bi" aria-hidden="true"><use href="#three-dots"></use></svg>
</button>
</div>
href={isHome ? '/' : `/docs/${getConfig().docs_version}/${versionsLink}`}
>
Latest ({getConfig().docs_version}.x)
- <svg class="bi" aria-hidden="true"><use xlink:href="#check2"></use></svg>
+ <svg class="bi" aria-hidden="true"><use href="#check2"></use></svg>
</a>
</li>
<li>
<section class="row g-md-5 pb-md-5 mb-5 align-items-center">
<div class="col-lg-8 mb-5">
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-pink-rgb);">
- <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces"></use></svg>
+ <svg class="bi fs-1" aria-hidden="true"><use href="#braces"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS variables</h2>
<p class="lead fw-normal">
<p class="d-flex flex-column lead fw-normal mb-0">
<a href={getVersionedDocsPath('customize/css-variables')} class="icon-link icon-link-hover fw-semibold mb-3">
Learn more about CSS variables
- <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+ <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
</a>
</p>
</div>
<section class="pb-md-5 mb-5">
<div class="col-lg-8 mb-5">
<div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
- <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
+ <svg class="bi fs-1" aria-hidden="true"><use href="#menu-button-wide-fill"></use></svg>
</div>
- <svg class="bi me-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#plus"></use></svg>
+ <svg class="bi me-2 fs-2 text-body-secondary" aria-hidden="true"><use href="#plus"></use></svg>
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
- <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
+ <svg class="bi fs-1" aria-hidden="true"><use href="#braces-asterisk"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility API</h2>
<p class="lead fw-normal">
<p class="d-flex mb-md-0">
<a href={getVersionedDocsPath('examples/#snippets')} class="icon-link icon-link-hover fw-semibold">
Explore customized components
- <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+ <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
</a>
</p>
</div>
<p class="d-flex mb-md-0">
<a href={getVersionedDocsPath('utilities/api/')} class="icon-link icon-link-hover fw-semibold mb-3">
Explore the utility API
- <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+ <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
</a>
</p>
</div>
<section class="col-lg-7 mb-5">
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-primary-rgb);">
- <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
+ <svg class="bi fs-1" aria-hidden="true"><use href="#palette2"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with Sass</h2>
<p class="lead fw-normal">
<p class="d-flex lead fw-normal">
<a href={getVersionedDocsPath('customize/overview/')} class="icon-link icon-link-hover fw-semibold">
Learn more about customizing
- <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+ <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
</a>
</p>
</section>
<div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
- <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#code"></use></svg>
+ <svg class="bi fs-1" aria-hidden="true"><use href="#code"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you want</h2>
<p class="lead fw-normal">
<p class="d-flex justify-content-md-center lead fw-normal">
<a href={getVersionedDocsPath('getting-started/download/')} class="icon-link icon-link-hover fw-semibold ps-md-4">
Read installation docs
- <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+ <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
</a>
</p>
</div>
<section class="row g-3 g-md-5 mb-5 pb-5 justify-content-center">
<div class="col-lg-6 py-lg-4 pe-lg-5">
- <svg class="bi mb-2 fs-2 fg-3" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
+ <svg class="bi mb-2 fs-2 fg-3" aria-hidden="true"><use href="#box-seam"></use></svg>
<h3 class="fw-semibold">Install via package manager</h3>
<p class="pe-lg-5">
Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed
</p>
</div>
<div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start">
- <svg class="bi mb-2 fs-2 fg-3" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
+ <svg class="bi mb-2 fs-2 fg-3" aria-hidden="true"><use href="#globe2"></use></svg>
<h3 class="fw-semibold">Include via CDN</h3>
<p class="pe-lg-5">
When you only need to include Bootstrap’s compiled CSS or JS, you can use <a
<p class="d-flex lead fw-normal mb-md-0">
<a href={getConfig().icons} class="icon-link icon-link-hover fw-semibold">
Get Bootstrap Icons
- <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+ <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
</a>
</p>
</div>
<span class="d-sm-inline-flex align-items-center gap-1 py-2 px-3 me-2 mb-2 mb-lg-0 rounded-5 masthead-notice">
Get Security Updates for Bootstrap 3 & 4
<svg class="bi" style="width: 20px; height: 20px; margin-block: -2px;" aria-hidden="true"
- ><use xlink:href="#arrow-right-short"></use></svg
+ ><use href="#arrow-right-short"></use></svg
>
</span>
</a>
href={getVersionedDocsPath('getting-started/install')}
class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold"
>
- <svg class="bi me-2" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
+ <svg class="bi me-2" aria-hidden="true"><use href="#book-half"></use></svg>
Read the docs
</a>
</div>
<section class="pb-md-5 mb-5">
<div class="col-lg-8 mb-5">
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-warning-rgb);">
- <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#plugin"></use></svg>
+ <svg class="bi fs-1" aria-hidden="true"><use href="#plugin"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without jQuery</h2>
<p class="lead fw-normal">
<p class="d-flex lead fw-normal mb-md-0">
<a href={getVersionedDocsPath('getting-started/javascript')} class="icon-link icon-link-hover fw-semibold">
Learn more about Bootstrap JavaScript
- <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+ <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
</a>
</p>
</div>
code={`<button type="button" class="btn btn-solid theme-primary" data-button-type="text">Button</button>
<button type="button" class="btn btn-solid theme-primary" data-button-type="left-icon">
<svg class="bi me-1" width="16" height="16" aria-hidden="true">
- <use xlink:href="#arrow-left" />
+ <use href="#arrow-left" />
</svg>
Left icon
</button>
<button type="button" class="btn btn-solid theme-primary" data-button-type="right-icon">
Right icon
<svg class="bi ms-1" width="16" height="16" aria-hidden="true">
- <use xlink:href="#arrow-right" />
+ <use href="#arrow-right" />
</svg>
</button>
<button type="button" class="btn btn-solid btn-icon theme-primary" data-button-type="icon-only" aria-label="Icon only">
<svg class="bi" width="16" height="16" aria-hidden="true">
- <use xlink:href="#plus-lg" />
+ <use href="#plus-lg" />
</svg>
</button>`}
id="button-preview"
if (buttonType === 'text') {
html += 'Click me'
} else if (buttonType === 'left-icon') {
- html += '\n <svg class="bi me-1" width="16" height="16" aria-hidden="true">\n <use xlink:href="#arrow-left" />\n </svg>\n With left icon'
+ html += '\n <svg class="bi me-1" width="16" height="16" aria-hidden="true">\n <use href="#arrow-left" />\n </svg>\n With left icon'
} else if (buttonType === 'right-icon') {
- html += 'With right icon\n <svg class="bi ms-1" width="16" height="16" aria-hidden="true">\n <use xlink:href="#arrow-right" />\n </svg>'
+ html += 'With right icon\n <svg class="bi ms-1" width="16" height="16" aria-hidden="true">\n <use href="#arrow-right" />\n </svg>'
} else if (buttonType === 'icon-only') {
- html += '\n <svg class="bi" width="16" height="16" aria-hidden="true">\n <use xlink:href="#plus-lg" />\n </svg>'
+ html += '\n <svg class="bi" width="16" height="16" aria-hidden="true">\n <use href="#plus-lg" />\n </svg>'
}
html += '\n</button>'
{addStackblitzJs && (
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
<svg class="bi" aria-hidden="true">
- <use xlink:href="#lightning-charge-fill" />
+ <use href="#lightning-charge-fill" />
</svg>
</button>
)}
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true">
- <use xlink:href="#clipboard" />
+ <use href="#clipboard" />
</svg>
</button>
</div>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true">
- <use xlink:href="#clipboard" />
+ <use href="#clipboard" />
</svg>
</button>
</div>
</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
- <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
+ <svg class="bi" aria-hidden="true"><use href="#clipboard"></use></svg>
</button>
</div>
</div>
</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
- <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
+ <svg class="bi" aria-hidden="true"><use href="#clipboard"></use></svg>
</button>
</div>
</div>
</svg>
<div class="alert alert-primary d-flex align-items-center" role="alert">
- <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
+ <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use href="#info-fill"/></svg>
<div>
An example alert with an icon
</div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
- <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
+ <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use href="#check-circle-fill"/></svg>
<div>
An example success alert with an icon
</div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
- <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
+ <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use href="#exclamation-triangle-fill"/></svg>
<div>
An example warning alert with an icon
</div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
- <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
+ <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use href="#exclamation-triangle-fill"/></svg>
<div>
An example danger alert with an icon
</div>
>
On this page
<svg class="bi d-md-none ms-2" aria-hidden="true">
- <use xlink:href="#chevron-expand" />
+ <use href="#chevron-expand" />
</svg>
</button>
<div class="d-none d-md-block h6 my-2 ms-3" id="docs-tocs">On this page</div>
return (
<article class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
<svg class="bi fs-5 flex-shrink-0 mt-1" aria-hidden="true">
- <use xlink:href="#box-seam" />
+ <use href="#box-seam" />
</svg>
<div>
<h3 class="h5 mb-1">
aria-labelledby={`edit-${index} starter-${index}`}
>
<svg class="bi flex-shrink-0" aria-hidden="true">
- <use xlink:href="#lightning-charge-fill" />
+ <use href="#lightning-charge-fill" />
</svg>
<span id={`edit-${index}`}>Edit in StackBlitz</span>
</a>
href={getConfig().download.dist_examples}
class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold"
>
- <svg class="bi me-2" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
+ <svg class="bi me-2" aria-hidden="true"><use href="#box-seam"></use></svg>
Download examples
</a>
<a href={getConfig().download.source} class="btn btn-lg bd-btn-lg btn-outline-secondary"> Download source code</a>
projects / thirdparty / bootstrap.git / commitdiff
