0

How to control the height of the carousel?

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

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="Images/Carousel 01.jpg" alt="...">
                </div>
                <div class="item">
                    <img src="Images/Carousel 02.jpg" alt="...">
                </div>
                <div class="item">
                    <img src="Images/Carousel 03.jpg" alt="...">
                </div>
            </div>
Sixthsense
  • 1,927
  • 2
  • 16
  • 38
  • Possible duplicate of [Bootstrap change carousel height](https://stackoverflow.com/questions/28589911/bootstrap-change-carousel-height) – Obsidian Age Sep 27 '18 at 04:34

3 Answers3

1

You can use styles like min-height, max-height etc.

Add following into your stylesheet.

#carousel-example-generic{
   min-height : 300px;
}

If there is somethnig overriding your configuration, you can add !important just after 300px.

These sites will be helpful for you:

https://www.w3schools.com/cssref/pr_dim_height.asp

https://www.w3schools.com/cssref/pr_dim_min-height.asp

https://www.w3schools.com/cssref/pr_dim_max-height.asp

yılmaz
  • 1,818
  • 13
  • 15
1

Try this:

.carousel .item {
  height: 300px;
}

.item img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 300px;
}
Tejendra
  • 11
  • 1
0

Write a new css for .carousel and add height according to your need.

Dheeraj Verma
  • 38
  • 7