How to Design Half-Page Carousel in Bootstrap ? - GeeksforGeeks

25 Nov, 2021
It can be included in your webpage using “bootstrap.js” or “bootstrap.min.js”. Carousels are not supported properly in Internet Explorer, this is because they use CSS3 transitions and animations to achieve the slide effect. Bootstrap Carousel is image slide show for your webpage to make it look more attractive. But the normal Bootstrap Carousel took the whole webpage if the used image dimensions are huge, there is one more problem in Bootstrap Carousel, that it will zoom in when the page will get a bigger screen. To handle this kind of situation, here in this article, we will design a Bootstrap Carousel that will take only half of the page.Below example illustrates theabove approach:Example: In this example, we will change the value of three Classes CSS property those are carousel-inner, item.active and item img. It will fixed the height of the carousel for the page. 
html
<!DOCTYPE html><html> <head>    <title>Bootstrap Example</title>    <meta charset="utf-8">    <meta name="viewport"        content="width=device-width, initial-scale=1">    <link rel="stylesheet"        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"        crossorigin="anonymous">    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"            crossorigin="anonymous">    </script>     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"            crossorigin="anonymous">    </script>    <style>        article {            margin: 15px;        }        h1 {            color: green;        }        .carousel-inner {            height: 310px;        }                 .item.active {            height: 310px!important;        }                 .item img {            object-fit: cover;            height: 100%!important;        }    </style></head> <body>     <div class="container-fluid">        <div id="carousel1"            class="carousel slide carousel-fade"            data-ride="carousel" style="height:50vh">                     <!--Indicators-->            <ol class="carousel-indicators">                <li data-target="#carousel1"                    data-slide-to="0"                    class="active"></li>                <li data-target="#carousel1"                    data-slide-to="1"></li>                <li data-target="#carousel1"                    data-slide-to="2"></li>            </ol>                 <!--Slides-->            <div class="carousel-inner" role="listbox">                <div class="carousel-item active">                    <div class="view">                        <img src="https://www.geeksforgeeks.org/wp-content/uploads/html.png"                            alt="First slide">                        <div class="mask rgba-black-light"></div>                    </div>                </div>                <div class="carousel-item">                                     <!-- Slideer 1 -->                    <div class="view">                        <img src="https://www.geeksforgeeks.org/wp-content/uploads/CSS.png"                            alt="Second slide">                        <div class="mask rgba-black-strong"></div>                    </div>                </div>                <div class="carousel-item">                                     <!-- Slideer 2 -->                    <div class="view">                        <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190531150437/Bootstrap_image.png"                            alt="Third slide">                        <div class="mask rgba-black-slight"></div>                    </div>                </div>            </div>                     <!-- Slideer 3 -->            <a class="carousel-control-prev"            href="#carousel1" role="button"            data-slide="prev">                <span class="carousel-control-prev-icon"                    aria-hidden="true"></span>                <span class="sr-only">Previous</span>            </a>            <a class="carousel-control-next"            href="#carousel1" role="button"            data-slide="next">                <span class="carousel-control-next-icon"                    aria-hidden="true"></span>                <span class="sr-only">Next</span>            </a>        </div>    </div>    <article>        <h1>GeekesforGeeks</h1>        <b>A Computer Science Portal for Geeks</b>    </article></body> </html>                               
Output:  
Supported Browser:
Google Chrome
Microsoft Edge
Firefox
Opera
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
ysachin2314
varshagumber28
Bootstrap-Misc
CSS-Misc
HTML-Misc
Picked
Bootstrap
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form