CODEWITHSUNDEEP
cssbulma
Alyssa Reyes
Alyssa Reyes

Reputation: 2439

Vertical Tabs Bulma

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>

Upvotes: 2

Views: 5523

Answers (3)

DmitriiK
DmitriiK

Reputation: 1

I encountered the same issue today; if you want to simply display as a column with no scrolling applied, the following code worked well for me:

  .tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .tabs ul {
    display: flex;
    flex-direction: column;
  }

Upvotes: 0

Wouter Vandevelde
Wouter Vandevelde

Reputation: 904

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.

Upvotes: 6

Hibish
Hibish

Reputation: 66

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>

Upvotes: 2

Related Questions