Nav pills

<div class="nav-pills-primary">
  <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item">
      <a
        class="nav-link active"
        id="pills-home-tab"
        data-toggle="pill"
        href="#pills-home"
        role="tab"
        aria-controls="pills-home"
        aria-selected="true"
        >Home</a
      >
    </li>
    <li class="nav-item">
      <a
        class="nav-link"
        id="pills-profile-tab"
        data-toggle="pill"
        href="#pills-profile"
        role="tab"
        aria-controls="pills-profile"
        aria-selected="false"
        >Profile</a
      >
    </li>
    <li class="nav-item">
      <a
        class="nav-link"
        id="pills-contact-tab"
        data-toggle="pill"
        href="#pills-contact"
        role="tab"
        aria-controls="pills-contact"
        aria-selected="false"
        >Contact</a
      >
    </li>
  </ul>
  <div class="tab-content" id="pills-tabContent">
    <div
      class="tab-pane fade show active"
      id="pills-home"
      role="tabpanel"
      aria-labelledby="pills-home-tab"
    >
      <p>Lorem, ipsum dolor. 1</p>
    </div>
    <div
      class="tab-pane fade"
      id="pills-profile"
      role="tabpanel"
      aria-labelledby="pills-profile-tab"
    >
      <p>Lorem, ipsum dolor. 2</p>
    </div>
    <div
      class="tab-pane fade"
      id="pills-contact"
      role="tabpanel"
      aria-labelledby="pills-contact-tab"
    >
      <p>Lorem, ipsum dolor. 3</p>
    </div>
  </div>
</div>

Nav Button pills

<div class="nav-pills-primary">
  <div class="text-center">
    <ul class="nav nav-pills nav-pill-rounded mb-3 shadow-3dp" id="pills-tab" role="tablist">
        <li class="nav-item"><a class="nav-link active" id="demo-1" data-toggle="pill" href="#demo-pills-1" role="tab" aria-controls="demo-pills-1" aria-selected="true">Home</a></li>
        <li class="nav-item"><a class="nav-link" id="demo-2" data-toggle="pill" href="#demo-pills-2" role="tab" aria-controls="demo-pills-2" aria-selected="false">Profile</a></li>
  
    </ul>
  </div>
  <div class="tab-content" id="pills-tabContent">
      <div class="tab-pane fade show active" id="demo-pills-1" role="tabpanel" aria-labelledby="demo-1">
          <p>Lorem, ipsum dolor. 1</p>
      </div>
      <div class="tab-pane fade" id="demo-pills-2" role="tabpanel" aria-labelledby="demo-2">
          <p>Lorem, ipsum dolor. 2</p>
      </div>
  
  </div>
</div>

Nav Tabs

<div class="nav-tabs-primary">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a
        class="nav-link active"
        id="home-tab"
        data-toggle="tab"
        href="#home"
        role="tab"
        aria-controls="home"
        aria-selected="true"
        >Home</a
      >
    </li>
    <li class="nav-item">
      <a
        class="nav-link"
        id="profile-tab"
        data-toggle="tab"
        href="#profile"
        role="tab"
        aria-controls="profile"
        aria-selected="false"
        >Profile</a
      >
    </li>
    <li class="nav-item">
      <a
        class="nav-link"
        id="contact-tab"
        data-toggle="tab"
        href="#contact"
        role="tab"
        aria-controls="contact"
        aria-selected="false"
        >Contact</a
      >
    </li>
  </ul>
  <div class="tab-content p-16" id="myTabContent">
    <div
      class="tab-pane fade show active"
      id="home"
      role="tabpanel"
      aria-labelledby="home-tab"
    >
      <p>Lorem, ipsum dolor. 1</p>
    </div>
    <div
      class="tab-pane fade"
      id="profile"
      role="tabpanel"
      aria-labelledby="profile-tab"
    >
      <p>Lorem, ipsum dolor. 2</p>
    </div>
    <div
      class="tab-pane fade"
      id="contact"
      role="tabpanel"
      aria-labelledby="contact-tab"
    >
      <p>Lorem, ipsum dolor. 3</p>
    </div>
  </div>
</div>

Collapsible

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>