Building a responsive "centered icons with descriptions" layout - html

Question

Here's a quick mockup of a layout that I'd like to build:
How would you do this? I've been playing around with flexbox-based solutions for a bit, but I haven't been able to make it work yet.
Some additional caveats:
To make the design responsive, I want to use some Bootstrap-like grid system to split the items over multiple rows on smaller screens. I'm currently using Pure CSS, but I'm open to alternatives including custom media queries.
Ideally I'd load the icons inside the bubbles from SVG assets. I know I can make four bubble-shaped icons, pop 'em in as <img> tags and then horizontally center them with the text, but that's probably not the most elegant solution.
The four "icon with description" columns should be vertically centered towards one another. Although this is not visible here, it'll affect the layout when the text doesn't line up as neatly as in my mockup.

Answer 1

Check this StackBlitz: FlexBox example
In the example I'm using flexbox. If you change the size of the browser window you will see how the icons break down into the next line (responsive).
HTML file:
<div class="container">
<div class="item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-lock fa-stack-1x"></i>
</span>
<p>Description</p>
</div>
<div class="item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-lock fa-stack-1x"></i>
</span>
<p>Description</p>
</div>
<div class="item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-lock fa-stack-1x"></i>
</span>
<p>Description</p>
</div>
<div class="item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-lock fa-stack-1x"></i>
</span>
<p>Description</p>
</div>
</div>
CSS file:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
}
.icon-background {
color: #c0ffc0;
}

Answer 2

I really enjoy using flexbox, and I think it is not necessary to use bootstrap or other frameworks. Just using flexbox you have a responsive layout with few lines.
I used the <img> tag, but you can use the CSS tag background.
Just look at this simple example that I have done. Starting with it you can adapt to your mockup can do whathever it's necessary.
.father {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.element {
color: #000;
text-align: center;
}
.element .element-circle {
border-radius: 50%;
overflow: hidden;
background-color: #fdcb6e;
padding: 2rem;
}
.element .element-image {
background: url('https://image.flaticon.com/icons/svg/149/149315.svg');
width: 80px;
height: 80px;
padding: 15px;
}
.element p {
font-weight: bold;
}
<div class="father">
<div class="element">
<div class="element-circle"><div class="element-image"></div></div>
<p>Lorem Ipsum</p>
<span>Subtitle</span>
</div>
<div class="element">
<div class="element-circle"><div class="element-image"></div></div>
<p>Lorem Ipsum</p>
<span>Subtitle</span>
</div>
<div class="element">
<div class="element-circle"><div class="element-image"></div></div>
<p>Lorem Ipsum</p>
<span>Subtitle</span>
</div>
<div class="element">
<div class="element-circle"><div class="element-image"></div></div>
<p>Lorem Ipsum</p>
<span>Subtitle</span>
</div>
</div>
More info of flexbox you can find in this guide.