# Tabs

## Screenshot

![Tabs](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV01gBC1ryMaGwh6XF%2Ftabs.png?generation=1535987973009420\&alt=media)

## HTML

```
<div class="ol-tab">

  <ul class="tab-navigation">
    <li class="active"><a href="#">integral</a></li>
    <li class=""><a href="#">sigma</a></li>
    <li class=""><a href="#">radical</a></li>
    <li class=""><a href="#">infinity</a></li>
  </ul>

  <div class="tab-content">

    <div class="tab-pane active">
      --- tab contents ---
    </div>

    <div class="tab-pane">
      --- tab contents ---
    </div>

    <div class="tab-pane">
      --- tab contents ---
    </div>

    <div class="tab-pane">
      --- tab contents ---
    </div>

  </div>
</div>
```

## Variations

### Right aligned

It is represented by `ol-tab right` classes.

### Bottom aligned

It is represented by `ol-tab bottom` classes.

![Tabs bottom](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV01gEoHkxGY66YS75%2Ftabs-bottom.png?generation=1535987973903367\&alt=media)

### Justified

![Tabs justfied](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV01gGG1sZp_gBJqDW%2Ftabs-justfied.png?generation=1535987953137698\&alt=media)

The class `nav-justified` would be used along with `nav` class:

```
<div class=`ol-tab`>
    <ul class=`nav nav-tabs nav-justified`>
    ...
</div>
```

### Vertical style

It is represented by `ol-tab vertical` classes.

![Tabs vertical](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV01gIiW35yu9WRbFA%2Ftabs%20vertical.png?generation=1535987995592194\&alt=media)
