Bootstrap 4 Template

This is a simple Twitter Bootstrap 4 template. To check BS4 and Bootstrap-table compatibility.

by kpowz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="wrapper">
  <div class="card-deck">
    <div class="card card-tools-manager">

      <div class="card-body">
        <header class="flexbox">
          <img src="https://via.placeholder.com/75" class="" alt="...">
          <div class="heading-group">
            <h5>Business Name Here</h5>
            <h3 class="">
              Product Name Goes Here
            </h3>
          </div>
        </header>
        <p class="card-text">Having paid his debts, therefore, in the most honourable manner, he retreated with his daughter to the town of Lucerne, where he lived unknown and in wretchedness. My father loved Beaufort with the truest friendship and was deeply grieved by his retreat in these unfortunate circumstances. He bitterly deplored the false pride which led his friend to a conduct so little worthy of the affection that united them. He lost no time in endeavouring to seek him out, with the hope of persuading him to begin the world again through his credit and assistance. Beaufort had taken effectual measures to conceal himself, and it was ten months before my father discovered his abode. Overjoyed at this discovery, he hastened to the house, which was situated in a mean street near the Reuss. But when he entered, misery and despair alone welcomed him. Beaufort had saved but a very small sum of money from the wreck of his fortunes, but it was sufficient to provide him with sustenance for some months, and in the meantime he hoped to procure some respectable employment in a merchant's house. The interval was, consequently, spent in inaction; his grief only became more deep and rankling when...

SCSS

.wrapper {
  padding: 1.5rem; /* should already be built into app */
}



.card-tools-manager {
  
/* @media only screen and (min-width: 480px) {
  h3, .h3 {
      font-size: 21px;
      font-size: 1.3125rem;
  }
  h5, .h5 {
      font-size: 21px;
      font-size: 1.3125rem;
  }
} */
  p {
    max-height: 4.5rem;
    min-height: 4.5rem;
    overflow-y: auto;
    text-overflow: ellipsis;
    background-attachment: local, local, scroll, scroll;
  }
  
  h3, h5 {
    margin-bottom: 0;
  }
  .card-footer-tools-manager {
    background-color: inherit;
  }
  
  .btn-light-deere {
    background-color: var(--LightGrayJohnDeere);
    border-color: var(--LightGrayJohnDeere);
  }
  
  .flexbox {
    display: flex;
    height: 4.6875rem; /* based on font-size 16px !!! */
    margin-bottom: .5rem;
    align-items: flex-end;
    
    .heading-group {
      
    @media only screen and (min-width: 575px) {
      h3 {
        font-size: 2.4vw;
      }
      h5 {
        font-size: 1.8vw;
      }
      }
      padding-left: 1rem;
    }
  }
}

.badge-deere-light {
  background-color: var(--LightGrayJohnDeere);
}

.badge-card {
  padding: .5rem;
}

:root {
    /*  John Deere official/brand colors http://ux.deere.com/web-standards/visuals/colors/ */
    --YellowJohnDeere: #FFDE00;
    --GreenJohnDeere: #367C2B;
    --MidGreenJohnDeere: #3B8927;
    --WhiteJohnDeere: #FFFFFF;
    --BackgroundLightComponent: var(--WhiteJohnDeere);
    --BlackJohnDeere: #000000;
    --CharcoalJohnDeere: #333333;
    --MediumGrayJohnDeere: #AAAAAA;
    --LightGrayJohnDeere: #EEEEEE;
    --BackgroundLightLayout: var(--LightGrayJohnDeere);
    --RedJohnDeere: #BD2E28;
    --ErrorRed: var(--RedJohnDeere);
    /*  End John Deere official/brand colors */

    --LightRed: #f66251;
    --BackgroundComponent: #FDFDFD;
    --LightGraySalesAdmin: #cccccc;
    --BorderLightGray: var(--LightGraySalesAdmin);
    --GreenSalesAdmin: #135429;
    --LightLightGraySalesAdmin: #f4f5f8;
    --ChromeSelectDisabled: #ebebe4;
}