Is the Bootstrap carousel floating outside the document's natural order?

As I work on building a landing page for a new startup, I encountered an issue with the layout. I am using a carousel in the "hero section," and everything seemed to be working fine until I attempted to add the next section. To my surprise, the next section appeared BEHIND the hero section instead of below it. I have tried analyzing my code and making adjustments using Chrome Dev Tools, but I am unable to pinpoint the problem. Can someone offer any assistance?

I have attempted changing the position of all items in the carousel to static and setting their display to block to see if it resolves the issue, but unfortunately, it did not.

CODE:

HTML

<section id='hero-section'>
    <div class="hero-carousel carousel slide" data-ride="carousel">
      <div class="carousel-item active" data-interval="8000">
        <img class="d-block w-100" src="includes/media/images/slide1.png" alt="">
        <div class="carousel-caption d-none d-md-block">
          <h2>Achieve your dreams</h2>
          <p>Axelera payroll loans are easy to get and repay</p>
          <button class='cta-button btn btn-md' type="button" name="button">Apply for your loan</button>
        </div>
      </div>
      <div class="carousel-item" data-interval="8000">
        <img class="d-block w-100" src="includes/media/images/slide2.png" alt="">
      </div>
      <div class="carousel-item" data-interval="8000">
        <img class="d-block w-100" src="includes/media/images/slide3.png" alt="">
      </div>
    </div>
  </section>

<section>
    <h2>Test</h2>
</section>

CSS

.carousel-item img{
height: 500px;
object-fit: cover;
}

The next section (with the "test" h2 tag) should appear below the hero section, not behind it.

Answer №1

If you're looking to make sure your Bootstrap layout is clean, simply include the clearfix class.

