CODEWITHSUNDEEP
htmlcss
Nacio
Nacio

Reputation: 31

Horizontal alignment of two Bootstrap cards body

I have a problem with aligning Bootstrap cards body - with the buttons and text inside them to make them at the same height.

This is what is wrong Different Contact us buttons height

        <div class="card mb-4 shadow-sm d-inline-block">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">A</h4>
            </div>
            <div class="card-body">
                <span>
                    One line text
                </span>
                <h1 class="mt-3 card-title pricing-card-title">€0</h1>
                <ul class="list-unstyled mt-3 mb-4">

                    <li><i class="fas fa-check"></i> Web page</li>
                    <li class="mb-2"><i class="fas fa-sync"></i> AAA</li>

                    <li><i class="fas fa-check"></i> XXX</li>
                    <li><i class="fas fa-check"></i> CCC</li>

                </ul>
                <small class="text-muted">
                    * - Revisions are how many times you can request a change of something, you can read more at <a href="revision-policy">revision policy</a>
                </small>
                <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
            </div>
        </div>

        <div class="card mb-4 shadow-sm d-inline-block">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">H</h4>
            </div>
            <div class="card-body">
                <span>
                    Two line text Two line text Two line text Two line text Two line text 
                </span>
                <h1 class="mt-3 card-title pricing-card-title">€0</h1>
                <ul class="list-unstyled mt-3 mb-4">

                    <li><i class="fas fa-check"></i> Web page</li>
                    <li class="mb-2"><i class="fas fa-sync"></i> JJJ</li>

                    <li><i class="fas fa-check"></i> XXX</li>
                    <li><i class="fas fa-check"></i> CCC</li>

                </ul>
                <small class="text-muted">
                    * - Revisions are how many times you can request a change of something, you can read more at <a href="revision-policy">revision policy</a>
                </small>
                <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
            </div>
        </div>

This is JSFiddle link so you can see the whole code etc. JSFiddle

Upvotes: 1

Views: 1683

Answers (1)

gig
gig

Reputation: 127

TRY THIS

Here the difference between the two cards is the text on the top of the cards. one card is of one line text and other is of two line text. so,in the first card remove the One line text and change it to

''' 

<p class="card-text mb-1">One line text</p>

'''

So that the text is same but at the bottom it takes one line margin and will start the dollars text after one line so,every line will align to down and may get the correct alignment

Upvotes: 1

Related Questions