Wsrtjtyk

I have the card implemented using bootstrap. But my card size is varying according to the quantity of the text characters.
Details link is varying as well, and when i shrink the browser, it overlap my card text.
How to fix the size of the card text (class: card-text) to avoid the overlap and to avoid different cards size?

<div class="card">

  <div class="img-dimension">

   <img class="card-img-top" src="img.jpg">

  </div>

  <div class="card-body">

    <h5 class="card-title">title</h5>        

    <div class="card-text">

            <p>

                My long card-text....Phasellus a est. Nam eget dui.

                Pellentesque ut neque. Nunc sed turpis. Donec mi odio,

                faucibus at, scelerisque quis, convallis in, nisi.

            </p> 

    </div>

    <div class="text-left pb-2 pt-2">

        <a href="#">Details...</a>

    </div>

 </div>

</div>

My CSS code. I didn't change this bootstrap CSS Code:

.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,.125);

    border-radius: .25rem;

}



.card-body {

    flex: 1 1 auto;

    padding: 1.25rem;

}



.card-title {

    margin-bottom: .75rem;

}



.card-img-top {

    width: 100%;

    border-top-left-radius: calc(.25rem - 1px);

    border-top-right-radius: calc(.25rem - 1px);

}



.text-left {

    text-align: left!important;

}

.pb-2, .py-2 {

    padding-bottom: .5rem!important;

}

.pt-2, .py-2 {

    padding-top: .5rem!important;

}

Text-Overflow

This might help you, you can use it to control the overflow of your text according to your needs.

For example:

 .card-text{

    font-size:19px;

    text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;

}

If you wish to make your website responsive you should try using @media rule
in which you can specify the exact changes according to the resolution.

Have a look at this link for @media rule.

For example: -->Hide an element when the browser's width is 600px wide or less:

   @media screen and (max-width: 600px) {

  div.example {

    display: none;

  }

}

I hope this can help you.