title: How to make bootstrap card clickable?
body: <p>In order to use on my website, I am trying to make bootstrap cards clickable. 
  But when I wrap boxes with "ahref" link, there are a lot of styling problems. 
  The boxes becomes smaller. I tried a lot of alternatives however I couldn't find why I am having problem with it.</p>
  
  <p>You can also find <a href="https://codepen.io/snarex/pen/ebQdgj" rel="nofollow noreferrer">https://codepen.io/snarex/pen/ebQdgj</a> which I have made some test. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>section {
      padding-top: 4rem;
      padding-bottom: 5rem;
      background-color: #f1f4fa;
  }
  .wrap {
      display: flex;
      background: white;
      padding: 1rem 1rem 1rem 1rem;
      border-radius: 0.5rem;
      box-shadow: 7px 7px 30px -5px rgba(0,0,0,0.1);
      margin-bottom: 2rem;
  }
  
  .wrap:hover {
      background: linear-gradient(135deg,#6394ff 0%,#0a193b 100%);
      color: white;
  }
  
  .ico-wrap {
      margin: auto;
  }
  
  .mbr-iconfont {
      font-size: 4.5rem !important;
      color: #313131;
      margin: 1rem;
      padding-right: 1rem;
  }
  .vcenter {
      margin: auto;
  }
  
  .mbr-section-title3 {
      text-align: left;
  }
  h2 {
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
  }
  .display-5 {
      font-family: 'Source Sans Pro',sans-serif;
      font-size: 1.4rem;
  }
  .mbr-bold {
      font-weight: 700;
  }
  
   p {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      line-height: 25px;
  }
  .display-6 {
      font-family: 'Source Sans Pro',sans-serif;
      font-size: 1re</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"&gt;
  &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!------ Include the above in your HEAD tag ----------&gt;
  
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
  &lt;section&gt;
  &lt;div class="container"&gt;
  
   
    &lt;div class="row mbr-justify-content-center"&gt;
  
              &lt;div class="col-lg-6 mbr-col-md-10"&gt;
                  &lt;div class="wrap"&gt;
                      &lt;div class="ico-wrap"&gt;
                          &lt;span class="mbr-iconfont fa-volume-up fa"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="text-wrap vcenter"&gt;
                          &lt;h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5"&gt;Stay &lt;span&gt;Successful&lt;/span&gt;&lt;/h2&gt;
                          &lt;p class="mbr-fonts-style text1 mbr-text display-6"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-6 mbr-col-md-10"&gt;
                  &lt;div class="wrap"&gt;
                      &lt;div class="ico-wrap"&gt;
                          &lt;span class="mbr-iconfont fa-calendar fa"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="text-wrap vcenter"&gt;
                          &lt;h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5"&gt;Create
                              &lt;span&gt;An Effective Team&lt;/span&gt;
                          &lt;/h2&gt;
                          &lt;p class="mbr-fonts-style text1 mbr-text display-6"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-6 mbr-col-md-10"&gt;
                  &lt;div class="wrap"&gt;
                      &lt;div class="ico-wrap"&gt;
                          &lt;span class="mbr-iconfont fa-globe fa"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="text-wrap vcenter"&gt;
                          &lt;h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5"&gt;Launch
                              &lt;span&gt;A Unique Project&lt;/span&gt;
                          &lt;/h2&gt;
                          &lt;p class="mbr-fonts-style text1 mbr-text display-6"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-6 mbr-col-md-10"&gt;
                  &lt;div class="wrap"&gt;
                      &lt;div class="ico-wrap"&gt;
                          &lt;span class="mbr-iconfont fa-trophy fa"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="text-wrap vcenter"&gt;
                          &lt;h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5"&gt;Achieve &lt;span&gt;Your Targets&lt;/span&gt;&lt;/h2&gt;
                          &lt;p class="mbr-fonts-style text1 mbr-text display-6"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              
  
              
          &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>