1

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:

Working

When the screen is smaller:

Part of the casing omitted and image does not fit

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?

1

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>

2

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; 
  }

https://jsfiddle.net/svwb6r31/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.