How to wrap text around circular carousel in Bootstrap 4 ?

How to wrap text around circular carousel in Bootstrap 4 ?

Last Updated : 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:

How to wrap text around circular carousel in Bootstrap 4 ?

K

kartik arora 2

Improve

Article Tags :

Practice Tags :

Similar Reads

How to Wrap Text Around Image in Bootstrap ?

To wrap text around an image in Bootstrap 5, you can apply the 'float' utility classes along with the 'img-fluid' class for responsive images. This technique involves floating the image to the left or right and creating margins to allow the text to wrap around it. ApproachThe code uses Bootstrap 5 c

How to fade in and fade out background with bootstrap text carousel ?

In this article, we will show you how to fade in and fade out the background with a bootstrap text carousel. Carousel is a slideshow, and it is used for cycling components like images or text. Approach: To create a fade-in and fade-out background with a bootstrap text carousel we have followed some

How to Create a Carousel in Bootstrap ?

Carousels are commonly used to showcase multiple images or content dynamically and interactively. It provides a convenient way to implement carousels with built-in functionality and styles. Approach:Create an HTML document with Bootstrap 5 library classes for styling.Create a container with a center

How to Align Text in Bootstrap Column ?

In Bootstrap Framework, we can align the text within the columns using various utility classes. To align text within a Bootstrap column, use the built-in utility classes such as text-start, text-center, and text-end for the left, center, and right alignment, respectively. Simply apply the desired cl

How to get circular buttons in bootstrap 4 ?

It is an open source toolkit for developing with the HTML, CSS, and JS. It includes several types of buttons, styles, fonts each of them serving its own semantic purpose which is predefined, with a few extras thrown for more control. You can use Bootstrap custom button styles to create your buttons