How to wrap text around circular carousel in Bootstrap 4 ? - GeeksforGeeks

28 Apr, 2021
Wrapping up a circular carousel is quite hectic compare to wrapping up a circular image or any shape of the image. In this article first, we have to create a carousel to make that circular, then we can use the text to wrap the carousel. First, you have to create Bootstrap Carousel. To make that carousel circular you can use CSS border-radius property. Then write down your wrapping text and use the CSS Circle() function on the main div. This will wrap your circular carousel in proper way:Below example illustrates the above approach: Example:  
html
<!DOCTYPE html><html lang="en"> <head>    <title>        How to wrap text around circular        carousel in Bootstrap 4 ?    </title>         <meta charset="utf-8">    <meta name="viewport"        content="width=device-width, initial-scale=1">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </script>     <style>        h1{            color: green;        }        .container {            margin: 15px 10px 0px;            width: 200px;            height: 200px;            float: left;            shape-outside: circle();        }        .carousel {            border-radius: 50% ;            overflow: hidden;        }        .text {            font-size: 18px;            text-align: justify;            margin: 0px 15px;        }    </style></head> <body>    <center>        <h1>GeeksforGeeks</h1>                 <b>            A Computer Science Portal            for Geeks        </b>                 <div class="container">            <div id="myCarousel"                class="carousel slide"                data-ride="carousel">                         <!-- Indicators -->                <ol class="carousel-indicators">                    <li data-target="#myCarousel"                        data-slide-to="0" class="active"></li>                    <li data-target="#myCarousel"                        data-slide-to="1"></li>                </ol>                 <!-- Wrapper for slides -->                <div class="carousel-inner">                    <div class="item active">                        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200120171114/logo10.png"                            alt="" style="width:100%;">                    </div>                     <div class="item">                        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200120152724/gfg_icon.png"                            alt="" style="width:100%;">                    </div>                </div>                                 <!-- Left and right controls -->                <a class="left carousel-control"                        href="#myCarousel" >                </a>                                 <a class="right carousel-control"                        href="#myCarousel" >                </a>            </div>        </div>        <div class="text">            <b>                How many times were you frustrated while                looking out for a good collection of                programming/ algorithm/ interview questions?                What did you expect and what did you get?                This portal has been created to provide well                written, well thought and well explained                solutions for selected questions. An IIT                Roorkee alumnus and founder of GeeksforGeeks.                He loves to solve programming problems in                most efficient ways. Apart from GeeksforGeeks,                he has worked with DE Shaw and Co. as a                software developer and JIIT Noida as an                assistant professor. It is a good platform                to learn programming. It is an educational                website. Prepare for the Recruitment drive                of product based companies like Microsoft,                Amazon, Adobe etc with a free online                placement preparation course.            </b>        </div>    <center></body> </html>
Output:  
 
arorakashish0911
Bootstrap-4
Bootstrap-Misc
CSS-Misc
HTML-Misc
Picked
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to change the background color of the active nav-item?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills