iPro / Navigation

    <nav class="navbar fixed-top navbar-expand">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item"><a class="nav-link" href="#">Nav Link</a></li>
                <li class="nav-item active dropdown" data-toggle="dropdown">
                    <a class="nav-link" href="#">Link w/ Dropdown</a>
                    <ul class="dropdown-menu first-level">
                        <li><a tabindex="-1" href="#">Dropdown Link</a></li>
                        <li><a tabindex="-1" href="#">Dropdown Link</a></li>
                        <li><a tabindex="-1" href="#">Dropdown Link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

<nav class="ng-tns-c8-2">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#">
        <svg class="s16" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><polyline class="st1" points="25.3,0.6 6.7,16 25.3,31.4 "></polyline></svg> Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">...</a></li>
    <li class="page-item"><a class="page-link" href="#">10</a></li>
    <li class="page-item"><a class="page-link" href="#">11</a></li>
    <li class="page-item"><a class="page-link" href="#">12</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next <svg class="s16" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><polyline class="st1" points="6.7,31.5 25.3,16 6.7,0.6 "></polyline></svg></a>
    </li>
  </ul>
</nav>

<div class="row margin-bottom-15">
      <div class="col-sm-4">
        <div class="input-group">
          <input type="text" class="form-control" aria-label="" placeholder="Search Users">
          <div class="input-group-append">
            <button type="button" class="btn btn-primary margin-0">Search</button>
          </div>
        </div>
      </div>
      <div class="col-sm-2">
        <button type="button" class="btn btn-secondary margin-0">Advanced Search</button>
      </div>
      <div class="col-sm-4"></div>
      <div class="col-sm-2">
        <div class="select">
          <select><option>Sort By: ABC</option></select>
        </div>
      </div>
    </div>
  <table class="margin-0">
    <thead>
      <tr>
        <th>Pay Code <img src="images/icon-ngx-datatables-arrow-down.png"></th>
        <th>Description <img src="images/icon-ngx-datatables-arrow-up.png"></th>
        <th>Advance Months On Submit <img src="images/icon-ngx-datatables-arrow-up.png"></th>
        <th>Advance Months On Issue <img src="images/icon-ngx-datatables-arrow-up.png"></th>
        <th>As Earned <img src="images/icon-ngx-datatables-arrow-up.png"></th>
        <th>Status <img src="images/icon-ngx-datatables-arrow-up.png"></th>
      </tr>
    </thead>
    <tbody>
    <tr>
      <td>AE</td>
      <td>As Earned</td>
      <td>0</td>
      <td>0</td>
      <td><input type="checkbox" checked=""></td>
      <td>Active</td>
    </tr>
    <tr>
      <td>AV</td>
      <td>Advanced</td>
      <td>0</td>
      <td>0</td>
      <td></td>
      <td>Active</td>
    </tr>
    <tr>
      <td colspan="7" class="text-center"><a href="#">
        <svg version="1.1" class="s16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
        <path class="st0" d="M26,30.7c1-0.4,2-1.1,2.8-1.9c1.6-1.6,2.5-3.8,2.5-6.1c0-1.1-0.2-2.2-0.6-3.3c-0.4-1-1.1-2-1.9-2.8
        c-3.4-3.3-8.8-3.3-12.1,0c-0.8,0.8-1.4,1.7-1.9,2.8c-0.9,2.1-0.9,4.5,0,6.6c0.4,1,1.1,2,1.9,2.8C19.1,31.3,22.8,32.1,26,30.7
        L26,30.7z M19.4,28h5.2c0,0,1.3,0,1.3-1.6s0-2.7,0-2.7s0.3-1.5-1.5-1.5s-3.5,0-3.5,0s-1.5,0-1.5-1.5s0-2.1,0-2.1s-0.1-1.4,1.8-1.4
        c2.1,0,4.7,0,4.7,0 M22.7,16.1v13.4"></path>
        <g>
        <line class="st0" x1="18.6" y1="7" x2="1.9" y2="7"></line>
        <line class="st0" x1="15.6" y1="11.8" x2="1.9" y2="11.8"></line>
        <line class="st0" x1="12.9" y1="16.5" x2="1.9" y2="16.5"></line>
        <line class="st0" x1="11.1" y1="21.6" x2="1.9" y2="21.6"></line>
        <path class="st0" d="M18.6,12.3V2.6c0-0.6-0.5-1.1-1.1-1.1H2.4C1.8,1.5,1.4,2,1.4,2.6v23c0,0.6,0.5,1.1,1.1,1.1H12"></path>
        </g>
        </svg>
        Add New Pay Code</a>
      </td>
    </tr>
  </tbody>
