CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Paulo Roberto
Paulo Roberto

Reputation: 1548

Adjust Bootstrap carousel to full height

How do I set the height of Carousel to Full, I want it to occupy the screen when the user opens the page and the behavior is the same for mobile.

When accessing the site, the carusel must occupy the entire viewing area, it should not be possible to visualize the text "Our Services", without scrolling Scrool.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- 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="img\portfolio\concretobombeado.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="img\portfolio\limpeza.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="img\portfolio\limpeza.jpg"alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

      <div class="item">
        <img src="img\portfolio\limpeza.jpg" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

    </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>
  </div>

image

Upvotes: 3

Views: 12380

Answers (4)

lhavCoder
lhavCoder

Reputation: 961

you could add this to your css file. 

 #myCarousel{
 height:100vh;
 width:100%;
 }

100vh would set the height of your carousal to 100% of the devices' screen height.

This would set the height and width of your carousal to occupy the entire screen.

After this you might also need to modify the .carousel-inner class' height to 100%. then you can accordingly adjust your images' width.

Upvotes: 4

Andre Aquiles
Andre Aquiles

Reputation: 404

Like the other answer, you must set the height of #myCarousel to 100%. Another thing you can do and may help is using vh instead of pixels for your elements such as text.

Based on your image, I judge that you speak portuguese. So, here's a lil help about CSS units for you. Unidades de CSS Moderno

And here's the W3C guide which does explains the same but in english.

PS: I would complement this into a comment into pudi's answer, but I dont really have enough reputation to do so.

Upvotes: 3

Carol Skelly
Carol Skelly

Reputation: 362300

You must make the carousel image, and any of its containers 100% height.

html,body{height:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
.carousel-inner>.item>img {
    height:100%;
}

Demo

Upvotes: 1

pudi
pudi

Reputation: 33

You have to set the height of the outer div with id="myCarousel" to 100%. So add it in the css file or in the html file. Too use the full height you need to set the height of the <html> and <body> to 100% (often the first two classes in a css file).

Upvotes: 1

Related Questions