Getting Started
Introduction Source and CreditsFoundation
Components
Alerts Badge Breadcrumb Buttons Button group Card Carousel Collapse Dropdowns Forms Jumbotron List group Media object Modal Navigations Pagination PopoversProgress Scrollspy Spinners Tooltips
Section
Pages
Carousel With Controls
Create Slider
On Designcollection
This lushly landscaped, two-acre woodland park lies at the heart of
the Connell Corporate Park.
Create Slider
On Designcollection
This lushly landscaped, two-acre woodland park lies at the heart of
the Connell Corporate Park.
Create Slider
On Designcollection
This lushly landscaped, two-acre woodland park lies at the heart of
the Connell Corporate Park.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/s-1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h2 class="text-white">Create Slider <br>On Designcollection</h2>
<p class="text-white text-center mx-5 my-5">This lushly landscaped, two-acre woodland park lies at the heart of<br> the Connell Corporate Park.</p>
<button type="button" class="btn btn-primary btn-lg mr-2 ml-2">Started</button>
<button type="button" class="btn btn-success btn-lg mr-2 ml-2">By Now</button>
</div>
</div>
<div class="carousel-item">
<img src="images/s-2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h2 class="text-white">Create Slider <br>On Designcollection</h2>
<p class="text-white text-center mx-5 my-5">This lushly landscaped, two-acre woodland park lies at the heart of<br> the Connell Corporate Park.</p>
<button type="button" class="btn btn-primary btn-lg mr-2 ml-2">Started</button>
<button type="button" class="btn btn-success btn-lg mr-2 ml-2">By Now</button>
</div>
</div>
<div class="carousel-item">
<img src="images/s-3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h2 class="text-white">Create Slider <br>On Designcollection</h2>
<p class="text-white text-center mx-5 my-5">This lushly landscaped, two-acre woodland park lies at the heart of<br> the Connell Corporate Park.</p>
<button type="button" class="btn btn-primary btn-lg mr-2 ml-2">Started</button>
<button type="button" class="btn btn-success btn-lg mr-2 ml-2">By Now</button>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="left-indicator"><i class="fas fa-arrow-left"></i></span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="left-indicator"><i class="fas fa-arrow-right"></i></span>
</a>
</div>
Carousel With Indicators
Create Slider
On Designcollection
This lushly landscaped, two-acre woodland park lies at the heart of
the Connell Corporate Park.
Create Slider
On Designcollection
This lushly landscaped, two-acre woodland park lies at the heart of
the Connell Corporate Park.
Create Slider
On Designcollection
This lushly landscaped, two-acre woodland park lies at the heart of
the Connell Corporate Park.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/s-1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h2 class="text-white">Create Slider <br>On Designcollection</h2>
<p class="text-white text-center mx-5 my-5">This lushly landscaped, two-acre woodland park lies at the heart of<br> the Connell Corporate Park.</p>
<button type="button" class="btn btn-primary btn-lg mr-2 ml-2">Started</button>
<button type="button" class="btn btn-success btn-lg mr-2 ml-2">By Now</button>
</div>
</div>
<div class="carousel-item">
<img src="images/s-2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h2 class="text-white">Create Slider <br>On Designcollection</h2>
<p class="text-white text-center mx-5 my-5">This lushly landscaped, two-acre woodland park lies at the heart of<br> the Connell Corporate Park.</p>
<button type="button" class="btn btn-primary btn-lg mr-2 ml-2">Started</button>
<button type="button" class="btn btn-success btn-lg mr-2 ml-2">By Now</button>
</div>
</div>
<div class="carousel-item">
<img src="images/s-3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h2 class="text-white">Create Slider <br>On Designcollection</h2>
<p class="text-white text-center mx-5 my-5">This lushly landscaped, two-acre woodland park lies at the heart of<br> the Connell Corporate Park.</p>
<button type="button" class="btn btn-primary btn-lg mr-2 ml-2">Started</button>
<button type="button" class="btn btn-success btn-lg mr-2 ml-2">By Now</button>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="left-indicator"><i class="fas fa-arrow-left"></i></span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="left-indicator"><i class="fas fa-arrow-right"></i></span>
</a>
</div>
Carousel With Captions
Create Slider
On Designcollection
This lushly landscaped, two-acre woodland park lies at the heart of
the Connell Corporate Park.
Create Slider
On Designcollection
This lushly landscaped, two-acre woodland park lies at the heart of
the Connell Corporate Park.
Create Slider
On Designcollection
This lushly landscaped, two-acre woodland park lies at the heart of
the Connell Corporate Park.
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/s-1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h2 class="text-white">Create Slider <br>On Designcollection</h2>
<p class="text-white text-center mx-5 my-5">This lushly landscaped, two-acre woodland park lies at the heart of<br> the Connell Corporate Park.</p>
<button type="button" class="btn btn-primary btn-lg mr-2 ml-2">Started</button>
<button type="button" class="btn btn-success btn-lg mr-2 ml-2">By Now</button>
</div>
</div>
<div class="carousel-item">
<img src="images/s-2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h2 class="text-white">Create Slider <br>On Designcollection</h2>
<p class="text-white text-center mx-5 my-5">This lushly landscaped, two-acre woodland park lies at the heart of<br> the Connell Corporate Park.</p>
<button type="button" class="btn btn-primary btn-lg mr-2 ml-2">Started</button>
<button type="button" class="btn btn-success btn-lg mr-2 ml-2">By Now</button>
</div>
</div>
<div class="carousel-item">
<img src="images/s-3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h2 class="text-white">Create Slider <br>On Designcollection</h2>
<p class="text-white text-center mx-5 my-5">This lushly landscaped, two-acre woodland park lies at the heart of<br> the Connell Corporate Park.</p>
<button type="button" class="btn btn-primary btn-lg mr-2 ml-2">Started</button>
<button type="button" class="btn btn-success btn-lg mr-2 ml-2">By Now</button>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="left-indicator"><i class="fas fa-arrow-left"></i></span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="left-indicator"><i class="fas fa-arrow-right"></i></span>
</a>
</div>
Crossfade
Create Slider
On Designcollection
This lushly landscaped, two-acre woodland park lies at the heart of
the Connell Corporate Park.
Create Slider
On Designcollection
This lushly landscaped, two-acre woodland park lies at the heart of
the Connell Corporate Park.
Create Slider
On Designcollection
This lushly landscaped, two-acre woodland park lies at the heart of
the Connell Corporate Park.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/s-1.jpg" class="d-block w-100" alt="...">
<!--// ======== Slider Content Begin ========= //-->
<div class="carousel-caption d-none d-md-block">
<h2 class="text-white">Create Slider <br>On Designcollection</h2>
<p class="text-white text-center mx-5 my-5">This lushly landscaped, two-acre woodland park lies at the heart of<br> the Connell Corporate Park.</p>
<button type="button" class="btn btn-primary btn-lg mr-2 ml-2">Started</button>
<button type="button" class="btn btn-success btn-lg mr-2 ml-2">By Now</button>
</div>
<!--// ======== Slider Content End ========= //-->
</div>
<div class="carousel-item">
<img src="images/s-2.jpg" class="d-block w-100" alt="...">
<!--// ======== Slider Content Begin ========= //-->
<div class="carousel-caption d-none d-md-block">
<h2 class="text-white">Create Slider <br>On Designcollection</h2>
<p class="text-white text-center mx-5 my-5">This lushly landscaped, two-acre woodland park lies at the heart of<br> the Connell Corporate Park.</p>
<button type="button" class="btn btn-primary btn-lg mr-2 ml-2">Started</button>
<button type="button" class="btn btn-success btn-lg mr-2 ml-2">By Now</button>
</div>
<!--// ======== Slider Content End ========= //-->
</div>
<div class="carousel-item">
<img src="images/s-3.jpg" class="d-block w-100" alt="...">
<!--// ======== Slider Content Begin ========= //-->
<div class="carousel-caption d-none d-md-block">
<h2 class="text-white">Create Slider <br>On Designcollection</h2>
<p class="text-white text-center mx-5 my-5">This lushly landscaped, two-acre woodland park lies at the heart of<br> the Connell Corporate Park.</p>
<button type="button" class="btn btn-primary btn-lg mr-2 ml-2">Started</button>
<button type="button" class="btn btn-success btn-lg mr-2 ml-2">By Now</button>
</div>
<!--// ======== Slider Content End ========= //-->
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="left-indicator"><i class="fas fa-arrow-left"></i></span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="left-indicator"><i class="fas fa-arrow-right"></i></span>
</a>
</div>