I am trying to create a layout that features an image on the left and text on the right in a specific structure:
Item 0: value 0
Item 1: value 1
Item 2: value 2
However, the text is appearing all in one row like this:
Item 0: value 0 Item 1: value 1 Item 2: value 2
Any idea why this is happening?
To see the issue in action, visit:http://jsfiddle.net/Lwu2zxzd/
Html:
<div class="text-center">
<div class="d-flex flex-row justify-content-center align-items-center">
<img src="http://via.placeholder.com/100x100"/>
<p><strong class="text-bg-gray">Item1: </strong>value1</p>
<p><strong class="text-bg-gray">Item2: </strong>valu2</p>
<p><strong class="text-bg-gray">Item3: </strong>value3</p>
</div>
</div>