Drop .center-block for .m-x-auto

- Both classes do about the same thing, but with different names
- Clarifies docs for .m-x-auto requiring a fixed width block element for it to work
- Add missing heading for clearfix section in docs (unrelated)
This commit is contained in:
Mark Otto 2016-02-06 15:40:25 -08:00
parent 612b824ae0
commit c59dbe56fe
5 changed files with 13 additions and 34 deletions

View File

@ -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.

View File

@ -48,7 +48,6 @@
// // Layout
@import "mixins/clearfix";
@import "mixins/center-block";
// @import "mixins/navbar-align";
@import "mixins/grid-framework";
@import "mixins/grid";

View File

@ -1,5 +1,4 @@
@import "utilities/background";
@import "utilities/center-block";
@import "utilities/clearfix";
@import "utilities/pulls";
@import "utilities/screenreaders";

View File

@ -1,7 +0,0 @@
// Center-align a block level element
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}

View File

@ -1,3 +0,0 @@
.center-block {
@include center-block();
}