content logo

Bootstrap Sliders:

Bootstrap Slider with Static Info Box

This code can be very useful for the portfolio section or the latest news of your website. On the left side of the page there is a text with a blue background and white text on it. On the right side of the screen is a slider using thumbnails. This slider has text for each slide and this text is placed on the image. There are two arrows on the right and left sides of the slider that click on them to display other slides.

#Slider Gallery Code

#Bootstrap Slider Code

#Pure CSS Slider Code

#HTML Slider with Text Box

#Slider Text Box


<!-- This script got from www.frontendfreecode.com -->
<div class="py-5" style="background-color:#E0E0E0;" id="venue">
    <div class="container">
        <div class="row bg-primary animate-in-down">
            <div class="p-4 col-md-6 align-self-center text-color">
                <p class="m-0">Feel comfortable, and purchase items</p>
                <h2>Discover the products</h2>
                <p class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> <a href="#" class="btn mb-3 p-2 btn-light">View the gallery</a>
            </div>
            <div class="p-0 col-md-6">
                <div class="carousel slide" data-ride="carousel" id="carousel1">
                    <div class="carousel-inner" role="listbox">
                        <div class="carousel-item"> <img class="d-block img-fluid w-100" src="https://i.imgur.com/K7A78We.jpg" alt="first slide">
                            <div class="carousel-caption">
                                <h3>Lorem ipsum</h3>
                                <p>Lorem ipsum dolor sit</p>
                            </div>
                        </div>
                        <div class="carousel-item active"> <img class="d-block img-fluid w-100" src="https://i.imgur.com/c8952Iz.jpg" data-holder-rendered="true">
                            <div class="carousel-caption">
                                <h3>Lorem ipsum</h3>
                                <p>Lorem ipsum dolor sit</p>
                            </div>
                        </div>
                        <div class="carousel-item"> <img class="d-block img-fluid w-100" src="https://i.imgur.com/K7A78We.jpg" data-holder-rendered="true">
                            <div class="carousel-caption">
                                <h3>Lorem ipsum</h3>
                                <p>Lorem ipsum dolor sit</p>
                            </div>
                        </div>
                    </div> <a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Free Frontend</a>
                                                                            
.text-color {
    color: #fff
}
.carousel-item img {
    height: 400px
}
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>
<style>
.text-color {
    color: #fff
}
.carousel-item img {
    height: 400px
}
</style>

</head>
<body>
<div class="py-5" style="background-color:#E0E0E0;" id="venue">
    <div class="container">
        <div class="row bg-primary animate-in-down">
            <div class="p-4 col-md-6 align-self-center text-color">
                <p class="m-0">Feel comfortable, and purchase items</p>
                <h2>Discover the products</h2>
                <p class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> <a href="#" class="btn mb-3 p-2 btn-light">View the gallery</a>
            </div>
            <div class="p-0 col-md-6">
                <div class="carousel slide" data-ride="carousel" id="carousel1">
                    <div class="carousel-inner" role="listbox">
                        <div class="carousel-item"> <img class="d-block img-fluid w-100" src="https://i.imgur.com/K7A78We.jpg" alt="first slide">
                            <div class="carousel-caption">
                                <h3>Lorem ipsum</h3>
                                <p>Lorem ipsum dolor sit</p>
                            </div>
                        </div>
                        <div class="carousel-item active"> <img class="d-block img-fluid w-100" src="https://i.imgur.com/c8952Iz.jpg" data-holder-rendered="true">
                            <div class="carousel-caption">
                                <h3>Lorem ipsum</h3>
                                <p>Lorem ipsum dolor sit</p>
                            </div>
                        </div>
                        <div class="carousel-item"> <img class="d-block img-fluid w-100" src="https://i.imgur.com/K7A78We.jpg" data-holder-rendered="true">
                            <div class="carousel-caption">
                                <h3>Lorem ipsum</h3>
                                <p>Lorem ipsum dolor sit</p>
                            </div>
                        </div>
                    </div> <a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview