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

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

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.

Related Posts