CODEWITHSUNDEEP
twitter-bootstrapcarousel
nishantvodoo
nishantvodoo

Reputation: 865

Fixed height and width for bootstrap carousel

I am using the bootstrap carousel but I want a fixed width and height so that all my images will auto fit to the defined height and width. Can someone please help me on achieving this.

<div class="row">
    <div class="span8">
        <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" class=""></li>
                <li data-target="#myCarousel" data-slide-to="2" class=""></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">

                    <img src="~/Images/Carousel/carousel_1.jpg" alt="http://www.google.com">
                    <div class="carousel-caption">
                        <h4>First Thumbnail label</h4>

                        <p>Deals you cannot miss.</p>
                    </div>
                </div>
                <div class="item">
                    <img src="~/Images/Carousel/carousel_2.jpg" alt="http://www.google.com">
                    <div class="carousel-caption">
                        <h4>Second Thumbnail label</h4>

                        <p>Claim it now.</p>
                    </div>
                </div>
                <div class="item">
                    <img src="~/Images/Carousel/carousel_1.jpg" alt="http://www.google.com">
                    <div class="carousel-caption">
                        <h4>Third Thumbnail label</h4>

                        <p>Act fast. Only for today.</p>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
        </div>
    </div>
</div>

Upvotes: 18

Views: 139763

Answers (4)

y0ung0d
y0ung0d

Reputation: 41

To have a consistent flow of the images on different devices, you'd have to specify the width and height value for each carousel image item, for instance here in my example the image would take the full width but with a height of "400px" (you can specify your personal value instead)

<div class="item">
    <img src="image.jpg" style="width:100%; height: 400px;">
</div>

Upvotes: 0

Gabriel Souto
Gabriel Souto

Reputation: 620

Because some images could have less than 500px of height, it's better to keep the auto-adjust, so i recommend the following:

<div class="carousel-inner" role="listbox" style="max-width:900px; max-height:600px !important;">

Upvotes: 5

sunil sah
sunil sah

Reputation: 514

Apply following style to carousel listbox.

<div class="carousel-inner" role="listbox" style=" width:100%; height: 500px !important;">

...

</div

Upvotes: 29

Johnathan
Johnathan

Reputation: 449

In your main styles.css file change height/auto to whatever settings you desire. For example, 500px: 

#myCarousel {
  height: auto;
  width: auto;
  overflow: hidden;
}

Upvotes: 2

Related Questions