rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

remove d-flex class from img tag in docs

Browse Source
This commit is contained in:
Chirag Modi 2017-08-22 17:52:20 +05:30 committed by Mark Otto
parent 70ca04bbdc
commit 0492c3a4cd
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/4.0/layout/media-object.md
View File

@ -14,7 +14,7 @@ Below is an example of a single media object. Only two classes are required—th
{% example html %}
<div class="media">
<img class="d-flex mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
@ -36,13 +36,13 @@ Media objects can be infinitely nested, though we suggest you stop at some point
{% example html %}
<div class="media">
<img class="d-flex mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media mt-3">
<a class="d-flex pr-3" href="#">
<a class="pr-3" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
@ -60,7 +60,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
{% example html %}
<div class="media">
<img class="d-flex align-self-start mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="align-self-start mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
@ -71,7 +71,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
{% example html %}
<div class="media">
<img class="d-flex align-self-center mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="align-self-center mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
@ -82,7 +82,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
{% example html %}
<div class="media">
<img class="d-flex align-self-end mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="align-self-end mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Bottom-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
@ -101,7 +101,7 @@ Change the order of content in media objects by modifying the HTML itself, or by
<h5 class="mt-0 mb-1">Media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
<img class="d-flex ml-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="ml-3" data-src="holder.js/64x64" alt="Generic placeholder image">
</div>
{% endexample %}
@ -112,21 +112,21 @@ Because the media object has so few structural requirements, you can also use th
{% example html %}
<ul class="list-unstyled">
<li class="media">
<img class="d-flex mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<img class="d-flex mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media">
<img class="d-flex mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.