'How to make a button consistent on all size of display?

Image attached is the button from display of two different sizes (24inch and 13inch), button on 24inch display appears normal whereas add to cart button on 13inch display is broken.13inch display button 24 inch display button

    <div class="row my-5" id="3">
            <span id="lblArtworkId" style="display: none;">3</span>
            <div class="col-2">
                <div class="d-flex justify-content-center">
                    <a href="./">
                        <img src="upload/artworks/Artwork3.jpg" alt="" class="card-img-top" style="max-height: 8rem;">
                    </a>
                </div>
            </div>
            <div class="col-6">
                <div class="h-100 d-flex flex-column justify-content-between">
                    <span>
                        <a href="./" class="text-decoration-none text-muted fs-4">
                            Construction in Red, Blue & Yellow Drawing
                        </a>
                    </span>
                    <hr>
                    <p class="m-0">Artist: Karin White</p>
                </div>
            </div>
            <div class="col-2">
                <div class="h-100 d-flex align-items-center justify-content-center">
                    <span class="fw-bold">$ 1120.00</span>
                </div>
            </div>
            <div class="col-2">
                <div class="h-100 d-flex align-items-center justify-content-between">
                    <button id="btnRemove" class="btn btn-outline-danger">Remove</button>
                    <button id="btnCart" class="btn btn-primary">Add to Cart</button>
                </div>
            </div>
        </div>
csslaraveltwitter-bootstrapbootstrap-5


Solution 1:[1]

Welcome to stackoverflow.

You can use cols with a breakpoint prefix to adjust the layout. (e.g. col-xxl-2 col-3). Read Bootstrap Breakpoints and Grid options for more information. Also, since Bootstrap is sensitive to pixels, it is much better to consider pixels instead of inches.

Example:

<div class="container">

    <div class="row my-5" id="3">
        <span id="lblArtworkId" style="display: none;">3</span>
        <div class="col-xxl-2 col-3">
            <div class="d-flex justify-content-center">
                <a href="./">
                    <img src="upload/artworks/Artwork3.jpg" alt="" class="card-img-top" style="max-height: 8rem;">
                </a>
            </div>
        </div>
        <div class="col-xxl-6 col-9">
            <div class="h-100 d-flex flex-column justify-content-between">
                <span>
                    <a href="./" class="text-decoration-none text-muted fs-4">
                        Construction in Red, Blue & Yellow Drawing
                    </a>
                </span>
                <hr>
                <p class="m-0">Artist: Karin White</p>
            </div>
        </div>
        <div class="col-xxl-2 col-4">
            <div class="h-100 d-flex align-items-center justify-content-center">
                <span class="fw-bold">$ 1120.00</span>
            </div>
        </div>
        <div class="col-xxl-2 col-8">
            <div class="h-100 d-flex align-items-center justify-content-between">
                <button id="btnRemove" class="btn btn-outline-danger w-50 mx-1">Remove</button>
                <button id="btnCart" class="btn btn-primary w-50 mx-1">Add to Cart</button>
            </div>
        </div>
    </div>

</div>

Edit

Don't forget to include the required meta tags:

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions