The bootstrap carousel images are arranged in a vertical stack, regardless of the size of the screen

I'm having some trouble with my bootstrap carousel. The images are stacking on top of each other when the page loads, even though everything else seems to be working fine - controls, indicators, etc. Any ideas on what's causing this issue?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Appraisal</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css">
  </head>

  <body>
    <header>
      <h1 class="animated slideInLeft">text goes here</h1>
      <p>...</p>
      <h4 class="animated slideInRight">portfolio</h4>
    </header>

    <div id="myCarousel" class="carousel slide">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <div class="carousel_inner">

        <div class="item active">
          <img src="./pics/space_1.jpg" alt="Space 1" class="img-responsive">
          <div class="carousel-caption">
            <h3>Appraisal 1</h3>
            <p></p>
          </div>
        </div>

        <div class="item">
          <img src="./pics/space_2.jpg" alt="Space 2" class="img-responsive">
          <div class="carousel-caption">
            <h3>Appraisal 2</h3>
            <p></p>
          </div>
        </div>

        <div class="item">
          <img src="./pics/space_3.jpg" alt="Space 2" class="img-responsive">
          <div class="carousel-caption">
            <h3>Appraisal 3</h3>
            <p></p>
          </div>
        </div>

      </div>

      <a href="#myCarousel" class="carousel-control" data-slide="prev">
        <span class="icon-prev left"></span>
      </a>
      <a href="#myCarousel" class="carousel-control" data-slide="next">
        <span class="icon-next right"></span>
      </a>
    </div>

    <div class="skills">

    </div>

    <div class="certs">


    </div>

    <footer>
      <p>developed by: jefferson steelflex</p>

    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js"></script>
  </body>
</html>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Don't worry, it's simply a spelling mistake. All you need to do is update the class name from "carousel_inner" to "carousel-inner" in the slides container div.

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 is the best way to customize the appearance of the elements in the hamburger menu within a Bootstrap navigation bar?

I have successfully implemented a responsive navbar using Bootstrap 4. When the screen size is large, there are 2 buttons displayed, and when it's small, a hamburger menu appears. [insert image description here][1][insert image description here][2] ...

cssbootstrap-4responsive-designnavbarhamburger-menu

What is the best way to adjust the underline with Bootstrap?

Is there a way to add an underline to text without using CSS? I've tried using <p><u>text</u></p> and class="text-decoration-underline">, but neither provide an option to adjust the vertical position of the underli ...

htmltwitter-bootstrapbootstrap-5

Center the primary content on the screen when the header is present

I am struggling to vertically align the main content in the center of the screen. While I was able to achieve vertical alignment within a div, the presence of a header on the page is causing difficulty in centering the main content vertically with respect ...

htmlcsstwitter-bootstrapbootstrap-4

VSCode displaying HTML errors within a .ts file

There is a strange issue with some of my .ts files showing errors that are typically found in HTML files. For example, I am seeing "Can't bind to 'ngClass' since it isn't a known property of 'div'" appearing over an import in ...

htmlangulartypescript

Is there a way to catch a downloaded file inside an iframe?

My dilemma involves an external site embedded in an iframe that contains a save button to download a json file. I am seeking a solution to capture the contents of this downloaded file within my own code. Is there a possible method for achieving this? Rese ...

javascripthtmljsoniframedownload

IE8 is giving me a tough time with CSS3 + HTML5SHIV + CSS3PIE Border-radius; it works fine on IE7, 9, and

