Jump to content
DeniseW

Bootstrap 4 Card Problem - align elements across cards

Recommended Posts

Good afternoon. I have problem. I have 3 cards in a row. They work great.  They have an image, a card title, and card text.  The problem is when you display the page such that the text in the card title has to wrap.  This pushes down the card text.  So, when you look across the row, the card text is lower this one, higher that one, not aligned.  I am not sure how to fix this. I tried setting a bigger margin bottom for the card title but that didn't work.  

Here is a picture of the problem. Ignore the dotted white lines. Was directly from Dreamweaver display.  any ideas would be GREATLY appreciated. Thanks

Card code in the page:

<div class="col-lg-3 col-md-6 mb-4 column start">
              <div class="card h-100">
                <a href="http://help.cccis.com/static/ccc_one/training/Search%20Overview/Search%20Overview.htm" target="blank" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('searchov','','images/intro_3_demo.png',1)"><img class="card-img-top" src="images/intro_3_base.jpg" alt="Search Overview"  id="searchov"></a> 
                <div class="card-body">
                  <h4 class="card-title">
                    <a href="http://help.cccis.com/static/ccc_one/training/Search%20Overview/Search%20Overview.htm" target="_blank">Search Overview</a>
                  </h4>
                  <h5>ELearning</h5>
                  <p class="card-text">This demonstration provides an overview of the search functionality.</p>
                </div>
                 <div class="card-footer"> Duration: 10 mins </div>
              </div>
            </div>

CSS bootstrap.css:

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
    word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}
CSS bootstrap.min.css for the cards: (apologies for the wall o'text - its from a template)

.card {position:relative;display:flex;flex-direction: column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0, 0, 0, 0.125);border-radius: 0.25rem}.card > * {flex: 0 0 auto}.card>hr{margin-right:0;margin-left:0}.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-body{width:100%;-ms-flex:auto;flex:auto;padding:1.25rem}.card-title{width:100%;margin-bottom:1.75rem}.card-subtitle{margin-top:-.375rem;margin-bottom:0}.card-text:last-child{width:100%;margin-bottom:0}.card.h-100 .card-body .card-text {
}

image.thumb.png.ce0a435c6c4d48934ab14e729f30af7a.png

Edited by DeniseW
double images

Share this post


Link to post
Share on other sites

The only thing i can suggest without using JavaScript, is to use a min-height on the title, to allow for 3 to 4 lines

h4.card-title {
min-height: 4.5em;

}

You can't use flex as there in there individual columns, and no access to each others height to adjust to the same.

Share this post


Link to post
Share on other sites

Nice. I will try that too. I kept working at it and found that in the css if I add a height and also play with margin-bottom, that seems to work.  I like your method too. THANKS

 

.card-title{width:100%;height:2.6rem; margin-bottom:1.2rem}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×