DeniseW Posted October 5, 2018 Share Posted October 5, 2018 (edited) 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 { } Edited October 5, 2018 by DeniseW double images Link to comment Share on other sites More sharing options...
dsonesuk Posted October 5, 2018 Share Posted October 5, 2018 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 comment Share on other sites More sharing options...
DeniseW Posted October 5, 2018 Author Share Posted October 5, 2018 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} Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now