Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67411

Horizontal alignment of two Bootstrap cards body

$
0
0

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


Viewing all articles
Browse latest Browse all 67411

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>