Linked Questions

Popular Questions

I am trying to use an image in the bootstrap carousel just as text like one heading on the left side image in the middle and second heading on the right side as I have in the attached image.Attached image as expected carousel what I need:

enter image description here

But when I try it on the bootstrap carousel I have the image going down from the carousel body. What I have done is that I have assigned the carousel a height of 500px and placing then centering the carousel with absolute positioning

.carousel{
  position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     width: 50%;
     height: 30%;
     margin: auto;
}

its working all good with the text but when i add the image it again changes it position and goes down the frame.as attached in the image what i am getting:

enter image description here

I want to bring it back up

my html code is

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="js/bootstrap/bootstrap.js"></script>
  <!--  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900" rel="stylesheet">-->
  </head>
  <body>
<div class="container-fluid">
  <div class="row header flex-container">
    <div class="sidebar-header">

    </div>
    <div class="main-bg">
      <div class="row">
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
                    <li class="get-quote"><a href="#">Get quote</a></li>
          </ul>
        </nav>
      </div>
      <div class="row">
        <div class="main-slider">
          <div class="container-fluid">

            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active">01</li>
                <li data-target="#myCarousel" data-slide-to="1">02</li>
                <li data-target="#myCarousel" data-slide-to="2">03</li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                  <img class="slider-height" src="img/bag.png">
                </div>


              </div>

              <!-- Left and right controls -->

            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</div>

  </body>
</html>

my css is

.main-slider{
  height: 500px;
  text-align: center;

position: relative;
  max-height: 100%;
  background-color: #FFD731;
}
.carousel{
  position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     width: 50%;
     height: 30%;
     margin: auto;
}
.carousel-indicators {
    position: absolute;

    left: 150%;
    z-index: 15;

    text-align: center;
    list-style: none;
}
.carousel-indicators li {
    display:block;
    width: 10px;
    height: 10px;
    margin: 10px;
    text-indent:0px;
    cursor: pointer;
    background-color: #000 \9;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: none;
}
.carousel-indicators .active {
    width: inherit;
    height: inherit;
    margin: inherit;
    background-color:transparent;
}

Related Questions