Skip to main content
K
KevinB9
Inspiring
November 22, 2017
Answered

sizing images in bootstrap carousel - followup

  • November 22, 2017
  • 1 reply
  • 11394 views

I would like to thank Osgood and Nancy O'Shea for help with sizing images in a Bootstrap carousel. I marked the question "answered".

For a novice like me a Bootstrap carousel has a great appeal - it's a free, one-click operation. I just wish there were more documentation/guidance that came along with it.

For example - Bootstrap creates an ID "carousel1" and three classes "carousel-inner", "item-active", and "center-block". After trial and error I found that the only class which lent itself to CSS styling of the images was "center-block". By setting the width to "100%" and max-height to "auto", I am getting pretty good results. Obviously if you can crop all the images the same, you can avoid surprises.

Kevin

This topic has been closed for replies.
Correct answer Nancy OShea

I think you might be missing something.

<!doctype html>

<html lang="en-US">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.7 Carousel</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

.center-block {float:none}

.carousel img {width:100%; height:100%}

</style>

</head>

<body>

<div class="container-fluid">

FULL WIDTH HEADER &AMP; NAVIGATION HERE....

</div>

<hr>

<div class="container">

<div class="row">

<div class="col-md-10 center-block">

<!--begin Bootstrap Carousel-->

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">

<!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

<li data-target="#myCarousel" data-slide-to="1"></li>

<li data-target="#myCarousel" data-slide-to="2"></li>

<li data-target="#myCarousel" data-slide-to="3"></li>

</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

<div class="item active">

<img src="https://placeimg.com/640/480/nature" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/arch/3" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/tech" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/animals" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<!--end active-->

</div>

<!-- Left and right controls -->

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

<span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

<span class="sr-only">Next</span> </a>

<!--end carousel-->

</div>

<!--/column--></div>

<!--/row--></div>

<!--/container--></div>

<hr>

<div class="container-fluid">

<div class="row">

FULL WIDTH FOOTER

</div>

</div>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap 3 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

1 reply

Nancy OShea
Nancy OShea
Community Expert
November 22, 2017

.center-block is a specific Bootstrap utility class for centering block-level elements. 

Do not use that for this.  Instead, target the carousel img in your custom CSS file.

.carousel img {

     width: 100%

}

Nancy

Nancy O'Shea— Product User & Community Expert
K
KevinB9Author
Inspiring
November 22, 2017

Hi, Nancy

Thank you for your continuing efforts.

Your suggestion (below), as styled through CSS Designer, has no effect on the images

.carousel img {

     width: 100%

}

Please note - in the Bootstrap java script there is no mention of a class named "carousel" and no mention of the "img" element (aside from "img src"). What is mentioned is:

<div class="carousel-inner" role="listbox">

     <div class="item active"><img src="images/2016/lisa-couch.jpg" alt="" class="center-block">

       <div class="carousel-caption">

         <h3>heading text</h3>

         <p> caption text</p>

          </div>

        </div>

All of this is contained in a div with ID "carousel1". I've tried to style all these classes and ID without success except for the "center-block" class.

Help!

Nancy OShea
Nancy OSheaCorrect answer
Community Expert
November 22, 2017

I think you might be missing something.

<!doctype html>

<html lang="en-US">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.7 Carousel</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

.center-block {float:none}

.carousel img {width:100%; height:100%}

</style>

</head>

<body>

<div class="container-fluid">

FULL WIDTH HEADER &AMP; NAVIGATION HERE....

</div>

<hr>

<div class="container">

<div class="row">

<div class="col-md-10 center-block">

<!--begin Bootstrap Carousel-->

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">

<!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

<li data-target="#myCarousel" data-slide-to="1"></li>

<li data-target="#myCarousel" data-slide-to="2"></li>

<li data-target="#myCarousel" data-slide-to="3"></li>

</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

<div class="item active">

<img src="https://placeimg.com/640/480/nature" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/arch/3" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/tech" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/animals" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<!--end active-->

</div>

<!-- Left and right controls -->

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

<span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

<span class="sr-only">Next</span> </a>

<!--end carousel-->

</div>

<!--/column--></div>

<!--/row--></div>

<!--/container--></div>

<hr>

<div class="container-fluid">

<div class="row">

FULL WIDTH FOOTER

</div>

</div>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap 3 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices