diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/examples/carousel/carousel.css | 4 | ||||
| -rw-r--r-- | docs/examples/carousel/index.html | 6 | ||||
| -rw-r--r-- | docs/javascript/carousel.md | 16 |
3 files changed, 13 insertions, 13 deletions
diff --git a/docs/examples/carousel/carousel.css b/docs/examples/carousel/carousel.css index 7056a41a8..52c93a296 100644 --- a/docs/examples/carousel/carousel.css +++ b/docs/examples/carousel/carousel.css @@ -21,11 +21,11 @@ body { } /* Declare heights because of positioning of img element */ -.carousel .item { +.carousel-item { height: 32rem; background-color: #777; } -.carousel-inner > .item > img { +.carousel-item > img { position: absolute; top: 0; left: 0; diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index 15704ac09..9faa4d3bc 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -50,7 +50,7 @@ <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> - <div class="item active"> + <div class="carousel-item active"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> <div class="container"> <div class="carousel-caption text-left"> @@ -60,7 +60,7 @@ </div> </div> </div> - <div class="item"> + <div class="carousel-item"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> <div class="container"> <div class="carousel-caption"> @@ -70,7 +70,7 @@ </div> </div> </div> - <div class="item"> + <div class="carousel-item"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> <div class="container"> <div class="carousel-caption text-right"> diff --git a/docs/javascript/carousel.md b/docs/javascript/carousel.md index ee96f5924..1b344185c 100644 --- a/docs/javascript/carousel.md +++ b/docs/javascript/carousel.md @@ -15,13 +15,13 @@ A slideshow component for cycling through elements—images or slides of text— <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> - <div class="item active"> + <div class="carousel-item active"> <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide"> </div> - <div class="item"> + <div class="carousel-item"> <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide"> </div> - <div class="item"> + <div class="carousel-item"> <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide"> </div> </div> @@ -48,7 +48,7 @@ A slideshow component for cycling through elements—images or slides of text— ### Optional captions -Add captions to your slides easily with the `.carousel-caption` element within any `.item`. Place just about any optional HTML within there and it will be automatically aligned and formatted. +Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. Place just about any optional HTML within there and it will be automatically aligned and formatted. <div class="bs-example"> <div id="carousel-example-captions" class="carousel slide" data-ride="carousel"> @@ -58,21 +58,21 @@ Add captions to your slides easily with the `.carousel-caption` element within a <li data-target="#carousel-example-captions" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> - <div class="item active"> + <div class="carousel-item active"> <img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image"> <div class="carousel-caption"> <h3>First slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> - <div class="item"> + <div class="carousel-item"> <img data-src="holder.js/900x500/auto/#666:#666" alt="Second slide image"> <div class="carousel-caption"> <h3>Second slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> - <div class="item"> + <div class="carousel-item"> <img data-src="holder.js/900x500/auto/#555:#5555" alt="Third slide image"> <div class="carousel-caption"> <h3>Third slide label</h3> @@ -92,7 +92,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a </div> {% highlight html %} -<div class="item"> +<div class="carousel-item"> <img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> |