title: How to create a two tone banner in bootstrap
body: <p>I am trying to create a banner that has a two tone blue color similar to this: <a href="https://i.stack.imgur.com/BBbGE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BBbGE.png" alt="Banner" /></a></p>
  <p>I am using <code>Bootstrap 4.x</code> with <code>asp.net mvc</code>. I have tried dividing the banner into 3 columns but I couldn't expand the the background color all the way in the icon column.</p>
  <p>Here is how it currently looks on my end:
  <a href="https://i.stack.imgur.com/I6OyB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I6OyB.png" alt="enter image description here" /></a></p>
  <p>Here is my code:</p>
  <h3>View</h3>
  <pre class="lang-cs prettyprint-override"><code>&lt;div class=&quot;row alert-banner-row&quot;&gt;
          &lt;div class=&quot;col-sm-2 icon-column&quot;&gt;
              &lt;i class=&quot;fas fa-3x @Model.Icon1 fa-inverse&quot;&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-sm-8 body-column&quot;&gt;
              &lt;h5&gt;@Model.Title&lt;/h5&gt;
              &lt;p&gt;@Model.Content&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-sm-2 button-column&quot;&gt;
              @if (Model.ButtonUrl.EndsWith(&quot;.pdf&quot;))
              {
                  &lt;a class=&quot;ctaBanner-cta button button--white&quot; target=&quot;_blank&quot; href=&quot;@Model.ButtonUrl&quot;&gt;@Model.ButtonLabel&lt;/a&gt;
              }
              else
              {
                  &lt;a class=&quot;ctaBanner-cta button button--white&quot; href=&quot;@Model.ButtonUrl&quot;&gt;@Model.ButtonLabel&lt;/a&gt;
              }
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <h3>SCSS</h3>
  <pre><code>.alert-banner-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0.5rem;
      border-radius: 1rem;
      background-color: #004089;
  
      .body-column {
          padding-top: 10px;
          font-family: 'Roboto', sans-serif;
          margin: 0rem;
          color: white;
      }
  
      .icon-column {
          background-color: #00336D;
      }
  }
  
  </code></pre>
  <p>How can I edit what I currently have to make it look like the first screenshot?</p>