Search the Community
Showing results for tags 'card'.
Found 2 results
-
Hello, I'm using w3-third class to show images. Can I center images vertically, since they have not the same height ? Tried many options but I could not find the right one. Thanks <body> <div class="w3-card-4 w3-margin" style="width:50%"> <div class="w3-display-container w3-text-white"> <img src="largeimg" alt="Lights" style="width:100%"> </div> <div class="w3-row w3-padding "> <div class="w3-third w3-center"> <h3><br></h3> <img src="img1" style="width:90%"> </div> <div class="w3-third w3-center"> <h3><br></h3> <img src="img2" style="width:90%"> </div> <div class="w3-third w3-center"> <h3><br></h3> <img src="img3" style="width:90%"> </div> </div> </div> </body>
-
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 { }
