<div class="row">

  <div class="col-4">

    <div class="list-group list-group-light" id="list-tab" role="tablist">

      <a class="list-group-item list-group-item-action active px-3 border-0" id="list-home-list"

        data-mdb-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>

      <a class="list-group-item list-group-item-action px-3 border-0" id="list-profile-list"

        data-mdb-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>

      <a class="list-group-item list-group-item-action px-3 border-0" id="list-messages-list"

        data-mdb-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>

      <a class="list-group-item list-group-item-action px-3 border-0" id="list-settings-list"

        data-mdb-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>

    </div>

  </div>

  <div class="col-8">

    <div class="tab-content" id="nav-tabContent">

      <div class="tab-pane fade show active" id="list-home" role="tabpanel"

        aria-labelledby="list-home-list">

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore

        impedit quibusdam exercitationem eligendi voluptate doloribus

        non pariatur libero quod nobis mollitia odio dolore eos debitis

        iure, autem quisquam ullam beatae.

      </div>

      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">

        Ea eos asperiores deserunt reprehenderit voluptatem deleniti

        dolor iure eum consectetur commodi.

      </div>

      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">

        Et perspiciatis facilis labore natus at necessitatibus. Sequi

        earum qui illum reiciendis? Excepturi, dicta consequuntur,

        voluptas aspernatur, quis laboriosam exercitationem quasi

        officia tempore iste assumenda aliquam.

      </div>

      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">

        Praesentium asperiores nemo ratione quas atque excepturi odio

        aliquid libero, architecto aspernatur expedita, corrupti, rem

        odit quos exercitationem maxime at. Ex, eveniet rerum laborum

        accusamus delectus magnam maxime!

      </div>

    </div>

  </div>

</div>