In the latest version of Bootstrap, the carousel has been redesigned to smoothly transition across the entire page, providing a

I am currently in the process of learning Bootstrap 5 and decided to create a simple carousel by referring to the official documentation on Bootstrap 5 Carousel. Following their instructions, I copied their code and integrated it into my template. However, upon testing, I encountered an unexpected error. Instead of displaying images within the carousel, the entire page content was being moved. Moreover, any content placed after the Carousel Div also shifted alongside the carousel movement. To illustrate this issue further, you can view my code on Codepen Demo.

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

  <link rel="stylesheet" href="icons/fontawesome.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" />
  
  <style>
    /*** Slider Box ***/
    
    .sliderbox {
      margin-left: 0;
      padding: 0;
      background-color: yellow;
    }
    
    .carousel-inner .carousel-item {
      background-color: darkkhaki;
      margin: 0;
      margin-left: 0;
      padding: 0;
    }
    
    .carousel-caption {
      bottom: 20%;
      padding-right: 80%;
      width: 25%;
      text-align: left;
    }
    
    .slider-image-heading {
      font-family: Montserrat-Bold;
      font-weight: 300;
      font-size: xx-large;
      color: white;
      letter-spacing: 3px;
    }
    
    .slider-image-text {
      margin-top: 40px;
      letter-spacing: 2px;
    }
    
    .slider-image-btn {
      background-color: #56e0cd;
    }
    
    .slider-image-btn:hover {
      background-color: black;
      color: white;
      border-color: white;
    }
    
    .carousel-control-prev-icon {
      background-color: black;
      border-radius: 50%;
    }
    
    .getrugdiv {
      background-color: #215f6a;
      width: auto;
    }
  </style>
</head>

<body>
  <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/austin-fireworks.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Some representative placeholder content for the first slide.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/taj-mahal_copy.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Some representative placeholder content for the second slide.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ibiza.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Some representative placeholder content for the third slide.</p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="visually-hidden">Previous</span>
                    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="visually-hidden">Next</span>
                    </button>
  </div>
  <div class="container-fluid getrugdiv">
    <h1>Boot Your Trip Now</h1>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
</body>

</html>
htmlcsscarouselbootstrap-5

Answer №1

Here is the solution...

After numerous attempts, I discovered that removing margin: 0; from 

.carousel-inner .carousel-item {...}
resolved the issue of white space appearing every time the slide changed.

Simply update the code as follows:

.carousel-inner .carousel-item {
  background-color: darkkhaki;
  margin-left: 0;
  padding: 0;
}

Here's the revised version for reference:

.carousel-inner .carousel-item {
  background-color: darkkhaki;
  margin-left: 0;
  padding: 0;
}

Check out the snippet below.

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3dedec5c2c5c3d0c1f1849f819f80">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

  <link rel="stylesheet" href="icons/fontawesome.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" />

  <style>
    /*** Slider Box ***/
    
    .sliderbox {
      margin-left: 0;
      padding: 0;
      background-color: yellow;
    }
    
    .carousel-inner .carousel-item {
      background-color: darkkhaki;
      margin-left: 0;
      padding: 0;
    }
    
    .carousel-caption {
      bottom: 20%;
      padding-right: 80%;
      width: 25%;
      text-align: left;
    }
    
    .slider-image-heading {
      font-family: Montserrat-Bold;
      font-weight: 300;
      font-size: xx-large;
      color: white;
      letter-spacing: 3px;
    }
    
    .slider-image-text {
      margin-top: 40px;
      letter-spacing: 2px;
    }
    
    .slider-image-btn {
      background-color: #56e0cd;
    }
    
    .slider-image-btn:hover {
      background-color: black;
      color: white;
      border-color: white;
    }
    
    .carousel-control-prev-icon {
      background-color: black;
      border-radius: 50%;
    }
    
    .getrugdiv {
      background-color: #215f6a;
      width: auto;
    }
  </style>
</head>

<body>
  <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/austin-fireworks.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Some representative placeholder content for the first slide.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/taj-mahal_copy.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Some representative placeholder content for the second slide.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ibiza.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Some representative placeholder content for the third slide.</p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="visually-hidden">Previous</span>
                    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="visually-hidden">Next</span>
                    </button>
  </div>
  <div class="container-fluid getrugdiv">
    <h1> Boot Your Trip Now</h1>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b5e455b455a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use CSS to configure the mouse wheel for horizontal scrolling

Looking to create a horizontal page layout, but when I scroll with the mouse wheel the content only moves vertically. Is there a way to enable horizontal scrolling using the mouse wheel? Does CSS have a property for this? For instance, is there something ...

htmlcssscrollmouse

Is there a way to modify the video height so that it aligns with the dimensions of the

I'm currently trying to adjust the background video to fit the parent div, but I am facing issues with adjusting its height within the media query. Any suggestions on how I can resolve this problem? HTML <div class="hero"> <video ...

htmlcss

For my Bootstrap website, it's a constant struggle to balance between having a responsive menu item and ensuring its correct visual appearance

