Search code examples
htmlbootstrap-4bootstrap-grid

Bootstrap 4 card layout width not consistent

My page has three cards in it as shown in image 1. The cards are not the same width in columns 1. When testing it on the mobile (Chrome) they are all different widths and the bottom two cards are touching as shown in image 2.

How do I get the columns on the left to be the same width and maintain responsiveness and size when on mobile? I'm expecting uniform width and height on both web and mobile.

My code is:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">
            <div class="col-lg-12">
                <div class="card rounded-0">
                    <div class="card-header">
                        <h6 class="mb-0">Numbers</h6>
                    </div>
                    <div class="card-body" style="font-size: small; overflow-y: scroll;">                       
                        My Content                        
                    </div>
                </div>               
                <div class="col-lg-12">
                    <div class="card rounded-0">
                        <div class="card-header">
                            <h6 class="mb-0">More Numbers</h6>
                        </div>
                        <div class="card-body" style="font-size: small;">
                            My Content
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>   
    <div class="col-lg-8">
        <div class="card rounded-0">
            <div class="card-header">
                <h6 class="mb-0">Some stuff</h6>
            </div>
            <div class="card-body" style="font-size: small;">
                My Content
            </div>
        </div>
    </div>
</div>

Layout on web page:Layout on web page

The layout on mobile:Layout on mobile

https://www.codeply.com/go/Fia8Y6YPNl

Solution

  • You're breaking the bootstrap rule of always having div.col-* being a child of a div.row. A div.col-* cannot be a direct child of another div.col-*. This is likely your issue.

    Try this:

    <div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-12">
                    <div class="card rounded-0">
                        <div class="card-header">
                            <h6 class="mb-0">Numbers</h6>
                        </div>
                        <div class="card-body" style="font-size: small; overflow-y: scroll;">
                            My Content
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card rounded-0">
                        <div class="card-header">
                            <h6 class="mb-0">Numbers</h6>
                        </div>
                        <div class="card-body" style="font-size: small; overflow-y: scroll;">
                            My Content
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card rounded-0">
                <div class="card-header">
                    <h6 class="mb-0">Numbers</h6>
                </div>
                <div class="card-body" style="font-size: small; overflow-y: scroll;">
                    My Content
                </div>
            </div>
        </div>
    </div>
</div>