diff options
34 files changed, 279 insertions, 237 deletions
diff --git a/docs/_includes/nav-home.html b/docs/_includes/nav-home.html index 6dd3723f6..8ba41c7b4 100644 --- a/docs/_includes/nav-home.html +++ b/docs/_includes/nav-home.html @@ -1,7 +1,7 @@ <header class="navbar navbar-light navbar-static-top bd-navbar"> <div class="container"> {% comment %} - <nav class="nav navbar-nav float-xs-right"> + <nav class="nav navbar-nav float-right"> <div class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> v{{ site.current_version }} @@ -27,12 +27,12 @@ <nav> <div class="clearfix"> - <button class="navbar-toggler float-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button> + <button class="navbar-toggler float-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button> <a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/"> Bootstrap </a> </div> - <div class="collapse navbar-toggleable-xs" id="bd-main-nav"> + <div class="collapse navbar-toggleable" id="bd-main-nav"> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a> diff --git a/docs/_layouts/simple.html b/docs/_layouts/simple.html index df9bb6048..bb35ec792 100644 --- a/docs/_layouts/simple.html +++ b/docs/_layouts/simple.html @@ -2,7 +2,7 @@ layout: default --- -<div class="bd-pageheader text-xs-center text-sm-left"> +<div class="bd-pageheader text-center text-sm-left"> <div class="container"> <h1>{{ page.title }}</h1> <p class="lead"> diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss index dea8eb5f3..01cd01871 100644 --- a/docs/assets/scss/_component-examples.scss +++ b/docs/assets/scss/_component-examples.scss @@ -19,9 +19,9 @@ } } - .flex-items-xs-top, - .flex-items-xs-middle, - .flex-items-xs-bottom { + .flex-items-top, + .flex-items-middle, + .flex-items-bottom { min-height: 6rem; background-color: rgba(255,0,0,.1); } diff --git a/docs/components/card.md b/docs/components/card.md index f876ccad2..8fd2276cb 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -151,13 +151,13 @@ You can quickly change the text alignment of any card—in its entirety or speci <a href="#" class="btn btn-primary">Go somewhere</a> </div> -<div class="card card-block text-xs-center"> +<div class="card card-block text-center"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> -<div class="card card-block text-xs-right"> +<div class="card card-block text-right"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> @@ -209,7 +209,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements. {% endexample %} {% example html %} -<div class="card text-xs-center"> +<div class="card text-center"> <div class="card-header"> Featured </div> @@ -229,7 +229,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements. Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.float-*-*` utility class for proper alignment. {% example html %} -<div class="card text-xs-center"> +<div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs float-left"> <li class="nav-item"> @@ -252,7 +252,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ {% endexample %} {% example html %} -<div class="card text-xs-center"> +<div class="card text-center"> <div class="card-header"> <ul class="nav nav-pills card-header-pills float-left"> <li class="nav-item"> @@ -333,7 +333,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.** {% example html %} -<div class="card card-inverse card-primary text-xs-center"> +<div class="card card-inverse card-primary text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -341,7 +341,7 @@ Cards include their own variant classes for quickly changing the `background-col </blockquote> </div> </div> -<div class="card card-inverse card-success text-xs-center"> +<div class="card card-inverse card-success text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -349,7 +349,7 @@ Cards include their own variant classes for quickly changing the `background-col </blockquote> </div> </div> -<div class="card card-inverse card-info text-xs-center"> +<div class="card card-inverse card-info text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -357,7 +357,7 @@ Cards include their own variant classes for quickly changing the `background-col </blockquote> </div> </div> -<div class="card card-inverse card-warning text-xs-center"> +<div class="card card-inverse card-warning text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -365,7 +365,7 @@ Cards include their own variant classes for quickly changing the `background-col </blockquote> </div> </div> -<div class="card card-inverse card-danger text-xs-center"> +<div class="card card-inverse card-danger text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -383,7 +383,7 @@ Cards include their own variant classes for quickly changing the `background-col In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card. {% example html %} -<div class="card card-outline-primary text-xs-center"> +<div class="card card-outline-primary text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -391,7 +391,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla </blockquote> </div> </div> -<div class="card card-outline-secondary text-xs-center"> +<div class="card card-outline-secondary text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -399,7 +399,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla </blockquote> </div> </div> -<div class="card card-outline-success text-xs-center"> +<div class="card card-outline-success text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -407,7 +407,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla </blockquote> </div> </div> -<div class="card card-outline-info text-xs-center"> +<div class="card card-outline-info text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -415,7 +415,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla </blockquote> </div> </div> -<div class="card card-outline-warning text-xs-center"> +<div class="card card-outline-warning text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -423,7 +423,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla </blockquote> </div> </div> -<div class="card card-outline-danger text-xs-center"> +<div class="card card-outline-danger text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -542,7 +542,7 @@ Only applies to small devices and above. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> - <div class="card card-block card-inverse card-primary text-xs-center"> + <div class="card card-block card-inverse card-primary text-center"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <footer> @@ -552,7 +552,7 @@ Only applies to small devices and above. </footer> </blockquote> </div> - <div class="card card-block text-xs-center"> + <div class="card card-block text-center"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> @@ -560,7 +560,7 @@ Only applies to small devices and above. <div class="card"> <img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image"> </div> - <div class="card card-block text-xs-right"> + <div class="card card-block text-right"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer> diff --git a/docs/components/list-group.md b/docs/components/list-group.md index 49a6ced63..820470bbb 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -46,19 +46,19 @@ Add badges to any list group item to show unread counts, activity, etc. </ul> {% endexample %} -When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-xs-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges. +When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges. {% highlight html %} <ul class="list-group"> - <li class="list-group-item flex-items-xs-between"> + <li class="list-group-item flex-items-between"> Cras justo odio <span class="badge badge-default badge-pill">14</span> </li> - <li class="list-group-item flex-items-xs-between"> + <li class="list-group-item flex-items-between"> Dapibus ac facilisis in <span class="badge badge-default badge-pill">2</span> </li> - <li class="list-group-item flex-items-xs-between"> + <li class="list-group-item flex-items-between"> Morbi leo risus <span class="badge badge-default badge-pill">1</span> </li> diff --git a/docs/components/navs.md b/docs/components/navs.md index 86fd0463f..7ac1b5232 100644 --- a/docs/components/navs.md +++ b/docs/components/navs.md @@ -282,7 +282,7 @@ And pills, too: Using our [flexbox utilities]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component. {% example html %} -<ul class="nav nav-inline d-flex flex-items-xs-center"> +<ul class="nav nav-inline d-flex flex-items-center"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> diff --git a/docs/components/progress.md b/docs/components/progress.md index 2d8db33cb..50d1f1b55 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -18,19 +18,19 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t {% example html %} -<div class="text-xs-center" id="example-caption-1">Reticulating splines… 0%</div> +<div class="text-center" id="example-caption-1">Reticulating splines… 0%</div> <progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress> -<div class="text-xs-center" id="example-caption-2">Reticulating splines… 25%</div> +<div class="text-center" id="example-caption-2">Reticulating splines… 25%</div> <progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress> -<div class="text-xs-center" id="example-caption-3">Reticulating splines… 50%</div> +<div class="text-center" id="example-caption-3">Reticulating splines… 50%</div> <progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress> -<div class="text-xs-center" id="example-caption-4">Reticulating splines… 75%</div> +<div class="text-center" id="example-caption-4">Reticulating splines… 75%</div> <progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress> -<div class="text-xs-center" id="example-caption-5">Reticulating splines… 100%</div> +<div class="text-center" id="example-caption-5">Reticulating splines… 100%</div> <progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress> {% endexample %} @@ -39,7 +39,7 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that. {% example html %} -<div class="text-xs-center" id="example-caption-6">Reticulating splines… 25%</div> +<div class="text-center" id="example-caption-6">Reticulating splines… 25%</div> <progress class="progress" value="25" max="100" aria-describedby="example-caption-6"> <div class="progress"> <span class="progress-bar" style="width: 25%;"></span> diff --git a/docs/content/figures.md b/docs/content/figures.md index b85ca8a4a..4f90018c9 100644 --- a/docs/content/figures.md +++ b/docs/content/figures.md @@ -21,6 +21,6 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl {% example html %} <figure class="figure"> <img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure."> - <figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption> + <figcaption class="figure-caption text-right">A caption for the above image.</figcaption> </figure> {% endexample %} diff --git a/docs/content/images.md b/docs/content/images.md index c9323bcf2..fc8cda6b4 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -65,13 +65,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/utilities/respon {% endhighlight %} <div class="bd-example bd-example-images"> - <div class="text-xs-center"> + <div class="text-center"> <img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners"> </div> </div> {% highlight html %} -<div class="text-xs-center"> +<div class="text-center"> <img src="..." class="rounded" alt="..."> </div> {% endhighlight %} diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html index 075d15345..ecfa63bef 100644 --- a/docs/examples/album/index.html +++ b/docs/examples/album/index.html @@ -43,7 +43,7 @@ </div> </div> - <section class="jumbotron text-xs-center"> + <section class="jumbotron text-center"> <div class="container"> <h1 class="jumbotron-heading">Album example</h1> <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p> @@ -103,7 +103,7 @@ <footer class="text-muted"> <div class="container"> - <p class="float-xs-right"> + <p class="float-right"> <a href="#">Back to top</a> </p> <p>Album example is © Bootstrap, but please download and customize it for yourself!</p> diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index e744c57e4..990553b97 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -51,7 +51,7 @@ <div class="carousel-item active"> <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> <div class="container"> - <div class="carousel-caption text-xs-left"> + <div class="carousel-caption text-left"> <h1>Example headline.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> @@ -71,7 +71,7 @@ <div class="carousel-item"> <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> <div class="container"> - <div class="carousel-caption text-xs-right"> + <div class="carousel-caption text-right"> <h1>One more for good measure.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> @@ -164,7 +164,7 @@ <!-- FOOTER --> <footer> - <p class="float-xs-right"><a href="#">Back to top</a></p> + <p class="float-right"><a href="#">Back to top</a></p> <p>© 2014 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> </footer> diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html index cb9d880ec..9abbcf19d 100644 --- a/docs/examples/dashboard/index.html +++ b/docs/examples/dashboard/index.html @@ -92,7 +92,7 @@ <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3"> <h1>Dashboard</h1> - <section class="row text-xs-center placeholders"> + <section class="row text-center placeholders"> <div class="col-6 col-sm-3 placeholder"> <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail"> <h4>Label</h4> diff --git a/docs/examples/narrow-jumbotron/index.html b/docs/examples/narrow-jumbotron/index.html index 3d96259e0..e27aca212 100644 --- a/docs/examples/narrow-jumbotron/index.html +++ b/docs/examples/narrow-jumbotron/index.html @@ -23,7 +23,7 @@ <div class="container"> <div class="header clearfix"> <nav> - <ul class="nav nav-pills float-xs-right"> + <ul class="nav nav-pills float-right"> <li class="nav-item"> <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a> </li> diff --git a/docs/examples/navbar/index.html b/docs/examples/navbar/index.html index f04d18748..3d35b7904 100644 --- a/docs/examples/navbar/index.html +++ b/docs/examples/navbar/index.html @@ -23,7 +23,7 @@ <div class="container"> <nav class="navbar navbar-light bg-faded"> <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button> - <div class="collapse navbar-toggleable-xs" id="navbar-header"> + <div class="collapse navbar-toggleable" id="navbar-header"> <a class="navbar-brand" href="#">Navbar</a> <ul class="nav navbar-nav"> <li class="nav-item active"> @@ -39,7 +39,7 @@ <a class="nav-link" href="#">About</a> </li> </ul> - <form class="form-inline float-xs-right"> + <form class="form-inline float-right"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html index cf59f4722..f43e0e5d5 100644 --- a/docs/examples/offcanvas/index.html +++ b/docs/examples/offcanvas/index.html @@ -35,7 +35,7 @@ <div class="row row-offcanvas row-offcanvas-right"> <div class="col-12 col-sm-9"> - <p class="float-xs-right hidden-sm-up"> + <p class="float-right hidden-sm-up"> <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button> </p> <div class="jumbotron"> diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html index 855f0418d..77242a6f6 100644 --- a/docs/examples/sticky-footer-navbar/index.html +++ b/docs/examples/sticky-footer-navbar/index.html @@ -31,7 +31,7 @@ <nav class="navbar navbar-light navbar-static-top bg-faded"> <div class="container"> <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-expanded="false" aria-controls="exCollapsingNavbar2" aria-label="Toggle navigation"></button> - <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> + <div class="collapse navbar-toggleable" id="exCollapsingNavbar2"> <a class="navbar-brand" href="#">Sticky footer</a> <ul class="nav navbar-nav"> <li class="nav-item active"> diff --git a/docs/examples/tooltip-viewport/index.html b/docs/examples/tooltip-viewport/index.html index ee990b975..2ca1ed2b0 100644 --- a/docs/examples/tooltip-viewport/index.html +++ b/docs/examples/tooltip-viewport/index.html @@ -20,7 +20,7 @@ <body> - <button class="btn btn-secondary float-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button> + <button class="btn btn-secondary float-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button> <button class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button> <button class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button> @@ -30,7 +30,7 @@ <button class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button> <button class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button> - <button class="btn btn-secondary float-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button> + <button class="btn btn-secondary float-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button> <button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button> </div> diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index eafe7b59c..482392504 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -157,7 +157,7 @@ Use the flexbox alignment utilities to vertically align columns. <div class="bd-example-row"> {% example html %} <div class="container"> - <div class="row flex-items-xs-top"> + <div class="row flex-items-top"> <div class="col-xs"> One of three columns </div> @@ -168,7 +168,7 @@ Use the flexbox alignment utilities to vertically align columns. One of three columns </div> </div> - <div class="row flex-items-xs-middle"> + <div class="row flex-items-middle"> <div class="col-xs"> One of three columns </div> @@ -179,7 +179,7 @@ Use the flexbox alignment utilities to vertically align columns. One of three columns </div> </div> - <div class="row flex-items-xs-bottom"> + <div class="row flex-items-bottom"> <div class="col-xs"> One of three columns </div> @@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns. {% example html %} <div class="container"> <div class="row"> - <div class="col-xs flex-xs-top"> + <div class="col-xs flex-top"> One of three columns </div> - <div class="col-xs flex-xs-middle"> + <div class="col-xs flex-middle"> One of three columns </div> - <div class="col-xs flex-xs-bottom"> + <div class="col-xs flex-bottom"> One of three columns </div> </div> @@ -219,7 +219,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt <div class="bd-example-row"> {% example html %} <div class="container"> - <div class="row flex-items-xs-left"> + <div class="row flex-items-left"> <div class="col-4"> One of two columns </div> @@ -227,7 +227,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns </div> </div> - <div class="row flex-items-xs-center"> + <div class="row flex-items-center"> <div class="col-4"> One of two columns </div> @@ -235,7 +235,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns </div> </div> - <div class="row flex-items-xs-right"> + <div class="row flex-items-right"> <div class="col-4"> One of two columns </div> @@ -243,7 +243,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns </div> </div> - <div class="row flex-items-xs-around"> + <div class="row flex-items-around"> <div class="col-4"> One of two columns </div> @@ -251,7 +251,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns </div> </div> - <div class="row flex-items-xs-between"> + <div class="row flex-items-between"> <div class="col-4"> One of two columns </div> @@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content. {% example html %} <div class="container"> <div class="row"> - <div class="col-xs flex-xs-unordered"> + <div class="col-xs flex-unordered"> First, but unordered </div> - <div class="col-xs flex-xs-last"> + <div class="col-xs flex-last"> Second, but last </div> - <div class="col-xs flex-xs-first"> + <div class="col-xs flex-first"> Third, but first </div> </div> diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 8c0d32917..8de8ccf46 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -62,23 +62,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a <thead> <tr> <th></th> - <th class="text-xs-center"> + <th class="text-center"> Extra small<br> <small><576px</small> </th> - <th class="text-xs-center"> + <th class="text-center"> Small<br> <small>≥576px</small> </th> - <th class="text-xs-center"> + <th class="text-center"> Medium<br> <small>≥768px</small> </th> - <th class="text-xs-center"> + <th class="text-center"> Large<br> <small>≥992px</small> </th> - <th class="text-xs-center"> + <th class="text-center"> Extra large<br> <small>≥1200px</small> </th> diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md index a023a79aa..49410df09 100644 --- a/docs/utilities/clearfix.md +++ b/docs/utilities/clearfix.md @@ -12,13 +12,10 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes {% highlight scss %} // Mixin itself -.clearfix() { - &:before, - &:after { - content: " "; - display: table; - } - &:after { +@mixin clearfix() { + &::after { + display: block; + content: ""; clear: both; } } diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md index 8881b177b..670b6f188 100644 --- a/docs/utilities/sizing-and-positioning.md +++ b/docs/utilities/sizing-and-positioning.md @@ -24,7 +24,7 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes. {% example html %} -<img class="w-100" data-src="holder.js/200px100?outline=yes&text=Width%20%3D%20100%25" alt="Width = 100%"> +<img class="w-100" data-src="holder.js/200px100?text=Width%20%3D%20100%25" alt="Width 100%"> {% endexample %} {% example html %} @@ -32,3 +32,15 @@ Easily make an element as wide or as tall as its parent using the `.w-100` and ` <div class="h-100" style="width: 100px; background-color: rgba(0,0,255,0.1);">Full height</div> </div> {% endexample %} + +You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. + +{% example html %} +<img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%"> +{% endexample %} + +{% example html %} +<div style="height: 100px; background-color: rgba(255,0,0,0.1);"> + <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div> +</div> +{% endexample %} diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md index 7db133d05..42b61131e 100644 --- a/docs/utilities/typography.md +++ b/docs/utilities/typography.md @@ -30,9 +30,9 @@ Easily realign text to components with text alignment classes. For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. {% example html %} -<p class="text-xs-left">Left aligned text on all viewport sizes.</p> -<p class="text-xs-center">Center aligned text on all viewport sizes.</p> -<p class="text-xs-right">Right aligned text on all viewport sizes.</p> +<p class="text-left">Left aligned text on all viewport sizes.</p> +<p class="text-center">Center aligned text on all viewport sizes.</p> +<p class="text-right">Right aligned text on all viewport sizes.</p> <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p> diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 9b39acd36..9cb1438ca 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -221,7 +221,7 @@ const ScrollSpy = (($) => { return } - if (this._activeTarget && scrollTop < this._offsets[0]) { + if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) { this._activeTarget = null this._clear() return diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js index a349b5337..877ec67a2 100644 --- a/js/tests/unit/scrollspy.js +++ b/js/tests/unit/scrollspy.js @@ -287,6 +287,50 @@ $(function () { .scrollTop(201) }) + QUnit.test('should NOT clear selection if above the first section and first section is at the top', function (assert) { + assert.expect(4) + var done = assert.async() + + var sectionHTML = '<div id="header" style="height: 500px;"></div>' + + '<nav id="navigation" class="navbar">' + + '<ul class="nav navbar-nav">' + + '<li><a id="one-link" class="nav-link active" href="#one">One</a></li>' + + '<li><a id="two-link" class="nav-link" href="#two">Two</a></li>' + + '<li><a id="three-link" class="nav-link" href="#three">Three</a></li>' + + '</ul>' + + '</nav>' + $(sectionHTML).appendTo('#qunit-fixture') + + var negativeHeight = -10 + var startOfSectionTwo = 101 + + var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">' + + '<div id="one" style="height: 100px;"/>' + + '<div id="two" style="height: 100px;"/>' + + '<div id="three" style="height: 100px;"/>' + + '<div id="spacer" style="height: 100px;"/>' + + '</div>' + var $scrollspy = $(scrollspyHTML).appendTo('#qunit-fixture') + + $scrollspy + .bootstrapScrollspy({ + target: '#navigation', + offset: $scrollspy.position().top + }) + .one('scroll', function () { + assert.strictEqual($('.active').length, 1, '"active" class on only one element present') + assert.strictEqual($('.active').is('#two-link'), true, '"active" class on second section') + $scrollspy + .one('scroll', function () { + assert.strictEqual($('.active').length, 1, '"active" class on only one element present') + assert.strictEqual($('.active').is('#one-link'), true, '"active" class on first section') + done() + }) + .scrollTop(negativeHeight) + }) + .scrollTop(startOfSectionTwo) + }) + QUnit.test('should correctly select navigation element on backward scrolling when each target section height is 100%', function (assert) { assert.expect(5) var navbarHtml = diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml index 6681def40..2f5dc20e1 100644 --- a/scss/.scss-lint.yml +++ b/scss/.scss-lint.yml @@ -492,7 +492,7 @@ linters: SpaceBeforeBrace: enabled: true style: space # or 'new_line' - allow_single_line_padding: false + allow_single_line_padding: true SpaceBetweenParens: enabled: true diff --git a/scss/_navbar.scss b/scss/_navbar.scss index ebf27af8b..c6cc4e2fe 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -128,42 +128,6 @@ } } -// scss-lint:disable ImportantRule -.navbar-toggleable { - @each $breakpoint in map-keys($grid-breakpoints) { - $next: breakpoint-next($breakpoint, $grid-breakpoints); - - &-#{$breakpoint} { - @include clearfix; - - @include media-breakpoint-down($breakpoint) { - .navbar-brand { - display: block; - float: none; - margin-top: .5rem; - margin-right: 0; - } - - .navbar-nav { - margin-top: .5rem; - margin-bottom: .5rem; - - .dropdown-menu { - position: static; - float: none; - } - } - } - - @include media-breakpoint-up($next) { - display: block; - } - } - } -} -// scss-lint:enable ImportantRule - - // Navigation // // Custom navbar navigation built on the base `.nav` styles. @@ -284,48 +248,48 @@ } } - // Navbar toggleable // // Custom override for collapse plugin in navbar. +// Placed at the end of the file so it can override some CSS properties +// scss-lint:disable ImportantRule .navbar-toggleable { - &-xs { - @include clearfix; - @include media-breakpoint-down(xs) { - .navbar-nav .nav-item { - float: none; - margin-left: 0; - } - } - @include media-breakpoint-up(sm) { - display: block !important; - } - } + @each $breakpoint in map-keys($grid-breakpoints) { + $next: breakpoint-next($breakpoint, $grid-breakpoints); + + // Get rid of the 'xs' prefix while reducing duplication + #{if(breakpoint-min($breakpoint, $grid-breakpoints), "&-#{$breakpoint}", "&")} { + @include clearfix; - &-sm { - @include clearfix; - @include media-breakpoint-down(sm) { - .navbar-nav .nav-item { - float: none; - margin-left: 0; + @include media-breakpoint-down($breakpoint) { + .navbar-brand { + display: block; + float: none; + margin-top: .5rem; + margin-right: 0; + } + + .navbar-nav { + margin-top: .5rem; + margin-bottom: .5rem; + + .dropdown-menu { + position: static; + float: none; + } + + .nav-item { + float: none; + margin-left: 0; + } + } } - } - @include media-breakpoint-up(md) { - display: block !important; - } - } - &-md { - @include clearfix; - @include media-breakpoint-down(md) { - .navbar-nav .nav-item { - float: none; - margin-left: 0; + @include media-breakpoint-up($next) { + display: block !important; } } - @include media-breakpoint-up(lg) { - display: block !important; - } } } +// scss-lint:enable ImportantRule diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss index d0ae125f3..b72cf2712 100644 --- a/scss/mixins/_clearfix.scss +++ b/scss/mixins/_clearfix.scss @@ -1,7 +1,7 @@ @mixin clearfix() { &::after { + display: block; content: ""; - display: table; clear: both; } } diff --git a/scss/utilities/_align.scss b/scss/utilities/_align.scss index 4886e059f..4dbbbc2db 100644 --- a/scss/utilities/_align.scss +++ b/scss/utilities/_align.scss @@ -1,6 +1,6 @@ -.align-baseline { vertical-align: baseline !important; } // Browser default -.align-top { vertical-align: top !important; } -.align-middle { vertical-align: middle !important; } -.align-bottom { vertical-align: bottom !important; } +.align-baseline { vertical-align: baseline !important; } // Browser default +.align-top { vertical-align: top !important; } +.align-middle { vertical-align: middle !important; } +.align-bottom { vertical-align: bottom !important; } .align-text-bottom { vertical-align: text-bottom !important; } -.align-text-top { vertical-align: text-top !important; } +.align-text-top { vertical-align: text-top !important; } diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss index 015c9b943..b256881e5 100644 --- a/scss/utilities/_borders.scss +++ b/scss/utilities/_borders.scss @@ -2,11 +2,11 @@ // Border // -.border-0 { border: 0 !important; } -.border-top-0 { border-top: 0 !important; } -.border-right-0 { border-right: 0 !important; } +.border-0 { border: 0 !important; } +.border-top-0 { border-top: 0 !important; } +.border-right-0 { border-right: 0 !important; } .border-bottom-0 { border-bottom: 0 !important; } -.border-left-0 { border-left: 0 !important; } +.border-left-0 { border-left: 0 !important; } // // Border-radius diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss index a79dddbde..6325f7222 100644 --- a/scss/utilities/_display.scss +++ b/scss/utilities/_display.scss @@ -8,23 +8,21 @@ $min: breakpoint-min($breakpoint, $grid-breakpoints); @if $min { - @media (min-width: $min) { - .d-#{$breakpoint}-none { display: none !important; } - .d-#{$breakpoint}-inline { display: inline !important; } - .d-#{$breakpoint}-inline-block { display: inline-block !important; } - .d-#{$breakpoint}-block { display: block !important; } - .d-#{$breakpoint}-table { display: table !important; } - .d-#{$breakpoint}-table-cell { display: table-cell !important; } - .d-#{$breakpoint}-flex { display: flex !important; } - } + .d-#{$breakpoint}-none { display: none !important; } + .d-#{$breakpoint}-inline { display: inline !important; } + .d-#{$breakpoint}-inline-block { display: inline-block !important; } + .d-#{$breakpoint}-block { display: block !important; } + .d-#{$breakpoint}-table { display: table !important; } + .d-#{$breakpoint}-table-cell { display: table-cell !important; } + .d-#{$breakpoint}-flex { display: flex !important; } } @else { - .d-none { display: none !important; } - .d-inline { display: inline !important; } + .d-none { display: none !important; } + .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } - .d-block { display: block !important; } - .d-table { display: table !important; } - .d-table-cell { display: table-cell !important; } - .d-flex { display: flex !important; } + .d-block { display: block !important; } + .d-table { display: table !important; } + .d-table-cell { display: table-cell !important; } + .d-flex { display: flex !important; } } } } diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss index 502885a81..6e3c39b8f 100644 --- a/scss/utilities/_flex.scss +++ b/scss/utilities/_flex.scss @@ -4,34 +4,54 @@ @if $enable-flex { @each $breakpoint in map-keys($grid-breakpoints) { - // Flex column reordering @include media-breakpoint-up($breakpoint) { - .flex-#{$breakpoint}-first { order: -1; } - .flex-#{$breakpoint}-last { order: 1; } - .flex-#{$breakpoint}-unordered { order: 0; } - } + $min: breakpoint-min($breakpoint, $grid-breakpoints); - // Alignment for every item - @include media-breakpoint-up($breakpoint) { - .flex-items-#{$breakpoint}-top { align-items: flex-start; } - .flex-items-#{$breakpoint}-middle { align-items: center; } - .flex-items-#{$breakpoint}-bottom { align-items: flex-end; } - } + @if $min { + // Flex column reordering + .flex-#{$breakpoint}-first { order: -1; } + .flex-#{$breakpoint}-last { order: 1; } + .flex-#{$breakpoint}-unordered { order: 0; } - // Alignment per item - @include media-breakpoint-up($breakpoint) { - .flex-#{$breakpoint}-top { align-self: flex-start; } - .flex-#{$breakpoint}-middle { align-self: center; } - .flex-#{$breakpoint}-bottom { align-self: flex-end; } - } + // Alignment for every item + .flex-items-#{$breakpoint}-top { align-items: flex-start; } + .flex-items-#{$breakpoint}-middle { align-items: center; } + .flex-items-#{$breakpoint}-bottom { align-items: flex-end; } - // Horizontal alignment of item - @include media-breakpoint-up($breakpoint) { - .flex-items-#{$breakpoint}-left { justify-content: flex-start; } - .flex-items-#{$breakpoint}-center { justify-content: center; } - .flex-items-#{$breakpoint}-right { justify-content: flex-end; } - .flex-items-#{$breakpoint}-around { justify-content: space-around; } - .flex-items-#{$breakpoint}-between { justify-content: space-between; } + // Alignment per item + .flex-#{$breakpoint}-top { align-self: flex-start; } + .flex-#{$breakpoint}-middle { align-self: center; } + .flex-#{$breakpoint}-bottom { align-self: flex-end; } + + // Horizontal alignment of item + .flex-items-#{$breakpoint}-left { justify-content: flex-start; } + .flex-items-#{$breakpoint}-center { justify-content: center; } + .flex-items-#{$breakpoint}-right { justify-content: flex-end; } + .flex-items-#{$breakpoint}-around { justify-content: space-around; } + .flex-items-#{$breakpoint}-between { justify-content: space-between; } + } @else { + // Flex column reordering + .flex-first { order: -1; } + .flex-last { order: 1; } + .flex-unordered { order: 0; } + + // Alignment for every item + .flex-items-top { align-items: flex-start; } + .flex-items-middle { align-items: center; } + .flex-items-bottom { align-items: flex-end; } + + // Alignment per item + .flex-top { align-self: flex-start; } + .flex-middle { align-self: center; } + .flex-bottom { align-self: flex-end; } + + // Horizontal alignment of item + .flex-items-left { justify-content: flex-start; } + .flex-items-center { justify-content: center; } + .flex-items-right { justify-content: flex-end; } + .flex-items-around { justify-content: space-around; } + .flex-items-between { justify-content: space-between; } + } } } } diff --git a/scss/utilities/_float.scss b/scss/utilities/_float.scss index 99c2efdc0..5f8c2d587 100644 --- a/scss/utilities/_float.scss +++ b/scss/utilities/_float.scss @@ -4,16 +4,14 @@ @if $min { // everything else - @media (min-width: $min) { - .float-#{$breakpoint}-left { @include float-left; } - .float-#{$breakpoint}-right { @include float-right; } - .float-#{$breakpoint}-none { @include float-none; } - } + .float-#{$breakpoint}-left { @include float-left; } + .float-#{$breakpoint}-right { @include float-right; } + .float-#{$breakpoint}-none { @include float-none; } } @else { // xs - .float-left { @include float-left; } + .float-left { @include float-left; } .float-right { @include float-right; } - .float-none { @include float-none; } + .float-none { @include float-none; } } } } diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index 9c13b6022..a845cf9ad 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -3,6 +3,9 @@ .w-100 { width: 100% !important; } .h-100 { height: 100% !important; } +.mw-100 { max-width: 100% !important; } +.mh-100 { max-height: 100% !important; } + // Margin and Padding .mx-auto { @@ -21,24 +24,22 @@ @if $min { // everything else - @media (min-width: $min) { - .#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides - .#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important; } - .#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important; } - .#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; } - .#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left: $length-x !important; } - .#{$abbrev}x-#{$breakpoint}-#{$size} { - #{$prop}-right: $length-x !important; - #{$prop}-left: $length-x !important; - } - .#{$abbrev}y-#{$breakpoint}-#{$size} { - #{$prop}-top: $length-y !important; - #{$prop}-bottom: $length-y !important; - } + .#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; } + .#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important; } + .#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important; } + .#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; } + .#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left: $length-x !important; } + .#{$abbrev}x-#{$breakpoint}-#{$size} { + #{$prop}-right: $length-x !important; + #{$prop}-left: $length-x !important; + } + .#{$abbrev}y-#{$breakpoint}-#{$size} { + #{$prop}-top: $length-y !important; + #{$prop}-bottom: $length-y !important; } } @else { // xs - .#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides + .#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } .#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; } .#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; } .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; } diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index 5ad2ee9b3..75f694a85 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -4,31 +4,39 @@ // Alignment -.text-justify { text-align: justify !important; } -.text-nowrap { white-space: nowrap !important; } -.text-truncate { @include text-truncate; } +.text-justify { text-align: justify !important; } +.text-nowrap { white-space: nowrap !important; } +.text-truncate { @include text-truncate; } // Responsive alignment @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { - .text-#{$breakpoint}-left { text-align: left !important; } - .text-#{$breakpoint}-right { text-align: right !important; } - .text-#{$breakpoint}-center { text-align: center !important; } + $min: breakpoint-min($breakpoint, $grid-breakpoints); + + @if $min { + .text-#{$breakpoint}-left { text-align: left !important; } + .text-#{$breakpoint}-right { text-align: right !important; } + .text-#{$breakpoint}-center { text-align: center !important; } + } @else { + .text-left { text-align: left !important; } + .text-right { text-align: right !important; } + .text-center { text-align: center !important; } + } } } // Transformation -.text-lowercase { text-transform: lowercase !important; } -.text-uppercase { text-transform: uppercase !important; } -.text-capitalize { text-transform: capitalize !important; } +.text-lowercase { text-transform: lowercase !important; } +.text-uppercase { text-transform: uppercase !important; } +.text-capitalize { text-transform: capitalize !important; } // Weight and italics -.font-weight-normal { font-weight: $font-weight-normal; } -.font-weight-bold { font-weight: $font-weight-bold; } -.font-italic { font-style: italic; } +.font-weight-normal { font-weight: $font-weight-normal; } +.font-weight-bold { font-weight: $font-weight-bold; } +.font-italic { font-style: italic; } // Contextual colors |