</table>

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item vtabs">
    <a class="nav-link active" id="one-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="one" aria-selected="true">Tab 1</a>
  </li>
  <li class="nav-item vtabs">
    <a class="nav-link" id="two-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="two" aria-selected="false">Tab 2</a>
  </li>
  <li class="nav-item vtabs">
    <a class="nav-link" id="three-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="contact" aria-selected="false">Tab 3</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="one-tab">
    <div class="col-sm padding-15">
      Content to tab one.
    </div>
  </div>
  <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="two-tab">
    <div class="col-sm padding-15">
      Content to tab two.
    </div>
  </div>
  <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="three-tab">
    <div class="col-sm padding-15">
      Content to tab three.
    </div>
  </div>
</div>

<div class="row">
   <div class="col-sm-3 tabs">
      <div class="nav flex-column nav-pills" id="slidepane-tabs" role="tablist" aria-orientation="vertical">
         <a class="nav-link active" id="basic-info-tab" data-toggle="pill" href="#basic-info-content" role="tab" aria-controls="basic-info-content" aria-selected="true">BASIC INFORMATION</a>
         <a class="nav-link" id="address-tab" data-toggle="pill" href="#address-content" role="tab" aria-controls="address-content" aria-selected="false">ADDRESS</a>
         <a class="nav-link" id="payment-options-tab" data-toggle="pill" href="#payment-options-content" role="tab" aria-controls="payment-options-content" aria-selected="false">PAYMENT OPTIONS</a>
      </div>
   </div>
   <div class="col-sm-9 tab-content">
      <div id="basic-info-content" class="tab-pane active" role="tabpanel" aria-labelledby="basic-info-tab">
         <div class="row margin-top-15">
            <div class="col-sm-6">
               <label>Company Name: *</label>
               <input type="text" placeholder="">
            </div>
            <div class="col-sm-6">
               <label>Legal Name: *</label>
               <input type="text" placeholder="">
            </div>
         </div>
         <div class="row margin-top-15">
            <div class="col-sm-6">
               <label>Principal Agent First Name: *</label>
               <input type="text" placeholder="">
            </div>
            <div class="col-sm-6">
               <label>Principal Agent Last Name: *</label>
               <input type="text" placeholder="">
            </div>
         </div>
         <div class="row margin-top-15">
            <div class="col-sm-6">
               <label>Principal Agent NPN: *</label>
               <input type="text" placeholder="">
            </div>
            <div class="col-sm-6">
               <label>Tax ID / SSN: *</label>
               <input type="text" placeholder="">
            </div>
         </div>
         <div class="row margin-top-15">
            <div class="col-sm-6">
               <label>Website Address:</label>
               <input type="text" placeholder="">
            </div>
            <div class="col-sm-6">
               <label>Email Address: *</label>
               <input type="text" placeholder="">
            </div>
         </div>
         <div class="row margin-top-15">
            <div class="col-sm-6">
               <label>Phone Number: *</label>
               <input type="text" placeholder="">
            </div>
            <div class="col-sm-6">
               <label>Fax Number:</label>
               <input type="text" placeholder="">
            </div>
         </div>
      </div>
      <!-- #tab-address-content -->
      <div id="address-content" class="tab-pane" role="tabpanel" aria-labelledby="address-tab">
         <div class="row margin-top-15">
            <div class="col-sm-8">
               <label>Address Type: *</label>
               <div class="select">
                  <select>
                     <option>Preferred Address </option>
                  </select>
               </div>
            </div>
         </div>
         <div class="row margin-top-15">
            <div class="col-sm-8">
               <label>Address 1: *</label>
               <input type="text" placeholder="">
            </div>
         </div>
         <div class="row margin-top-15">
            <div class="col-sm-8">
               <label>Address 2: *</label>
               <input type="text" placeholder="">
            </div>
         </div>
         <div class="row margin-top-15">
            <div class="col-sm-8">
               <label>City: *</label>
               <input type="text" placeholder="">
            </div>
         </div>
         <div class="row margin-top-15">
            <div class="col-sm-4">
               <label>State: *</label>
               <div class="select">
                  <select>
                     <option>California</option>
                  </select>
               </div>
            </div>
            <div class="col-sm-4">
               <label>Zip Code: *</label>
               <input type="text" placeholder="">
            </div>
         </div>
      </div>
      <!--#payment-options-content -->
      <div id="payment-options-content" class="tab-pane" role="tabpanel" aria-labelledby="payment-options-tab">
         <div class="row margin-top-15">
            <div class="col-sm-8">
               <label>Payment Method: *</label>
               <div class="select">
                  <select>
                     <option>EFT</option>
                  </select>
               </div>
            </div>
         </div>
         <div class="row margin-top-15">
            <div class="col-sm-8">
               <label>Bank Name: *</label>
               <input type="text" placeholder="">
            </div>
         </div>
         <div class="row margin-top-15">
            <div class="col-sm-8">
               <label>Bank Routing Number: *</label>
               <input type="text" placeholder="">
            </div>
         </div>
         <div class="row margin-top-15">
            <div class="col-sm-8">
               <label>Bank Account Number: *</label>
               <input type="text" placeholder="">
            </div>
         </div>
      </div>
      <!--col-sm-10 -->
   </div>
   <!--row-->
