Problems using Card-img-overlay with card-Columns

Asked

Viewed 86 times

1

I’m using Bootstrap 4.4 to create a column of cards:

<!DOCTYPE html>
<html>
    <head>
        <title>Problemas em usar Card-img-overlay com 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%;">

            <!--Inicio cartão-->
            <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">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>
            <!--Fim do cartão-->
      
            <!--Inicio cartão-->
            <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>
            <!--Fim do cartão-->
            
            <!--Inicio cartão-->
            <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>
            <!--Fim do cartão-->
      
            
            <!--Inicio cartão-->
            <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>
            <!--Fim do cartão-->
      
            <!--Inicio cartão-->
            <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>
            <!--Fim do cartão-->
      
      
            <!--Inicio cartão-->
            <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>
            <!--Fim do cartão-->
      
          </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/[email protected]/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 if gives in the carde where I use the Card-img-overlay. When the screen has a higher resolution the display occurs as expected:

Funcionando corretamente

When the screen is smaller:

Parte do carte omitido e imagem não se ajusta

Part of the carde and the contents of it are omitted. I tried the padding but it did not work you proper way.

Besides, I can’t make the picture fit. I tried for a vertically larger image but all I can do is for the card to occupy the space corresponding to the image height.

How do I make the content not be overlaid by another card ? and the image always takes up all the space on the card ?

html css twitter-bootstrap

  • Dude you used some extra CSS, like you did some CSS at hand or you’re using everything original from Bootstrap?

  • All original from Bootstrap

  • Why not? How can I improve the question ?

  • 1

    Nor was it my vote ok, but almost every CSS question takes a negative vote, in a while I have been repairing this

1 answer

0

Good morning, I made a simple adaptation to work properly.

First, I removed the tag that you were using to bring the image, and created the class card-bg to call in the file css.

<div class="card card-bg">
                <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>

And then I brought the image as background of his using CSS.

.card-bg {
     background: url('https://source.unsplash.com/user/erondu/1920x1080') fixed;
     /* O 'fixed' NÃO É OBRIGATÓRIO! */
}

You can apply other properties to this background if you are interested and necessary, but this way it already works the way you quoted.

I hope it helped.

  • 1

    Dude he’s using Bootstrap and you destroyed the Card structure by taking the https://prnt.sc/qxegrqtags, plus if he has 10 card he’ll have to do 10 classes in the CSS each. with an image, and to make matters worse background image does not appear in print and tb is not accessible to screen readers, has no alt etc

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.