Bootstrap Friendly - Try it code with live demo

Go back to tutorial

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

body {
            color: #555555;
            font-family: 'Montserrat', sans-serif;
        }

html {
            scroll-behavior: smooth;
        }

a {
            text-decoration: none;
            color: #232323;
        }

a:hover {
            text-decoration: none;
            color: #232323;
        }

.icons_cont {
            text-align: center;
        }

.round_icon_img {
            border-radius: 50%;
            box-shadow: 0 0 6px rgba(0, 0, 0, .25);
            background: #fff;
            width: 100px !important;
            height: 100px;
            padding: 16px;
            margin: 15px auto !important;
        }

.round_icon_img:hover {
            background: #e0571d;
        }

.round_icon_img:hover i {
            color: #fff;
        }

.round_icon_img i {
            font-size: 51px;
            color: #e0571d;
            line-height: 66px;
        }

/* ath_carousel_se_01 */
        .ath_carousel_se_01 .owl-theme .owl-dots {
            text-align: center;
            margin-top: 18px;
        }

.ath_carousel_se_01 .owl-theme .owl-dots .owl-dot {
            display: inline-block;
        }

.ath_carousel_se_01 .owl-theme .owl-dots .owl-dot span {
            width: 12px;
            height: 12px;
            margin: 5px 5px;
            background: #ff5e14;
            border: 0px solid #ff5e14;
            display: block;
            transition: all 0.6s ease-in-out;
            cursor: pointer;
            border-radius: 50%;
        }

.ath_carousel_se_01 .owl-theme .owl-dots .owl-dot:hover span {
            color: #fff;
            background: #ff5e14;
            /*  border: 5px double;*/
            padding: 5px;
            border-radius: 50%;
        }

.ath_carousel_se_01 .owl-theme .owl-dots .owl-dot.active span {
            color: #fff;
            background: #ff5e14;
            /* border: 5px double;*/
            opacity: 0.8;
            padding: 5px;
            border-radius: 50%;
            background: #ff5e14;

}

.ath_carousel_se_01 .owl-carousel .owl-nav button.owl-next {
            position: absolute;
            top: 42%;
            right: -20px;
            padding: 0px 15px 6px 15px !important;
            background: rgb(255, 255, 255);
            display: inline-block;
            transform: translateY(-50%);
            border-radius: 50%;
            font-size: 35px;
            line-height: 35px;
            color: #e0571d;
            box-shadow: 0 0 8px rgba(0, 0, 0, .25);
        }

.ath_carousel_se_01 .owl-carousel .owl-nav button.owl-next:hover {
            background: #ff5e14;
            color: #fff;
        }

.ath_carousel_se_01 .owl-carousel .owl-nav button.owl-prev {
            position: absolute;
            top: 42%;
            left: -20px;
            padding: 0px 15px 6px 15px !important;
            background: rgb(255, 255, 255);
            display: inline-block;
            transform: translateY(-50%);
            border-radius: 50%;
            font-size: 35px;
            line-height: 35px;
            color: #e0571d;
            box-shadow: 0 0 8px rgba(0, 0, 0, .25);
        }

.ath_carousel_se_01 .owl-carousel .owl-nav button.owl-prev:hover {
            background: #ff5e14;
            color: #fff;
        }

.ath_carousel_se_01 .owl-arrow .owl-nav {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 1.8rem;
        }

.ath_carousel_se_01 .owl-arrow .owl-nav .owl-prev,
        .ath_carousel_se_01 .owl-arrow .owl-nav .owl-next {
            display: inline-block;
            transition: all 0.6s ease-in-out;
            color: #000000;
        }

.ath_carousel_se_01 .main_services {
            position: relative;
            margin: 30px 10px 40px 10px;
            padding: 40px 15px 32px 15px;
            overflow: hidden;
            text-align: center;
            border: 1px solid transparent;
            border-radius: 8px 8px;
            /* box-shadow: 12px 14px 0 #ececec; */
            box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, .2);
            min-height: 348px;
        }

.ath_carousel_se_01 .main_services:hover {
            border: 1px solid #ededed;
            box-shadow: none;
        }

@media only screen and (max-width: 768px) {
            .ath_carousel_se_01 .owl-carousel .owl-nav button.owl-prev {
                top: 42%;
                left: 0px;

}

.ath_carousel_se_01 .owl-carousel .owl-nav button.owl-next {
                top: 42%;
                right: 0px;

}
        }
        </style>
    </head>

