# Tabs

![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93b3zT80xvyEmALH%2FtabsExampleCapture.PNG?generation=1556827628132381\&alt=media)

Tabs organize content into meaningful sections, while occupying less screen space. Use tabs to give readers quick access to sections of a long document or page, such as profile pages.

To create tabs in your content: 1. Click the *Source* button on the editor toolbar

![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93b5UVR32dvxXCST%2FsourceButtonCapture.PNG?generation=1556827642780043\&alt=media)

1. Copy and paste the following markup
2. Edit the number and description of the tabs to suit your content

![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93b7Dw7mQnP_BNr5%2FtabsCodingCapture2.png?generation=1556827644053878\&alt=media)

## Markup

```
<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#(addname)" aria-controls="(addname)" role="tab" data-toggle="tab">(Add Name)</a></li>
    <li role="presentation"><a href="#(addname)" aria-controls="(addname)" role="tab" data-toggle="tab">(Add Name)</a></li>
    <li role="presentation"><a href="#(addname)" aria-controls="(addname)" role="tab" data-toggle="tab">(Add Name)</a></li>
    <li role="presentation"><a href="#(addname)" aria-controls="(addname)" role="tab" data-toggle="tab">(Add Name)</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="(addname)">(Add content)</div>
    <div role="tabpanel" class="tab-pane" id="(addname)">(Add content)</div>
    <div role="tabpanel" class="tab-pane" id="(addname)">(Add content)</div>
    <div role="tabpanel" class="tab-pane" id="(addname)">(Add content)</div>
  </div>
</div>
```