diff options
Diffstat (limited to 'site/content')
24 files changed, 426 insertions, 329 deletions
diff --git a/site/content/docs/4.3/components/button-group.md b/site/content/docs/4.3/components/button-group.md index 3ec0db240..236cd146c 100644 --- a/site/content/docs/4.3/components/button-group.md +++ b/site/content/docs/4.3/components/button-group.md @@ -122,10 +122,10 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown </button> - <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> - <a class="dropdown-item" href="#">Dropdown link</a> - <a class="dropdown-item" href="#">Dropdown link</a> - </div> + <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1"> + <li><a class="dropdown-item" href="#">Dropdown link</a></li> + <li><a class="dropdown-item" href="#">Dropdown link</a></li> + </ul> </div> </div> {{< /example >}} @@ -154,10 +154,10 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown </button> - <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1"> - <a class="dropdown-item" href="#">Dropdown link</a> - <a class="dropdown-item" href="#">Dropdown link</a> - </div> + <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1"> + <li><a class="dropdown-item" href="#">Dropdown link</a></li> + <li><a class="dropdown-item" href="#">Dropdown link</a></li> + </ul> </div> <button type="button" class="btn btn-secondary">Button</button> <button type="button" class="btn btn-secondary">Button</button> @@ -165,28 +165,28 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown </button> - <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2"> - <a class="dropdown-item" href="#">Dropdown link</a> - <a class="dropdown-item" href="#">Dropdown link</a> - </div> + <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2"> + <li><a class="dropdown-item" href="#">Dropdown link</a></li> + <li><a class="dropdown-item" href="#">Dropdown link</a></li> + </ul> </div> <div class="btn-group" role="group"> <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown </button> - <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3"> - <a class="dropdown-item" href="#">Dropdown link</a> - <a class="dropdown-item" href="#">Dropdown link</a> - </div> + <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3"> + <li><a class="dropdown-item" href="#">Dropdown link</a></li> + <li><a class="dropdown-item" href="#">Dropdown link</a></li> + </ul> </div> <div class="btn-group" role="group"> <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown </button> - <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4"> - <a class="dropdown-item" href="#">Dropdown link</a> - <a class="dropdown-item" href="#">Dropdown link</a> - </div> + <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4"> + <li><a class="dropdown-item" href="#">Dropdown link</a></li> + <li><a class="dropdown-item" href="#">Dropdown link</a></li> + </ul> </div> </div> </div> diff --git a/site/content/docs/4.3/components/dropdowns.md b/site/content/docs/4.3/components/dropdowns.md index 54aad5ce4..6b3fe8fc9 100644 --- a/site/content/docs/4.3/components/dropdowns.md +++ b/site/content/docs/4.3/components/dropdowns.md @@ -690,11 +690,11 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar <div class="dropdown-menu"> <form class="px-4 py-3"> <div class="mb-3"> - <label for="exampleDropdownFormEmail1">Email address</label> + <label for="exampleDropdownFormEmail1" class="form-label">Email address</label> <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]"> </div> <div class="mb-3"> - <label for="exampleDropdownFormPassword1">Password</label> + <label for="exampleDropdownFormPassword1" class="form-label">Password</label> <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password"> </div> <div class="mb-3"> @@ -716,11 +716,11 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar {{< example >}} <form class="dropdown-menu p-4"> <div class="mb-3"> - <label for="exampleDropdownFormEmail2">Email address</label> + <label for="exampleDropdownFormEmail2" class="form-label">Email address</label> <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]"> </div> <div class="mb-3"> - <label for="exampleDropdownFormPassword2">Password</label> + <label for="exampleDropdownFormPassword2" class="form-label">Password</label> <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password"> </div> <div class="mb-3"> diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md index 6789ccc7c..c202aa70e 100644 --- a/site/content/docs/4.3/components/modal.md +++ b/site/content/docs/4.3/components/modal.md @@ -678,6 +678,168 @@ Our default modal without modifier class constitutes the "medium" size modal. </div> </div> +## Fullscreen Modal + +Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`. + +<table class="table"> + <thead> + <tr> + <th>Class</th> + <th>Availability</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>.modal-fullscreen</code></td> + <td>Always</td> + </tr> + <tr> + <td><code>.modal-fullscreen-sm-down</code></td> + <td><code>Below 576px</code></td> + </tr> + <tr> + <td><code>.modal-fullscreen-md-down</code></td> + <td><code>Below 768px</code></td> + </tr> + <tr> + <td><code>.modal-fullscreen-lg-down</code></td> + <td><code>Below 992px</code></td> + </tr> + <tr> + <td><code>.modal-fullscreen-xl-down</code></td> + <td><code>Below 1200px</code></td> + </tr> + </tbody> +</table> + +<div class="bd-example"> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreen">Full screen</button> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenSm">Full screen below sm</button> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenMd">Full screen below md</button> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenLg">Full screen below lg</button> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenXl">Full screen below xl</button> +</div> + +{{< highlight html >}} +<!-- Full screen modal --> +<div class="modal-dialog modal-fullscreen-sm-down"> + ... +</div> +{{< /highlight >}} + +<div class="modal fade" id="exampleModalFullscreen" tabindex="-1" role="dialog" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true"> + <div class="modal-dialog modal-fullscreen"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> + <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> + <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> + <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> + <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> + <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> + <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> + <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> + <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> + <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> + <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> + <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + </div> + </div> + </div> +</div> + +<div class="modal fade" id="exampleModalFullscreenSm" tabindex="-1" role="dialog" aria-labelledby="exampleModalFullscreenSmLabel" aria-hidden="true"> + <div class="modal-dialog modal-fullscreen-sm-down" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full screen below sm</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + ... + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + </div> + </div> + </div> +</div> + +<div class="modal fade" id="exampleModalFullscreenMd" tabindex="-1" role="dialog" aria-labelledby="exampleModalFullscreenMdLabel" aria-hidden="true"> + <div class="modal-dialog modal-fullscreen-md-down" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full screen below md</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + ... + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + </div> + </div> + </div> +</div> + +<div class="modal fade" id="exampleModalFullscreenLg" tabindex="-1" role="dialog" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true"> + <div class="modal-dialog modal-fullscreen-lg-down" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full screen below lg</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + ... + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + </div> + </div> + </div> +</div> + +<div class="modal fade" id="exampleModalFullscreenXl" tabindex="-1" role="dialog" aria-labelledby="exampleModalFullscreenXlLabel" aria-hidden="true"> + <div class="modal-dialog modal-fullscreen-xl-down" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full screen below xl</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + ... + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + </div> + </div> + </div> +</div> + ## Usage The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal. diff --git a/site/content/docs/4.3/components/navs.md b/site/content/docs/4.3/components/navs.md index adbb7749b..ba8290242 100644 --- a/site/content/docs/4.3/components/navs.md +++ b/site/content/docs/4.3/components/navs.md @@ -260,13 +260,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - <div class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Separated link</a> - </div> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -286,13 +286,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - <div class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Separated link</a> - </div> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -313,13 +313,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, <div class="bd-example"> <ul class="nav nav-tabs mb-3" id="myTab" role="tablist"> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> @@ -338,13 +338,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, {{< highlight html >}} <ul class="nav nav-tabs" id="myTab" role="tablist"> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> @@ -397,13 +397,13 @@ The tabs plugin also works with pills. <div class="bd-example"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> @@ -422,13 +422,13 @@ The tabs plugin also works with pills. {{< highlight html >}} <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> @@ -498,16 +498,16 @@ You can activate a tab or pill navigation without writing any JavaScript by simp {{< highlight html >}} <!-- Nav tabs --> <ul class="nav nav-tabs" id="myTab" role="tablist"> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> </li> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> </li> </ul> @@ -572,16 +572,16 @@ Activates a tab element and content container. Tab should have either a `data-ta {{< highlight html >}} <ul class="nav nav-tabs" id="myTab" role="tablist"> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> </li> - <li class="nav-item"> + <li class="nav-item" role="presentation"> <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> </li> </ul> diff --git a/site/content/docs/4.3/components/scrollspy.md b/site/content/docs/4.3/components/scrollspy.md index 51c109df4..29b6468d0 100644 --- a/site/content/docs/4.3/components/scrollspy.md +++ b/site/content/docs/4.3/components/scrollspy.md @@ -33,12 +33,12 @@ Scroll the area below the navbar and watch the active class change. The dropdown </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu dropdown-menu-right"> - <a class="dropdown-item" href="#one">one</a> - <a class="dropdown-item" href="#two">two</a> - <div role="separator" class="dropdown-divider"></div> - <a class="dropdown-item" href="#three">three</a> - </div> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#one">one</a></li> + <li><a class="dropdown-item" href="#two">two</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#three">three</a></li> + </ul> </li> </ul> </nav> @@ -70,12 +70,12 @@ Scroll the area below the navbar and watch the active class change. The dropdown </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu dropdown-menu-right"> - <a class="dropdown-item" href="#one">one</a> - <a class="dropdown-item" href="#two">two</a> - <div role="separator" class="dropdown-divider"></div> - <a class="dropdown-item" href="#three">three</a> - </div> + <ul class="dropdown-menu dropdown-menu-right"> + <li><a class="dropdown-item" href="#one">one</a></li> + <li><a class="dropdown-item" href="#two">two</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#three">three</a></li> + </ul> </li> </ul> </nav> diff --git a/site/content/docs/4.3/content/tables.md b/site/content/docs/4.3/content/tables.md index c13a24517..f42d37d68 100644 --- a/site/content/docs/4.3/content/tables.md +++ b/site/content/docs/4.3/content/tables.md @@ -407,7 +407,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells <tr> <th scope="col" class="w-25">Heading 1</th> <th scope="col" class="w-25">Heading 2</th> - <th scope="col" class="w-25">Heading 2</th> + <th scope="col" class="w-25">Heading 3</th> <th scope="col" class="w-25">Heading 4</th> </tr> </thead> diff --git a/site/content/docs/4.3/examples/checkout/index.html b/site/content/docs/4.3/examples/checkout/index.html index 94f89db72..82079d19a 100644 --- a/site/content/docs/4.3/examples/checkout/index.html +++ b/site/content/docs/4.3/examples/checkout/index.html @@ -68,7 +68,7 @@ body_class: "bg-light" <form class="needs-validation" novalidate> <div class="row g-3"> <div class="col-sm-6"> - <label for="firstName">First name</label> + <label for="firstName" class="form-label">First name</label> <input type="text" class="form-control" id="firstName" placeholder="" value="" required> <div class="invalid-feedback"> Valid first name is required. @@ -76,7 +76,7 @@ body_class: "bg-light" </div> <div class="col-sm-6"> - <label for="lastName">Last name</label> + <label for="lastName" class="form-label">Last name</label> <input type="text" class="form-control" id="lastName" placeholder="" value="" required> <div class="invalid-feedback"> Valid last name is required. @@ -84,7 +84,7 @@ body_class: "bg-light" </div> <div class="col-12"> - <label for="username">Username</label> + <label for="username" class="form-label">Username</label> <div class="input-group"> <span class="input-group-text">@</span> <input type="text" class="form-control" id="username" placeholder="Username" required> @@ -95,7 +95,7 @@ body_class: "bg-light" </div> <div class="col-12"> - <label for="email">Email <span class="text-muted">(Optional)</span></label> + <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label> <input type="email" class="form-control" id="email" placeholder="[email protected]"> <div class="invalid-feedback"> Please enter a valid email address for shipping updates. @@ -103,7 +103,7 @@ body_class: "bg-light" </div> <div class="col-12"> - <label for="address">Address</label> + <label for="address" class="form-label">Address</label> <input type="text" class="form-control" id="address" placeholder="1234 Main St" required> <div class="invalid-feedback"> Please enter your shipping address. @@ -111,12 +111,12 @@ body_class: "bg-light" </div> <div class="col-12"> - <label for="address2">Address 2 <span class="text-muted">(Optional)</span></label> + <label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label> <input type="text" class="form-control" id="address2" placeholder="Apartment or suite"> </div> <div class="col-md-5"> - <label for="country">Country</label> + <label for="country" class="form-label">Country</label> <select class="form-select" id="country" required> <option value="">Choose...</option> <option>United States</option> @@ -127,7 +127,7 @@ body_class: "bg-light" </div> <div class="col-md-4"> - <label for="state">State</label> + <label for="state" class="form-label">State</label> <select class="form-select" id="state" required> <option value="">Choose...</option> <option>California</option> @@ -138,7 +138,7 @@ body_class: "bg-light" </div> <div class="col-md-3"> - <label for="zip">Zip</label> + <label for="zip" class="form-label">Zip</label> <input type="text" class="form-control" id="zip" placeholder="" required> <div class="invalid-feedback"> Zip code required. @@ -179,7 +179,7 @@ body_class: "bg-light" <div class="row gy-3"> <div class="col-md-6"> - <label for="cc-name">Name on card</label> + <label for="cc-name" class="form-label">Name on card</label> <input type="text" class="form-control" id="cc-name" placeholder="" required> <small class="text-muted">Full name as displayed on card</small> <div class="invalid-feedback"> @@ -188,7 +188,7 @@ body_class: "bg-light" </div> <div class="col-md-6"> - <label for="cc-number">Credit card number</label> + <label for="cc-number" class="form-label">Credit card number</label> <input type="text" class="form-control" id="cc-number" placeholder="" required> <div class="invalid-feedback"> Credit card number is required @@ -196,7 +196,7 @@ body_class: "bg-light" </div> <div class="col-md-3"> - <label for="cc-expiration">Expiration</label> + <label for="cc-expiration" class="form-label">Expiration</label> <input type="text" class="form-control" id="cc-expiration" placeholder="" required> <div class="invalid-feedback"> Expiration date required @@ -204,7 +204,7 @@ body_class: "bg-light" </div> <div class="col-md-3"> - <label for="cc-cvv">CVV</label> + <label for="cc-cvv" class="form-label">CVV</label> <input type="text" class="form-control" id="cc-cvv" placeholder="" required> <div class="invalid-feedback"> Security code required diff --git a/site/content/docs/4.3/examples/floating-labels/floating-labels.css b/site/content/docs/4.3/examples/floating-labels/floating-labels.css index b9c5d7cdc..a9224c0d2 100644 --- a/site/content/docs/4.3/examples/floating-labels/floating-labels.css +++ b/site/content/docs/4.3/examples/floating-labels/floating-labels.css @@ -35,7 +35,6 @@ body { left: 0; display: block; width: 100%; - margin-bottom: 0; /* Override default `<label>` margin */ color: #495057; pointer-events: none; cursor: text; /* Match the input under the label */ @@ -48,10 +47,6 @@ body { color: transparent; } -.form-label-group input:-ms-input-placeholder { - color: transparent; -} - .form-label-group input::-ms-input-placeholder { color: transparent; } diff --git a/site/content/docs/4.3/examples/navbar-bottom/index.html b/site/content/docs/4.3/examples/navbar-bottom/index.html index fadf35737..68c247f85 100644 --- a/site/content/docs/4.3/examples/navbar-bottom/index.html +++ b/site/content/docs/4.3/examples/navbar-bottom/index.html @@ -29,11 +29,11 @@ title: Bottom navbar example </li> <li class="nav-item dropup"> <a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-expanded="false">Dropup</a> - <div class="dropdown-menu" aria-labelledby="dropdown10"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> + <ul class="dropdown-menu" aria-labelledby="dropdown10"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> </li> </ul> </div> diff --git a/site/content/docs/4.3/examples/navbars/index.html b/site/content/docs/4.3/examples/navbars/index.html index 1016b5b9a..6cd9ae380 100644 --- a/site/content/docs/4.3/examples/navbars/index.html +++ b/site/content/docs/4.3/examples/navbars/index.html @@ -25,11 +25,11 @@ extra_css: </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown01"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> + <ul class="dropdown-menu" aria-labelledby="dropdown01"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> </li> </ul> <form> @@ -82,11 +82,11 @@ extra_css: </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-toggle="dropdown" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown03"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> + <ul class="dropdown-menu" aria-labelledby="dropdown03"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> </li> </ul> <form> @@ -116,11 +116,11 @@ extra_css: </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown04"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> + <ul class="dropdown-menu" aria-labelledby="dropdown04"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> </li> </ul> <form> @@ -150,11 +150,11 @@ extra_css: </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-toggle="dropdown" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown05"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> + <ul class="dropdown-menu" aria-labelledby="dropdown05"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> </li> </ul> <form> @@ -184,11 +184,11 @@ extra_css: </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-toggle="dropdown" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown06"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> + <ul class="dropdown-menu" aria-labelledby="dropdown06"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> </li> </ul> <form> @@ -218,11 +218,11 @@ extra_css: </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-toggle="dropdown" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown07"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> + <ul class="dropdown-menu" aria-labelledby="dropdown07"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> </li> </ul> <form> @@ -252,11 +252,11 @@ extra_css: </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-toggle="dropdown" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown07XL"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> + <ul class="dropdown-menu" aria-labelledby="dropdown07XL"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> </li> </ul> <form> @@ -289,11 +289,11 @@ extra_css: </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown08"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> + <ul class="dropdown-menu" aria-labelledby="dropdown08"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> </li> </ul> </div> @@ -321,11 +321,11 @@ extra_css: </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown09"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> + <ul class="dropdown-menu" aria-labelledby="dropdown09"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> </li> </ul> <form> @@ -354,11 +354,11 @@ extra_css: </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown10"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> + <ul class="dropdown-menu" aria-labelledby="dropdown10"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> </li> </ul> </div> diff --git a/site/content/docs/4.3/examples/offcanvas/index.html b/site/content/docs/4.3/examples/offcanvas/index.html index 4a8501e3a..cc41316bc 100644 --- a/site/content/docs/4.3/examples/offcanvas/index.html +++ b/site/content/docs/4.3/examples/offcanvas/index.html @@ -31,11 +31,11 @@ body_class: "bg-light" </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Settings</a> - <div class="dropdown-menu" aria-labelledby="dropdown01"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> + <ul class="dropdown-menu" aria-labelledby="dropdown01"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> </li> </ul> <form class="d-flex"> diff --git a/site/content/docs/4.3/examples/starter-template/index.html b/site/content/docs/4.3/examples/starter-template/index.html index 0a6ea6291..d2869091e 100644 --- a/site/content/docs/4.3/examples/starter-template/index.html +++ b/site/content/docs/4.3/examples/starter-template/index.html @@ -25,11 +25,11 @@ extra_css: </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown01"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> + <ul class="dropdown-menu" aria-labelledby="dropdown01"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> </li> </ul> <form class="d-flex"> diff --git a/site/content/docs/4.3/forms/checks.md b/site/content/docs/4.3/forms/checks.md index 6b90fb9bf..e189d1bb9 100644 --- a/site/content/docs/4.3/forms/checks.md +++ b/site/content/docs/4.3/forms/checks.md @@ -35,7 +35,7 @@ Our checks use custom Bootstrap icons to indicate checked or indeterminate state Checkboxes can utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it). -{{< example >}} +{{< example class="bd-example-indeterminate">}} <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate"> <label class="form-check-label" for="flexCheckIndeterminate"> diff --git a/site/content/docs/4.3/forms/form-control.md b/site/content/docs/4.3/forms/form-control.md index e74338d09..87b5c4ace 100644 --- a/site/content/docs/4.3/forms/form-control.md +++ b/site/content/docs/4.3/forms/form-control.md @@ -10,11 +10,11 @@ toc: true {{< example >}} <div class="mb-3"> - <label for="exampleFormControlInput1">Email address</label> + <label for="exampleFormControlInput1" class="form-label">Email address</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]"> </div> <div class="mb-3"> - <label for="exampleFormControlTextarea1">Example textarea</label> + <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> {{< /example >}} @@ -75,7 +75,7 @@ If you want to have `<input readonly>` elements in your form styled as plain tex ## Color {{< example >}} -<label for="exampleColorInput">Color picker</label> +<label for="exampleColorInput" class="form-label">Color picker</label> <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color"> {{< /example >}} @@ -86,7 +86,7 @@ Datalists allow you to create a group of `<option>`s that can be accessed (and a Learn more about [support for datalist elements](https://caniuse.com/#feat=datalist). {{< example >}} -<label for="exampleDataList">Datalist example</label> +<label for="exampleDataList" class="form-label">Datalist example</label> <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..."> <datalist id="datalistOptions"> <option value="San Francisco"> diff --git a/site/content/docs/4.3/forms/input-group.md b/site/content/docs/4.3/forms/input-group.md index 4fde2cf78..5d0e13ac2 100644 --- a/site/content/docs/4.3/forms/input-group.md +++ b/site/content/docs/4.3/forms/input-group.md @@ -21,7 +21,7 @@ Place one add-on or button on either side of an input. You may also place one on <span class="input-group-text" id="basic-addon2">@example.com</span> </div> -<label for="basic-url">Your vanity URL</label> +<label for="basic-url" class="form-label">Your vanity URL</label> <div class="input-group mb-3"> <span class="input-group-text" id="basic-addon3">https://example.com/users/</span> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> @@ -154,46 +154,46 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve {{< example >}} <div class="input-group mb-3"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> - <div class="dropdown-menu"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - <div role="separator" class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Separated link</a> - </div> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> <input type="text" class="form-control" aria-label="Text input with dropdown button"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> - <div class="dropdown-menu dropdown-menu-right"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - <div role="separator" class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Separated link</a> - </div> + <ul class="dropdown-menu dropdown-menu-right"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> </div> <div class="input-group"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> - <div class="dropdown-menu"> - <a class="dropdown-item" href="#">Action before</a> - <a class="dropdown-item" href="#">Another action before</a> - <a class="dropdown-item" href="#">Something else here</a> - <div role="separator" class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Separated link</a> - </div> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Action before</a></li> + <li><a class="dropdown-item" href="#">Another action before</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> - <div class="dropdown-menu dropdown-menu-right"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - <div role="separator" class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Separated link</a> - </div> + <ul class="dropdown-menu dropdown-menu-right"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> </div> {{< /example >}} @@ -205,13 +205,13 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> - <div class="dropdown-menu"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - <div role="separator" class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Separated link</a> - </div> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"> </div> @@ -221,13 +221,13 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> - <div class="dropdown-menu dropdown-menu-right"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - <div role="separator" class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Separated link</a> - </div> + <ul class="dropdown-menu dropdown-menu-right"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> </div> {{< /example >}} diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md index 3e5b45f8a..fb3cd68cb 100644 --- a/site/content/docs/4.3/forms/layout.md +++ b/site/content/docs/4.3/forms/layout.md @@ -24,11 +24,11 @@ Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or {{< example >}} <div class="mb-3"> - <label for="formGroupExampleInput">Example label</label> + <label for="formGroupExampleInput" class="form-label">Example label</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder"> </div> <div class="mb-3"> - <label for="formGroupExampleInput2">Another label</label> + <label for="formGroupExampleInput2" class="form-label">Another label</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder"> </div> {{< /example >}} @@ -68,34 +68,34 @@ More complex layouts can also be created with the grid system. {{< example >}} <form class="row g-3"> <div class="col-md-6"> - <label for="inputEmail4">Email</label> + <label for="inputEmail4" class="form-label">Email</label> <input type="email" class="form-control" id="inputEmail4"> </div> <div class="col-md-6"> - <label for="inputPassword4">Password</label> + <label for="inputPassword4" class="form-label">Password</label> <input type="password" class="form-control" id="inputPassword4"> </div> <div class="col-12"> - <label for="inputAddress">Address</label> + <label for="inputAddress" class="form-label">Address</label> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> </div> <div class="col-12"> - <label for="inputAddress2">Address 2</label> + <label for="inputAddress2" class="form-label">Address 2</label> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> </div> <div class="col-md-6"> - <label for="inputCity">City</label> + <label for="inputCity" class="form-label">City</label> <input type="text" class="form-control" id="inputCity"> </div> <div class="col-md-4"> - <label for="inputState">State</label> + <label for="inputState" class="form-label">State</label> <select id="inputState" class="form-select"> <option selected>Choose...</option> <option>...</option> </select> </div> <div class="col-md-2"> - <label for="inputZip">Zip</label> + <label for="inputZip" class="form-label">Zip</label> <input type="text" class="form-control" id="inputZip"> </div> <div class="col-12"> diff --git a/site/content/docs/4.3/forms/overview.md b/site/content/docs/4.3/forms/overview.md index 8ba099dfe..a4cc78008 100644 --- a/site/content/docs/4.3/forms/overview.md +++ b/site/content/docs/4.3/forms/overview.md @@ -35,12 +35,12 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for {{< example >}} <form> <div class="mb-3"> - <label for="exampleInputEmail1">Email address</label> + <label for="exampleInputEmail1" class="form-label">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="mb-3"> - <label for="exampleInputPassword1">Password</label> + <label for="exampleInputPassword1" class="form-label">Password</label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> <div class="mb-3 form-check"> @@ -64,7 +64,7 @@ Help text should be explicitly associated with the form control it relates to us Help text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above. {{< example >}} -<label for="inputPassword5">Password</label> +<label for="inputPassword5" class="form-label">Password</label> <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock"> <small id="passwordHelpBlock" class="form-text text-muted"> Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. @@ -105,11 +105,11 @@ By default, browsers will treat all native form controls (`<input>`, `<select>`, <form> <fieldset disabled aria-label="Disabled fieldset example"> <div class="mb-3"> - <label for="disabledTextInput">Disabled input</label> + <label for="disabledTextInput" class="form-label">Disabled input</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> </div> <div class="mb-3"> - <label for="disabledSelect">Disabled select menu</label> + <label for="disabledSelect" class="form-label">Disabled select menu</label> <select id="disabledSelect" class="form-select"> <option>Disabled select</option> </select> diff --git a/site/content/docs/4.3/forms/range.md b/site/content/docs/4.3/forms/range.md index 979e765c3..f229908b0 100644 --- a/site/content/docs/4.3/forms/range.md +++ b/site/content/docs/4.3/forms/range.md @@ -11,7 +11,7 @@ toc: true Create custom `<input type="range">` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it. {{< example >}} -<label for="customRange1">Example range</label> +<label for="customRange1" class="form-label">Example range</label> <input type="range" class="form-range" id="customRange1"> {{< /example >}} @@ -20,7 +20,7 @@ Create custom `<input type="range">` controls with `.form-range`. The track (the Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes. {{< example >}} -<label for="customRange2">Example range</label> +<label for="customRange2" class="form-label">Example range</label> <input type="range" class="form-range" min="0" max="5" id="customRange2"> {{< /example >}} @@ -29,6 +29,6 @@ Range inputs have implicit values for `min` and `max`—`0` and `100`, respectiv By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`. {{< example >}} -<label for="customRange3">Example range</label> +<label for="customRange3" class="form-label">Example range</label> <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3"> {{< /example >}} diff --git a/site/content/docs/4.3/forms/validation.md b/site/content/docs/4.3/forms/validation.md index 2bac57860..4613a6d74 100644 --- a/site/content/docs/4.3/forms/validation.md +++ b/site/content/docs/4.3/forms/validation.md @@ -34,21 +34,21 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun {{< example >}} <form class="row g-3 needs-validation" novalidate> <div class="col-md-4"> - <label for="validationCustom01">First name</label> + <label for="validationCustom01" class="form-label">First name</label> <input type="text" class="form-control" id="validationCustom01" value="Mark" required> <div class="valid-feedback"> Looks good! </div> </div> <div class="col-md-4"> - <label for="validationCustom02">Last name</label> + <label for="validationCustom02" class="form-label">Last name</label> <input type="text" class="form-control" id="validationCustom02" value="Otto" required> <div class="valid-feedback"> Looks good! </div> </div> <div class="col-md-4"> - <label for="validationCustomUsername">Username</label> + <label for="validationCustomUsername" class="form-label">Username</label> <div class="input-group"> <span class="input-group-text" id="inputGroupPrepend">@</span> <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required> @@ -58,14 +58,14 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun </div> </div> <div class="col-md-6"> - <label for="validationCustom03">City</label> + <label for="validationCustom03" class="form-label">City</label> <input type="text" class="form-control" id="validationCustom03" required> <div class="invalid-feedback"> Please provide a valid city. </div> </div> <div class="col-md-3"> - <label for="validationCustom04">State</label> + <label for="validationCustom04" class="form-label">State</label> <select class="form-select" id="validationCustom04" required> <option selected disabled value="">Choose...</option> <option>...</option> @@ -75,7 +75,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun </div> </div> <div class="col-md-3"> - <label for="validationCustom05">Zip</label> + <label for="validationCustom05" class="form-label">Zip</label> <input type="text" class="form-control" id="validationCustom05" required> <div class="invalid-feedback"> Please provide a valid zip. @@ -130,33 +130,33 @@ While these feedback styles cannot be styled with CSS, you can still customize t {{< example >}} <form class="row g-3"> <div class="col-md-4"> - <label for="validationDefault01">First name</label> + <label for="validationDefault01" class="form-label">First name</label> <input type="text" class="form-control" id="validationDefault01" value="Mark" required> </div> <div class="col-md-4"> - <label for="validationDefault02">Last name</label> + <label for="validationDefault02" class="form-label">Last name</label> <input type="text" class="form-control" id="validationDefault02" value="Otto" required> </div> <div class="col-md-4"> - <label for="validationDefaultUsername">Username</label> + <label for="validationDefaultUsername" class="form-label">Username</label> <div class="input-group"> <span class="input-group-text" id="inputGroupPrepend2">@</span> <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required> </div> </div> <div class="col-md-6"> - <label for="validationDefault03">City</label> + <label for="validationDefault03" class="form-label">City</label> <input type="text" class="form-control" id="validationDefault03" required> </div> <div class="col-md-3"> - <label for="validationDefault04">State</label> + <label for="validationDefault04" class="form-label">State</label> <select class="form-select" id="validationDefault04" required> <option selected disabled value="">Choose...</option> <option>...</option> </select> </div> <div class="col-md-3"> - <label for="validationDefault05">Zip</label> + <label for="validationDefault05" class="form-label">Zip</label> <input type="text" class="form-control" id="validationDefault05" required> </div> <div class="col-12"> @@ -180,21 +180,21 @@ We recommend using client-side validation, but in case you require server-side v {{< example >}} <form class="row g-3"> <div class="col-md-4"> - <label for="validationServer01">First name</label> + <label for="validationServer01" class="form-label">First name</label> <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required> <div class="valid-feedback"> Looks good! </div> </div> <div class="col-md-4"> - <label for="validationServer02">Last name</label> + <label for="validationServer02" class="form-label">Last name</label> <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required> <div class="valid-feedback"> Looks good! </div> </div> <div class="col-md-4"> - <label for="validationServerUsername">Username</label> + <label for="validationServerUsername" class="form-label">Username</label> <div class="input-group"> <span class="input-group-text" id="inputGroupPrepend3">@</span> <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required> @@ -204,14 +204,14 @@ We recommend using client-side validation, but in case you require server-side v </div> </div> <div class="col-md-6"> - <label for="validationServer03">City</label> + <label for="validationServer03" class="form-label">City</label> <input type="text" class="form-control is-invalid" id="validationServer03" required> <div class="invalid-feedback"> Please provide a valid city. </div> </div> <div class="col-md-3"> - <label for="validationServer04">State</label> + <label for="validationServer04" class="form-label">State</label> <select class="form-select is-invalid" id="validationServer04" required> <option selected disabled value="">Choose...</option> <option>...</option> @@ -221,7 +221,7 @@ We recommend using client-side validation, but in case you require server-side v </div> </div> <div class="col-md-3"> - <label for="validationServer05">Zip</label> + <label for="validationServer05" class="form-label">Zip</label> <input type="text" class="form-control is-invalid" id="validationServer05" required> <div class="invalid-feedback"> Please provide a valid zip. @@ -256,7 +256,7 @@ Validation styles are available for the following form controls and components: {{< example >}} <form class="was-validated"> <div class="mb-3"> - <label for="validationTextarea">Textarea</label> + <label for="validationTextarea" class="form-label">Textarea</label> <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea> <div class="invalid-feedback"> Please enter a message in the textarea. @@ -311,21 +311,21 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas {{< example >}} <form class="row g-3 needs-validation" novalidate> <div class="col-md-4 position-relative"> - <label for="validationTooltip01">First name</label> + <label for="validationTooltip01" class="form-label">First name</label> <input type="text" class="form-control" id="validationTooltip01" value="Mark" required> <div class="valid-tooltip"> Looks good! </div> </div> <div class="col-md-4 position-relative"> - <label for="validationTooltip02">Last name</label> + <label for="validationTooltip02" class="form-label">Last name</label> <input type="text" class="form-control" id="validationTooltip02" value="Otto" required> <div class="valid-tooltip"> Looks good! </div> </div> <div class="col-md-4 position-relative"> - <label for="validationTooltipUsername">Username</label> + <label for="validationTooltipUsername" class="form-label">Username</label> <div class="input-group"> <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span> <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required> @@ -335,14 +335,14 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas </div> </div> <div class="col-md-6 position-relative"> - <label for="validationTooltip03">City</label> + <label for="validationTooltip03" class="form-label">City</label> <input type="text" class="form-control" id="validationTooltip03" required> <div class="invalid-tooltip"> Please provide a valid city. </div> </div> <div class="col-md-3 position-relative"> - <label for="validationTooltip04">State</label> + <label for="validationTooltip04" class="form-label">State</label> <select class="form-select" id="validationTooltip04" required> <option selected disabled value="">Choose...</option> <option>...</option> @@ -352,7 +352,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas </div> </div> <div class="col-md-3 position-relative"> - <label for="validationTooltip05">Zip</label> + <label for="validationTooltip05" class="form-label">Zip</label> <input type="text" class="form-control" id="validationTooltip05" required> <div class="invalid-tooltip"> Please provide a valid zip. @@ -370,24 +370,10 @@ Validation states can be customized via Sass with the `$form-validation-states` Please note that we do not recommend customizing these values without also modifying the `form-validation-state` mixin. -{{< highlight scss >}} -// Sass map from `_variables.scss` -// Override this and recompile your Sass to generate different states -$form-validation-states: ( - "valid": ( - "color": $form-feedback-valid-color, - "icon": $form-feedback-icon-valid - ), - "invalid": ( - "color": $form-feedback-invalid-color, - "icon": $form-feedback-icon-invalid - ) -); - -// Loop from `_forms.scss` -// Any modifications to the above Sass map will be reflected in your compiled -// CSS via this loop. -@each $state, $data in $form-validation-states { - @include form-validation-state($state, map-get($data, color), map-get($data, icon)); -} -{{< /highlight >}} +This is the Sass map from `_variables.scss`. Override this and recompile your Sass to generate different states: + +{{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}} + +This is the loop from `forms/_validation.scss.scss`. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop: + +{{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}} diff --git a/site/content/docs/4.3/getting-started/theming.md b/site/content/docs/4.3/getting-started/theming.md index e6ed6c198..ff50369f2 100644 --- a/site/content/docs/4.3/getting-started/theming.md +++ b/site/content/docs/4.3/getting-started/theming.md @@ -122,7 +122,7 @@ $theme-colors: ( To add a new color to `$theme-colors`, add the new key and value. Keep in mind not to remove the existing colors: {{< highlight scss >}} -$my-custom-color: #ffoodd; +$my-custom-color: #ff00dd; // Make sure to define `$primary`, `$secondary`, ect.. first $theme-colors: ( @@ -172,14 +172,7 @@ In Bootstrap 5, we've dropped the `color()`, `theme-color()` and `gray()` functi We also have a function for getting a particular _level_ of color. Negative level values will lighten the color, while higher levels will darken. -{{< highlight scss >}} -@function color-level($color: $primary, $level: 0) { - $color-base: if($level > 0, #000, #fff); - $level: abs($level); - - @return mix($color-base, $color, $level * $theme-color-interval); -} -{{< /highlight >}} +{{< scss-docs name="color-level" file="scss/_functions.scss" >}} In practice, you'd call the function and pass in two parameters: the name of the color from `$theme-colors` (e.g., primary or danger) and a numeric level. @@ -389,37 +382,17 @@ Many of Bootstrap's components and utilities are built with `@each` loops that i Many of Bootstrap's components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., `.btn`) while style variations are confined to modifier classes (e.g., `.btn-danger`). These modifier classes are built from the `$theme-colors` map to make customizing the number and name of our modifier classes. -Here are two examples of how we loop over the `$theme-colors` map to generate modifiers to the `.alert` component and all our `.bg-*` background utilities. +Here are two examples of how we loop over the `$theme-colors` map to generate modifiers to the `.alert` and `.list-group` components. -{{< highlight scss >}} -// Generate alert modifier classes -@each $color, $value in $theme-colors { - .alert-#{$color} { - @include alert-variant(color-level($color, -10), color-level($color, -9), color-level($color, 6)); - } -} +{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}} -// Generate `.bg-*` color utilities -@each $color, $value in $theme-colors { - @include bg-variant('.bg-#{$color}', $value); -} -{{< /highlight >}} +{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}} ### Responsive -These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components or utilities. Take for example our responsive text alignment utilities where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include. - -{{< highlight scss >}} -@each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-up($breakpoint) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); +These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive alignment of the dropdowns where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include. - .text#{$infix}-left { text-align: left !important; } - .text#{$infix}-right { text-align: right !important; } - .text#{$infix}-center { text-align: center !important; } - } -} -{{< /highlight >}} +{{< scss-docs name="responsive-breakpoints" file="scss/_dropdown.scss" >}} Should you need to modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map. diff --git a/site/content/docs/4.3/helpers/clearfix.md b/site/content/docs/4.3/helpers/clearfix.md index bbae9a359..362fdc2b8 100644 --- a/site/content/docs/4.3/helpers/clearfix.md +++ b/site/content/docs/4.3/helpers/clearfix.md @@ -8,21 +8,19 @@ aliases: "/docs/4.3/helpers/" Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin. +Use in HTML: + {{< highlight html >}} <div class="clearfix">...</div> {{< /highlight >}} -{{< highlight scss >}} -// Mixin itself -@mixin clearfix() { - &::after { - display: block; - content: ""; - clear: both; - } -} +The mixin source code: -// Usage as a mixin +{{< scss-docs name="clearfix" file="scss/mixins/_clearfix.scss" >}} + +Use the mixin in SCSS: + +{{< highlight scss >}} .element { @include clearfix; } diff --git a/site/content/docs/4.3/helpers/embed.md b/site/content/docs/4.3/helpers/embed.md index dcc7ddad6..30914b2d6 100644 --- a/site/content/docs/4.3/helpers/embed.md +++ b/site/content/docs/4.3/helpers/embed.md @@ -50,23 +50,4 @@ Aspect ratios can be customized with modifier classes. By default the following Within `_variables.scss`, you can change the aspect ratios you want to use. Here's an example of the `$embed-responsive-aspect-ratios` map: -{{< highlight scss >}} -$embed-responsive-aspect-ratios: ( - "21by9": ( - x: 21, - y: 9 - ), - "16by9": ( - x: 16, - y: 9 - ), - "4by3": ( - x: 4, - y: 3 - ), - "1by1": ( - x: 1, - y: 1 - ) -); -{{< /highlight >}} +{{< scss-docs name="embed-responsive-aspect-ratios" file="scss/_variables.scss" >}} diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md index 834386a48..c4089e05f 100644 --- a/site/content/docs/4.3/layout/grid.md +++ b/site/content/docs/4.3/layout/grid.md @@ -45,6 +45,7 @@ Breaking it down, here's how it works: - The horizontal gutter width can be changed with `.gx-*` classes like `.gx-2` (smaller horizontal gutters) or `.gx-xl-4` (larger horizontal gutters on viewports larger than the `xl` breakpoint). - The vertical gutter width can be changed with `.gy-*` classes like `.gy-2` (smaller vertical gutters) or `.gy-xl-4` (larger vertical gutters on viewports larger than the `xl` breakpoint). To achieve vertical gutters, additional margin is added to the top of each column. The `.row` counteracts this margin to the top with a negative margin. - The gutter width in both directions can be changed with `.g-*` classes like `.g-2` (smaller gutters) or `.g-xl-4` (larger gutters on viewports larger than the `xl` breakpoint) +- CSS custom properties (`--grid-gutter-x` and `--grid-gutter-y`) are used to calculate the gutter widths. Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9). diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index e3d2e1b3b..2d73328d1 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -103,6 +103,7 @@ Changes to Reboot, typography, tables, and more. - Dropped support for `.form-control-plaintext` inside `.input-group`s. - Dropped `.form-text` as existing utilities cover this use class's former use case (e.g., `.mt-2`, `.text-small`, and/or `.text-muted`). - Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups. +- Form labels now require the `.form-label` class. Sass variables are now available to style form labels to your needs. [See #30476](https://github.com/twbs/bootstrap/pull/30476) ## Components |