Bulma [partial] documentation from spec

Everything you need to create a website with Bulma

This documentation was generated withspec

Columns

Columns

Flexbox-powered responsive columns

Flexbox-powered responsive columns

First column
Second column
Third column
Fourth column
<div class="columns">
	<div class="column">
		<div class="notification is-primary">First column</div>
	</div>
	<div class="column">
		<div class="notification is-primary">Second column</div>
	</div>
	<div class="column">
		<div class="notification is-primary">Third column</div>
	</div>
	<div class="column">
		<div class="notification is-primary">Fourth column</div>
	</div>
</div>

Modifiers

gap
is-gapless
multi
is-multiline
alignment
is-centered
gap

If you want to remove the space between the columns, add the is-gapless modifier on the columns container.

First column
Second column
Third column
Fourth column
<div class="columns is-gapless">
	<div class="column">
		<div class="notification is-primary">First column</div>
	</div>
	<div class="column">
		<div class="notification is-primary">Second column</div>
	</div>
	<div class="column">
		<div class="notification is-primary">Third column</div>
	</div>
	<div class="column">
		<div class="notification is-primary">Fourth column</div>
	</div>
</div>
multi

You can combine it with the is-multiline modifier.

First column
Second column
Third column
Fourth column
<div class="columns is-multiline">
	<div class="column">
		<div class="notification is-primary">First column</div>
	</div>
	<div class="column">
		<div class="notification is-primary">Second column</div>
	</div>
	<div class="column">
		<div class="notification is-primary">Third column</div>
	</div>
	<div class="column">
		<div class="notification is-primary">Fourth column</div>
	</div>
</div>
alignment

While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element.

First column
Second column
Third column
Fourth column
<div class="columns is-centered">
	<div class="column">
		<div class="notification is-primary">First column</div>
	</div>
	<div class="column">
		<div class="notification is-primary">Second column</div>
	</div>
	<div class="column">
		<div class="notification is-primary">Third column</div>
	</div>
	<div class="column">
		<div class="notification is-primary">Fourth column</div>
	</div>
</div>

Column

Column
<div class="columns">
	<div class="column">
		<div class="notification is-primary">Column</div>
	</div>
</div>

Modifiers

sizes
is-three-quarters
is-two-thirds
is-half
is-one-third
is-one-quarter
is-full
is-four-fifths
is-three-fifths
is-two-fifths
is-one-fifth
[email protected]*12
is-narrow
is-narrow-mobile
is-narrow-tablet
is-narrow-touch
is-narrow-desktop
is-narrow-widescreen
is-narrow-fullhd
offset
is-offset-three-quarters
is-offset-two-thirds
is-offset-half
is-offset-one-third
is-offset-one-quarter
is-offset-full
is-offset-four-fifths
is-offset-three-fifths
is-offset-two-fifths
is-offset-one-fifth
[email protected]*12
responsive
is-block
is-flex
is-inline
is-inline-block
is-inline-flex
is-block-mobile
is-block-tablet-only
is-block-desktop-only
is-block-widescreen-only
is-block-touch
is-block-tablet
is-block-desktop
is-block-widescreen
is-block-fullhd
is-flex-mobile
is-flex-tablet-only
is-flex-desktop-only
is-flex-widescreen-only
is-flex-touch
is-flex-tablet
is-flex-desktop
is-flex-widescreen
is-flex-fullhd
is-inline-mobile
is-inline-tablet-only
is-inline-desktop-only
is-inline-widescreen-only
is-inline-touch
is-inline-tablet
is-inline-desktop
is-inline-widescreen
is-inline-fullhd
is-inline-block-mobile
is-inline-block-tablet-only
is-inline-block-desktop-only
is-inline-block-widescreen-only
is-inline-block-touch
is-inline-block-tablet
is-inline-block-desktop
is-inline-block-widescreen
is-inline-block-fullhd
is-inline-flex-mobile
is-inline-flex-tablet-only
is-inline-flex-desktop-only
is-inline-flex-widescreen-only
is-inline-flex-touch
is-inline-flex-tablet
is-inline-flex-desktop
is-inline-flex-widescreen
is-inline-flex-fullhd
is-hidden-mobile
is-hidden-tablet-only
is-hidden-desktop-only
is-hidden-widescreen-only
is-hidden-touch
is-hidden-tablet
is-hidden-desktop
is-hidden-widescreen
is-hidden-fullhd
is-mobile
is-tablet
is-desktop
is-widescreen
is-fullhd

