How do I make this div in bootstrap [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I've designed the div below and I have no idea how to make it in bootstrap. I would like the div to be 10 columns wide and the images are svg images which are 64px wide and 48px tall. The text in the middle is the font Roboto from Google Fonts and is 20px in size. I would like the images and text to be vertically centered too.Image
My attempt: `
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center">
<div class="col-sm-1 col-sm-offset-1">
<img src="img/breath.svg" width="64" height="46.64" class="img-responsive" alt="Breath">
</div><!-- col-sm-1 -->
<p>You have taken 500000 breaths</p>
</div><!-- col-sm-10 -->
</div><!-- row -->

Answer 1

A better approach to this might be to use bootstraps flexbox display class d-flex. I've taken your code and put it into a codeply project. There's more information about flexbox and how to use it in the bootstrap documentation located here.
HTML with Bootstrap 4:
<div class="container">
<div class="row d-flex justify-content-between align-items-center">
<img src="http://via.placeholder.com/64x48" alt="breath">
span class="align-middle">You have taken 5000000 breaths</span>
<img src="http://via.placeholder.com/64x48" alt="breath">
</div>
</div>
CSS:
.container {
position: absolute;
top: 50%;
left: 15%;
}