How to wrap text around circular carousel in Bootstrap 4 ?

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 circuler 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 circuler curousel in proper way:

Below example illustrates the above approach:
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
      
    <script src=
    </script>
      
    <script src=
    </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=
                            alt="" style="width:100%;">
                    </div>
  
                    <div class="item">
                        <img src=
                            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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.