4 Centered Images HTML/ CSS BOOTSTRAP -


i need 4 images centered in page without spaces, , responsive , i've tried many ways can't work right. --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> 

this got code 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

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -