Modal

<ul class="nav nav-pills nav-fill flex-column flex-sm-row" id="tabs-text" role="tablist">
  <li class="nav-item">
    <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-text-1-tab" data-toggle="tab" href="#tabs-text-1" role="tab" aria-controls="tabs-text-1" aria-selected="true">UI/UX Design</a>
  </li>
  <li class="nav-item">
    <a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-2-tab" data-toggle="tab" href="#tabs-text-2" role="tab" aria-controls="tabs-text-2" aria-selected="false">Programming</a>
  </li>
  <li class="nav-item">
    <a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-3-tab" data-toggle="tab" href="#tabs-text-3" role="tab" aria-controls="tabs-text-3" aria-selected="false">Graphic</a>
  </li>
</ul>

<ul class="nav nav-pills nav-pills-circle" id="tabs_2" role="tablist">
  <li class="nav-item">
    <a class="nav-link rounded-circle active" id="home-tab" data-toggle="tab" href="#tabs_2_1" role="tab" aria-controls="home" aria-selected="true">
      <span class="nav-link-icon d-block"><i class="ni ni-atom"></i></span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#tabs_2_2" role="tab" aria-controls="profile" aria-selected="false">
      <span class="nav-link-icon d-block"><i class="ni ni-chat-round"></i></span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#tabs_2_3" role="tab" aria-controls="contact" aria-selected="false">
      <span class="nav-link-icon d-block"><i class="ni ni-cloud-download-95"></i></span>
    </a>
  </li>
</ul>

<div class="nav-wrapper">
    <ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-icons-text" role="tablist">
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-icons-text-1-tab" data-toggle="tab" href="#tabs-icons-text-1" role="tab" aria-controls="tabs-icons-text-1" aria-selected="true"><i class="ni ni-cloud-upload-96 mr-2"></i>Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-2-tab" data-toggle="tab" href="#tabs-icons-text-2" role="tab" aria-controls="tabs-icons-text-2" aria-selected="false"><i class="ni ni-bell-55 mr-2"></i>Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-3-tab" data-toggle="tab" href="#tabs-icons-text-3" role="tab" aria-controls="tabs-icons-text-3" aria-selected="false"><i class="ni ni-calendar-grid-58 mr-2"></i>Messages</a>
        </li>
    </ul>
</div>
<div class="card shadow">
    <div class="card-body">
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="tabs-icons-text-1" role="tabpanel" aria-labelledby="tabs-icons-text-1-tab">
                <p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
                <p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
            </div>
            <div class="tab-pane fade" id="tabs-icons-text-2" role="tabpanel" aria-labelledby="tabs-icons-text-2-tab">
                <p class="description">Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
            </div>
            <div class="tab-pane fade" id="tabs-icons-text-3" role="tabpanel" aria-labelledby="tabs-icons-text-3-tab">
                <p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
            </div>
        </div>
    </div>
</div>

<div class="row">
  <div class="col-md-6 mb-5">
    <div class="row">
      <div class="col-md-3">
        <ul class="nav nav-pills nav-pills-warning nav-pills-circle mb-3" id="tabs_2" role="tablist">
          <li class="nav-item">
            <a class="nav-link rounded-circle active" id="home-tab" data-toggle="tab" href="#link20" role="tab" aria-controls="home" aria-selected="true">
              <span class="nav-link-icon d-block"><i class="ni ni-atom"></i></span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#link21" role="tab" aria-controls="profile" aria-selected="false">
              <span class="nav-link-icon d-block"><i class="ni ni-chat-round"></i></span>
            </a>
          </li>
        </ul>
      </div>
      <div class="col-md-8">
        <div class="tab-content">
          <div class="tab-pane fade active show" id="link20">
            <p class="description">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
            <br><br>
            Dramatically visualize customer directed convergence without revolutionary ROI.</p>
          </div>
          <div class="tab-pane fade" id="link21">
            <p class="description">Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
            <br><br>Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="col-md-6">
      <ul class="nav nav-pills nav-pills-success nav-pills-circle mb-3" id="tabs_3" role="tablist">
        <li class="nav-item">
          <a class="nav-link" id="first-tab" data-toggle="tab" href="#link22" role="tab" aria-selected="false">
            <span class="nav-link-icon d-block"><i class="ni ni-atom"></i></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="second-tab" data-toggle="tab" href="#link23" role="tab" aria-selected="false">
            <span class="nav-link-icon d-block"><i class="ni ni-chat-round"></i></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link rounded-circle active" id="third-tab" data-toggle="tab" href="#link24" role="tab" aria-selected="true">
            <span class="nav-link-icon d-block"><i class="ni ni-cloud-download-95"></i></span>
          </a>
        </li>
      </ul>
    <div class="card card-plain">
      <div class="tab-content tab-space">
        <div class="tab-pane fade active show" id="link22">
          <p class="description">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
          <br><br>
          Dramatically visualize customer directed convergence without revolutionary ROI.</p>
        </div>
        <div class="tab-pane fade" id="link23">
          <p class="description">Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
          <br><br>Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
        </div>
        <div class="tab-pane fade" id="link24">
          <p class="description">Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
          <br><br>Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
        </div>
      </div>
    </div>
  </div>
</div>