Docs : Tabs & Pills - UI elements | Sneat

Tabs & Pills

Use the Bootstrap tab javascript plugin to extend navigational tabs and pills to create tab panes of local content.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Styles

Change the style of .navs component with modifiers and utilities. Mix and match as needed, or build your own.

Tabs

Use class .nav-tabs to create basic nave tabs.

Preview
HTML

Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.

Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.

Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.

Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.

Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.

Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.

<div class="nav-align-top">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-home" aria-controls="navs-top-home" aria-selected="true">Home</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-profile" aria-controls="navs-top-profile" aria-selected="false">Profile</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-messages" aria-controls="navs-top-messages" aria-selected="false">Messages</button>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="navs-top-home" role="tabpanel">
      <p>
        Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear
        claw
        candy topping.
      </p>
      <p class="mb-0">
        Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o
        jelly-o ice
        cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.
      </p>
    </div>
    <div class="tab-pane fade" id="navs-top-profile" role="tabpanel">
      <p>
        Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies
        halvah
        tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.
      </p>
      <p class="mb-0">
        Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy
        liquorice caramels.
      </p>
    </div>
    <div class="tab-pane fade" id="navs-top-messages" role="tabpanel">
      <p>
        Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi
        bears
        cake chocolate.
      </p>
      <p class="mb-0">
        Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing
        sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie
        jelly.
      </p>
    </div>
  </div>
</div>

Pills

Use class .nav-pills to create nave pills.

Preview
HTML

Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.

Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.

Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.

<div class="nav-align-top">
  <ul class="nav nav-pills mb-4" role="tablist">
    <li class="nav-item">
      <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-top-home" aria-controls="navs-pills-top-home" aria-selected="true">Home</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-top-profile" aria-controls="navs-pills-top-profile" aria-selected="false">Profile</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-top-messages" aria-controls="navs-pills-top-messages" aria-selected="false">Messages</button>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="navs-pills-top-home" role="tabpanel">
      <p>
        Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear
        claw
        candy topping.
      </p>
      <p class="mb-0">
        Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o
        jelly-o ice
        cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.
      </p>
    </div>
    <div class="tab-pane fade" id="navs-pills-top-profile" role="tabpanel">
      <p>
        Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies
        halvah
        tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.
      </p>
      <p class="mb-0">
        Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy
        liquorice caramels.
      </p>
    </div>
    <div class="tab-pane fade" id="navs-pills-top-messages" role="tabpanel">
      <p>
        Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi
        bears
        cake chocolate.
      </p>
      <p class="mb-0">
        Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing
        sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie
        jelly.
      </p>
    </div>
  </div>
</div>

Alignments

Change the alignment of your nav with the following classes.

Tip! You can use the navs alignment options for tabs, pills & tabs line styles.

Top

Use class .nav-align-top to align navs top.

Preview
HTML

Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.

Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.

Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.

<div class="nav-align-top">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-align-home">Home</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-align-profile">Profile</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-align-messages">Messages</button>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="navs-top-align-home">
      <p>
        Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps
        powder.
        Bear claw candy topping.
      </p>
      <p class="mb-0">
        Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon
        jelly-o
        jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes
        sweet.
      </p>
    </div>
    <div class="tab-pane fade" id="navs-top-align-profile">
      <p>
        Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream.
        Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream
        cheesecake
        fruitcake.
      </p>
      <p class="mb-0">
        Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton
        candy liquorice caramels.
      </p>
    </div>
    <div class="tab-pane fade" id="navs-top-align-messages">
      <p>
        Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies
        cupcake
        gummi bears cake chocolate.
      </p>
      <p class="mb-0">
        Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet
        roll
        icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly
        jelly-o
        tart brownie jelly.
      </p>
    </div>
  </div>
</div>

Bottom

Use class .nav-align-bottom to align navs bottom.

Preview
HTML

Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.

Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.

Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.

