How do you make cards all the same height in a row? MDB3

Topic: How do you make cards all the same height in a row? MDB3

think pro asked 6 years ago

Hi, I am trying to make cards all the same height in a row regardless of the amount of text that is in each card. This is the problem I am having: https://drive.google.com/file/d/0BwSA-cb3fCgaMEo1S0pYajU2ZWs/view?usp=sharing In the first row of cards in that image, there are different lengths of text in each card so the cards are different heights. I want the cards to look like the second row, where regardless of the amount of text, the actual cards are the same height. How do I do this in MDB3? Thanks for the help!

Add comment

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

Replace .row-flex with .d-flex for a and it'll work

Add comment

think pro answered 6 years ago

0 0 Best answer

Thank you! That worked to make the cards the right height and width. However, when I try to add a link to the cards, the flexbox function no longer works.

Example:

Without the link around the card:
<a href="https://drive.google.com/open?id=0BwSA-cb3fCgaSWJxQS1FazVJcUU" rel="nofollow">https://drive.google.com/open?id=0BwSA-cb3fCgaSWJxQS1FazVJcUU</a>

With the link around the card:
<a href="https://drive.google.com/open?id=0BwSA-cb3fCgacHV2MlNhWXhjRU0" rel="nofollow">https://drive.google.com/open?id=0BwSA-cb3fCgacHV2MlNhWXhjRU0</a>

The code:
<a href="https://drive.google.com/open?id=0BwSA-cb3fCgaNGFvNEpIbWJYRTA" rel="nofollow">https://drive.google.com/open?id=0BwSA-cb3fCgaNGFvNEpIbWJYRTA</a>

When the <a rel="nofollow"></a> tags surround the card, the flexing of the height of the cards no longer works. When I comment out that line of code, it works again. However, I really need this functionality. Why is the <a> tag messing up flexbox? Please let me know! It has been bothering me for many days and I haven't been able to figure it out, please help!

Please insert min. 20 characters.

Thank you! That worked to make the cards the right height and width. However, when I try to add a link to the cards, the flexbox function no longer works. Example: Without the link around the card: https://drive.google.com/open?id=0BwSA-cb3fCgaSWJxQS1FazVJcUU With the link around the card: https://drive.google.com/open?id=0BwSA-cb3fCgacHV2MlNhWXhjRU0 The code: https://drive.google.com/open?id=0BwSA-cb3fCgaNGFvNEpIbWJYRTA When the tags surround the card, the flexing of the height of the cards no longer works. When I comment out that line of code, it works again. However, I really need this functionality. Why is the tag messing up flexbox? Please let me know! It has been bothering me for many days and I haven't been able to figure it out, please help!

Add comment

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

It's pretty simple to do with flexbox. Take a look:

1. Create flex class:
<pre><code>.d-flex {
    display:flex;
}</code></pre>

2. Add the class to .row and cols:
<pre><code><div class="container">
    <div class="row d-flex">

<div class="col-md-4 d-flex">
            <div class="testimonial-card z-depth-1">
                <div class="card-up default-color-dark">
                </div>
                <div class="avatar"><img src="http://mdbootstrap.com/wp-content/uploads/2015/10/avatar-2.jpg" class="img-circle img-responsive">
                </div>
                <div class="card-content">
                    <h5>Anna Maria</h5>
                    <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae voluptas assumenda, quis placeat doloremque corrupti nesciunt fuga laboriosam nobis perspiciatis officia fugiat nihil dolorum quas eligendi odit deleniti, nostrum aliquid. ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci, voluptatum placeat ducimus vero commodi provident culpa accusamus nostrum dolor, labore ratione eius.</p>
                </div>
            </div>
        </div>

<div class="col-md-4 d-flex">
            <div class="testimonial-card z-depth-1">
                <div class="card-up default-color-dark">
                </div>
                <div class="avatar"><img src="http://mdbootstrap.com/wp-content/uploads/2015/10/avatar-2.jpg" class="img-circle img-responsive">
                </div>
                <div class="card-content">
                    <h5>Anna Maria</h5>
                    <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, vel, saepe. Iusto soluta cum voluptate, quis dignissimos itaque deleniti, a, voluptatibus, molestiae autem facere sunt blanditiis nesciunt ea numquam aperiam. ipsum dolor sit amet, consectetur adipisicing elit. Quo reprehenderit magni maiores nulla dolor dolorum nihil quis facere ratione, quaerat natus amet hic ipsum, cupiditate consequatur nemo eius, omnis laboriosam! ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci, voluptatum placeat ducimus vero commodi provident culpa accusamus nostrum dolor, labore ratione eius.</p>
                </div>
            </div>
        </div>

</div>
</div></code></pre>

Please insert min. 20 characters.

It's pretty simple to do with flexbox. Take a look: 1. Create flex class:

.d-flex {
    display:flex;
}

2. Add the class to .row and cols:

<div class="container">
    <div class="row d-flex">

        <div class="col-md-4 d-flex">
            <div class="testimonial-card z-depth-1">
                <div class="card-up default-color-dark">
                </div>
                <div class="avatar"><img src="http://mdbootstrap.com/wp-content/uploads/2015/10/avatar-2.jpg" class="img-circle img-responsive">
                </div>
                <div class="card-content">
                    <h5>Anna Maria</h5>
                    <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci, voluptatum placeat ducimus vero commodi provident culpa accusamus nostrum dolor, labore ratione eius.</p>
                </div>
            </div>
        </div>

        <div class="col-md-4 d-flex">
            <div class="testimonial-card z-depth-1">
                <div class="card-up default-color-dark">
                </div>
                <div class="avatar"><img src="http://mdbootstrap.com/wp-content/uploads/2015/10/avatar-2.jpg" class="img-circle img-responsive">
                </div>
                <div class="card-content">
                    <h5>Anna Maria</h5>
                    <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae voluptas assumenda, quis placeat doloremque corrupti nesciunt fuga laboriosam nobis perspiciatis officia fugiat nihil dolorum quas eligendi odit deleniti, nostrum aliquid. ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci, voluptatum placeat ducimus vero commodi provident culpa accusamus nostrum dolor, labore ratione eius.</p>
                </div>
            </div>
        </div>

        <div class="col-md-4 d-flex">
            <div class="testimonial-card z-depth-1">
                <div class="card-up default-color-dark">
                </div>
                <div class="avatar"><img src="http://mdbootstrap.com/wp-content/uploads/2015/10/avatar-2.jpg" class="img-circle img-responsive">
                </div>
                <div class="card-content">
                    <h5>Anna Maria</h5>
                    <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, vel, saepe. Iusto soluta cum voluptate, quis dignissimos itaque deleniti, a, voluptatibus, molestiae autem facere sunt blanditiis nesciunt ea numquam aperiam. ipsum dolor sit amet, consectetur adipisicing elit. Quo reprehenderit magni maiores nulla dolor dolorum nihil quis facere ratione, quaerat natus amet hic ipsum, cupiditate consequatur nemo eius, omnis laboriosam! ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci, voluptatum placeat ducimus vero commodi provident culpa accusamus nostrum dolor, labore ratione eius.</p>
                </div>
            </div>
        </div>

    </div>
</div>

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

think

Pro User 10Support score
3Questions 5Answers 0Snippets