Could someone please help me figure out what I'm doing incorrectly?
<div class="row">
<ul class='list-group .col-md-6'> <li>1</li><li>1</li><li>1</li> </ul>
<div>
<img class=".col-md-6" src="https://farm8.staticflickr.com/7613/16147502573_613d5f6b23.jpg" />
</div>
</div>
Assume that the list elements are simply placeholders. My intention is to have a list on the left side of the screen and an image on the right side (ideally centered vertically with the list, if possible). I tried using the bootstrap grid system, but as a beginner with bootstrap, the result is not a side-by-side display; instead, the image appears below the list. I have imported and fetched bootstrap, and removing the div around the image did not solve the issue.
If using bootstrap is not the best approach, I am open to suggestions using plain CSS.