Layout

Container

Container content.
<div class="container">
	<div class="notification">Container content.</div>
</div>

Modifiers

fluid
is-fluid
responsive
is-mobile
is-tablet
is-desktop
is-widescreen
is-fullhd
fluid

If you don't want to have a maximum width but want to keep the 32px margin on the left and right sides, add the is-fluid modifier.

Container content.
<div class="container is-fluid">
	<div class="notification">Container content.</div>
</div>
responsive

With the two modifiers .is-widescreen and .is-fullhd, you can have a fullwidth container until those specific breakpoints.

Container content.
<div class="container is-mobile">
	<div class="notification">Container content.</div>
</div>
Container content.
<div class="container is-tablet">
	<div class="notification">Container content.</div>
</div>
Container content.
<div class="container is-desktop">
	<div class="notification">Container content.</div>
</div>
Container content.
<div class="container is-widescreen">
	<div class="notification">Container content.</div>
</div>
Container content.
<div class="container is-fullhd">
	<div class="notification">Container content.</div>
</div>

Parents

.navbar
.hero
.section
.footer

Level

<nav class="level">
	<div class="level-left">
		<div class="level-item">
			<p class="subtitle is-5"><strong>123</strong></p>
			<posts></posts>
		</div>
	</div>
	<div class="level-item">
		<div class="field has-addons">
			<p class="control"><input type="text" class="input" placeholder="Find a post"></p>
			<p class="control"><button class="button">Search</button></p>
		</div>
	</div>
</nav>

Modifiers

responsive
is-mobile
responsive

By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the is-mobile modifier on the level container.

<nav class="level is-mobile">
	<div class="level-left">
		<div class="level-item">
			<p class="subtitle is-5"><strong>123</strong></p>
			<posts></posts>
		</div>
	</div>
	<div class="level-item">
		<div class="field has-addons">
			<p class="control"><input type="text" class="input" placeholder="Find a post"></p>
			<p class="control"><button class="button">Search</button></p>
		</div>
	</div>
</nav>

Media Object

John Smith @john 31m
Lorem ipsum dolor sit amet

<article class="media">
	<figure class="media-left">
		<p class="image is-64x64"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></p>
	</figure>
	<div class="media-content">
		<div class="content">
			<p>
				<strong>John Smith </strong>
				<small>@john 31m</small>
				<br>
				Lorem ipsum dolor sit amet
			</p>
		</div>
	</div>
</article>

Hero

Hero title

Hero subtitle

<section class="hero is-primary">
	<div class="hero-body">
		<div class="container">
			<h1 class="title">Hero title</h1>
			<h2 class="subtitle">Hero subtitle</h2>
		</div>
	</div>
</section>

Modifiers

colors
is-primary
is-info
is-success
is-warning
is-danger
is-light
is-dark
gradients
is-bold
sizes
is-medium
is-large
is-fullheight
colors

As with buttons, you can choose one of the 7 different colors.

Hero title

Hero subtitle

<section class="hero is-primary">
	<div class="hero-body">
		<div class="container">
			<h1 class="title">Hero title</h1>
			<h2 class="subtitle">Hero subtitle</h2>
		</div>
	</div>
</section>

Hero title

Hero subtitle

<section class="hero is-primary is-info">
	<div class="hero-body">
		<div class="container">
			<h1 class="title">Hero title</h1>
			<h2 class="subtitle">Hero subtitle</h2>
		</div>
	</div>
</section>

Hero title

Hero subtitle

<section class="hero is-primary is-success">
	<div class="hero-body">
		<div class="container">
			<h1 class="title">Hero title</h1>
			<h2 class="subtitle">Hero subtitle</h2>
		</div>
	</div>
</section>

Hero title

Hero subtitle

<section class="hero is-primary is-warning">
	<div class="hero-body">
		<div class="container">
			<h1 class="title">Hero title</h1>
			<h2 class="subtitle">Hero subtitle</h2>
		</div>
	</div>