I need help with creating a unique menu design for my website. On the desktop site, I want to display "username/password/sign in" buttons, while on the mobile responsive version I only want to show a single "sign in" option that redirects users to the sign ...

htmlcsstwitter-bootstrap

What could be causing my Bootstrap 5 tabs to not switch when clicked?

Having recently delved into the world of HTML, CSS, and Bootstrap (version 5), I am embarking on a project to sharpen my skills. The goal is to recreate a website that features a tabbed section, along with other elements. Following a tutorial, I managed t ...

tabsbootstrap-5

Why Chrome Doesn't Alter the State of li Elements

I'm unsure why, but the CSS code in this particular fiddle fails to function correctly on Chrome. On Firefox, when hovering over one of the li elements, the text becomes visible as expected, whereas this does not occur on Chrome. It seems that changin ...

htmlcssgoogle-chrome

When we typically scroll down the page, the next section should automatically bring us back to the top of the page

When we scroll down the page, the next section should automatically bring us back to the top of the page without having to use the mouse wheel. .bg1 { background-color: #C5876F; height: 1000px; } .bg2 { background-color: #7882BB; height: 1000px; } .bg3 ...

javascripthtmlcss

Step-by-step guide to adding a skew overlay to your video

I am experimenting with creating a skewed overlay on a video playing in the background at full width. Currently, the skew overlay is functioning perfectly. What if I want it to appear in the bottom-right corner instead of the top-left corner? Would I need ...

javascriptjqueryhtmlcss

HTML: Unable to align text in the center using the <div> tag

Working on a website for our Roblox group I've been attempting to center this text (and the button below), but it just doesn't look right... Check out this image Although it technically "centers", something still seems off. I've searched h ...

htmlcss

How can I create a circular Datepicker in JavaFX?

Struggling with customizing my JavaFX application using CSS. Everything was going smoothly until I encountered the Datepicker. Despite trying various approaches, none seem to be working. Is there a way to round the Datepicker just like my TextFields? Here ...

javacssjavafxjavafx-8javafx-css

Issue with page not updating after local storage change and returning to previous page

I have encountered an issue where in Firefox and Safari, the value retrieved from localstorage on the first page is not updated until I manually refresh the page after setting the localstorage value on the second page. Disabling the cache did not resolve t ...

javascripthtmllocal-storage

Accordion section appears on the webpage as it is loaded

I am currently working on implementing an accordion feature for my webpage. Everything is functioning correctly when I click the button, but there is one issue - the div opens automatically when the page loads. My goal is to have the div closed initially a ...

javascriptjqueryhtmlcssangularjs

What could be causing my dropdown links to malfunction on the desktop version?

I've been developing a responsive website and encountering an issue. In desktop view, the icon on the far right (known as "dropdown-btn") is supposed to activate a dropdown menu with contact links. However, for some unknown reason, the links are not f ...

javascripthtmlcss

Tips for creating space between two fluid divs

I'm currently facing an issue with the spacing between two child divs inside a parent div. The web page needs to be responsive for different screen widths, but the vertical space between the left and right divs is not behaving as expected. I am using ...

jquerycsspositioninghtml

Text in the middle of a button

I've been attempting to recreate the design of this "subscribe to the newsletter button". I'm struggling with achieving the white "inside border or outline" effect. Here is an example of the button ...

htmlcss

What are some ways to troubleshoot a dropdown box toggle switch in a website header?

<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Contacts <span class="caret"&g ...

htmlbootstrap-5

How can I pass an array from HTML to Node.js and subsequently store it in MongoDB?

Looking to combine the values of longitude and latitude into one array for input, then store it in the database. While there are plenty of examples on handling arrays, most of them are based on PHP. Check out the following code snippet: HTML <html> ...

javascriptjqueryhtmlnode.jsmongodb

Creating interactive elements within Bootstrap 5 Popovers: A step-by-step guide

I've been attempting to include a button inside the Popovers in Bootstrap, but so far I have not been successful. Currently, I am using Bootstrap-Popover and my goal is to place a button inside the popover. HTML <div class="col-lg-4 mb-3 ser ...

htmlbootstrap-5

What is the best way to clear the content of a contenteditable element in React?

I have a scenario where I am rendering an array of items, each with a contenteditable field. MainComponent.js import { useState } from "react"; import Item from "./Item"; import "./styles.css"; export default function MainC ...

javascripthtmlreactjs

What is the correct way to place an item within a grid layout?

My current layout is structured with a single row class and two columns using the bootstrap grid system. However, I am facing an issue where I need to add another item within that grid system, but I am struggling to position it correctly. It keeps appeari ...

htmlbootstrap-4

What is the best way to ensure the navigation bar stays at the top of the window once it has reached

I have a sample js fiddle provided here. The navigation bar is positioned right below the "Hello World" section, and the content follows beneath the nav bar. Is there a way to make the navigation bar stick to the top of the window once it reaches that poin ...

htmlcssfixednav