<nav class="navbar navbar-dark bg-dark">

  <ul class="navbar-nav mr-auto">

    <li class="nav-item active">

      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

    </li>

  </ul>

</nav>

​

<div class="p-3 p-md-5 m-md-3 text-center bg-light">

  <div class="col-md-7 p-lg-5 mx-auto my-5" style="z-index: 100">

    <h1 class="h2 font-weight-normal">Import My Insurance</h1>

    <p class="lead font-weight-normal">Easily use the Canopy Connect SDK to collect insurance information.</p>

    <!-- Canopy Connect Button -->

    <a class="btn btn-primary btn-lg" href="#" id="canopyconnect-btn">Import My Insurance</a>

    <!-- End Canopy Connect Button -->

  </div>

</div>

​

<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">

  <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white">

    <div class="my-3 py-3">

      <h2>Another headline</h2>

      <p class="lead">Another subheading.</p>

    </div>

  </div>

  <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center">

    <div class="my-3 p-3">

      <h2>Another headline</h2>

      <p class="lead">Another subheading.</p>

    </div>

  </div>

</div>

/*

 * Extra utilities

 */

​

.border-top {

  border-top: 1px solid #e5e5e5;

}

​

.border-bottom {

  border-bottom: 1px solid #e5e5e5;

}

​

.box-shadow {

  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);

}

​

.flex-equal > * {

  -ms-flex: 1;

  -webkit-box-flex: 1;

  flex: 1;

}

​

@media (min-width: 768px) {

  .flex-md-equal > * {

    -ms-flex: 1;

    -webkit-box-flex: 1;

    flex: 1;

  }

}

​

.overflow-hidden {

  overflow: hidden;

}

​