Working on a site at , which is constructed using: Twitter Bootstrap HTML5 + CSS3 HTML5SHIV CSS3PIE Problem: Border-radius styling for the navbar link when active is not functioning in IE8 despite using CSS3PIE. However, it works fine in IE7,9,10 (confi ...

csstwitter-bootstrapcss3piehtml5shiv

There is a conflict between LightBox and jquery.animate-enhanced that needs to be

I recently added two plugins to my webpage - LightBox and animate-enhanced. While both are functioning correctly, I have encountered an issue. When clicking on images to display LightBox, the modal dialog appears fine; however, the lightboxOverlay is displ ...

jqueryhtmlcssjquery-animatelightbox

Displaying live data from an XMLHttpRequest in a Vue component in real-time

I'm currently working on implementing lazy loading for a list of posts fetched from the WordPress REST API. My goal is to load additional news stories upon clicking an HTML element. However, I'm facing issues with accessing the original Vue inst ...

javascripthtmlwordpressvue.jswordpress-rest-api

Utilizing CSS for styling a specific class in a Joomla Module

Recently, I was working on a Joomla Module and came across an interesting issue. When inspecting the CSS using Firebug, I noticed that there were multiple nested divs within the module, each with its own class. One example of this structure looked like: & ...

phphtmlcssjoomla

The div is refusing to align to the left within the same row

I need assistance in creating a footer layout with an h3 and two div elements, all floated to the right with a percentage margin. The issue I'm facing is that the second div element (div2) is not floating to the left as expected but instead aligns be ...

htmltextfloating

Reverting back to the specified CSS style

In my application, I have a common HTML component styled as follows: .box { min-width: 100px; padding: 20px 10px; } There are over 100 of these components and they each have a unique border style without a bottom border: .box:nth-child(1) { border ...

cssoverriding

Transforming JQuery code into pure Javascript: Attaching an event listener to dynamically generated elements

After exhausting all available resources on stack overflow, I am still unable to find a solution to my problem. I am currently trying to convert the JQuery function below into Vanilla JavaScript as part of my mission to make web pages free of JQuery. How ...

javascriptjqueryhtml

Create a scrollbar that allows for both vertical and horizontal movement within the canvas

I am looking to create a canvas with scroll bars. The canvas is sized at 600 x 800, and the parent div is sized at 200 x 200. My goal is to have both horizontal and vertical scroll bars on the canvas. I've tried using the script provided, but unfor ...

javascripthtmlreactjs

Stopping the sound when its' Div is hovered over

I've managed to successfully trigger the audio to play on hover, but I'm having trouble getting it to pause when my mouse leaves the area. Check out the code in action here: https://jsfiddle.net/jzhang172/nLm9bxnw/1/ $(document).ready(functio ...

javascriptjqueryhtmlcss

I'm curious as to why these two divs are positioned side by side. Can anyone shed some light on why this footer isn't functioning properly

My goal is to showcase the logo along with 3 buttons containing all the social media links underneath it. However, for some reason, my 2 divs are displaying inline instead of flex or block. Can anyone shed light on why this isn't functioning as expect ...

htmlcssdeploymentfooter

Is there a way to apply specific CSS to the last paragraph within a particular div class?

Is there a way to style the last p within a specific class without affecting others? For instance: <div class="my-container"> <div class="banner-message1"> <p>1</p> </div> <div class="banner-message2"> &l ...

htmlcss

New feature: Material UI Chip Input with floating input label

I installed material-ui-chip-input to implement tags in an input field. I wanted a label alongside it, so I utilized the default Material UI label for consistency with other inputs. However, the input doesn't shrink as expected when clicked on by the ...

cssreactjsmaterial-uifrontendlabel

Issue with fixed positioning on iPad devices

A unique feature we implemented on our site is a small control that is positioned at the bottom of the screen. However, upon viewing the site on an iPad, the control does not stay fixed at the bottom but rather floats in the middle. What's the issue ...

htmlcssipadsafari

HTML: Mark the chosen hyperlink or tag

In my HTML page, I am looking to keep the link selected when it is clicked on. Here is the initial HTML code: <table class="main-dev"> <tr> <td> <a class='titleForm' style="cursor:pointer"> ...

javascripthtmltypescript

Adjust the height value of each element to match the maximum height within a single line using only CSS

There are 3 divs styled with display:inline-block. I aim to adjust their height values so they match the highest one. The desired effect is demonstrated visually below. Is it doable using only CSS? ----- ----- ----- ----- ----- ---- ...

htmlcss