.carousel-item img{
height: 500px;
object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="clearfix" id='hero-section'>
    <div class="hero-carousel carousel slide" data-ride="carousel">
      <div class="carousel-item active" data-interval="8000">
        <img class="d-block w-100" src="https://via.placeholder.com/960x500" alt="">
        <div class="carousel-caption d-none d-md-block">
          <h2>Achieve Your Dreams</h2>
          <p>Axelera payroll loans are easy to obtain and repay</p>
          <button class='cta-button btn btn-md' type="button" name="button">Apply for your loan</button>
        </div>
      </div>
      <div class="carousel-item" data-interval="8000">
        <img class="d-block w-100" src="https://via.placeholder.com/960x500" alt="">
      </div>
      <div class="carousel-item" data-interval="8000">
        <img class="d-block w-100" src="https://via.placeholder.com/960x500" alt="">
      </div>
    </div>
  </section>

<section class="clearfix">
    <h2>Test</h2>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

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

What are some ways to connect my CSS styles without encountering a MIME error?

Working on a Nodejs - Express - Vanillajs project, I encountered an issue when testing my routes. The index page failed to load CSS, displaying the following error message: Refused to apply style from 'http://localhost:3000/public/css/bootstrap.min. ...

Link the html button with the php code in order to perform a specific action

I am looking to link my HTML code with PHP in order to achieve the following functionality: 1. Create a cookie that prevents a specific message from being displayed again when a certain button is clicked. 2. Hide messages using CSS after the button clic ...

Using Selenium WebDriver to locate elements by their XPath within a WebElement

I am facing an issue with locating an element in my code using the following snippet: elements = driver.find_elements_by_xpath("//div[@class='Display']") After successfully finding the elements, I want to access the second "Display" element and ...

Locating elements with CSS Selector in Selenium - A complete guide

Currently, my code is set up to access a website and click on each row in the table which then opens a new window. My goal is to extract one specific piece of information from this new window, but I am struggling to utilize CSS selectors to retrieve the f ...

Identifying the presence of a CSS class in order to add styling to a different element

Looking for help with CSS: /* targeting laptops */ @media only screen and (pointer:fine) and (max-device-height: 620px) { #root:has(.projects) ~ body { overflow: auto; /* allow scrolling */ } } My desired outcome is to set overflow: auto o ...

The functionality of cropping is not supported within a Bootstrap modal

I have been using ngimgcrop successfully to crop images within my application. However, I encountered an issue when trying to display the cropped images inside a uibmodal (AngularJS modal). Despite trying various solutions, such as using ng-init, I was una ...

Ways to incorporate encoded HTML text into string literals

When attempting to insert a HTML encoded special character within a string literal, I am encountering an issue where it does not display as intended in the final document. The approach I am taking is as follows: const head = { title: `${ApplicationName} ...

Ways to Activate a Modal Using a Hyperlink

One of the features on my Next.js page is a modal that can be triggered by clicking a button: <button type='button' onClick={() => setOpen(true)}> The modal component looks like this: <Modal id='demo' show={isOpen} on ...

Extracting Job Titles from LinkedIn Profiles

Currently, my code is designed to search for job titles on LinkedIn (e.g. Cyber Analyst) and gather all the links related to these job postings/pages. The goal of the code is to compile these links into a list and then iterate through them to print out th ...

Layering one canvas on top of another

Here is the code I am working with. With a JavaScript library, I can draw on the first canvas and then merge it onto the second canvas. My question is, how can I make the first canvas stay in place or float, regardless of where I scroll on the second canv ...

Angular fails to function properly post rendering the body using ajax

I recently created a HTML page using AJAX, and here is the code snippet: <div class="contents" id="subContents" ng-app=""> @RenderBody() @RenderSection("scripts", required: false) </div> <script src="http://ajax.googleapis.com/ajax/ ...

Discover the following input

Can someone assist me? I am looking for a way to automatically move the cursor to the next input field after filling out the first one. Here is the code snippet I have been working with: jQuery: $('input').keyup(function(){ if($(this).val().m ...

Issue with dynamically adjusting flex box width using JavaScript

Currently, I am developing a user interface that heavily relies on flexbox. The layout consists of a content area and a sidebar that can be toggled by adding or removing a specific class. Whenever the sidebar is toggled, the content area needs to be manua ...

If you encounter a 1px space issue when resizing the viewport and using display: table; with fixed width cell

In our responsive projects, we are facing an issue with the display property set to table. Our table is wrapped within a container and set to 100% width, with one of the cells having a fixed pixel width. As we resize the browser window, we notice that the ...

How to make text transition between colors using CSS or jQuery

I'm looking to make a text blink with alternating colors: For instance: blinking a text with white, green, white, green, white, green I am open to either using jQuery or CSS. ...

Utilize AJAX to dynamically refresh the page without having to reload it, enabling the use of both POST and GET methods

In order to avoid reloading the page when refreshing, I am utilizing Ajax for this particular 3-sided content along with JavaScript. Here is the code: Content: <ul id="nav"> <li><a href="ajax_adat.php?id=8&epul=0">Data</a>< ...

Why Electron is refusing to open a JSON file

Currently, I am attempting to populate filenames using JSON for the onclick='shell.openItem('filename') function. While the console.log(data[i].url) correctly displays the kmz files for each button, I encounter an error when clicking a butto ...

Retrieve hyperlinks from webpage

Currently, I am attempting to extract all Netflix movie/show links from this source , along with their respective country names. For example, I aim to retrieve information such as , USA, etc. Despite my efforts so far, the current code retrieves all links ...

Incorporate _verify-increasing($grid-breakpoints, "$grid-breakpoints")

** Bootstrap v5.0.0-beta1** I am looking to modify breakpoints: Files: https://pastebin.com/WZcb70YE custom.scss @import "bootstrap-5.0.0-beta1/scss/variables"; $grid-breakpoints: ( xxs: 0, xs: 375px, sm: 576px, md: 768px, lg: 992px ...

Issues with displaying AngularJs directive template

Having an issue with my AngularJs directive. Everything works perfectly fine when I use the "template" attribute, but when I switch to using "templateURL", it stops working. Both the JavaScript file for the directive and the HTML file for the template are ...