</section>

Hero title

Hero subtitle

<section class="hero is-primary is-danger">
	<div class="hero-body">
		<div class="container">
			<h1 class="title">Hero title</h1>
			<h2 class="subtitle">Hero subtitle</h2>
		</div>
	</div>
</section>

Hero title

Hero subtitle

<section class="hero is-primary is-light">
	<div class="hero-body">
		<div class="container">
			<h1 class="title">Hero title</h1>
			<h2 class="subtitle">Hero subtitle</h2>
		</div>
	</div>
</section>

Hero title

Hero subtitle

<section class="hero is-primary is-dark">
	<div class="hero-body">
		<div class="container">
			<h1 class="title">Hero title</h1>
			<h2 class="subtitle">Hero subtitle</h2>
		</div>
	</div>
</section>
gradients

By adding the is-bold modifier, you can generate a subtle gradient.

Hero title

Hero subtitle

<section class="hero is-primary is-bold">
	<div class="hero-body">
		<div class="container">
			<h1 class="title">Hero title</h1>
			<h2 class="subtitle">Hero subtitle</h2>
		</div>
	</div>
</section>
sizes

You can have even more imposing banners by using one of 3 different sizes.

Hero title

Hero subtitle

<section class="hero is-primary is-medium">
	<div class="hero-body">
		<div class="container">
			<h1 class="title">Hero title</h1>
			<h2 class="subtitle">Hero subtitle</h2>
		</div>
	</div>
</section>

Hero title

Hero subtitle

<section class="hero is-primary is-large">
	<div class="hero-body">
		<div class="container">
			<h1 class="title">Hero title</h1>
			<h2 class="subtitle">Hero subtitle</h2>
		</div>
	</div>
</section>

Hero title

Hero subtitle

<section class="hero is-primary is-fullheight">
	<div class="hero-body">
		<div class="container">
			<h1 class="title">Hero title</h1>
			<h2 class="subtitle">Hero subtitle</h2>
		</div>
	</div>
</section>

Section

<section class="section"></section>

Modifiers

spacing
is-medium
is-large

Footer

Footer content
<footer class="footer">Footer content</footer>

Tile

Tile #1
Tile #2
Tile #3
<div class="tile is-ancestor">
	<div class="tile is-vertical is-8">
		<div class="tile">
			<div class="tile is-parent is-vertical">
				<article class="tile is-child notification is-primary">Tile #1</article>
				<article class="tile is-child notification is-warning">Tile #2</article>
			</div>
			<div class="tile is-parent">
				<article class="tile is-child notification is-info">Tile #3</article>
			</div>
		</div>
	</div>
</div>

Modifiers

context
is-ancestor
is-parent
is-child
direction
is-vertical
size
is-$*12

Elements

Box

John Smith @johnsmith 31m

<div class="box">
	<article class="media">
		<div class="media-left">
			<figure class="image is-64x64"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
		</div>
		<div class="media-content">
			<div class="content">
				<p><strong>John Smith </strong><small>@johnsmith 31m</small></p>
			</div>
		</div>
	</article>
</div>

Button

<a href="" class="button">Button</a>

Modifiers

colors
is-primary
is-link
is-info
is-success
is-warning
is-danger
is-white
is-light
is-dark
is-black
is-text
sizes
is-small
is-medium
is-large
outlined
is-outlined
inverted
is-inverted
rounded
is-rounded
loading
is-loading
colors

Colored buttons.

<a href="" class="button is-primary">Button</a>
<a href="" class="button is-link">Button</a>
<a href="" class="button is-info">Button</a>
<a href="" class="button is-success">Button</a>
<a href="" class="button is-warning">Button</a>
<a href="" class="button is-danger">Button</a>
<a href="" class="button is-white">Button</a>
<a href="" class="button is-light">Button</a>
<a href="" class="button is-dark">Button</a>
<a href="" class="button is-black">Button</a>
<a href="" class="button is-text">Button</a>
sizes

Size matters.

<a href="" class="button is-small">Button</a>
<a href="" class="button is-medium">Button</a>
<a href="" class="button is-large">Button</a>
outlined

