title: How to set the size of the bootstrap text and card size
body: <p>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: <code>card-text</code>) to avoid the overlap and to avoid different cards size?</p>
  
  <pre><code>&lt;div class="card"&gt;
    &lt;div class="img-dimension"&gt;
     &lt;img class="card-img-top" src="img.jpg"&gt;
    &lt;/div&gt;
    &lt;div class="card-body"&gt;
      &lt;h5 class="card-title"&gt;title&lt;/h5&gt;        
      &lt;div class="card-text"&gt;
              &lt;p&gt;
                  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.
              &lt;/p&gt; 
      &lt;/div&gt;
      &lt;div class="text-left pb-2 pt-2"&gt;
          &lt;a href="#"&gt;Details...&lt;/a&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS code. I didn't change this bootstrap CSS Code:</p>
  
  <pre><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;
  }
  </code></pre>