Tabbed Content

Tabs group related content, allowing users to see only what they want to see.

On this page:

Best Practices

  • Tabbed content allows users to choose which content they want to see.
  • Use tabbed content to small bits of content at a time.
  • Rounded style tabs work better on small devices.
  • Tabs are for selective content display, not navigation.
  • You may need to put tabbed content into Layout Grid items.

Usage

Rounded Style

Tab 1

I am content in a tabbed content section.

Other content fits into here too. From rows and columns to paragraphs to forms.

Tab 2

I am content in a tabbed content section.

Other content fits into here too.

Tab 3

I am content in a tabbed content section.

Other content fits into here too.

<div class="content-container">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <ul class="nav nav-pills nav-pills-tabs mb-1" id="UserInfosTabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="Tab1Control" data-toggle="pill" href="#Tab1Content" role="tab" aria-controls="Tab1Content" aria-selected="true">
              Tab 1
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="Tab2Control" data-toggle="pill" href="#Tab2Content" role="tab" aria-controls="Tab2Content" aria-selected="false">
              Tab 2
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="Tab3Control" data-toggle="pill" href="#Tab3Content" role="tab" aria-controls="Tab3Content" aria-selected="false">
              Tab 3
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="tab-content mt-4">
    <div id="Tab1Content" class="tab-pane fade show active">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <p class="h4 text-primary">
              Tab 1
            </p>
            <p class="lead">I am content in a tabbed content section.</p>
            <partial name="uiparts/_Name"/>
            <p>Other content fits into here too. From rows and columns to paragraphs to forms.</p>
          </div>
        </div>
      </div>
    </div>
    <div id="Tab2Content" class="tab-pane fade">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <p class="h4 text-primary">
              Tab 2
            </p>
            <p class="lead">I am content in a tabbed content section.</p>
            <partial name="uiparts/_Name"/>
            <p>Other content fits into here too.</p>
          </div>
        </div>
      </div>
    </div>
    <div id="Tab3Content" class="tab-pane fade">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <p class="h4 text-primary">
              Tab 3
            </p>
            <p class="lead">I am content in a tabbed content section.</p>
            <partial name="uiparts/_Name"/>
            <p>Other content fits into here too.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Traditional Style

Tab 1

I am content in a tabbed content section.

Other content fits into here too. From rows and columns to paragraphs to forms.

Tab 2

I am content in a tabbed content section.

Other content fits into here too.

Tab 3

I am content in a tabbed content section.

Other content fits into here too.

<div class="content-container ">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <ul class="nav nav-tabs" id="tabset2" role="tablist">
          <li class="nav-item" role="presentation">
            <a id="" data-toggle="tab" aria-controls="#Tab1TraditionalContent" aria-selected="true" class="nav-link active" href="#Tab1TraditionalContent">Active</a>
          </li>
          <li class="nav-item" role="presentation">
            <a id="" data-toggle="tab" aria-controls="#Tab2TraditionalContent" aria-selected="false" class="nav-link" href="#Tab2TraditionalContent">Link</a>
          </li>
          <li class="nav-item" role="presentation">
            <a id="" data-toggle="tab" aria-controls="#Tab3TraditionalContent" aria-selected="false" class="nav-link" href="#Tab3TraditionalContent">Link</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="tab-content mt-4">
    <div id="Tab1TraditionalContent" class="tab-pane fade show active">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <p class="h4 text-primary">
              Tab 1
            </p>
            <p class="lead">I am content in a tabbed content section.</p>
            <partial name="uiparts/_Name"/>
            <p>Other content fits into here too. From rows and columns to paragraphs to forms.</p>
          </div>
        </div>
      </div>
    </div>
    <div id="Tab2TraditionalContent" class="tab-pane fade">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <p class="h4 text-primary">
              Tab 2
            </p>
            <p class="lead">I am content in a tabbed content section.</p>
            <partial name="uiparts/_Name"/>
            <p>Other content fits into here too.</p>
          </div>
        </div>
      </div>
    </div>
    <div id="Tab3TraditionalContent" class="tab-pane fade">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <p class="h4 text-primary">
              Tab 3
            </p>
            <p class="lead">I am content in a tabbed content section.</p>
            <partial name="uiparts/_Name"/>
            <p>Other content fits into here too.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Previous page
Next page