Outlined.

<a href="" class="button is-outlined">Button</a>
inverted

Inverted.

<a href="" class="button is-inverted">Button</a>
rounded

Rounded.

<a href="" class="button is-rounded">Button</a>
loading

Loading

<a href="" class="button is-loading">Button</a>

Content

  1. Coffee
  2. Tea
  3. Milk
<div class="content">
	<ol>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Milk</li>
	</ol>
</div>

Modifiers

sizes
is-small
is-medium
is-large
sizes

You can use the is-small, is-medium and is-large modifiers to change the font size.

  1. Coffee
  2. Tea
  3. Milk
<div class="content is-small">
	<ol>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Milk</li>
	</ol>
</div>
  1. Coffee
  2. Tea
  3. Milk
<div class="content is-medium">
	<ol>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Milk</li>
	</ol>
</div>
  1. Coffee
  2. Tea
  3. Milk
<div class="content is-large">
	<ol>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Milk</li>
	</ol>
</div>

Delete

<a href="" class="delete"></a>

Modifiers

sizes
is-small
is-medium
is-large
sizes

It comes in 4 sizes.

<a href="" class="delete is-small"></a>
<a href="" class="delete is-medium"></a>
<a href="" class="delete is-large"></a>

Parents

span.tag
.notification
article.message.message-header

Icon

<span class="icon"><i class="fas fa-home"></i></span>

Modifiers

colors
is-primary
is-link
is-info
is-success
is-warning
is-danger
sizes
is-small
is-medium
is-large
colors

Since icon fonts are simply text, you can use the text color modifiers to change the icon's color.

<span class="icon is-primary"><i class="fas fa-home"></i></span>
<span class="icon is-link"><i class="fas fa-home"></i></span>
<span class="icon is-info"><i class="fas fa-home"></i></span>
<span class="icon is-success"><i class="fas fa-home"></i></span>
<span class="icon is-warning"><i class="fas fa-home"></i></span>
<span class="icon is-danger"><i class="fas fa-home"></i></span>
sizes

Size matters.

<span class="icon is-small"><i class="fas fa-home"></i></span>
<span class="icon is-medium"><i class="fas fa-home"></i></span>
<span class="icon is-large"><i class="fas fa-home"></i></span>

Image

<figure class="image"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>

Modifiers

ratio
is-square
is-1by1
is-5by4
is-4by3
is-3by2
is-5by3
is-16by9
is-2by1
is-3by1
is-4by5
is-3by4
is-2by3
is-3by5
is-9by16
is-1by2
is-1by3
rounded
is-rounded
ratio

There are 7 dimensions to choose from, useful for avatars.

<figure class="image is-square"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-1by1"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-5by4"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-4by3"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-3by2"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-5by3"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-16by9"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-2by1"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-3by1"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-4by5"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-3by4"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-2by3"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-3by5"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-9by16"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-1by2"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
<figure class="image is-1by3"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>
rounded

You can also make rounded images, using .is-rounded class.

<figure class="image is-rounded"><img src="https://bulma.io/images/placeholders/128x128.png" alt=""></figure>

Notification

Bold notification blocks, to alert your users of something

Bold notification blocks, to alert your users of something

Lorem ipsum dolor sit amet.
<div class="notification"><button class="delete"></button>Lorem ipsum dolor sit amet.</div>

Modifiers

colors
is-primary
is-link
is-info
is-success
is-warning
is-danger
colors

Colored notifications.

Lorem ipsum dolor sit amet.
<div class="notification is-primary"><button class="delete"></button>Lorem ipsum dolor sit amet.</div>
<div class="notification is-link"><button class="delete"></button>Lorem ipsum dolor sit amet.</div>
Lorem ipsum dolor sit amet.
<div class="notification is-info"><button class="delete"></button>Lorem ipsum dolor sit amet.</div>
Lorem ipsum dolor sit amet.
<div class="notification is-success"><button class="delete"></button>Lorem ipsum dolor sit amet.</div>
Lorem ipsum dolor sit amet.
<div class="notification is-warning"><button class="delete"></button>Lorem ipsum dolor sit amet.</div>
Lorem ipsum dolor sit amet.
<div class="notification is-danger"><button class="delete"></button>Lorem ipsum dolor sit amet.</div>

