<a class="link-secondary" href="#">Subscribe</a>
</div>
<div class="col-4 text-center">
- <a class="blog-header-logo text-dark" href="#">Large</a>
+ <a class="blog-header-logo text-body-emphasis" href="#">Large</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="link-secondary" href="#" aria-label="Search">
-.dropdown-menu {
- margin: 4rem auto;
-}
-
.dropdown-item-danger {
color: var(--bs-red);
}
}
.btn-hover-light {
- background-color: var(--bs-white);
+ color: var(--bs-body-color);
+ background-color: var(--bs-body-bg);
}
.btn-hover-light:hover,
.btn-hover-light:focus {
- color: var(--bs-blue);
- background-color: var(--bs-light);
+ color: var(--bs-link-hover-color);
+ background-color: var(--bs-tertiary-bg);
}
.cal-month,
}
.cal-btn:not([disabled]) {
font-weight: 500;
+ color: var(--bs-emphasis-color);
}
.cal-btn:hover,
.cal-btn:focus {
- background-color: rgba(0, 0, 0, .05);
+ background-color: var(--bs-secondary-bg);
}
.cal-btn[disabled] {
border: 0;
opacity: .5;
}
-.form-control-dark {
- background-color: rgba(255, 255, 255, .05);
- border-color: rgba(255, 255, 255, .15);
-}
-
-
.w-220px {
width: 220px;
}
width: 340px;
}
-.w-600px {
- width: 600px;
+.opacity-10 {
+ opacity: .1;
}
</symbol>
</svg>
-<div class="d-flex gap-5 justify-content-center">
- <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px">
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+ <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px" data-bs-theme="light">
<li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
<li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
<li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
</ul>
- <ul class="dropdown-menu dropdown-menu-dark position-static d-grid gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px">
+ <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px" data-bs-theme="dark">
<li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
<li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
<li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
<div class="b-example-divider"></div>
-<div class="d-flex gap-5 justify-content-center">
- <div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+ <div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px" data-bs-theme="light">
<form class="p-2 mb-2 bg-body-tertiary border-bottom">
<input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
</form>
</ul>
</div>
- <div class="dropdown-menu dropdown-menu-dark d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
+ <div class="dropdown-menu d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px" data-bs-theme="dark">
<form class="p-2 mb-2 bg-dark border-bottom border-dark">
- <input type="search" class="form-control form-control-dark" autocomplete="false" placeholder="Type to filter...">
+ <input type="search" class="form-control bg-dark" autocomplete="false" placeholder="Type to filter...">
</form>
<ul class="list-unstyled mb-0">
<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
<div class="b-example-divider"></div>
-<div class="d-flex gap-5 justify-content-center">
- <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px">
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+ <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>
</a>
</li>
</ul>
- <ul class="dropdown-menu dropdown-menu-dark d-block position-static mx-0 border-0 shadow w-220px">
+ <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>
<div class="b-example-divider"></div>
-<div class="dropdown-menu d-block position-static p-2 shadow rounded-3 w-340px">
- <div class="d-grid gap-1">
- <div class="cal">
- <div class="cal-month">
- <button class="btn cal-btn" type="button">
- <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
- </button>
- <strong class="cal-month-name">June</strong>
- <select class="form-select cal-month-name d-none">
- <option value="January">January</option>
- <option value="February">February</option>
- <option value="March">March</option>
- <option value="April">April</option>
- <option value="May">May</option>
- <option selected value="June">June</option>
- <option value="July">July</option>
- <option value="August">August</option>
- <option value="September">September</option>
- <option value="October">October</option>
- <option value="November">November</option>
- <option value="December">December</option>
- </select>
- <button class="btn cal-btn" type="button">
- <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
- </button>
- </div>
- <div class="cal-weekdays text-muted">
- <div class="cal-weekday">Sun</div>
- <div class="cal-weekday">Mon</div>
- <div class="cal-weekday">Tue</div>
- <div class="cal-weekday">Wed</div>
- <div class="cal-weekday">Thu</div>
- <div class="cal-weekday">Fri</div>
- <div class="cal-weekday">Sat</div>
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+ <div class="dropdown-menu d-block position-static p-2 mx-0 shadow rounded-3 w-340px" data-bs-theme="light">
+ <div class="d-grid gap-1">
+ <div class="cal">
+ <div class="cal-month">
+ <button class="btn cal-btn" type="button">
+ <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
+ </button>
+ <strong class="cal-month-name">June</strong>
+ <select class="form-select cal-month-name d-none">
+ <option value="January">January</option>
+ <option value="February">February</option>
+ <option value="March">March</option>
+ <option value="April">April</option>
+ <option value="May">May</option>
+ <option selected value="June">June</option>
+ <option value="July">July</option>
+ <option value="August">August</option>
+ <option value="September">September</option>
+ <option value="October">October</option>
+ <option value="November">November</option>
+ <option value="December">December</option>
+ </select>
+ <button class="btn cal-btn" type="button">
+ <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
+ </button>
+ </div>
+ <div class="cal-weekdays text-muted">
+ <div class="cal-weekday">Sun</div>
+ <div class="cal-weekday">Mon</div>
+ <div class="cal-weekday">Tue</div>
+ <div class="cal-weekday">Wed</div>
+ <div class="cal-weekday">Thu</div>
+ <div class="cal-weekday">Fri</div>
+ <div class="cal-weekday">Sat</div>
+ </div>
+ <div class="cal-days">
+ <button class="btn cal-btn" disabled type="button">30</button>
+ <button class="btn cal-btn" disabled type="button">31</button>
+
+ <button class="btn cal-btn" type="button">1</button>
+ <button class="btn cal-btn" type="button">2</button>
+ <button class="btn cal-btn" type="button">3</button>
+ <button class="btn cal-btn" type="button">4</button>
+ <button class="btn cal-btn" type="button">5</button>
+ <button class="btn cal-btn" type="button">6</button>
+ <button class="btn cal-btn" type="button">7</button>
+
+ <button class="btn cal-btn" type="button">8</button>
+ <button class="btn cal-btn" type="button">9</button>
+ <button class="btn cal-btn" type="button">10</button>
+ <button class="btn cal-btn" type="button">11</button>
+ <button class="btn cal-btn" type="button">12</button>
+ <button class="btn cal-btn" type="button">13</button>
+ <button class="btn cal-btn" type="button">14</button>
+
+ <button class="btn cal-btn" type="button">15</button>
+ <button class="btn cal-btn" type="button">16</button>
+ <button class="btn cal-btn" type="button">17</button>
+ <button class="btn cal-btn" type="button">18</button>
+ <button class="btn cal-btn" type="button">19</button>
+ <button class="btn cal-btn" type="button">20</button>
+ <button class="btn cal-btn" type="button">21</button>
+
+ <button class="btn cal-btn" type="button">22</button>
+ <button class="btn cal-btn" type="button">23</button>
+ <button class="btn cal-btn" type="button">24</button>
+ <button class="btn cal-btn" type="button">25</button>
+ <button class="btn cal-btn" type="button">26</button>
+ <button class="btn cal-btn" type="button">27</button>
+ <button class="btn cal-btn" type="button">28</button>
+
+ <button class="btn cal-btn" type="button">29</button>
+ <button class="btn cal-btn" type="button">30</button>
+ <button class="btn cal-btn" type="button">31</button>
+ </div>
</div>
- <div class="cal-days">
- <button class="btn cal-btn" disabled type="button">30</button>
- <button class="btn cal-btn" disabled type="button">31</button>
+ </div>
+ </div>
- <button class="btn cal-btn" type="button">1</button>
- <button class="btn cal-btn" type="button">2</button>
- <button class="btn cal-btn" type="button">3</button>
- <button class="btn cal-btn" type="button">4</button>
- <button class="btn cal-btn" type="button">5</button>
- <button class="btn cal-btn" type="button">6</button>
- <button class="btn cal-btn" type="button">7</button>
+ <div class="dropdown-menu d-block position-static p-2 mx-0 shadow rounded-3 w-340px" data-bs-theme="dark">
+ <div class="d-grid gap-1">
+ <div class="cal">
+ <div class="cal-month">
+ <button class="btn cal-btn" type="button">
+ <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
+ </button>
+ <strong class="cal-month-name">June</strong>
+ <select class="form-select cal-month-name d-none">
+ <option value="January">January</option>
+ <option value="February">February</option>
+ <option value="March">March</option>
+ <option value="April">April</option>
+ <option value="May">May</option>
+ <option selected value="June">June</option>
+ <option value="July">July</option>
+ <option value="August">August</option>
+ <option value="September">September</option>
+ <option value="October">October</option>
+ <option value="November">November</option>
+ <option value="December">December</option>
+ </select>
+ <button class="btn cal-btn" type="button">
+ <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
+ </button>
+ </div>
+ <div class="cal-weekdays text-muted">
+ <div class="cal-weekday">Sun</div>
+ <div class="cal-weekday">Mon</div>
+ <div class="cal-weekday">Tue</div>
+ <div class="cal-weekday">Wed</div>
+ <div class="cal-weekday">Thu</div>
+ <div class="cal-weekday">Fri</div>
+ <div class="cal-weekday">Sat</div>
+ </div>
+ <div class="cal-days">
+ <button class="btn cal-btn" disabled type="button">30</button>
+ <button class="btn cal-btn" disabled type="button">31</button>
- <button class="btn cal-btn" type="button">8</button>
- <button class="btn cal-btn" type="button">9</button>
- <button class="btn cal-btn" type="button">10</button>
- <button class="btn cal-btn" type="button">11</button>
- <button class="btn cal-btn" type="button">12</button>
- <button class="btn cal-btn" type="button">13</button>
- <button class="btn cal-btn" type="button">14</button>
+ <button class="btn cal-btn" type="button">1</button>
+ <button class="btn cal-btn" type="button">2</button>
+ <button class="btn cal-btn" type="button">3</button>
+ <button class="btn cal-btn" type="button">4</button>
+ <button class="btn cal-btn" type="button">5</button>
+ <button class="btn cal-btn" type="button">6</button>
+ <button class="btn cal-btn" type="button">7</button>
- <button class="btn cal-btn" type="button">15</button>
- <button class="btn cal-btn" type="button">16</button>
- <button class="btn cal-btn" type="button">17</button>
- <button class="btn cal-btn" type="button">18</button>
- <button class="btn cal-btn" type="button">19</button>
- <button class="btn cal-btn" type="button">20</button>
- <button class="btn cal-btn" type="button">21</button>
+ <button class="btn cal-btn" type="button">8</button>
+ <button class="btn cal-btn" type="button">9</button>
+ <button class="btn cal-btn" type="button">10</button>
+ <button class="btn cal-btn" type="button">11</button>
+ <button class="btn cal-btn" type="button">12</button>
+ <button class="btn cal-btn" type="button">13</button>
+ <button class="btn cal-btn" type="button">14</button>
- <button class="btn cal-btn" type="button">22</button>
- <button class="btn cal-btn" type="button">23</button>
- <button class="btn cal-btn" type="button">24</button>
- <button class="btn cal-btn" type="button">25</button>
- <button class="btn cal-btn" type="button">26</button>
- <button class="btn cal-btn" type="button">27</button>
- <button class="btn cal-btn" type="button">28</button>
+ <button class="btn cal-btn" type="button">15</button>
+ <button class="btn cal-btn" type="button">16</button>
+ <button class="btn cal-btn" type="button">17</button>
+ <button class="btn cal-btn" type="button">18</button>
+ <button class="btn cal-btn" type="button">19</button>
+ <button class="btn cal-btn" type="button">20</button>
+ <button class="btn cal-btn" type="button">21</button>
- <button class="btn cal-btn" type="button">29</button>
- <button class="btn cal-btn" type="button">30</button>
- <button class="btn cal-btn" type="button">31</button>
+ <button class="btn cal-btn" type="button">22</button>
+ <button class="btn cal-btn" type="button">23</button>
+ <button class="btn cal-btn" type="button">24</button>
+ <button class="btn cal-btn" type="button">25</button>
+ <button class="btn cal-btn" type="button">26</button>
+ <button class="btn cal-btn" type="button">27</button>
+ <button class="btn cal-btn" type="button">28</button>
+
+ <button class="btn cal-btn" type="button">29</button>
+ <button class="btn cal-btn" type="button">30</button>
+ <button class="btn cal-btn" type="button">31</button>
+ </div>
</div>
</div>
</div>
<div class="b-example-divider"></div>
-<div class="dropdown-menu position-static d-flex align-items-stretch p-3 rounded-3 shadow-lg w-600px">
- <nav class="d-grid gap-2 col-8">
- <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
- <svg class="bi" width="32" height="32"><use xlink:href="#image-fill"/></svg>
- <div>
- <strong class="d-block">Features</strong>
- <small>Take a tour through the product</small>
- </div>
- </a>
- <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
- <svg class="bi" width="32" height="32"><use xlink:href="#question-circle"/></svg>
- <div>
- <strong class="d-block">Support</strong>
- <small>Get help from our support crew</small>
- </div>
- </a>
- </nav>
- <div class="col-4">
- ...
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+ <div class="dropdown-menu position-static d-flex flex-column flex-lg-row align-items-stretch justify-content-start p-3 rounded-3 shadow-lg" data-bs-theme="light">
+ <nav class="col-lg-8">
+ <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>
+ <div>
+ <strong class="d-block">Main product</strong>
+ <small>Take a tour through the product</small>
+ </div>
+ </a>
+ </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>
+ <div>
+ <strong class="d-block">Another product</strong>
+ <small>Explore this other product we offer</small>
+ </div>
+ </a>
+ </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>
+ <div>
+ <strong class="d-block">Support</strong>
+ <small>Get help from our support crew</small>
+ </div>
+ </a>
+ </li>
+ </ul>
+ </nav>
+ <div class="d-none d-lg-block vr mx-4 opacity-10"> </div>
+ <hr class="d-lg-none">
+ <div class="col-lg-auto pe-3">
+ <nav>
+ <ul class="d-flex flex-column gap-2 list-unstyled small">
+ <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Documentation</a></li>
+ <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Use cases</a></li>
+ <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">API status</a></li>
+ <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Partners</a></li>
+ <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Resources</a></li>
+ </ul>
+ </nav>
+ </div>
+ </div>
+
+ <div class="dropdown-menu position-static d-flex flex-column flex-lg-row align-items-stretch justify-content-start p-3 rounded-3 shadow-lg" data-bs-theme="dark">
+ <nav class="col-lg-8">
+ <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>
+ <div>
+ <strong class="d-block">Main product</strong>
+ <small>Take a tour through the product</small>
+ </div>
+ </a>
+ </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>
+ <div>
+ <strong class="d-block">Another product</strong>
+ <small>Explore this other product we offer</small>
+ </div>
+ </a>
+ </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>
+ <div>
+ <strong class="d-block">Support</strong>
+ <small>Get help from our support crew</small>
+ </div>
+ </a>
+ </li>
+ </ul>
+ </nav>
+ <div class="d-none d-lg-block vr mx-4 opacity-10"> </div>
+ <hr class="d-lg-none">
+ <div class="col-lg-auto pe-3">
+ <nav>
+ <ul class="d-flex flex-column gap-2 list-unstyled small">
+ <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Documentation</a></li>
+ <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Use cases</a></li>
+ <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">API status</a></li>
+ <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Partners</a></li>
+ <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Resources</a></li>
+ </ul>
+ </nav>
+ </div>
</div>
</div>
<h2 class="pb-2 border-bottom">Hanging icons</h2>
<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-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
+ <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>
</div>
<div>
</div>
</div>
<div class="col d-flex align-items-start">
- <div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
+ <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>
</div>
<div>
</div>
</div>
<div class="col d-flex align-items-start">
- <div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
+ <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>
</div>
<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-muted">© {{< 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-dark text-decoration-none">
+ <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>
<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-dark text-decoration-none">
+ <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>
<p class="text-muted">© {{< year >}}</p>
<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-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
- <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
- <li class="ms-3"><a class="link-dark" 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="#"><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>
</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 text-dark text-decoration-none">
+ <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>
<span class="fs-4">Simple header</span>
</a>
<div class="container">
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
- <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
+ <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-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>
</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
- <li><a href="#" class="nav-link px-2 link-dark">Features</a></li>
- <li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li>
- <li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li>
- <li><a href="#" class="nav-link px-2 link-dark">About</a></li>
+ <li><a href="#" class="nav-link px-2">Features</a></li>
+ <li><a href="#" class="nav-link px-2">Pricing</a></li>
+ <li><a href="#" class="nav-link px-2">FAQs</a></li>
+ <li><a href="#" class="nav-link px-2">About</a></li>
</ul>
<div class="col-md-3 text-end">
<header class="p-3 mb-3 border-bottom">
<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-dark text-decoration-none">
+ <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>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li>
- <li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li>
- <li><a href="#" class="nav-link px-2 link-dark">Customers</a></li>
- <li><a href="#" class="nav-link px-2 link-dark">Products</a></li>
+ <li><a href="#" class="nav-link px-2 link-body-emphasis">Inventory</a></li>
+ <li><a href="#" class="nav-link px-2 link-body-emphasis">Customers</a></li>
+ <li><a href="#" class="nav-link px-2 link-body-emphasis">Products</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<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-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+ <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>
<ul class="dropdown-menu text-small shadow">
</nav>
<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 text-dark text-decoration-none">
+ <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>
<span class="fs-4">Double header</span>
</a>
<div class="px-4 py-5 my-5 text-center">
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
- <h1 class="display-5 fw-bold">Centered hero</h1>
+ <h1 class="display-5 fw-bold text-body-emphasis">Centered hero</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<div class="b-example-divider"></div>
<div class="px-4 pt-5 my-5 text-center border-bottom">
- <h1 class="display-4 fw-bold">Centered screenshot</h1>
+ <h1 class="display-4 fw-bold text-body-emphasis">Centered screenshot</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
<img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
</div>
<div class="col-lg-6">
- <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
+ <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Responsive left-aligned hero with image</h1>
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
<div class="row align-items-center g-lg-5 py-5">
<div class="col-lg-7 text-center text-lg-start">
- <h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1>
+ <h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">Vertically centered hero sign-up form</h1>
<p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
</div>
<div class="col-md-10 mx-auto col-lg-5">
<div class="container my-5">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
- <h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1>
+ <h1 class="display-4 fw-bold lh-1 text-body-emphasis">Border hero with cropped image and shadows</h1>
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button>
<div class="bg-dark text-secondary px-4 py-5 text-center">
<div class="py-5">
- <h1 class="display-5 fw-bold text-white">Dark mode hero</h1>
+ <h1 class="display-5 fw-bold text-white">Dark color hero</h1>
<div class="col-lg-6 mx-auto">
<p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
</symbol>
</svg>
-<div class="list-group w-auto">
- <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">
- <div class="d-flex gap-2 w-100 justify-content-between">
- <div>
- <h6 class="mb-0">List group item heading</h6>
- <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
+<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">
+ <div class="d-flex gap-2 w-100 justify-content-between">
+ <div>
+ <h6 class="mb-0">List group item heading</h6>
+ <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
+ </div>
+ <small class="opacity-50 text-nowrap">now</small>
</div>
- <small class="opacity-50 text-nowrap">now</small>
- </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">
- <div class="d-flex gap-2 w-100 justify-content-between">
- <div>
- <h6 class="mb-0">Another title here</h6>
- <p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p>
+ </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">
+ <div class="d-flex gap-2 w-100 justify-content-between">
+ <div>
+ <h6 class="mb-0">Another title here</h6>
+ <p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p>
+ </div>
+ <small class="opacity-50 text-nowrap">3d</small>
</div>
- <small class="opacity-50 text-nowrap">3d</small>
- </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">
- <div class="d-flex gap-2 w-100 justify-content-between">
- <div>
- <h6 class="mb-0">Third heading</h6>
- <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
+ </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">
+ <div class="d-flex gap-2 w-100 justify-content-between">
+ <div>
+ <h6 class="mb-0">Third heading</h6>
+ <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
+ </div>
+ <small class="opacity-50 text-nowrap">1w</small>
</div>
- <small class="opacity-50 text-nowrap">1w</small>
- </div>
- </a>
+ </a>
+ </div>
</div>
<div class="b-example-divider"></div>
-<div class="d-flex gap-5 justify-content-center">
- <div class="list-group mx-0 w-auto">
+<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">
<label class="list-group-item d-flex gap-2">
<input class="form-check-input flex-shrink-0" type="checkbox" value="" checked>
<span>
</label>
</div>
- <div class="list-group mx-0 w-auto">
+ <div class="list-group">
<label class="list-group-item d-flex gap-2">
<input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
<span>
<div class="b-example-divider"></div>
-<div class="list-group w-auto">
- <label class="list-group-item d-flex gap-3">
- <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;">
- <span class="pt-1 form-checked-content">
- <strong>Finish sales report</strong>
- <small class="d-block text-muted">
- <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
- 1:00–2:00pm
- </small>
- </span>
- </label>
- <label class="list-group-item d-flex gap-3">
- <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
- <span class="pt-1 form-checked-content">
- <strong>Weekly All Hands</strong>
- <small class="d-block text-muted">
- <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
- 2:00–2:30pm
- </small>
- </span>
- </label>
- <label class="list-group-item d-flex gap-3">
- <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
- <span class="pt-1 form-checked-content">
- <strong>Out of office</strong>
- <small class="d-block text-muted">
- <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg>
- Tomorrow
- </small>
- </span>
- </label>
- <label class="list-group-item d-flex gap-3 bg-body-tertiary">
- <input class="form-check-input form-check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
- <span class="pt-1 form-checked-content">
- <span contenteditable="true" class="w-100">Add new task...</span>
- <small class="d-block text-muted">
- <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg>
- Choose list...
- </small>
- </span>
- </label>
+<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">
+ <label class="list-group-item d-flex gap-3">
+ <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;">
+ <span class="pt-1 form-checked-content">
+ <strong>Finish sales report</strong>
+ <small class="d-block text-muted">
+ <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
+ 1:00–2:00pm
+ </small>
+ </span>
+ </label>
+ <label class="list-group-item d-flex gap-3">
+ <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
+ <span class="pt-1 form-checked-content">
+ <strong>Weekly All Hands</strong>
+ <small class="d-block text-muted">
+ <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
+ 2:00–2:30pm
+ </small>
+ </span>
+ </label>
+ <label class="list-group-item d-flex gap-3">
+ <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
+ <span class="pt-1 form-checked-content">
+ <strong>Out of office</strong>
+ <small class="d-block text-muted">
+ <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg>
+ Tomorrow
+ </small>
+ </span>
+ </label>
+ <label class="list-group-item d-flex gap-3 bg-body-tertiary">
+ <input class="form-check-input form-check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
+ <span class="pt-1 form-checked-content">
+ <span contenteditable="true" class="w-100">Add new task...</span>
+ <small class="d-block text-muted">
+ <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg>
+ Choose list...
+ </small>
+ </span>
+ </label>
+ </div>
</div>
<div class="b-example-divider"></div>
-<div class="list-group list-group-checkable d-grid gap-2 border-0 w-auto">
- <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
- <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios1">
- First radio
- <span class="d-block small opacity-50">With support text underneath to add more detail</span>
- </label>
-
- <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
- <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios2">
- Second radio
- <span class="d-block small opacity-50">Some other text goes here</span>
- </label>
-
- <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
- <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios3">
- Third radio
- <span class="d-block small opacity-50">And we end with another snippet of text</span>
- </label>
-
- <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
- <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios4">
- Fourth disabled radio
- <span class="d-block small opacity-50">This option is disabled</span>
- </label>
-</div>
-
-<div class="b-example-divider"></div>
+<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 list-group-checkable d-grid gap-2 border-0">
+ <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
+ <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios1">
+ First radio
+ <span class="d-block small opacity-50">With support text underneath to add more detail</span>
+ </label>
-<div class="list-group list-group-radio d-grid gap-2 border-0 w-auto">
- <div class="position-relative">
- <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid1" value="" checked>
- <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid1">
- <strong class="fw-semibold">First radio</strong>
- <span class="d-block small opacity-75">With support text underneath to add more detail</span>
+ <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
+ <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios2">
+ Second radio
+ <span class="d-block small opacity-50">Some other text goes here</span>
</label>
- </div>
- <div class="position-relative">
- <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid2" value="">
- <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid2">
- <strong class="fw-semibold">Second radio</strong>
- <span class="d-block small opacity-75">Some other text goes here</span>
+ <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
+ <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios3">
+ Third radio
+ <span class="d-block small opacity-50">And we end with another snippet of text</span>
</label>
- </div>
- <div class="position-relative">
- <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid3" value="">
- <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid3">
- <strong class="fw-semibold">Third radio</strong>
- <span class="d-block small opacity-75">And we end with another snippet of text</span>
+ <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
+ <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios4">
+ Fourth disabled radio
+ <span class="d-block small opacity-50">This option is disabled</span>
</label>
</div>
+</div>
- <div class="position-relative">
- <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid4" value="" disabled>
- <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid4">
- <strong class="fw-semibold">Fourth disabled radio</strong>
- <span class="d-block small opacity-75">This option is disabled</span>
- </label>
+<div class="b-example-divider"></div>
+
+<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 list-group-radio d-grid gap-2 border-0">
+ <div class="position-relative">
+ <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid1" value="" checked>
+ <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid1">
+ <strong class="fw-semibold">First radio</strong>
+ <span class="d-block small opacity-75">With support text underneath to add more detail</span>
+ </label>
+ </div>
+
+ <div class="position-relative">
+ <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid2" value="">
+ <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid2">
+ <strong class="fw-semibold">Second radio</strong>
+ <span class="d-block small opacity-75">Some other text goes here</span>
+ </label>
+ </div>
+
+ <div class="position-relative">
+ <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid3" value="">
+ <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid3">
+ <strong class="fw-semibold">Third radio</strong>
+ <span class="d-block small opacity-75">And we end with another snippet of text</span>
+ </label>
+ </div>
+
+ <div class="position-relative">
+ <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid4" value="" disabled>
+ <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid4">
+ <strong class="fw-semibold">Fourth disabled radio</strong>
+ <span class="d-block small opacity-75">This option is disabled</span>
+ </label>
+ </div>
</div>
</div>
.list-group {
+ width: 100%;
max-width: 460px;
- margin: 4rem auto;
+ margin-inline: 1.5rem;
}
.form-check-input:checked + .form-checked-content {
clip: rect(0, 0, 0, 0);
}
.list-group-item-check:hover + .list-group-item {
- background-color: var(--bs-light);
+ background-color: var(--bs-secondary-bg);
}
.list-group-item-check:checked + .list-group-item {
color: #fff;
- background-color: var(--bs-blue);
+ background-color: var(--bs-primary);
+ border-color: var(--bs-primary);
}
.list-group-item-check[disabled] + .list-group-item,
.list-group-item-check:disabled + .list-group-item {
}
.list-group-radio .list-group-item:hover,
.list-group-radio .list-group-item:focus {
- background-color: var(--bs-light);
+ background-color: var(--bs-secondary-bg);
}
.list-group-radio .form-check-input:checked + .list-group-item {
background-color: var(--bs-body);
- border-color: var(--bs-blue);
- box-shadow: 0 0 0 2px var(--bs-blue);
+ border-color: var(--bs-primary);
+ box-shadow: 0 0 0 2px var(--bs-primary);
}
.list-group-radio .form-check-input[disabled] + .list-group-item,
.list-group-radio .form-check-input:disabled + .list-group-item {
</symbol>
</svg>
-<div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet">
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSheet">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-4 shadow">
<div class="modal-header border-bottom-0">
<div class="modal-body py-0">
<p>This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.</p>
</div>
- <div class="modal-footer flex-column border-top-0">
- <button type="button" class="btn btn-lg btn-primary w-100 mx-0 mb-2">Save changes</button>
- <button type="button" class="btn btn-lg btn-light w-100 mx-0" data-bs-dismiss="modal">Close</button>
+ <div class="modal-footer flex-column align-items-stretch w-100 gap-2 pb-3 border-top-0">
+ <button type="button" class="btn btn-lg btn-primary">Save changes</button>
+ <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
<div class="b-example-divider"></div>
-<div class="modal modal-alert position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalChoice">
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalChoice">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-3 shadow">
<div class="modal-body p-4 text-center">
<p class="mb-0">You can always change your mind in your account settings.</p>
</div>
<div class="modal-footer flex-nowrap p-0">
- <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0 border-end"><strong>Yes, enable</strong></button>
- <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0" data-bs-dismiss="modal">No thanks</button>
+ <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0 border-end"><strong>Yes, enable</strong></button>
+ <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0" data-bs-dismiss="modal">No thanks</button>
</div>
</div>
</div>
<div class="b-example-divider"></div>
-<div class="modal modal-tour position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalTour">
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalTour">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-4 shadow">
<div class="modal-body p-5">
<h2 class="fw-bold mb-0">What's new</h2>
- <ul class="d-grid gap-4 my-5 list-unstyled">
+ <ul class="d-grid gap-4 my-5 list-unstyled small">
<li class="d-flex gap-4">
<svg class="bi text-muted flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg>
<div>
<div class="b-example-divider"></div>
-<div class="modal modal-signin position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSignin">
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSignin">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-4 shadow">
<div class="modal-header p-5 pb-4 border-bottom-0">
- <!-- <h1 class="modal-title fs-5" >Modal title</h1> -->
<h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
<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-dark rounded-3" type="submit">
+ <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>
Sign up with Twitter
</button>
padding-bottom: 2rem;
}
-.modal-alert .modal-dialog {
- width: 380px;
-}
-
-.modal-tour .modal-dialog {
- width: 380px;
-}
<div class="b-example-divider b-example-vr"></div>
<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-dark text-decoration-none">
+ <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>
<span class="fs-4">Sidebar</span>
</a>
</a>
</li>
<li>
- <a href="#" class="nav-link link-dark">
+ <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
Dashboard
</a>
</li>
<li>
- <a href="#" class="nav-link link-dark">
+ <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
Orders
</a>
</li>
<li>
- <a href="#" class="nav-link link-dark">
+ <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
Products
</a>
</li>
<li>
- <a href="#" class="nav-link link-dark">
+ <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>
Customers
</a>
</ul>
<hr>
<div class="dropdown">
- <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+ <a href="#" class="d-flex align-items-center link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>mdo</strong>
</a>
<div class="b-example-divider b-example-vr"></div>
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
- <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
+ <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>
<span class="visually-hidden">Icon-only</span>
</a>
</li>
</ul>
<div class="dropdown border-top">
- <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+ <a href="#" class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
</a>
<ul class="dropdown-menu text-small shadow">
<div class="b-example-divider b-example-vr"></div>
- <div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
- <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
+ <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>
<span class="fs-5 fw-semibold">Collapsible</span>
</a>
</button>
<div class="collapse show" id="home-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
- <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Overview</a></li>
- <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Updates</a></li>
- <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Reports</a></li>
+ <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a></li>
+ <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Updates</a></li>
+ <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Reports</a></li>
</ul>
</div>
</li>
</button>
<div class="collapse" id="dashboard-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
- <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Overview</a></li>
- <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Weekly</a></li>
- <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Monthly</a></li>
- <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Annually</a></li>
+ <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a></li>
+ <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Weekly</a></li>
+ <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Monthly</a></li>
+ <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Annually</a></li>
</ul>
</div>
</li>
</button>
<div class="collapse" id="orders-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
- <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">New</a></li>
- <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Processed</a></li>
- <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Shipped</a></li>
- <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Returned</a></li>
+ <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New</a></li>
+ <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Processed</a></li>
+ <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Shipped</a></li>
+ <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Returned</a></li>
</ul>
</div>
</li>
<div class="b-example-divider b-example-vr"></div>
<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-dark text-decoration-none border-bottom">
+ <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>
<span class="fs-5 fw-semibold">List group</span>
</a>
.btn-toggle {
padding: .25rem .5rem;
font-weight: 600;
- color: rgba(0, 0, 0, .65);
+ color: var(--bs-emphasis-color);
background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
- color: rgba(0, 0, 0, .85);
- background-color: #d2f4ea;
+ color: rgba(var(--bs-emphasis-color-rgb), .85);
+ background-color: var(--bs-tertiary-bg);
}
.btn-toggle::before {
transform-origin: .5em 50%;
}
+[data-bs-theme="dark"] .btn-toggle::before {
+ content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+}
+
.btn-toggle[aria-expanded="true"] {
- color: rgba(0, 0, 0, .85);
+ color: rgba(var(--bs-emphasis-color-rgb), .85);
}
.btn-toggle[aria-expanded="true"]::before {
transform: rotate(90deg);
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
- background-color: #d2f4ea;
+ background-color: var(--bs-tertiary-bg);
}
.scrollarea {
<p><a href="#" class="link-{{ .name }} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ .name | title }} link</a></p>
{{- end -}}
{{< /colored-links.inline >}}
+<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>
{{< /example >}}
{{< callout info >}}
}
.b-example-divider {
+ width: 100%;
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
projects / thirdparty / bootstrap.git / commitdiff
