Resize Carousel Bootstrap 3

Navigation
2

Hi, I have a bootstrap carousel and I would like to modify its size but I can not do it, and I tried to apply modifications to the main class, but I only reduce the size of the carousel in case of the carousel images. How do I establish a custom size? ?

Carousel Code: 

<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/paso1.png" alt="Facebook" class="img-responsive">
      </div>
      <div class="item">
        <img src="img/paso2.png" alt="Geolocalisacion" class="img-responsive">
      </div>
      <div class="item">
        <img src="img/paso3.png" alt="Pedir" class="img-responsive">
      </div>
      <div class="item">
        <img src="img/paso4.png" alt="Recibir" class="img-responsive">
      </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>

try to change the size of "myCarousel" and this does not influence the size of the photos, and when trying to modify the size of the photos, nothing happens either.

    
asked by Cristofer Fuentes 07.07.2016 в 21:39
source

2 answers

4

Carousel's CSS has height put in .carousel and .carousel-inner > .item > img . You have to change the two: 

.carousel, .carousel-inner > .item > img {
  height: 100px;
}

Here is an example: link

Another example with only percentage values (they are relative to the container): link

    
answered by 07.07.2016 / 23:06
source
1

Try using carousel-inner img to size the image and carousel-inner to size the carousel as such, note:

CSS 

.carousel-inner img {
    width: 100%;
    max-height: 460px;
}

.carousel-inner{
 height: 200px;
}

 
**HTML**  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-6 col-xs-offset-3 tamano" >
<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="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Facebook" class="img-responsive">
      </div>
      <div class="item">
        <img src="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Geolocalisacion" class="img-responsive">
      </div>
      <div class="item">
        <img src="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Pedir" class="img-responsive">
      </div>
      <div class="item">
        <img src="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Recibir" class="img-responsive">
      </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>
  </div>
    
answered by 07.07.2016 в 22:58
It does not let me create the database in phpmyadmin and it gives me this error: # 1064 regular expression for textbox length