<div class="col-md-12 px-0  pt-5">
                        <div class="col-sm-12 text-center">
                            <h2>Our services</h2>
                            <p class="m-0 ">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
                        </div>
                        <div class="col-md-12 px-0 p-t-30 ">
                            <div class="owl-carousel ath_carousel_se_01_carousel owl-theme">
                                
                                <div class="item">
                                    <div class="col-md-12  ">
                                        <div class="main_services text-center">
                                            <a href="#">
                                                <div class="round_icon_img">
                                                    <i class="fas fa-camera"></i>
                                                </div>
                                                <h3 class="mt-3"> Lorem ipsum dolor sit </h3>
                                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
                                                    vitae illum esse incidunt impedit consequuntur veniam. </p>
                                            </a>
                                        </div>
                                    </div>
                                </div>

<div class="item">
                                    <div class="col-md-12 ">
                                        <div class="main_services text-center">
                                            <a href="#">
                                                <div class="round_icon_img">
                                                    <i class="fas fa-mobile"></i>

</div>
                                                <h3 class="mt-3"> Lorem ipsum dolor sit </h3>
                                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
                                                    vitae illum esse incidunt impedit consequuntur veniam. </p>
                                            </a>
                                        </div>
                                    </div>
                                </div>

<div class="item">
                                    <div class="col-md-12 ">
                                        <div class="main_services text-center">
                                            <a href="#">
                                                <div class="round_icon_img">
                                                    <i class="fas fa-laptop"></i>
                                                </div>
                                                <h3 class="mt-3"> Lorem ipsum dolor sit </h3>
                                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
                                                    vitae illum esse incidunt impedit consequuntur veniam. </p>
                                            </a>
                                        </div>
                                    </div>
                                </div>

<div class="item">
                                    <div class="col-md-12 ">
                                        <div class="main_services text-center">
                                            <a href="#">
                                                <div class="round_icon_img">
                                                    <i class="fas fa-mobile"></i>
                                                </div>
                                                <h3 class="mt-3"> Lorem ipsum dolor sit </h3>
                                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
                                                    vitae illum esse incidunt impedit consequuntur veniam. </p>
                                            </a>
                                        </div>
                                    </div>
                                </div>

<div class="item">
                                    <div class="col-md-12 ">
                                        <div class="main_services text-center">
                                            <a href="#">
                                                <div class="round_icon_img">
                                                    <i class="fas fa-tv"></i>
                                                </div>
                                                <h3 class="mt-3"> Lorem ipsum dolor sit </h3>
                                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
                                                    vitae illum esse incidunt impedit consequuntur veniam. </p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

</div>
            </div>
        </div>
    </section>
        <script>
            $(document).ready(function () {
            $('.ath_carousel_se_01_carousel').owlCarousel({
                items: 3,
                nav: true,
                loop: true,

mouseDrag: true,
                responsiveClass: true,
                /*navText : ["<i class='fas fa-long-arrow-alt-left'></i>","<i class='fas fa-long-arrow-alt-right'></i>"],*/
                responsive: {
                    0: {
                        items: 1
                    },
                    480: {
                        items: 1
                    },
                    767: {
                        items: 2
                    },
                    992: {
                        items: 3
                    },
                    1200: {
                        items: 4
                    }
                }
            });

});
        </script>
    </body>

</html>

xxxxxxxxxx
 
<!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.0">
        <title>Try it your self</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
​
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
        integrity="sha512-rqQltXRuHxtPWhktpAZxLHUVJ3Eombn3hvk9PHjV/N5DMUYnzKPC1i3ub0mEXgFzsaZNeJcoE0YHq0j/GFsdGg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"
        integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
​
    <link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
​
    <!-- <link rel="stylesheet" type="text/css" href="assets/css/style.css"> -->
​
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"
        integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
        integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&family=Rajdhani:wght@300;400;600;700&display=swap');
​
​
        body {
            color: #555555;
            font-family: 'Montserrat', sans-serif;
        }
​
        html {
            scroll-behavior: smooth;
        }
​
        a {
            text-decoration: none;
            color: #232323;
        }
​
        a:hover {
            text-decoration: none;