# Hubspot's Vast tabber module

**URL:** <https://community.hubspot.com/t/hubspots-vast-tabber-module/1074>\
**Category:** CMS Development\
**Created:** [February 22, 2017, 8:06pm UTC](https://community.hubspot.com/t/hubspots-vast-tabber-module/1074 "2017-02-22T20:06:27Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![tjohnson0122](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjohnson0122/32/88643_2.png) [@tjohnson0122](https://community.hubspot.com/u/tjohnson0122)\
**Post date:** [February 22, 2017, 8:06pm UTC](https://community.hubspot.com/t/hubspots-vast-tabber-module/1074/1 "2017-02-22T20:06:27Z")

</div>

How to list the tabs in hubspot’s tabber from vertical to horizontal. The current CSS code is:  
\<div class=“tabber-wrap”\>  
\<ul class=“clearfix tabber-tabs”\>  
\<li class=“active”\>\<a\>{{ widget.tab\_1 }}\</a\>\</li\>  
\<li\>\<a\>{{ widget.tab\_2 }}\</a\>\</li\>  
\<li\>\<a\>{{ widget.tab\_3 }}\</a\>\</li\>  
\</ul\>  
\<div class=“tabber-content”\>  
\<div class=“tab-pane active”\>{{ widget.tab\_1\_content }}\</div\>  
\<div class=“tab-pane” id=“tab-2”\>{{ widget.tab\_2\_content }}\</div\>  
\<div class=“tab-pane” id=“tab-3”\>{{ widget.tab\_3\_content }}\</div\>  
\</div\>  
\</div\>

---

<div class="post-metadata">

**Author:** ![DaniellePeters](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/daniellepeters/32/6115_2.png) [@DaniellePeters](https://community.hubspot.com/u/DaniellePeters)\
**Post date:** [February 27, 2017, 10:54pm UTC](https://community.hubspot.com/t/hubspots-vast-tabber-module/1074/2 "2017-02-27T22:54:38Z")

</div>

Vast’s stylesheet (called vast-style.css) has built in styles for the tabber module, which by default has the tabs sitting next to each other horizontally rather than vertically.

If not using vast-style.css on your page, this can be achieved by adding the following to the stylesheet attached to your page:

```auto
.tabber-tabs > li {
 float: left;
}

```

> * * *