Code
<div class="columns">
<div class="column has-background-primary">1st column</div>
<div class="column has-background-success">2nd column</div>
</div>Preview
1st column
2nd column
| Item | Description |
|---|---|
| URL | https://bulma.io/ |
| License | MIT |
| Module | Size |
|---|---|
| bulma.min.css | 199KB |
Getting started with Bulma via CDN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getting started with Bulma</title>
<!-- Bulma -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<!-- Font Awesome 5 -->
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<!-- Content here -->
</body>
</html>Breadcrumb navigation
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>Center aligned breadcrumb navigation
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>Right aligned breadcrumb navigation
<nav class="breadcrumb is-right" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>Small breadcrumb navigation
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>Medium breadcrumb navigation
<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>Large breadcrumb navigation
<nav class="breadcrumb is-large" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>Breadcrumb navigation with arrow separator
<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>Breadcrumb navigation with bullet separator
<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>Breadcrumb navigation with dot separator
<nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>Breadcrumb navigation with succeeds separator
<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Bulma</a>
</li>
</ul>
</nav>Button in Bulma
<button class="button">Button</button>
<a class="button">Link</a>
<input type="submit" class="button">
<input type="reset" class="button">Small button in Bulma
<button class="button is-small">Button</button>
<button class="button is-small is-white">Button</button>
<button class="button is-small is-light">Button</button>
<button class="button is-small is-dark">Button</button>
<button class="button is-small is-black">Button</button>
<button class="button is-small is-text">Button</button>>
<button class="button is-small is-primary">Button</button>>
<button class="button is-small is-link">Button</button>>
<button class="button is-small is-info">Button</button>>
<button class="button is-small is-success">Button</button>>
<button class="button is-small is-warning">Button</button>>
<button class="button is-small is-danger">Button</button>>Medium button in Bulma
<button class="button is-medium">Button</button>
<a class="button is-medium">Link</a>
<input type="submit is-medium" class="button">Large button in Bulma
<button class="button is-large">Button</button>
<a class="button is-large">Link</a>
<input type="submit is-large" class="button">Full width button in Bulma
<button class="button is-fullwidth">Button</button>
<a class="button is-fullwidth">Link</a>
<input type="submit is-fullwidth" class="button">
Light button
<button class="button is-light">Button</button>
<button class="button is-primary is-light">Primary</button>
<button class="button is-link is-light">Link</button>
<button class="button is-info is-light">Info</button>
<button class="button is-success is-light">Success</button>
<button class="button is-warning is-light">Warning</button>
<button class="button is-danger is-light">Danger</button>Outlined button
<button class="button is-outlined">Button</button>
<button class="button is-primary is-outlined">Primary</button>
<button class="button is-link is-outlined">Link</button>
<button class="button is-info is-outlined">Info</button>
<button class="button is-success is-outlined">Success</button>
<button class="button is-warning is-outlined">Warning</button>
<button class="button is-danger is-outlined">Danger</button>Inverted button
<button class="button is-inverted">Button</button>
<button class="button is-primary is-inverted">Primary</button>
<button class="button is-link is-inverted">Link</button>
<button class="button is-info is-inverted">Info</button>
<button class="button is-success is-inverted">Success</button>
<button class="button is-warning is-inverted">Warning</button>
<button class="button is-danger is-inverted">Danger</button>Rounded button
<button class="button is-rounded">Button</button>Loading button
<button class="button is-loading">Button</button>Static button
<button class="button is-static">Button</button>Disabled button
<button class="button" disabled>Button</button>Button with icon
<button class="button is-success">
<span class="icon">
<i class="fas fa-check"></i>
</span>
<span>OK</span>
</button>Card
<div class="card">
<div class="card-content">Content</div>
</div>Card header
<div class="card">
<header class="card-header">
<p class="card-header-title">Header title</p>
</header>
<div class="card-content">Content</div>
</div>Header title
Color in Bulma
<span class="has-text-primary">Primary</span>
<span class="has-text-info">Info</span>
<span class="has-text-link">Link</span>
<span class="has-text-success">Success</span>
<span class="has-text-warning">Warning</span>
<span class="has-text-danger">Danger</span>
<span class="has-text-black">Black</span>
<span class="has-text-dark">Dark</span>
<span class="has-text-grey-darker">Grey-darker</span>
<span class="has-text-grey-dark">Grey-dark</span>
<span class="has-text-grey">Grey</span>
<span class="has-text-grey-light">Grey-light</span>
<span class="has-text-grey-lighter">Grey-lighter</span>
<span class="has-text-light">Light</span>
<span class="has-text-white">White</span>Grey-light Grey-lighter Light White
Background color in Bulma
<div class="has-background-primary">Primary</div>
<div class="has-background-info">Info</div>
<div class="has-background-link">Link</div>
<div class="has-background-success">Success</div>
<div class="has-background-warning">Warning</div>
<div class="has-background-danger">Danger</div>
<div class="has-background-black">Black</div>
<div class="has-background-black-bis">Black-bis</div>
<div class="has-background-black-ter">Black-ter</div>
<div class="has-background-dark">Dark</div>
<div class="has-background-grey-dark">Grey-dark</div>
<div class="has-background-grey">Grey</div>
<div class="has-background-grey-light">Grey-light</div>
<div class="has-background-grey-lighter">Grey-lighter</div>
<div class="has-background-light">Light</div>
<div class="has-background-white-ter">White-ter</div>
<div class="has-background-white-bis">White-bis</div>
<div class="has-background-white">White</div>Font size in Bulma
<p class="is-size-1">Size 1</p>
<p class="is-size-2">Size 2</p>
<p class="is-size-3">Size 3</p>
<p class="is-size-4">Size 4</p>
<p class="is-size-5">Size 5</p>
<p class="is-size-6">Size 6</p>
<p class="is-size-7">Size 7</p>Size 1
Size 2
Size 3
Size 4
Size 5
Size 6
Size 7
Font style in Bulma
<span class="is-italic">Italic</span>Italic
Font weight in Bulma
<p class="has-text-weight-light">Light</p>
<p class="has-text-weight-normal">Normal</p>
<p class="has-text-weight-medium">Medium</p>
<p class="has-text-weight-semibold">Semibold</p>
<p class="has-text-weight-bold">Bold</p>Light
Normal
Medium
Semibold
Bold
Input
<div class="field">
<label class="label">First name</label>
<div class="control">
<input class="input" type="text" placeholder="First name">
</div>
</div>Small input
<div class="field">
<div class="control">
<input class="input is-small" type="text" placeholder="First name">
</div>
</div>Medium input
<div class="field">
<div class="control">
<input class="input is-medium" type="text" placeholder="First name">
</div>
</div>Large input
<div class="field">
<div class="control">
<input class="input is-large" type="text" placeholder="First name">
</div>
</div>Rounded input
<div class="field">
<div class="control">
<input class="input is-rounded" type="text" placeholder="First name">
</div>
</div>Input with icon
<div class="field">
<p class="control has-icons-left">
<input class="input" type="password" placeholder="Password">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</p>
</div>Title
<h1 class="title">h1</h1>
<h2 class="title">h2</h2>
<h3 class="title">h3</h3>
<h4 class="title">h4</h4>
<h5 class="title">h5</h5>
<h6 class="title">h6</h6>Subtitle
<h1 class="subtitle">h1</h1>
<h2 class="subtitle">h2</h2>
<h3 class="subtitle">h3</h3>
<h4 class="subtitle">h4</h4>
<h5 class="subtitle">h5</h5>
<h6 class="subtitle">h6</h6>Headings
<h1 class="title is-1">Title</h1>
<h1 class="subtitle is-1">Subtitle</h1>Headings
<h1 class="title is-6">Title</h1>
<h1 class="subtitle is-6">Subtitle</h1>Icon
<span class="icon">
<i class="fas fa-home""></i>
</span><div class="columns">
<div class="column has-background-primary">1st column</div>
<div class="column has-background-success">2nd column</div>
</div><div class="columns">
<div class="column is-full has-background-primary">Full column</div>
</div><div class="columns">
<div class="column is-half has-background-primary">1/2 column</div>
</div><div class="columns">
<div class="column is-one-third has-background-primary">1/3 column</div>
</div><div class="columns">
<div class="column is-two-thirds has-background-primary">2/3 column</div>
</div><div class="columns">
<div class="column is-one-quarter has-background-primary">1/4 column</div>
</div><div class="columns">
<div class="column is-three-quarters has-background-primary">3/4 column</div>
</div><footer class="footer">
<div class="content has-text-centered">
<p>SE学院</p>
</div>
</footer>Modal card
<div class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal card</p>
</header>
<section class="modal-card-body">
<!-- content -->
</section>
<footer class="modal-card-foot">
<button class="button">OK</button>
</footer>
</div>
</div><div class="container has-background-primary">
<p>Container</p>
</div/>Container
<div class="container is-fluid has-background-primary">
<p>Fluid container</p>
</div/>Fluid container
<div class="container is-widescreen has-background-primary">
<p>Widescreen container</p>
</div/>Widescreen container
<div class="container is-fullhd has-background-primary">
<p>Full HD container</p>
</div/>Full HD Container
<section class="section has-background-primary">
<p>Section</p>
</section>Section
Table in Bulma
<table class="table">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td>is-bordered</td>
<td>Add borders to all the cells.</td>
</tr>
<tr>
<td>is-striped</td>
<td>Add stripes to the table.</td>
</tr>
</tbody>
</table>| Class | Description |
|---|---|
| is-bordered | Add borders to all the cells. |
| is-striped | Add stripes to the table. |
Bordered table in Bulma
<table class="table is-bordered">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td>is-bordered</td>
<td>Add borders to all the cells.</td>
</tr>
<tr>
<td>is-striped</td>
<td>Add stripes to the table.</td>
</tr>
</tbody>
</table>| Class | Description |
|---|---|
| is-bordered | Add borders to all the cells. |
| is-striped | Add stripes to the table. |
Striped table
<table class="table is-striped">
<caption>Breakpoints</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td>mobile</td>
<td>up to 768px</td>
</tr>
<tr>
<td>tablet</td>
<td>from 769px</td>
</tr>
</tbody>
</table>| Class | Description |
|---|---|
| mobile | up to 768px |
| tablet | from 769px |
| desktop | from 1024px |
| widescreen | from 1216px |
| fullhd | from 1408px |
Hoverable table in Bulma
<table class="table is-hoverable">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td>is-bordered</td>
<td>Add borders to all the cells.</td>
</tr>
<tr>
<td>is-striped</td>
<td>Add stripes to the table.</td>
</tr>
</tbody>
</table>| Class | Description |
|---|---|
| is-bordered | Add borders to all the cells. |
| is-striped | Add stripes to the table. |
Narrow table in Bulma
<table class="table is-narrow">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td>is-bordered</td>
<td>Add borders to all the cells.</td>
</tr>
<tr>
<td>is-striped</td>
<td>Add stripes to the table.</td>
</tr>
</tbody>
</table>| Class | Description |
|---|---|
| is-bordered | Add borders to all the cells. |
| is-striped | Add stripes to the table. |
Full width table in Bulma
<table class="table is-fullwidth">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td>is-bordered</td>
<td>Add borders to all the cells.</td>
</tr>
<tr>
<td>is-striped</td>
<td>Add stripes to the table.</td>
</tr>
</tbody>
</table>| Class | Description |
|---|---|
| is-bordered | Add borders to all the cells. |
| is-striped | Add stripes to the table. |
Selected row in Bulma
<table class="table">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td>is-bordered</td>
<td>Add borders to all the cells.</td>
</tr>
<tr class="is-selected">
<td>is-striped</td>
<td>Add stripes to the table.</td>
</tr>
</tbody>
</table>| Class | Description |
|---|---|
| is-bordered | Add borders to all the cells. |
| is-striped | Add stripes to the table. |
Tag in Bulma
<span class="tag">Tag</span>
<span class="tag is-black">Black</span>
<span class="tag is-dark">Dark</span>
<span class="tag is-light">Light</span>
<span class="tag is-white">White</span>
<span class="tag is-primary">Primary</span>
<span class="tag is-link">Link</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>Medium tag in Bulma
<span class="tag is-medium">Tag</span>
<span class="tag is-medium is-black">Black</span>
<span class="tag is-medium is-dark">Dark</span>
<span class="tag is-medium is-light">Light</span>
<span class="tag is-medium is-white">White</span>
<span class="tag is-medium is-primary">Primary</span>
<span class="tag is-medium is-link">Link</span>
<span class="tag is-medium is-info">Info</span>
<span class="tag is-medium is-success">Success</span>
<span class="tag is-medium is-warning">Warning</span>
<span class="tag is-medium is-danger">Danger</span>Large tag in Bulma
<span class="tag is-large">Tag</span>
<span class="tag is-large is-black">Black</span>
<span class="tag is-large is-dark">Dark</span>
<span class="tag is-large is-light">Light</span>
<span class="tag is-large is-white">White</span>
<span class="tag is-large is-primary">Primary</span>
<span class="tag is-large is-link">Link</span>
<span class="tag is-large is-info">Info</span>
<span class="tag is-large is-success">Success</span>
<span class="tag is-large is-warning">Warning</span>
<span class="tag is-large is-danger">Danger</span>Rounded tag in Bulma
<span class="tag is-rounded">Tag</span>
<span class="tag is-large is-rounded is-black">Black</span>
<span class="tag is-large is-rounded is-dark">Dark</span>
<span class="tag is-large is-rounded is-light">Light</span>
<span class="tag is-large is-rounded is-white">White</span>
<span class="tag is-large is-rounded is-primary">Primary</span>
<span class="tag is-large is-rounded is-link">Link</span>
<span class="tag is-large is-rounded is-info">Info</span>
<span class="tag is-large is-rounded is-success">Success</span>
<span class="tag is-large is-rounded is-warning">Warning</span>
<span class="tag is-large is-rounded is-danger">Danger</span>Medium tags in Bulma
<div class="tags are-medium">
<span class="tag">Tag</span>
<span class="tag is-primary">Primary</span>
</div>Large tags in Bulma
<div class="tags are-large">
<span class="tag">Tag</span>
<span class="tag is-primary">Primary</span>
</div>Tags addons in Bulma
<div class="tags has-addons">
<span class="tag">Tag</span>
<span class="tag is-primary">Primary</span>
</div>