Tabs only require a tabs
container and a <ul>
list.
The default tabs style has a single border at the bottom.
You are viewing the deprecated 0.5.3 version of the website. Click here to view the latest version
Documentation
Everything you need to create a website with Bulma
Tabs only require a tabs
container and a <ul>
list.
The default tabs style has a single border at the bottom.
To align the tabs list, use the is-centered
or is-right
modifier on the .tabs
container:
You can use any of the Font Awesome icons.
You can choose between 3 additional sizes: is-small
is-medium
and is-large
.
is-boxed
modifier.
If you want mutually exclusive tabs (like radio buttons where clicking one deselects all other ones), use the is-toggle
modifier.
If you want the tabs to take up the whole width available, use is-fullwidth
.
You can combine different modifiers. For example, you can have centered boxed tabs, or fullwidth toggle ones.
You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.
Name | Default value |
---|---|
Name | Default value |
$tabs-border-bottom-color
|
$border
|
$tabs-border-bottom-style
|
solid
|
$tabs-border-bottom-width
|
1px
|
$tabs-link-color
|
$text
|
$tabs-link-hover-border-bottom-color
|
$text-strong
|
$tabs-link-hover-color
|
$text-strong
|
$tabs-link-active-border-bottom-color
|
$primary
|
$tabs-link-active-color
|
$primary
|
$tabs-link-padding
|
0.5em 1em
|
$tabs-boxed-link-radius
|
$radius
|
$tabs-boxed-link-hover-background-color
|
$background
|
$tabs-boxed-link-hover-border-bottom-color
|
$border
|
$tabs-boxed-link-active-background-color
|
$white
|
$tabs-boxed-link-active-border-color
|
$border
|
$tabs-boxed-link-active-border-bottom-color
|
transparent !important
|
$tabs-toggle-link-border-color
|
$border
|
$tabs-toggle-link-border-style
|
solid
|
$tabs-toggle-link-border-width
|
1px
|
$tabs-toggle-link-hover-background-color
|
$background
|
$tabs-toggle-link-hover-border-color
|
$border-hover
|
$tabs-toggle-link-radius
|
$radius
|
$tabs-toggle-link-active-background-color
|
$primary
|
$tabs-toggle-link-active-border-color
|
$primary
|
$tabs-toggle-link-active-color
|
$primary-invert
|
This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub
Bulma Partners
Check out their products!