I noticed that when I applied Bootstrap, the flexibility between boxes disappeared. I want to achieve a layout similar to image 2 and also add spaces between the boxes or div elements.
.alignboxes{
padding-top:40px;
display: flex;
justify-content: space-evenly;
padding-bottom: 20px;
}
.box1,.box2,.box3,.box4,.box5,.box6 {
background-color: white;
width:200px;
height:100px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap-4.4.1-dist/bootstrap-4.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row alignboxes">
<div class=" col-md-offset-2 col-xs-12 col-sm-6 col-md-4 col-lg-4 box1"><img src="images/onlinesadqah.png" alt=""width="70px" height="70px"></div>
<div class=" col-md-offset-2 col-xs-12 col-sm-6 col-md-4 col-lg-4 box2"><img src="images/welfare.png" alt="" width="70px" height="70px"></div>
<div class=" col-md-offset-2 col-xs-12 col-sm-6 col-md-4 col-lg-4 box3"><img src="images/medical.png" alt="" width="70px" height="70px"></div>
<div class=" col-md-offset-2 col-xs-12 col-sm-6 col-md-4 col-lg-4 box4"><img src="images/Dastarkhwan.png" alt=""width="70px" height="70px"></div>
<div class=" col-md-offset-2 col-xs-12 col-sm-6 col-md-4 col-lg-4 box5"><img src="images/ROPLANT.png" alt="" width="70px" height="70px"></div>
<div class=" col-md-offset-2 col-xs-12 col-sm-6 col-md-4 col-lg-
4 box6"><img src="images/education.png" alt="" width="70px" height="70px"></div>
</div>
</div>
</body>
</html>Here is the link to image 1 with Bootstrap:
https://i.sstatic.net/wT1dN.jpg
And here is image 2 before applying Bootstrap:
https://i.sstatic.net/CGU4c.jpg