How to make these SVG images align side by side without vanishing? - css

Question

I have some code that looks like this (using Bootstrap 4):
<header>
<div class="row">
<div class="col-xs-12 col-md-9">
<h1>Single and Satisfied</h1>
</div>
<div class="col-xs-12 col-md-3">
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg">
</div>
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg">
</div>
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg">
</div>
</div>
</div>
</header>
I've also got a CodePen here: https://codepen.io/davidshq/pen/VwvrRGg
I'd like the result to look something like this:
Single and Satisfied Image1 Image2 Image3
Instead I get something like this:
Single and Satisfied Image1
Image2
Image3
If I use floats or d-flex in an attempt to get the images to appear on the same line the images disappear entirely.
From what I've read this has to do with the SVGs being responsive and sizing themselves to the parent, which is of no size by default. I'm thinking I can define a size on the parent container but trying to understand the best way to do this in a Bootstrap approved manner.
Any suggestions?

Answer 1

You can do something like this:
The svg is too big so I have given size fo 100px each, using flex will take care of your requirement.
.row,.align{
display:flex;
}
<header>
<div class="row">
<div class="col-xs-12 col-md-9">
<h1>Single and Satisfied</h1>
</div>
<div class="col-xs-12 col-md-3 align">
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg" style="height:100px;width:100px;">
</div>
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg" style="height:100px;width:100px;">
</div>
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg" style="height:100px;width:100px;">
</div>
</div>
</div>
</header>

Answer 2

There's no col-xs-4 as far as I see from https://getbootstrap.com/docs/4.4/layout/grid/#grid-options, you could mean col-4.
Since you're trying to lay out three images in one line, you shall wrap them with .row:
<div class="row">
<div class="col-4">
<img src="https://svgshare.com/i/Kmq.svg" />
</div>
<div class="col-4">
<img src="https://svgshare.com/i/Kmq.svg" />
</div>
<div class="col-4">
<img src="https://svgshare.com/i/Kmq.svg" />
</div>
</div>