CODEWITHSUNDEEP
csstwitter-bootstrap
mr.abdo
mr.abdo

Reputation: 485

How to set the size of the bootstrap text and card size

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

Upvotes: 2

Views: 20966

Answers (1)

mkyriacou1994
mkyriacou1994

Reputation: 34

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.

Upvotes: 1

Related Questions