aboutsummaryrefslogtreecommitdiff
path: root/site/content/docs/5.0/examples/carousel/index.html
diff options
context:
space:
mode:
authorPatrick H. Lauke <[email protected]>2021-05-04 12:46:06 +0100
committerGitHub <[email protected]>2021-05-04 12:46:06 +0100
commit8865a8ab1c7157ab81bf49afa62b75f36daee46d (patch)
tree97ef78f2ea8e07aab50014176d061fe3c1d49134 /site/content/docs/5.0/examples/carousel/index.html
parent018ee6a3b50b958ddb49657086cd9168abf5a485 (diff)
parent7ea6578773cb1b7f5cfb8fb41321b3fa10349daf (diff)
downloadbootstrap-jo-docs-thanks-page.tar.xz
bootstrap-jo-docs-thanks-page.zip
Merge branch 'main' into jo-docs-thanks-pagejo-docs-thanks-page
Diffstat (limited to 'site/content/docs/5.0/examples/carousel/index.html')
-rw-r--r--site/content/docs/5.0/examples/carousel/index.html54
1 files changed, 27 insertions, 27 deletions
diff --git a/site/content/docs/5.0/examples/carousel/index.html b/site/content/docs/5.0/examples/carousel/index.html
index 54cd34bc3..da5f3ab7a 100644
--- a/site/content/docs/5.0/examples/carousel/index.html
+++ b/site/content/docs/5.0/examples/carousel/index.html
@@ -14,8 +14,8 @@ extra_css:
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
- <li class="nav-item active">
- <a class="nav-link" aria-current="page" href="#">Home</a>
+ <li class="nav-item">
+ <a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
@@ -36,19 +36,19 @@ extra_css:
<main>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
- <ol class="carousel-indicators">
- <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
- <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
- <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
- </ol>
+ <div class="carousel-indicators">
+ <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+ <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
+ <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
+ </div>
<div class="carousel-inner">
<div class="carousel-item active">
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
<div class="container">
<div class="carousel-caption text-start">
<h1>Example headline.</h1>
- <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
- <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
+ <p>Some representative placeholder content for the first slide of the carousel.</p>
+ <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
</div>
</div>
</div>
@@ -57,8 +57,8 @@ extra_css:
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
- <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
- <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
+ <p>Some representative placeholder content for the second slide of the carousel.</p>
+ <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
@@ -67,20 +67,20 @@ extra_css:
<div class="container">
<div class="carousel-caption text-end">
<h1>One more for good measure.</h1>
- <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
- <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
+ <p>Some representative placeholder content for the third slide of this carousel.</p>
+ <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
- <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
+ <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
- </a>
- <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
+ </button>
+ <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
- </a>
+ </button>
</div>
@@ -95,20 +95,20 @@ extra_css:
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
<h2>Heading</h2>
- <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
- <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
+ <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
+ <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
<h2>Heading</h2>
- <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
- <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
+ <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
+ <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
<h2>Heading</h2>
- <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
- <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
+ <p>And lastly this, the third column of representative placeholder content.</p>
+ <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
@@ -120,7 +120,7 @@ extra_css:
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
- <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+ <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
</div>
<div class="col-md-5">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
@@ -132,7 +132,7 @@ extra_css:
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
- <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+ <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
</div>
<div class="col-md-5 order-md-1">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
@@ -144,7 +144,7 @@ extra_css:
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
- <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+ <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
</div>
<div class="col-md-5">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
@@ -161,6 +161,6 @@ extra_css:
<!-- FOOTER -->
<footer class="container">
<p class="float-end"><a href="#">Back to top</a></p>
- <p>&copy; 2017-{{< year >}} Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
+ <p>&copy; 2017–{{< year >}} Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer>
</main>