diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 00bc96721c91fda9cdfe10ababe3e1a52ed99ff2..e59869fcd575202a7a00181a66fe8db018d9ea52 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -60,8 +60,19 @@ Here are some representative examples of these classes: } {% endhighlight %} -Additionally, Bootstrap also includes an `.m-x-auto` class which sets the horizontal margins to `auto`. +Additionally, Bootstrap also includes an `.m-x-auto` class for centering fixed-width block level content by setting the horizontal margins to `auto`. +<div class="bd-example"> + <div class="m-x-auto" style="width: 200px; background-color: rgba(86,61,124,.15);"> + Centered element + </div> +</div> + +{% highlight html %} +<div class="m-x-auto" style="width: 200px;""> + Centered element +</div> +{% endhighlight %} ## Text alignment @@ -191,27 +202,7 @@ Two similar non-responsive mixins (`pull-left` and `pull-right`) are also availa } {% endhighlight %} -## Center content - -Set an element to `display: block;` and center via `margin`. Available as a mixin and class. - -{% example html %} -<div class="center-block">Centered block</div> -{% endexample %} - -{% highlight scss %} -// Class -.center-block { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Usage as a mixin -.element { - @include center-block; -} -{% endhighlight %} +## Clearfix Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin. diff --git a/docs/migration.md b/docs/migration.md index 45f290dcbc20ac8e9451434cf5f4311ac3fd4724..774dd1166feaeddee9858a1b915de3848b1c18e3 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -156,6 +156,7 @@ Dropped entirely for the new card component. - Added `.pull-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.pull-xs-left` and `.pull-xs-right`. - Added responsive variations to our text alignment classes `.text-{xs,sm,md,lg,xl}-{left,center,right}` and removed the redundant `.text-{left,center,right}` utilities as they are the same as the `xs` variation. +- Dropped `.center-block` for the new `.m-x-auto` class. ### Vendor prefix mixins Bootstrap 3's [vendor prefix](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm) mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use [Autoprefixer](https://github.com/postcss/autoprefixer), they're no longer necessary. diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 934769fdcdd0279b327ba3492933e08cc9fb51d1..5c86512070b691f7cc590114e3c4cda79b6c3273 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -48,7 +48,6 @@ // // Layout @import "mixins/clearfix"; -@import "mixins/center-block"; // @import "mixins/navbar-align"; @import "mixins/grid-framework"; @import "mixins/grid"; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index ac703bc467afe3b64b9a04bf12d30d6f51ee5a07..3f9e81f125e75b090e8c9fce7921d26d6a86f9af 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,5 +1,4 @@ @import "utilities/background"; -@import "utilities/center-block"; @import "utilities/clearfix"; @import "utilities/pulls"; @import "utilities/screenreaders"; diff --git a/scss/mixins/_center-block.scss b/scss/mixins/_center-block.scss deleted file mode 100644 index e06fb5e276e471ac4bd574068254808089695afd..0000000000000000000000000000000000000000 --- a/scss/mixins/_center-block.scss +++ /dev/null @@ -1,7 +0,0 @@ -// Center-align a block level element - -@mixin center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} diff --git a/scss/utilities/_center-block.scss b/scss/utilities/_center-block.scss deleted file mode 100644 index 0c986667aee7eb7741e5cf0b7d82c0bcdb800ea1..0000000000000000000000000000000000000000 --- a/scss/utilities/_center-block.scss +++ /dev/null @@ -1,3 +0,0 @@ -.center-block { - @include center-block(); -}