Question 42813 in Html Question posted in
Some basic documentation can be found here.

CSS: width works bot height does not – Html

trying to set the width of a div work without problems, but doing the exact same thing for the height won’t work

I wanted to play around with the bootstrap carousel in codeply but it did not work as expected:

HTML code:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="..." style="background-color: red;">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="..." style="background-color: yellow;">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="..." style="background-color: blue;">
      </div>
    </div>
</div>

CSS code:

.carousel-item{
    height: 500px;
    width: 300px; }

Changes width but not height

Tags:

3

Answers


  1. 0

    If you want to change the height you need to try modify only height and leave the width as auto or unset

    .carousel-item {
    height: 700px;
    width: auto;
}
    Login or Signup to reply.
  2. 0

    just add image element into class .carousel-item img{. your styles are added into carousel item and it has reflected in styles.

    edit

    Removed w-100class from image as it overrides the width custom css.

    .carousel-item img{
    height: 500px;
    width: 300px; 
}
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
  <div class="carousel-item active">
    <img src="..." class="d-block" alt="..." style="background-color: red;">
  </div>
  <div class="carousel-item">
    <img src="..." class="d-block" alt="..." style="background-color: yellow;">
  </div>
  <div class="carousel-item">
    <img src="..." class="d-block" alt="..." style="background-color: blue;">
  </div>
</div>
</div>
    Login or Signup to reply.
  3. 0

    As you shared your code you’ve added the w-100 class so w-100 class will make width = 100% !important as it is a class of Bootstrap.
    And in the CSS file you’re giving fixed width of 300px but as you marked w-100 in class 300px width will be ignored and will consider 100% of image’s width and height will be 500px as you’ve given in the CSS file…

    So your image will have dimensions like:
    width = 100%;
    height = 500px;

    Note: as you’ve added d-block class width already will be 100% of your image’s width so w-100 will work the same as the d-block.

    Refer to this answer if you want to use slick-slider instead of Bootstrap.
    carousel/slider

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search