How to use owl carousel in bootstrap 4?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today In this Post, you will learn responsive owl carousel design with bootstrap 4.

Here, we will use owl.carousel class to make a owl carousel in bootstrap 4.

Example:

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Owl carousel with bootstrap</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <style>
        .stretch-card>.card {
            width: 100%;
            min-width: 100%
        }
        
        body {
            background-color: #f9f9fa
        }
        
        .flex {
            -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto
        }
        
        @media (max-width:991.98px) {
            .padding {
                padding: 1.5rem
            }
        }
        
        @media (max-width:767.98px) {
            .padding {
                padding: 1rem
            }
        }
        
        .padding {
            padding: 3rem
        }
        
        .owl-carousel .item {
            margin: 3px
        }
        
        .owl-carousel .item img {
            display: block;
            width: 100%;
            height: auto
        }
        
        .owl-carousel .item {
            margin: 3px
        }
        
        .owl-carousel {
            margin-bottom: 15px
        }
    </style>
</head>

<body>
    <div class="padding">
        <div class="row container-fluid">
            <div class="col-lg-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Basic carousel</h4>
                        <div class="owl-carousel">
                            <div class="item"> <img src="images/city.jpg" alt="image" /> </div>
                            <div class="item"> <img src="images/royalty.jpg" alt="image" /> </div>
                            <div class="item"> <img src="images/new-zealand.jpg" alt="image" /> </div>
                            <div class="item"> <img src="images/pexels-photo-257360.jpeg" alt="image" /> </div>
                            <div class="item"> <img src="images/sky.jpg" alt="image" /> </div>
                            <div class="item"> <img src="images/royalty.jpg" alt="image" /> </div>
                            <div class="item"> <img src="images/send-flower.jpg" alt="image" /> </div>
                            <div class="item"> <img src="images/sky.jpg" alt="image" /> </div>
                            <div class="item"> <img src="images/pexels-photo-257360.jpg" alt="image" /> </div>
                            <div class="item"> <img src="images/city.jpg" alt="image" /> </div>
                            <div class="item"> <img src="images/new-zealand.jpg" alt="image" /> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script>
        $(document).ready(function() {
            $(".owl-carousel").owlCarousel({
                autoPlay: 3000,
                items: 4,
                itemsDesktop: [1199, 3],
                itemsDesktopSmall: [979, 3],
                center: true,
                nav: true,
                loop: true,
                responsive: {
                    600: {
                        items: 4
                    }
                }
            });
        });
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
    <div class="page-content page-container" id="page-content">
</body>

</html>

Check the output of the above code example.

Bootstrap, Owl, Carousel

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts