I'm currently working with some code that utilizes Bootstrap 4, and it looks something like this:
<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>
For a visual representation of what I am aiming for, you can view my CodePen here: https://codepen.io/davidshq/pen/VwvrRGg
The desired output should look like this:
Single and Satisfied Image1 Image2 Image3However, the actual result ends up looking more like this:
Single and Satisfied Image1
Image2
Image3
Attempts to use floats or d-flex to display the images on the same line have resulted in them disappearing altogether.
My research suggests that the responsiveness of the SVGs is causing them to size themselves according to their parent container, which defaults to no size. To address this, I am considering defining a size for the parent container but am unsure of the best way to do so within Bootstrap's guidelines.
If you have any suggestions or insights, they would be greatly appreciated!