Bootstrap is popular open-source front-end framework its widely used for web development. Bootstrap is developed by Twitter and has become standard tool in the web development. It provides a set of pre-designed, responsive design components to help web developers quickly and easily create visually appealing and consistent websites applications.
I will guide you Bootstrap Carousel full width with captions in the center slider. if you want to see How to add Bootstrap to a core PHP website you can see my post. here I am explaing you some small step-by-step guide:
1. Download Bootstrap library
we need to download Bootstrap from the official Bootstrap website (https://getbootstrap.com/). we can choose to download compiled CSS and JavaScript files or use a content delivery network (CDN) for faster loading.
2. Include Bootstrap Files
After, downloaded files we need to extract the Bootstrap files. we need to Copy the bootstrap.min.css and located in the css folder to a suitable location within your project . after that we need to copy the bootstrap.min.js and jquery.min.js files located in the js folder to a suitable location in your project such as a js folder.
3. Link Bootstrap JS/CSS in HTML
in php file you need to add some custom css and head section.
<!DOCTYPE html>
<html>
<head>
<title>webdeveloperindia.in</title>
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Include Bootstrap JS (Optional, for components that require JavaScript) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<!-- custom css -->
<style type="text/css">
.carousel-control-next, .carousel-control-prev{
background: #000;
}
.carousel-indicators [data-bs-target]{
background-color: #000;
}
.learn_more{
background-color: #000;
}
</style>
<!-- custom css -->
</head>
<body>
<h3 class="text-center">This is webdeveloperindia.in website adding bootstrap slider in php page.</h3>
</body>
</html>
4. Bootstrap Carousel full width with captions in the center
below I providing you bootstrap carousel slider code.
<!-- slider code -->
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://webdeveloperindia.in/wp-content/uploads/2022/02/webdeveloperindia.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center">
<h2 class="bg-dark bg-opacity-50 py-2 px-4">First slide</h2>
<p class="bg-dark bg-opacity-50 py-2 px-4">Some representative content for the first slide.</p>
<a href="https://webdeveloperindia.in" target="_blank" class="btn btn-outline-light px-4 py-2 rounded-0 learn_more">Learn More</a>
</div>
</div>
<div class="carousel-item">
<img src="https://webdeveloperindia.in/wp-content/uploads/2022/02/webdeveloperindia.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center">
<h2 class="bg-dark bg-opacity-50 py-2 px-4">Second slide</h2>
<p class="bg-dark bg-opacity-50 py-2 px-4">Some representative content for the second slide.</p>
<a href="https://webdeveloperindia.in" target="_blank" class="btn btn-outline-light px-4 py-2 rounded-0 learn_more">Learn More</a>
</div>
</div>
<div class="carousel-item">
<img src="https://webdeveloperindia.in/wp-content/uploads/2022/02/webdeveloperindia.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center">
<h2 class="bg-dark bg-opacity-50 py-2 px-4">Third slide</h2>
<p class="bg-dark bg-opacity-50 py-2 px-4">Some representative content for the third slide.</p>
<a href="https://webdeveloperindia.in" target="_blank" class="btn btn-outline-light px-4 py-2 rounded-0 learn_more">Learn More</a>
</div>
</div>
<div class="carousel-item">
<img src="https://webdeveloperindia.in/wp-content/uploads/2022/02/webdeveloperindia.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center">
<h2 class="bg-dark bg-opacity-50 py-2 px-4">Fourth slide</h2>
<p class="bg-dark bg-opacity-50 py-2 px-4">Some representative content for the Fourth slide.</p>
<a href="https://webdeveloperindia.in" target="_blank" class="btn btn-outline-light px-4 py-2 rounded-0 learn_more">Learn More</a>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- slider code -->
complete code
<!DOCTYPE html>
<html>
<head>
<title>webdeveloperindia.in</title>
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Include Bootstrap JS (Optional, for components that require JavaScript) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<!-- custom css -->
<style type="text/css">
.carousel-control-next, .carousel-control-prev{
background: #000;
}
.carousel-indicators [data-bs-target]{
background-color: #000;
}
.learn_more{
background-color: #000;
}
</style>
<!-- custom css -->
</head>
<body>
<!-- Your PHP content here -->
<h3 class="text-center">This is webdeveloperindia.in website adding bootstrap slider in php page.</h3>
<!-- slider code -->
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://webdeveloperindia.in/wp-content/uploads/2022/02/webdeveloperindia.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center">
<h2 class="bg-dark bg-opacity-50 py-2 px-4">First slide</h2>
<p class="bg-dark bg-opacity-50 py-2 px-4">Some representative content for the first slide.</p>
<a href="https://webdeveloperindia.in" target="_blank" class="btn btn-outline-light px-4 py-2 rounded-0 learn_more">Learn More</a>
</div>
</div>
<div class="carousel-item">
<img src="https://webdeveloperindia.in/wp-content/uploads/2022/02/webdeveloperindia.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center">
<h2 class="bg-dark bg-opacity-50 py-2 px-4">Second slide</h2>
<p class="bg-dark bg-opacity-50 py-2 px-4">Some representative content for the second slide.</p>
<a href="https://webdeveloperindia.in" target="_blank" class="btn btn-outline-light px-4 py-2 rounded-0 learn_more">Learn More</a>
</div>
</div>
<div class="carousel-item">
<img src="https://webdeveloperindia.in/wp-content/uploads/2022/02/webdeveloperindia.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center">
<h2 class="bg-dark bg-opacity-50 py-2 px-4">Third slide</h2>
<p class="bg-dark bg-opacity-50 py-2 px-4">Some representative content for the third slide.</p>
<a href="https://webdeveloperindia.in" target="_blank" class="btn btn-outline-light px-4 py-2 rounded-0 learn_more">Learn More</a>
</div>
</div>
<div class="carousel-item">
<img src="https://webdeveloperindia.in/wp-content/uploads/2022/02/webdeveloperindia.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center">
<h2 class="bg-dark bg-opacity-50 py-2 px-4">Fourth slide</h2>
<p class="bg-dark bg-opacity-50 py-2 px-4">Some representative content for the Fourth slide.</p>
<a href="https://webdeveloperindia.in" target="_blank" class="btn btn-outline-light px-4 py-2 rounded-0 learn_more">Learn More</a>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- slider code -->
</body>
</html>
Slide1 –
Slide2 –
Slide3 –
Hello, Welcome to webdeveloperindia.in. I am a full-stack web developer. Email – [email protected] | Skype – azaruddin23. I have knowledge of PHP, Laravel, Magento 1/2, Codeigniter, WordPress, Joomla, Shopify, Git, Bitbuket, jQuery, Ajax, Javascript and ReactJS.