Jump to content

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>
                  <p class="card-text">This demonstration provides an overview of the search functionality.</p>
                 <div class="card-footer"> Duration: 10 mins </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 {


Edited by DeniseW
double images
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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...