<div class="nav-align-bottom">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-bottom-home">Home</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-bottom-profile">Profile</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-bottom-messages">Messages</button>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="navs-top-bottom-home">
      <p>
        Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps
        powder.
        Bear claw candy topping.
      </p>
      <p class="mb-0">
        Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon
        jelly-o
        jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes
        sweet.
      </p>
    </div>
    <div class="tab-pane fade" id="navs-top-bottom-profile">
      <p>
        Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream.
        Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream
        cheesecake
        fruitcake.
      </p>
      <p class="mb-0">
        Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton
        candy liquorice caramels.
      </p>
    </div>
    <div class="tab-pane fade" id="navs-top-bottom-messages">
      <p>
        Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies
        cupcake
        gummi bears cake chocolate.
      </p>
      <p class="mb-0">
        Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet
        roll
        icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly
        jelly-o
        tart brownie jelly.
      </p>
    </div>
  </div>
</div>

Left

Use class .nav-align-left to align navs left.

Preview
HTML

Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.

Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.

Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.

<div class="nav-align-left">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-left-align-home">Home</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-left-align-profile">Profile</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-left-align-messages">Messages</button>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="navs-left-align-home">
      <p>
        Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps
        powder.
        Bear claw candy topping.
      </p>
      <p class="mb-0">
        Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon
        jelly-o
        jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes
        sweet.
      </p>
    </div>
    <div class="tab-pane fade" id="navs-left-align-profile">
      <p>
        Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream.
        Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream
        cheesecake
        fruitcake.
      </p>
      <p class="mb-0">
        Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton
        candy liquorice caramels.
      </p>
    </div>
    <div class="tab-pane fade" id="navs-left-align-messages">
      <p>
        Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies
        cupcake
        gummi bears cake chocolate.
      </p>
      <p class="mb-0">
        Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet
        roll
        icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly
        jelly-o
        tart brownie jelly.
      </p>
    </div>
  </div>
</div>

Right

Use class .nav-align-right to align navs right.

Preview
HTML

Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.

Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.

Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.

<div class="nav-align-right">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-right-align-home">Home</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-right-align-profile">Profile</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-right-align-messages">Messages</button>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="navs-right-align-home">
      <p>
        Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps
        powder.
        Bear claw candy topping.
      </p>
      <p class="mb-0">
        Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon
        jelly-o
        jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes
        sweet.
      </p>
    </div>
    <div class="tab-pane fade" id="navs-right-align-profile">
      <p>
        Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream.
        Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream
        cheesecake
        fruitcake.
      </p>
      <p class="mb-0">
        Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton
        candy liquorice caramels.
      </p>
    </div>
    <div class="tab-pane fade" id="navs-right-align-messages">
      <p>
        Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies
        cupcake
        gummi bears cake chocolate.
      </p>
      <p class="mb-0">
        Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet
        roll
        icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly
        jelly-o
        tart brownie jelly.
      </p>
    </div>
  </div>
</div>

Pills within Cards

Pills within Card

Preview
HTML

Special active title

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special link title

With supporting text below as a natural lead-in to additional content.

Go somewhere

<div class="card text-center">
  <div class="card-header">
    <div class="nav-align-top">
      <ul class="nav nav-pills" role="tablist">
        <li class="nav-item">
          <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-within-card-active" aria-controls="navs-pills-within-card-active" aria-selected="true">Active</button>
        </li>
        <li class="nav-item">
          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-within-card-link" aria-controls="navs-pills-within-card-link" aria-selected="false">Link</button>
        </li>
        <li class="nav-item">
          <button type="button" class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false">Disabled</button>
        </li>
      </ul>
    </div>
  </div>
  <div class="card-body">
    <div class="tab-content p-0">
      <div class="tab-pane fade show active" id="navs-pills-within-card-active" role="tabpanel">
        <h4 class="card-title">Special active title</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
      </div>
      <div class="tab-pane fade" id="navs-pills-within-card-link" role="tabpanel">
        <h4 class="card-title">Special link title</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="javascript:void(0)" class="btn btn-secondary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>