Progress bars

Native HTML progress bars.

Native HTML progress bars.

<progress class="progress"></progress>

Modifiers

colors
is-primary
is-link
is-info
is-success
is-warning
is-danger
sizes
is-small
is-medium
is-large
colors

Colored progress bars.

<progress class="progress is-primary"></progress>
<progress class="progress is-link"></progress>
<progress class="progress is-info"></progress>
<progress class="progress is-success"></progress>
<progress class="progress is-warning"></progress>
<progress class="progress is-danger"></progress>
sizes

Size matters.

<progress class="progress is-small"></progress>
<progress class="progress is-medium"></progress>
<progress class="progress is-large"></progress>

Table

The inevitable HTML table, with special case cells.

The inevitable HTML table, with special case cells.

Pos Pts
Pos Pts
1 Leicester City 81
<table class="table">
	<thead>
		<tr>
			<th>Pos</th>
			<th>Pts</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Pos</th>
			<th>Pts</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th>1</th>
			<td>Leicester City</td>
			<td>81</td>
		</tr>
	</tbody>
</table>

Modifiers

bordered
is-bordered
striped
is-striped
narrow
is-narrow
hoverable
is-hoverable
fullwidth
is-fullwidth
bordered

Add borders to all the cells.

Pos Pts
Pos Pts
1 Leicester City 81
<table class="table is-bordered">
	<thead>
		<tr>
			<th>Pos</th>
			<th>Pts</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Pos</th>
			<th>Pts</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th>1</th>
			<td>Leicester City</td>
			<td>81</td>
		</tr>
	</tbody>
</table>
striped

Add stripes to the table.

Pos Pts
Pos Pts
1 Leicester City 81
<table class="table is-striped">
	<thead>
		<tr>
			<th>Pos</th>
			<th>Pts</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Pos</th>
			<th>Pts</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th>1</th>
			<td>Leicester City</td>
			<td>81</td>
		</tr>
	</tbody>
</table>
narrow

Make the cells narrower.

Pos Pts
Pos Pts
1 Leicester City 81
<table class="table is-narrow">
	<thead>
		<tr>
			<th>Pos</th>
			<th>Pts</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Pos</th>
			<th>Pts</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th>1</th>
			<td>Leicester City</td>
			<td>81</td>
		</tr>
	</tbody>
</table>
hoverable

You can add a hover effect on each row.

Pos Pts
Pos Pts
1 Leicester City 81
<table class="table is-hoverable">
	<thead>
		<tr>
			<th>Pos</th>
			<th>Pts</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Pos</th>
			<th>Pts</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th>1</th>
			<td>Leicester City</td>
			<td>81</td>
		</tr>
	</tbody>
</table>
fullwidth

You can have a fullwidth table.

Pos Pts
Pos Pts
1 Leicester City 81
<table class="table is-fullwidth">
	<thead>
		<tr>
			<th>Pos</th>
			<th>Pts</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Pos</th>
			<th>Pts</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th>1</th>
			<td>Leicester City</td>
			<td>81</td>
		</tr>
	</tbody>
</table>

Tag

Small tag labels to insert anywhere

Small tag labels to insert anywhere

Tag label
<span class="tag">Tag label</span>

Modifiers

colors
is-primary
is-link
is-info
is-success
is-warning
is-danger
is-black
is-dark
is-light
is-white
sizes
is-medium
is-large
rounded
is-rounded
delete
is-delete
colors

Like with buttons, there are 10 different colors available.

Tag label
<span class="tag is-primary">Tag label</span>
Tag label
<span class="tag is-link">Tag label</span>
Tag label
<span class="tag is-info">Tag label</span>
Tag label
<span class="tag is-success">Tag label</span>
Tag label
<span class="tag is-warning">Tag label</span>
Tag label
<span class="tag is-danger">Tag label</span>
Tag label
<span class="tag is-black">Tag label</span>
Tag label
<span class="tag is-dark">Tag label</span>
Tag label
<span class="tag is-light">Tag label</span>
Tag label
<span class="tag is-white">Tag label</span>
sizes

