Bootstrap justify-content-around is not evenly distributing items

I am attempting to evenly distribute three rows of four bootstrap cards across a jumbotron with space-around, but it is not displaying correctly. I suspect there may be a margin interference issue that is included with Bootstrap. Here is the code I am using:

<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 is my custom CSS for different border colors:

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

If anyone can provide assistance, it would be greatly appreciated!

htmlcssbootstrap-4

Answer №1

Take out <div class="row">. Replace flex-column with flex-row within 

<div class="jumbotron d-flex flex-row justify-content-around">

/* I've added some CSS for different 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the size of a Video/Image Slider to perfectly fit the screen dimensions (both width and height

I have been using a slider code to display my images and videos. The code can be found here: Code:https://codepen.io/1wdtv/pen/jbjZeb The issue I am facing is that the slider is only responsive in terms of width. This means that when resizing the browser ...

javascriptjqueryhtmlcss

Hover Problem with HTML Image Tag

Having trouble understanding why the images are not changing color on hover. The images are svg files and should be able to adopt the color. Here is the code snippet: HTML: <div class="toolTile col-md-3"> <a href="#/cards"> <im ...

htmlcssimagesvg

Troubleshooting: jQuery's load() function behaving unexpectedly with textarea elements

Is there a way to retrieve user content from a PHP file using the load() function and display it in a textarea? I've noticed that this process works fine when the textarea is empty, but if the user types something in it beforehand, the content won&apo ...

javascriptphpjqueryhtmldom

The navigation bar text overflows when the sidebar is collapsed into icons

My sidebar contains icons and a menu name. When the screen size is smaller than a certain amount, the sidebar collapses to show only the icon and hides the menu name. Here is the structure of the navbar: <nav id="sidebar" [ngClass]="{active: barActive} ...

htmlcssangularbootstrap-4

Guide to customizing WordPress header menu buttons with CSS, excluding a specific button

I need help with custom CSS for my WordPress site. I want to apply a hover effect to all menu buttons except for the "Contact" button, which already has its own styling. The CSS code adds a growing line beneath the hovered menu item and a static line unde ...

htmlcsswordpresscustom-wordpress-pages

Exploring WordPress's Query Page with Posts

My current code successfully pulls posts from a specified category, but I am struggling to also include pages in the output. I have tried various methods, but haven't been able to pull in both posts and pages at the same time. HTML/PHP <?php quer ...

phphtmlwordpress

The functionality of JQuery's .hover() is disabled once an HTML onClick() event is activated

I am currently working on a webpage and attempting to incorporate JQuery into it for the first time. However, I seem to be encountering some issues that I believe might have simple solutions. Background Information My JQuery code only contains one event l ...

javascripthtmljquerycss

Maintain a consistent header height with CSS even when using the calc() function

--dis: calc(var(--max-height) - var(--min-height)); /* @media large{--min-height:13rem}; @media small{--min-height:6.5rem}; --max-height:75vh; */ --percent: calc(var(--scroll-ani) / var(--dis)); /* in js: document.body.style = "--scroll-ani: ...

javascripthtmlcss

Creating a React button animation with CSS vibes

When I click a button, I want a subtle sparkle to appear and disappear quickly, within half a second. I've thought about using a gif, but it requires a lot of manual artistic work to achieve the desired effect. Is there a way to utilize the Animatio ...

cssreactjsreact-native

Bootstrap 4.0 fixed navbar - Resolved alignment problem

I am working on dividing my navbar into two equal parts. I want the right side to contain my menu and the left side to have my icon and search bar. When the search bar is clicked, it should extend to fill the rest of the half in the left part. I have manag ...

htmlcsstwitter-bootstrapbootstrap-4

Adjust the classes of the static navigation bar based on the background of the section it is positioned over

In the process of developing a website using Bootstrap 4, I encountered a challenge with sections featuring both light and dark backgrounds along with a fixed navbar. The navbar, which is set to dark using the css class bg-dark, becomes indistinguishable ...

javascriptjquerycssbootstrap-4scrollspy

Styling an HTML table with two columns: one column displaying an image, and the other column containing information related to the image

I have a concept that involves creating a table with 2 columns. The left column will feature an image, while the right column will display data about the image in 6 rows. ________________________________ | |_______________| | | ...

phphtmlcsshtml-table

Struggling to display the Three.js LightMap?

I'm having trouble getting the lightMap to show on my mesh. Here's the code I'm using: loader.load('model.ctm', function (geometry) { var lm = THREE.ImageUtils.loadTexture('lm.jpg'); var m = THREE.ImageUtils.loadT ...

javascripthtmlthree.js

Struggles with ajax and JavaScript arise when attempting to tally up grades

Currently, I am facing an issue with my JavaScript. The problem arises when trying to calculate marks for each correctly chosen answer based on information from the database. If an incorrect answer is selected, the marks are set to '0', otherwise ...

javascriptjqueryhtmlajax

In Chrome, the `Jquery $('input[name=""]').change(function will not be triggered unless there is an unhandled error following it

Here is a script that I've created to make certain inputs dependent on the selection of a radio button. The 'parent' input in this case is determined by the radio button choice. Upon document load, the script initially hides parent divs of ...

javascriptjqueryhtmlonchange

The b-form-input does not conform to the typical HTML input standards by not allowing for a minimum number requirement

Currently, I am facing an issue while working with where using a minimum value causes it to work but triggers an error in the console saying "type check failed for prop "min". Expected Number, got String.". I have tried changing the name to minvalue as su ...

htmlvue.jsbootstrap-4bootstrap-modal

Nested jQuery UI Selectable causing propagation problems

My issue lies in the nested jQuery UI selectable functionality. When I click on Item 1, it is selected as expected. However, when clicking on Item 111 or 1111, it selects all the way up to Item 2. What I require is for only the element that is clicked on t ...

jqueryhtmljquery-uijquery-ui-selectable

Image not found in PDF created from HTML to PDF conversion

I am currently utilizing the HTML-pdf library to convert an HTML page into a PDF format. While the dynamic content is being displayed in the generated PDF, there seems to be an issue with the image not appearing as expected. Despite trying various methods, ...

htmlcssnode.jsimagehtml-pdf

Having difficulty accessing object property using Chunk Template Engine

I am working on a project where I have created a list of objects and now need to retrieve the object name from a template using the Chunk Template Engine. The object list has been initialized as follows: html.set("items", new Item[]{new Item("Item 1", 2) ...

javaandroidhtmlstringchunk-templates

I possess valuable information within my Shopify API and I am eager to integrate this data into my ReactJS application. Can anyone provide guidance on how to accomplish this

Here is the data: I simply want to display titles and ratings in a list, that's it. The API endpoint looks like this: {apikey}{password}@{shopname}.myshopify/admin/api/{api-version}/{resource.json}. { "orders": [ { "tit ...

htmlcssreactjsapishopify