Categories
- Accordion (17)
- Common Mistake (19)
- English Writing (275)
- Grammar (55)
- Hover Effects (5)
- Login (14)
- Myanmar Grade 10 (19)
- Other Ways to Say (31)
- Shoping Carts (10)
- sidebar (6)
- Slider (9)
- Speaking (42)
- Synonyms (37)
- Tables (7)
- Transition Words (1)

HTML
<!-- Demo header-->
<section class="py-5 text-center">
<div class="container py-4 text-white">
<header>
<h1 class="display-4">Bootstrap carousel quotes</h1>
<p class="font-italic mb-1">Create an elegant quote carousel using default Bootstrap 4 carousel component.</p>
<p class="font-italic">Snippet by
<a class="text-white" href="https://bootstrapious.com/">
<u>Bootstrapious</u>
</a>
</p>
</header>
</div>
</section>
<section class="pb-5">
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-8 mx-auto">
<div class="p-5 bg-white shadow rounded">
<!-- Bootstrap carousel-->
<div class="carousel slide" id="carouselExampleIndicators" data-ride="carousel">
<!-- Bootstrap carousel indicators [nav] -->
<ol class="carousel-indicators mb-0">
<li class="active" data-target="#carouselExampleIndicators" data-slide-to="0"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!-- Bootstrap inner [slides]-->
<div class="carousel-inner px-5 pb-4">
<!-- Carousel slide-->
<div class="carousel-item active">
<div class="media"><img class="rounded-circle img-thumbnail" src="https://bootstrapious.com/i/snippets/sn-slider-quote/avatar-1.jpg" alt="" width="75">
<div class="media-body ml-3">
<blockquote class="blockquote border-0 p-0">
<p class="font-italic lead"> <i class="fa fa-quote-left mr-3 text-success"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<footer class="blockquote-footer">Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
</div>
<!-- Carousel slide-->
<div class="carousel-item">
<div class="media"><img class="rounded-circle img-thumbnail" src="https://bootstrapious.com/i/snippets/sn-slider-quote/avatar-3.jpg" alt="" width="75">
<div class="media-body ml-3">
<blockquote class="blockquote border-0 p-0">
<p class="font-italic lead"> <i class="fa fa-quote-left mr-3 text-success"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<footer class="blockquote-footer">Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
</div>
<!-- Carousel slide-->
<div class="carousel-item">
<div class="media"><img class="rounded-circle img-thumbnail" src="https://bootstrapious.com/i/snippets/sn-slider-quote/avatar-2.jpg" alt="" width="75">
<div class="media-body ml-3">
<blockquote class="blockquote border-0 p-0">
<p class="font-italic lead"> <i class="fa fa-quote-left mr-3 text-success"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<footer class="blockquote-footer">Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
<!-- Bootstrap controls [dots]-->
<a class="carousel-control-prev width-auto" href="#carouselExampleIndicators" role="button" data-slide="prev">
<i class="fa fa-angle-left text-dark text-lg"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next width-auto" href="#carouselExampleIndicators" role="button" data-slide="next">
<i class="fa fa-angle-right text-dark text-lg"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
==========================================
* FOR DEMO PURPOSE
* ==========================================
*
*/
body {
background: linear-gradient(to left, #51cc48, #39df9c);
min-height: 100vh;
}
.width-auto {
width: auto;
}
.text-lg {
font-size: 2rem;
}
.carousel-indicators li {
border: none;
background: #ccc;
}
.carousel-indicators li.active {
background: #28a745;
}
Sources
bootstrap.min.css
jquery-3.3.1.slim.min.js
bootstrap.bundle.min.js
font-awesome.min.css
Tag : HTML+Css
Leave a Reply