Problems using Card-img-overlay with card-columns
Question
I'm using Bootstrap 4.4 to create a card column:
<!DOCTYPE html> <html> <head> <title>Problems using Card-img-overlay with card-columns</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <div class="card-columns" style="padding-top: 2%;"> <div class="card"> <img class="card-img" src="https://source.unsplash.com/user/erondu/1920x1080" style="opacity: 65%;"> <div class="card-img-overlay"> <h4 class="card-title">Card Title</h4> <h6 class="card-subtitle">Subtítulo do cartão</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p> <a class="btn btn-outline-light" href="">Leia mais</a> </div> </div> <div class="card bg-danger text-white mb-2"> <div class="card-header"> Cabeçalho do cartão </div> <div class="card-body"> <h4 class="card-title">Título do cartão</h4> <h6 class="card-subtitle">Subtítulo do cartão</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p> <a class="btn btn-outline-light" href="">Leia mais</a> </div> </div> <div class="card bg-primary text-white mb-2"> <div class="card-header"> Cabeçalho do cartão </div> <div class="card-body"> <h4 class="card-title">Título do cartão</h4> <h6 class="card-subtitle">Subtítulo do cartão</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p> <a class="btn btn-outline-light" href="">Leia mais</a> </div> </div> <div class="card"> <div class="card-body"> <h4 class="card-title">Título do cartão</h4> <h6 class="card-subtitle">Subtítulo do cartão</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p> <a class="btn btn-outline-primary" href="">Leia mais</a> </div> </div> <div class="card"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a class="nav-link active" href="">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="">Link 2</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="">Link 3</a> </li> </ul> </div> <div class="card-body"> <h4>Título do cartão</h4> <h6>Subtítulo do cartão</h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p> <a class="btn btn-outline-danger btn-block" href="">Leia mais</a> </div> </div> <div class="card bg-success text-white mb-2"> <div class="card-header"> Cabeçalho do cartão </div> <div class="card-body"> <h4 class="card-title">Título do cartão</h4> <h6 class="card-subtitle">Subtítulo do cartão</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p> <a class="btn btn-outline-success" href="">Leia mais</a> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>
The problem is with the card I use Card-img-overlay. When the screen has a higher resolution, the display occurs as expected:
When the screen is smaller:
Part of the meat and its contents are omitted. I tried padding top but it doesn't work properly.
Besides, I can't seem to make the image fit. I tried for a vertically larger image but all I can get is that the card occupies the space corresponding to the height of the image.
How do I prevent the content from being overlaid by another card? and so that the image occupies all the space of the card always?
2 answers
solution1
2 2020-02-03 05:44:14
It is because the parent div element of card-img-overlay is not set to relative and has no fixed height. Set a minimum height for the parent div element (which is .card) so that it will not shrink when the viewport gets smaller.
.card {
min-height: 300px;
position: relative;
}
solution2
1 ACCPTED 2020-02-03 08:25:04
I think bootstrap way to impliment this idea is not the best one. Element with position: absolute is taking out of DOM and can't be fit with it's content.
I suggest to replace .card-img-overlay with .card-body and instead of <img> make div with image as it's background and parametrs as in snippet.
.bg-img { opacity: 65%; background: no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-image: url(https://source.unsplash.com/user/erondu/1920x1080); position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .bg-img + .card-body { position: relative; z-index: 1; }
<!DOCTYPE html> <html> <head> <title>Problems using Card-img-overlay with card-columns</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <div class="card-columns" style="padding-top: 2%;"> <div class="card"> <div class="bg-img"></div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <h6 class="card-subtitle">Subtítulo do cartão</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p> <a class="btn btn-outline-light" href="">Leia mais</a> </div> </div> <div class="card bg-danger text-white mb-2"> <div class="card-header"> Cabeçalho do cartão </div> <div class="card-body"> <h4 class="card-title">Título do cartão</h4> <h6 class="card-subtitle">Subtítulo do cartão</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p> <a class="btn btn-outline-light" href="">Leia mais</a> </div> </div> <div class="card bg-primary text-white mb-2"> <div class="card-header"> Cabeçalho do cartão </div> <div class="card-body"> <h4 class="card-title">Título do cartão</h4> <h6 class="card-subtitle">Subtítulo do cartão</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p> <a class="btn btn-outline-light" href="">Leia mais</a> </div> </div> <div class="card"> <div class="card-body"> <h4 class="card-title">Título do cartão</h4> <h6 class="card-subtitle">Subtítulo do cartão</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p> <a class="btn btn-outline-primary" href="">Leia mais</a> </div> </div> <div class="card"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a class="nav-link active" href="">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="">Link 2</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="">Link 3</a> </li> </ul> </div> <div class="card-body"> <h4>Título do cartão</h4> <h6>Subtítulo do cartão</h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p> <a class="btn btn-outline-danger btn-block" href="">Leia mais</a> </div> </div> <div class="card bg-success text-white mb-2"> <div class="card-header"> Cabeçalho do cartão </div> <div class="card-body"> <h4 class="card-title">Título do cartão</h4> <h6 class="card-subtitle">Subtítulo do cartão</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p> <a class="btn btn-outline-success" href="">Leia mais</a> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Anchor tag not clickable within Bootstrap card-img-overlay
Card-columns Bootstrap
Bootstrap 4 IE not taking col-sm-12 on card-img-overlay
How to make links work with card-img-overlay in Bootstrap v4
Bootstrap Card / Card-columns Breaking
Problem with bootstrap card-columns - showing mess
Implement bootstrap gapless card-columns
Bootstrap 4 - Responsive cards in card-columns
Dropdown within card bleeding into next column of card-columns
Make second card in card-columns fill all remaining width
Related Tags