</div>

<div id="accordion">
    <div class="card-header" id="headingOne">
        <button data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <h4 class="margin-0">Collapsible Group Item #1</h4>
        </button>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
    <div class="card-header" id="headingTwo">
        <button data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            <h4 class="margin-0">Collapsible Group Item #2</h4>
        </button>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
    <div class="card-header" id="headingThree">
        <button data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            <h4 class="margin-0">Collapsible Group Item #3</h4>
        </button>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
</div>

<div class="row">
  <div class="col-sm-3 list-group">
    <a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
    <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
  </div>
</div>

<div class="row">
  <div class="col-sm-4">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">Home</li>
      </ol>
    </nav>

    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
      </ol>
    </nav>

    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
      </ol>
    </nav>
  </div>
</div>

<a href="#top" class="back-to-top"><img src="images/icon-back-to-top.png"></a>

<div class="row margin-bottom-30">
  <div class="col-sm-3">
    <div class="btn-step step-active">
      <a href="#">1. Zip Code</a>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="btn-step">
      <a href="#">2. Applicant Information</a>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="btn-step">
      <a href="#">3. Dependents</a>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="btn-step">
      <a href="#">4. View, Compare, Apply Online</a>
    </div>
  </div>
</div>
<div class="jumbotron">
  <div class="wrapper padding-30">
    <h3 class="margin-bottom-15">Step 1: Fill this form out</h3>
    <div class="card  padding-30">
      <p>Content of the step wizard fomr goes here.</p>
    </div>
  </div>
</div>
<div class="row margin-top-30">
  <div class="col-sm-2"><button class="btn btn-tertiary btn-fw">Previous</button></div>
  <div class="col-sm-8"></div>
  <div class="col-sm-2"><button class="btn btn-primary btn-fw">Next</button></div>
</div>

<div class="row">
   <div class="col-3">
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
         <h4>Follow these steps</h4>
         <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">1. Zip Code</a>
         <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">2. Applicant Information</a>
         <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">3. Dependents</a>
         <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">4. View, Compare, Apply Online</a>
      </div>
   </div>
   <div class="col-9">
      <div class="tab-content" id="v-pills-tabContent">
         <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
            <div class="jumbotron">
               <div class="wrapper padding-30">
                  <h3 class="margin-bottom-15">Step 1: Zip &amp; Insurance Type</h3>
                  <div class="card  padding-30">
                     <p>Please enter your Zip Code and select the Coverage Type of insurance you are interested in.</p>
                  </div>
               </div>
            </div>
         </div>
         <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
            <div class="jumbotron">
               <div class="wrapper padding-30">
                  <h3 class="margin-bottom-15">Step 2: Enter Your Information</h3>
                  <div class="card  padding-30">
                     <p>Enter the information requested below for the insured plan members to be included in this proposal.</p>
                  </div>
               </div>
            </div>
         </div>
         <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
            <div class="jumbotron">
               <div class="wrapper padding-30">
                  <h3 class="margin-bottom-15">Step 3: Dependents</h3>
                  <div class="card  padding-30">
                     <p>Enter the information requested below for the insured plan members to be included in this proposal.</p>
                  </div>
               </div>
            </div>
         </div>
         <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
            <div class="jumbotron">
               <div class="wrapper padding-30">
                  <h3 class="margin-bottom-15">Step 4: Let's compare & shop for plans!</h3>
                  <div class="card  padding-30">
                     <p>Plan results.</p>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="row margin-top-30">
         <div class="col-sm-2"><button class="btn btn-tertiary btn-fw btnPrevious">Previous</button></div>
         <div class="col-sm-8"></div>
         <div class="col-sm-2"><button class="btn btn-primary btn-fw btnNext">Next</button></div>
      </div>
   </div>
</div>