And 2 additional sizes.

Tag label
<span class="tag is-medium">Tag label</span>
Tag label
<span class="tag is-large">Tag label</span>
rounded

You can add the is-rounded modifier to make a rounded tag.

Tag label
<span class="tag is-rounded">Tag label</span>
delete

You can add the is-delete modifier to turn the tag into a delete button.

Tag label
<span class="tag is-delete">Tag label</span>

Tags

List of tags

List of tags

One Two Three
<div class="tags">
	<span class="tag">One</span>
	<span class="tag">Two</span>
	<span class="tag">Three</span>
</div>

Modifiers

addons
has-addons

Title

Simple headings to add depth to your page

Simple headings to add depth to your page

Title

<h1 class="title">Title</h1>

Modifiers

spaced
is-spaced
spaced

You can maintain the normal spacing between titles and subtitles if you use the is-spaced modifier on the first element.

Title

<h1 class="title is-spaced">Title</h1>

Components

Card

An all-around flexible and composable component

An all-around flexible and composable component

title

content

<div class="card">
	<header class="card-header">
		<p class="card-header-title">title</p>
	</header>
	<div class="card-image">
		<figure class="image"></figure>
	</div>
	<div class="card-content">
		<p>content</p>
	</div>
	<footer class="card-footer">
		<div class="card-footer-item"></div>
	</footer>
</div>

Tabs

Simple responsive horizontal navigation tabs, with different styles

Simple responsive horizontal navigation tabs, with different styles

<div class="tabs">
	<ul>
		<li class="is-active"><a href="">Pictures</a></li>
		<li><a href="">Music</a></li>
		<li><a href="">Documents</a></li>
	</ul>
</div>

Modifiers

alignment
is-centered
is-right
sizes
is-small
is-medium
is-large
styles
is-boxed
is-toggle
is-toggle-rounded
is-fullwidth
alignment

To align the tabs list, use the is-centered or is-right modifier on the .tabs container.

<div class="tabs is-centered">
	<ul>
		<li class="is-active"><a href="">Pictures</a></li>
		<li><a href="">Music</a></li>
		<li><a href="">Documents</a></li>
	</ul>
</div>
<div class="tabs is-right">
	<ul>
		<li class="is-active"><a href="">Pictures</a></li>
		<li><a href="">Music</a></li>
		<li><a href="">Documents</a></li>
	</ul>
</div>
sizes

You can choose between 3 additional sizes ; is-small is-medium and is-large.

<div class="tabs is-small">
	<ul>
		<li class="is-active"><a href="">Pictures</a></li>
		<li><a href="">Music</a></li>
		<li><a href="">Documents</a></li>
	</ul>
</div>
<div class="tabs is-medium">
	<ul>
		<li class="is-active"><a href="">Pictures</a></li>
		<li><a href="">Music</a></li>
		<li><a href="">Documents</a></li>
	</ul>
</div>
<div class="tabs is-large">
	<ul>
		<li class="is-active"><a href="">Pictures</a></li>
		<li><a href="">Music</a></li>
		<li><a href="">Documents</a></li>
	</ul>
</div>
styles

Stylised tabs.

<div class="tabs is-boxed">
	<ul>
		<li class="is-active"><a href="">Pictures</a></li>
		<li><a href="">Music</a></li>
		<li><a href="">Documents</a></li>
	</ul>
</div>
<div class="tabs is-toggle">
	<ul>
		<li class="is-active"><a href="">Pictures</a></li>
		<li><a href="">Music</a></li>
		<li><a href="">Documents</a></li>
	</ul>
</div>
<div class="tabs is-toggle-rounded">
	<ul>
		<li class="is-active"><a href="">Pictures</a></li>
		<li><a href="">Music</a></li>
		<li><a href="">Documents</a></li>
	</ul>
</div>
<div class="tabs is-fullwidth">
	<ul>
		<li class="is-active"><a href="">Pictures</a></li>
		<li><a href="">Music</a></li>
		<li><a href="">Documents</a></li>
	</ul>
</div>

Made with Bulma
This page isopen sourceNoticed a typo? Or something unclear?

This documentation was generated with spec, the CSS framework specification toolkit