diff options
author | Mark Otto <markdotto@gmail.com> | 2017-04-09 01:21:43 +0300 |
---|---|---|
committer | Mark Otto <markd.otto@gmail.com> | 2017-04-09 02:29:21 +0300 |
commit | ee5dc37ba3b7bde0155b7e18a89f32d66d2d05ee (patch) | |
tree | 6a4bc6ca523e222de61e6bc27c168da1107ab7a2 /docs | |
parent | ab67ffe167a7d2d7f8cd54ae22c48507f49ecbb8 (diff) |
drop img-fluid for w-100
Diffstat (limited to 'docs')
-rw-r--r-- | docs/components/carousel.md | 24 |
1 files changed, 12 insertions, 12 deletions
diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 405aee18cb..e754843167 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -30,13 +30,13 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.im <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> </div> </div> </div> @@ -50,13 +50,13 @@ Adding in the previous and next controls: <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> @@ -83,13 +83,13 @@ You can also add the indicators to the carousel, alongside the controls, too. </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> @@ -122,21 +122,21 @@ Add captions to your slides easily with the `.carousel-caption` element within a </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> <div class="carousel-caption d-none d-md-block"> <h3>First slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> <div class="carousel-caption d-none d-md-block"> <h3>Second slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> <div class="carousel-caption d-none d-md-block"> <h3>Third slide label</h3> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> |