I'm learning to type through Bootstrap, but I can't understand where the height of the block is set. Where to change it? For example: enter image description here `

<div class="col-md-3 "> <div class="thumbnail"> <img src="http://placehold.it/500x300" alt="" > <div class="caption"> <h4>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <p><a href="#" class="btn btn-info btn-xs" role="button">Full Story</a> </p> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x300" alt=""> <div class="caption"> <h4>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <p><a href="#" class="btn btn-info btn-xs" role="button">Full Story</a> </p> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x300" alt=""> <div class="caption"> <h4>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <p><a href="#" class="btn btn-info btn-xs" role="button">Full Story</a> </p> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading c-list"> <span class="title">Block 3</span> </div> <ul class="list-group" id="contact-list"> <li class="list-group-item"> <div class="col-xs-12 col-sm-4"> <img src="http://api.randomuser.me/portraits/men/97.jpg" alt="Scott Stevens" class="img-responsive img-circle" /> </div> <div class="col-xs-12 col-sm-8"> <span class="name">Scott Stevens</span> <br/> <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5842 Hillcrest Rd"></span> <span class="visible-xs"> <span class="text-muted">5842 Hillcrest Rd</span> <br/> </span> <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(870) 288-4149"></span> <span class="visible-xs"> <span class="text-muted">(870) 288-4149</span> <br/> </span> <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="scott.stevens@example.com"></span> <span class="visible-xs"> <span class="text-muted">scott.stevens@example.com</span> <br/> </span> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="col-xs-12 col-sm-4"> <img src="http://api.randomuser.me/portraits/men/97.jpg" alt="Seth Frazier" class="img-responsive img-circle" /> </div> <div class="col-xs-12 col-sm-8"> <span class="name">Seth Frazier</span> <br/> <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="7396 E North St"></span> <span class="visible-xs"> <span class="text-muted">7396 E North St</span> <br/> </span> <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(560) 180-4143"></span> <span class="visible-xs"> <span class="text-muted">(560) 180-4143</span> <br/> </span> <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="seth.frazier@example.com"></span> <span class="visible-xs"> <span class="text-muted">seth.frazier@example.com</span> <br/> </span> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="col-xs-12 col-sm-4"> <img src="http://api.randomuser.me/portraits/women/90.jpg" alt="Jean Myers" class="img-responsive img-circle" /> </div> <div class="col-xs-12 col-sm-8"> <span class="name">Jean Myers</span> <br/> <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="4949 W Dallas St"></span> <span class="visible-xs"> <span class="text-muted">4949 W Dallas St</span> <br/> </span> <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(477) 792-2822"></span> <span class="visible-xs"> <span class="text-muted">(477) 792-2822</span> <br/> </span> <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="jean.myers@example.com"></span> <span class="visible-xs"> <span class="text-muted">jean.myers@example.com</span> <br/> </span> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="col-xs-12 col-sm-4"> <img src="http://api.randomuser.me/portraits/men/24.jpg" alt="Todd Shelton" class="img-responsive img-circle" /> </div> <div class="col-xs-12 col-sm-8"> <span class="name">Todd Shelton</span> <br/> <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5133 Pecan Acres Ln"></span> <span class="visible-xs"> <span class="text-muted">5133 Pecan Acres Ln</span> <br/> </span> <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(522) 991-3367"></span> <span class="visible-xs"> <span class="text-muted">(522) 991-3367</span> <br/> </span> <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="todd.shelton@example.com"></span> <span class="visible-xs"> <span class="text-muted">todd.shelton@example.com</span> <br/> </span> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="col-xs-12 col-sm-4"> <img src="http://api.randomuser.me/portraits/men/49.jpg" alt="" class="img-responsive img-circle" /> </div> <div class="col-xs-12 col-sm-8"> <span class="name">Rosemary Porter</span> <br/> <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5267 Cackson St"></span> <span class="visible-xs"> <span class="text-muted">5267 Cackson St</span> <br/> </span> <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(497) 160-9776"></span> <span class="visible-xs"> <span class="text-muted">(497) 160-9776</span> <br/> </span> <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="rosemary.porter@example.com"></span> <span class="visible-xs"> <span class="text-muted">rosemary.porter@example.com</span> <br/> </span> </div> <div class="clearfix"></div> </li> </ul> </div> </div> </div> <!-- End row --> 

`

  • one
    The height of the block depends on the content. Bootstrap does not automatically adjust it (for now). You can use css to set the values ​​you need: height , max-height , etc. - cyadvert
  • @cyadvert, Bootstrap3 does not adjust. And in Bootstrap4 there are already CardGroups and CardDesks - Oceinic
  • @Oceinic yes, you are right. However, he is only in alpha testing (it seems), so it's better not to advise him to beginners :) So I didn’t mention it ... - cyadvert

1 answer 1

Set the block height and you will be happy

  • one
    Why width? width? - cyadvert
  • sorry, obbshsya :) - sagan