CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
SaifDeen
SaifDeen

Reputation: 872

bootstrap 4 fixed height of a container

I have the following html structure:

<div class="container" style="background-color:#FFFFFF;height:100px;">
<div class="row hidden-sm-down" style="display:block;height:100px;" align="center">
<a href="http://www.pse.ruhr-uni-bochum.de/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/09/Logo_RUB_BLAU_cmyk_trans.png"> </a>

<a href="http://www.dokoll.tu-dortmund.de/cms/de/dokoll/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/09/tud_logo_rgb_tranz.png"> </a>

<a href="https://www.zlb.uni-due.de/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/09/logo_claim_rgb_72dpi.png"> </a>

<a href="http://zfl.uni-koeln.de/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/07/logo_köln.png"> </a>

<a href="https://www.uni-muenster.de/Lehrerbildung/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/09/logo_unimünster.png"> </a>        

</div>
</div>

currently its wrapping my images in a new row when the screen gets smaller. I need to avoid that and let images get smaller to fit the width of the screen. I hide that row on small devices so it should only work on medium and up devices.

Is there any way to solve this? I tried every solution on stack.

Upvotes: 0

Views: 1363

Answers (1)

Logan
Logan

Reputation: 11

You can use img-responsive class

<img class="img-responsive" src="yourimageroute">

Check out this fiddle

Upvotes: 1

Related Questions