4 Centered Images HTML/ CSS BOOTSTRAP -
--first image desire output---
i got work on screen when put on bigger monitor doesn't seem scale right. recommendations ?
<div style="margin-left: 100px;margin-right: 100px;"> <div class="container-fluid"> <div class="row"> <div class="col-sm-3"> <img src="img/nuestros eventos -1.png"> </div> <div class="col-sm-3"> <img s src="img/nuestros eventos -2.png"> </div> <div class="col-sm-3"> <img src="img/nuestros eventos -3.png"> </div> <div class="col-sm-3"> <img src="img/nuestros eventos -5.png"> </div> </div> </div>
other code, centers can't rid spaces.
---this get---
<div class="row" style="margin-bottom: 70px;"> <!-- column --> <div class="col-xs-6 col-sm-5cols wow bounceinleft "> <div class="thumbnail "> <img src="img/nuestros eventos -1.png"> </div> </div> <!-- column --> <div class="col-xs-6 col-sm-5cols wow bounceinleft "> <div class="thumbnail"> <img src="img/nuestros eventos -2.png"> </div> </div> <!-- column --> <div class="col-xs-6 col-sm-5cols wow swing "> <div class="thumbnail"> <img src="img/nuestros eventos -3.png"> </div> </div> <!-- column --> <!-- column --> <div class="col-xs-6 col-sm-5cols wow bounceinright "> <div class="thumbnail"> <img src="img/nuestros eventos -5.png"> </div> </div> </div>
you can use inline-block
elements, have created inline-block
class wrap img
, gave text-center
class row
align images in center.
.row-custom .inline-block{ display:inline-block; } .row-custom .inline-block img{ max-width:100px }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row row-custom text-center"> <div class="inline-block"> <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%c3%97300&w=300&h=300"> </div> <div class="inline-block"> <img s src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%c3%97300&w=300&h=300"> </div> <div class="inline-block"> <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%c3%97300&w=300&h=300"> </div> <div class="inline-block"> <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%c3%97300&w=300&h=300"> </div> </div>
Comments
Post a Comment