Carousal slides are displaying one below the other instead of slide

Hi,
I am learning web development out of my passion, I am stuck at bootstrap Carousel. The carousel slides are getting displayed one below the other. Kindly help. I am using Bootstrap-3.


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .navbar{
    background-color: black;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .form-control{
    border-radius: 10px;
    margin-top: 9px;
    width: 250px;
  }
.navbar-brand{
  font-size: 30px;
}
.carousel-inner img {
width: 100%;
height: 100%;
}
  </style>
</head>
<body>

  <nav class="navbar navbar-default">
                <div class="container">
                  <div class="navbar-header">
                        <a href="#" class=navbar-brand>SP</a>
                  </div>
                  <ul class="nav navbar-nav">
                      <li id="Telugu"><a href="#">  Telugu Movies  </a></li>
                      <li id="Hindi"><a href="#">  Hindi Movies  </a></li>
                      <li id="English"><a href="#">  English Movies  </a></li>
                  </ul>
                  <ul class="nav navbar-nav navbar-right">
                      <li><input class="form-control" type="text" placeholder="Search" aria-label="Search"></li>
                      <li><a href="file:///C:/Users/spali/OneDrive/Documents/new%20laptop/HTML_Learn/BootStrap/website/ContactUs.html">  Contact Us  </a></li>
                  </ul>
  </nav>

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="Hyderabad.jpg" alt="Hyderabad" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="Delhi.jpg" alt="Delhi" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="Mumbai.jpg" alt="Mumbai" width="1100" height="500">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
</div>
</body>
</html>



Hi, that’s great hope you’re having more than enough fun!
From your example, you almost have gotten everything right, the issue might be because you’re using the not updated bootstrap link by just getting bootsrtap.min.css in your link tag.
Try to get the link(s) from official docs and paste them just below the link for stylesheet and you should be good to go.

I wasn’t able to get your left and right control to work since I wasn’t getting the images that might give you some hard time. So you can let us know here

Good Luck :call_me_hand:t2:

1 Like

Thank you so much Sir, the carousel is working fine but the header is getting disturbed. I think something is wrong with the CDN. Just now, I have copied the CDN from getbootstrap.com, but still, the header is getting disturbed. Kindly Help. Based on my output, I am planning to go to the next step, which is grid.


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <link rel="stylesheet" href="bootstrap.css">
  <link rel="stylesheet" href="bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"></script> -->
  <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
  <!-- CSS only -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"></script>

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <style>
  /* Make the image fully responsive */
  .navbar{
    background-color: black;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .form-control{
    border-radius: 10px;
    margin-top: 9px;
    width: 250px;
  }
.navbar-brand{
  font-size: 30px;
}
.carousel-inner img {
width: 100%;
height: 100%;
}
  </style>
</head>
<body>

  <nav class="navbar navbar-default">
                <div class="container">
                  <div class="navbar-header">
                        <a href="#" class=navbar-brand>SP</a>
                  </div>
                  <ul class="nav navbar-nav">
                      <li id="Telugu"><a href="#">  Telugu Movies  </a></li>
                      <li id="Hindi"><a href="#">  Hindi Movies  </a></li>
                      <li id="English"><a href="#">  English Movies  </a></li>
                  </ul>
                  <ul class="nav navbar-nav navbar-right">
                      <li><input class="form-control" type="text" placeholder="Search" aria-label="Search"></li>
                      <li><a href="file:///C:/Users/spali/OneDrive/Documents/new%20laptop/HTML_Learn/BootStrap/website/ContactUs.html">  Contact Us  </a></li>
                  </ul>
  </nav>

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="Hyderabad.jpg" alt="Hyderabad" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="Delhi.jpg" alt="Delhi" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="Mumbai.jpg" alt="Mumbai" width="1100" height="500">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
</div>
</body>
</html>

Regards
Suman P.

Oh of course we’re here to do this together!

yeap I agree the header is indeed a bit looking weird :wink:
One of the main reasons is you are having your nav element and then within that, you start your div with the class container.

If you move it out of the nav element the would have paddings based on what you have given in the styles.

If you wanted to change the space between elements in nav furthermore you can definitely use flex-box. flex-box is a fairly popular concept for CSS which makes grouping elements and putting space for them fairly easy. I highly recommend learning it even before learning grids.

For also making your nav bar to expand the whole page and not only part of it you would need to use width in your CSS rules.

Good Luck and let us know how it goes :call_me_hand:t2:

1 Like

Hi Sir,
Thank you. I am able to do proper root cause analysis. I found out that below CDN is causing the issue. If I remove it, my header looks perfect, but the Carousel images come one below the other. If I leave it on, the header unordered lists start from the center of the header but the carousel works.


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"></script>

Please let me know if there is an alternate thing I can do. I am using bootstrap.css v3.4.1

I am attaching the images I used on my page.