@jabyess How do you add the content to the tab? the documentation only had the tab links:

<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>

Where to put the content?

@mav1283 you can put them wherever you want. Bulma doesn't care, since it's just css/sass, there's no functionality included.

I just created a container with multiple content elements below the tabs. the elements each have an ID, and the tabs have a data attribute pointing to the appropriate ID. Very similar to how bootstrap does it.

If anyone stumbles across this issue looking for a responsive solution:

@include mobile {
  .tabs ul {
    flex-direction: column;

    li {
      width: 100%;
    }
  }
}

Any way to have two tabs in row?

edit: Found solution

.tabs ul {width:100%;flex-direction:row;flex-wrap:wrap;}
.tabs li {width:50%}

If any one stumbled across this issue looking for vertical tabs:

<div class="tabs">
  <ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
</div>
<div class="tabs-content">
    <div>Tab 1 content</div>
    <div>Tab 2 content</div>
    <div>Tab 3 content</div>
</div>

.tabs{
    float: left;
}
.tabs ul{
    -webkit-flex-direction: column;
    flex-direction: column;
}

This will display tabs on the left side and the tab content on the right. Not an optimal solution but works for some one who have too many tabs.

I'm surprised that this hasn't been implemented in 2019~

Multiline tabs:

.tabs ul {
	flex-shrink: 1;
	flex-wrap: wrap;
	border-bottom-color: transparent;
}

The border-bottom-color rule removes the long hanging line on the last row of tabs.

Anyone coming across this. The above solutions don't really address the border radius.

@media screen and (max-width: 768px)  {
      .tabs.is-toggle ul {
        flex-direction: column;
        li {
          width: 100%;
          &:not(:last-child) a {
            border-bottom-color: transparent;
          }
          &:first-child a {
            border-radius: 4px 4px 0 0;
          }
          &:last-child a {
            border-radius: 0 0 4px 4px;
          }
        }
      }
    }

Multiline tabs:

.tabs ul {
	flex-shrink: 1;
	flex-wrap: wrap;
	border-bottom-color: transparent;
}

The border-bottom-color rule removes the long hanging line on the last row of tabs.

Simple and effective, thanks a lot!