Bootstrap justify-content-around not spreading items

Question

I'm trying to spread 3 rows of 4 bootstrap cards evenly across a jumbotron with space-around. This is the result: I can't figure out why it's not spreading evenly. I'm not sure if there's a margin interfering thats included with bootstrap or something else. Here's my code:

<div class="jumbotron d-flex flex-column justify-content-around">
            <div class="row">
                <div class="card border-warning mb-3" style="max-width: 20rem;">
                    <div class="card-header">Bitcoin</div>
                    <div class="card-body">
                        <div class="text-center">
                            <img src="wallets/bitcoin.png" alt="Bitcoin QR Code" width="60%" height="60%" />
                        </div>
                        <br>
                        <p class="card-text">bc1qnjpcl0xtywcuxuc7fr9s5gsnhkugnpf0udcn00</p>
                    </div>
                </div>

                <div class="card border-success mb-3" style="max-width: 20rem;">
                    <div class="card-header">Bitcoin Cash</div>
                    <div class="card-body">
                        <div class="text-center">
                            <img src="wallets/cash.png" alt="Bitcoin Cash QR Code" width="60%" height="60%" />
                        </div>
                        <br>
                        <p class="card-text">qrrj4pcweu0v6vn37q4f6euqah6es5p93uqlcxr8kl</p>
                    </div>
                </div>

                <div class="card border-light mb-3" style="max-width: 20rem;">
                    <div class="card-header">Litecoin</div>
                    <div class="card-body">
                        <div class="text-center">
                            <img src="wallets/litecoin.png" alt="Litecoin QR Code" width="60%" height="60%" />
                        </div>
                        <br>
                        <p class="card-text">LSTzUWZbAVRCgDMHjc9fjPM5PFRndKxnkK</p>
                    </div>
                </div>

                <div class="card border-ethereum mb-3" style="max-width: 20rem;">
                    <div class="card-header">Ethereum</div>
                    <div class="card-body">
                        <div class="text-center">
                            <img src="wallets/ethereum.png" alt="Ethereum QR Code" width="60%" height="60%" />
                        </div>
                        <br>
                        <p class="card-text">0xe67F900395958c609Ad3098A0a85d8fCf19B6067</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="card border-info mb-3" style="max-width: 20rem;">
                    <div class="card-header">XRP</div>
                    <div class="card-body">
                        <div class="text-center">
                            <img src="wallets/xrp.png" alt="XRP QR Code" width="60%" height="60%" />
                        </div>
                        <br>
                        <p class="card-text">rUS4KaEGr7Xdac5XAjeqEvSXpgewxHQjK1</p>
                    </div>
                </div>

                <div class="card border-monero mb-3" style="max-width: 20rem;">
                    <div class="card-header">Monero</div>
                    <div class="card-body">
                        <div class="text-center">
                            <img src="wallets/monero.png" alt="Monero QR Code" width="60%" height="60%" />
                        </div>
                        <br>
                        <p class="card-text monero">4AvkGD1MNUhB8dLgAYEUUK1UJxJuj6zXC9DDPb2ywYpRCZ1Y6yWGaxFfD3q8HAgbPXXqnqaGxiZGqjFtjULbgGDhAiLBX6M</p>
                    </div>
                </div>

                <div class="card border-info mb-3" style="max-width: 20rem;">
                    <div class="card-header">Dash</div>
                    <div class="card-body">
                        <div class="text-center">
                            <img src="wallets/dash.png" alt="Dash QR Code" width="60%" height="60%" />
                        </div>
                        <br>
                        <p class="card-text">Xukc7xfRecEMMNuhDKb5Vb1MkoNe28Pson</p>
                    </div>
                </div>

                <div class="card border-warning mb-3" style="max-width: 20rem;">
                    <div class="card-header">ZCash</div>
                    <div class="card-body">
                        <div class="text-center">
                            <img src="wallets/zcash.png" alt="ZCash QR Code" width="60%" height="60%" />
                        </div>
                        <br>
                        <p class="card-text">t1PN1dwc8brKkKhzWqZahwuarngs5STa9fy</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="card border-doge mb-3" style="max-width: 20rem;">
                    <div class="card-header">DogeCoin</div>
                    <div class="card-body">
                        <div class="text-center">
                            <img src="wallets/dogecoin.png" alt="DogeCoin QR Code" width="60%" height="60%" />
                        </div>
                        <br>
                        <p class="card-text">DR6gfyGh2txp9eMpvuweQwUqPzqWc7VJBN</p>
                    </div>
                </div>

                <div class="card border-warning mb-3" style="max-width: 20rem;">
                    <div class="card-header">Bitcoin Gold</div>
                    <div class="card-body">
                        <div class="text-center">
                            <img src="wallets/gold.png" alt="Bitcoin Gold QR Code" width="60%" height="60%" />
                        </div>
                        <br>
                        <p class="card-text">GTuJYM373DDa8qWYx4ryTwaDDpPkY5CxD9</p>
                    </div>
                </div>
            </div>
        </div>

