4 Centered Images HTML/ CSS BOOTSTRAP - html

Question

--FIRST IMAGE IS DESIRE OUTPUT---
I got it to work on my screen but when I put it on bigger monitor doesn't seem to scale right. Any 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 is what I get with this other code, centers but can't get rid the spaces.
---THIS IS WHAT I 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>

Answer 1

You can use inline-block elements, I have created inline-block class to wrap img and gave text-center class to row to 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>

Answer 2

Don't need to change or add more into CSS, You can use the Bootstrap class:
<div class="row">
<div class="col-sm-3">
<img class="img-responsive center-block" src="img/NUESTROS EVENTOS -1.png">
</div>
<div class="col-sm-3">
<img class="img-responsive center-block" src="img/NUESTROS EVENTOS -2.png">
</div>
<div class="col-sm-3">
<img class="img-responsive center-block" src="img/NUESTROS EVENTOS -3.png">
</div>
<div class="col-sm-3">
<img class="img-responsive center-block" src="img/NUESTROS EVENTOS -5.png">
</div>
</div>

Answer 3

Do these 3 things to achieve the desire result-
1. Add .img-responsive class to your img tags as its a way to make images responsive in bootstrap framework. You can also check this link for reference .
2. Add width="100%" to images to take up full space available in the image.
3. Add nopadding class to columns so that it will remove the padding space.
Update your code as below:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3 nopadding">
<img src="https://dummyimage.com/600x400/000/fff" width="100%" class="img-responsive">
</div>
<div class="col-xs-3 nopadding">
<img s src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%">
</div>
<div class="col-xs-3 nopadding">
<img src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%">
</div>
<div class="col-xs-3 nopadding">
<img src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%">
</div>
</div>
</div>