title: CSS Dropcap Bootstrap 5
body: <p>I want to style a Dropcap like that:</p>
  <p><a href="https://i.stack.imgur.com/vwfMa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vwfMa.png" alt="2" /></a></p>
  <p>the big letter is aroud 400% of the headlinesize and the text starts under the headline and with the underline of the big letter
  if the headline is 2 lines height it's alright but if its only o line it's centered in the middle of the big letter</p>
  <pre><code>&lt;div class=&quot;col-auto d-none d-md-block&quot;&gt;
          &lt;span class=&quot;dropcap d-block mt-n7&quot;&gt;[first letter of the headline]&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col pl-3&quot;&gt;
          &lt;p class=&quot;h3 dropcap-text&quot;&gt;
              headline text
          &lt;/p&gt;
          &lt;p&gt;
             Text
          &lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  <p>I structered like that because on mobile devices the dropcap is a normal letter. And the text should have a left space like the width of the dropcap.</p>
  <pre><code>.dropcap{
      @media all and (min-width: $breakpoint-md) {
          text-decoration: underline;
          text-underline-offset: 0.5rem;
          text-decoration-color: $primary;
          font-weight: $font-weight-normal;
          font-size: $h3-font-size * 4;
      }
  }
  
  .dropcap-text {
  
      &amp;::first-letter {
          @media all and (min-width: $breakpoint-md) {
              font-size: 0;       
          }
      }
  }
  </code></pre>
  <p>I already tried the solution with the float left but I can't get the headline on the bottom of the dropcap with that.</p>