Here's my css, but it's just for extra border colors:

    .border-ethereum{
        border-color: #5c7de9 !important;
    }
    .border-monero{
        border-color: #ff7a00 !important;
    }
    .border-doge{
        border-color: #ceb73d !important;
    }
    .monero{
        font-size: 10px;
    }

Can someone help?

Try moving `d-flex flex-column justify-content-around` to a new div after row that holds all the cards. Or move `.row` div before `.jumbotron` div. — Eye Patch, May 17 '20 at 22:06

score 1 · Accepted Answer · answered May 17 '20 at 22:10

Remove <div class="row">. Change flex-column to flex-row in <div class="jumbotron d-flex flex-row justify-content-around">

/* Here's my css, but it's just for extra border colors: */

.border-ethereum {
  border-color: #5c7de9 !important;
}

.border-monero {
  border-color: #ff7a00 !important;
}

.border-doge {
  border-color: #ceb73d !important;
}

.monero {
  font-size: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="jumbotron d-flex flex-row justify-content-around">
  
    <div class="card border-warning mb-3" style="max-width: 20rem;">
      <div class="card-header">Bitcoin</div>
      <div class="card-body">
        <div class="text-center">
          <img src="wallets/bitcoin.png" alt="Bitcoin QR Code" width="60%" height="60%" />
        </div>
        <br>
        <p class="card-text">bc1qnjpcl0xtywcuxuc7fr9s5gsnhkugnpf0udcn00</p>
      </div>
    </div>

    <div class="card border-success mb-3" style="max-width: 20rem;">
      <div class="card-header">Bitcoin Cash</div>
      <div class="card-body">
        <div class="text-center">
          <img src="wallets/cash.png" alt="Bitcoin Cash QR Code" width="60%" height="60%" />
        </div>
        <br>
        <p class="card-text">qrrj4pcweu0v6vn37q4f6euqah6es5p93uqlcxr8kl</p>
      </div>
    </div>

    <div class="card border-light mb-3" style="max-width: 20rem;">
      <div class="card-header">Litecoin</div>
      <div class="card-body">
        <div class="text-center">
          <img src="wallets/litecoin.png" alt="Litecoin QR Code" width="60%" height="60%" />
        </div>
        <br>
        <p class="card-text">LSTzUWZbAVRCgDMHjc9fjPM5PFRndKxnkK</p>
      </div>
    </div>

    <div class="card border-ethereum mb-3" style="max-width: 20rem;">
      <div class="card-header">Ethereum</div>
      <div class="card-body">
        <div class="text-center">
          <img src="wallets/ethereum.png" alt="Ethereum QR Code" width="60%" height="60%" />
        </div>
        <br>
        <p class="card-text">0xe67F900395958c609Ad3098A0a85d8fCf19B6067</p>
      </div>
    </div>
  
</div>

Sorry, I didn't post that I was trying to do multiple rows. When I do your code, it compresses all of the rows to 1 row. How can I separate them — Tabulate, May 17 '20 at 22:16
use flex-wrap in the jumbotron class. But it will wrap accordingly to the width of the viewport. — yinsweet, May 17 '20 at 22:20
Just found one that might work for you. Add `flex: 1 0 21%;` for each of your flex-item will make 4 items in a row. Details refer to https://stackoverflow.com/a/45384426/7653007. — yinsweet, May 17 '20 at 22:25

Bootstrap justify-content-around not spreading items

1 Answers1