how to make this div/image using bootstrap grid system - html

Question

I need to made this div in bootstrap 3 as shows in image...
I need to display 4 icons/images in one row and another 4 icons in another row in smaller screen/mobile view..i dont know any error in my code..
please help me to make this as shown as in image.
<section class="container-fluid">
<div class="row" style="background-color:#034ea2;">
<div class="col-md-2"></div>
<div class="col-md-1 text-center ">
<div class="im1">
<img src="/images/speaker.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Sound insultion</h6>
</div>
</div>
<div class="col-md-1 text-center" >
<div class="im1">
<img src="/images/renewable-energy.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Save energy</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/window.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Prevent Dust Buildup</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/stormy.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Storm Resistant</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/hotel-elevator.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Elegant Looks</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/umb.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Blocks Seepage</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/sun.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Thermal Insulation</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/maintenance.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Low maintenance</h6>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</section>
styles
.im1{
padding-top: 8px;
padding-left: 8px;
}
.siz{
width: 40px;
}
.textt{
font-size: 15px;
color:#ffffff;
font-family: 'Times New Roman', Times, serif !important;
}
Here is the image
how to make this image using bootstrap grid system...

Answer 1

I created a code for you. I hope it will help to you.
https://codepen.io/myco27/pen/OvMdGp
img{
width: 100%;
}
.img1{
width: calc(100% / 8);
float:left;
}
#media (max-width: 860px) {
.img1{
width: calc(100% / 4);
float:left;
}
}
<section class="container-fluid">
<div class="row" style="background-color:#034ea2;">
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
</div>
</section>

Answer 2

First bootstrap runs in a 12 grid sysytem that is defined or can be broken down into 2,3, or 4 segements...basically any divisor of 12. In your case, to get the first four images in a row (in a small device), we split the grid by 3 i.e "col-md-3" for each image wrapper and "col-lg-1" (for large devices) e.g using a snippet from your code
<div class="col-lg-1 col-md-3 text-center">
<div class="im1">
<img src="/images/hotel-elevator.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Elegant Looks</h6>
</div>
</div>
Then avoid splitting the grid at the main <div class="col-md-2"></div> wrapper, simply leave it as <div class="row justify-content-md-center"></div>.
This should work just fine.
NB: The number of images willbe only 8 in this container
For Your CSS is simply modify the following
.siz{
width: 100%;
}

Answer 3

Try This. it has 8 div in 1 row. as shown in image
<style>
.main{
background:#034da2;
}
</style>
<div class="col-md-12 main">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
</div>
</div>
</div>
</div>
</div>