Vertical Tabs Bulma - css

Question

Is there a simple css code for bulma making their horizontal tabs to vertical tabs? (sample below) I just want to overwrite their css
<div class="tabs">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>

Answer 1

I'm afraid there isn't a simple class to add in Bulma to achieve this (or at least not that I'm aware of). But since Bulma is using flexbox you can achieve a lot by simply overwriting the flex-direction.
.tabs ul {
-webkit-flex-direction: column;
flex-direction: column;
}
I also made a fiddle to demonstrate.

Answer 2

Very late to on this one but if it helps anyone else. I use a horizontal tile with 2 children. The first child I use a panel without a heading, just panel blocks that are anchor tags for my vertical tabs, the second child a div to put the target content of the anchor tag in. Switches to tabs on top and content on bottom at mobile breakpoint. JSFiddle
<section class="section">
<div class="container">
<div class="tile is-ancestor">
<div class="tile box is-parent is-horizontal">
<div class="tile is-child is-2">
<nav class="panel datanav">
<a class="panel-block">Families</a>
<a class="panel-block">Members</a>
<a class="panel-block">Member Birthdays</a>
<a class="panel-block">Member Cars</a>
<a class="panel-block">Sponsors</a>
<a class="panel-block">Newsletter Mailed</a>
<a class="panel-block">Newsletter Electronic</a>
</nav>
</div>
<div class="tile is-child is-10 has-background-white-ter">
CONTENT
</div>
</div>
</div>
</div>
</section>