mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Responsive display utilities (#20934)

Browse Source 
* Explore responsive display utils, but with a twist: lowest breakpoint has no breakpoint modifier in the class name
* make floats use the same format, add float-none mixin
This commit is contained in:
Mark Otto
2016-10-31 21:27:56 -07:00
committed by GitHub
parent 76d53404b5
commit ffaad0a819
12 changed files with 73 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/content/images.md
+4 -4
View File
@@ -47,13 +47,13 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/border
Align images with the [helper float classes]({{ site.baseurl }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/utilities/typography/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/utilities/spacing/#horizontal-centering).
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="rounded float-xs-left" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded float-xs-right" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded float-right" alt="A generic square placeholder image with rounded corners">
</div>
{% highlight html %}
<img src="..." class="rounded float-xs-left" alt="...">
<img src="..." class="rounded float-xs-right" alt="...">
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
{% endhighlight %}
<div class="bd-example bd-example-images">