Float images inside card div bootstrap 4

user_3093439 0
Viewed 255

I'm using bootstrap 4 and I use card div. The card has display flex and I can't float images, maybe because the card wants just one image. How Can I float images inside?enter image description here

bootstrap-4 css
1 Answers

You can have .card-body displayed as a wrapped flexbox, and set its justify-content to flex-start (which is default). There are Bootstrap built-in classes you can use as well.

<div class="card">
    <div class="card-body d-flex flex-row">
        <img src="https://via.placeholder.com/150" />
        <img src="https://via.placeholder.com/150" />
        <img src="https://via.placeholder.com/150" />
        <img src="https://via.placeholder.com/150" />
        <img src="https://via.placeholder.com/150" />
        <img src="https://via.placeholder.com/150" />
        <img src="https://via.placeholder.com/150" />
        <img src="https://via.placeholder.com/150" />
    </div>
</div>

enter image description here

demo: https://jsfiddle.net/davidliang2008/cb9n652j/8/

user_24106550
Related