Bulma CSSフレームワークの使い方をご紹介します。このページ自体もBulmaを使っているので、そのままサンプルとなっています。
| 公式サイト | https://bulma.io/ |
| 開発者 | Jeremy Thomas |
| ライセンス | MIT |
| GitHub stars | 42.7k |
| モジュール | サイズ |
|---|---|
| bulma.min.css | 199KB |
Bulma CSSフレームワークのテンプレートは次のとおり。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
</head>
<body>
<!-- content -->
</body>
</html>Bulma CSSフレームワークはCDN (Contents Delivery Network) を通じて使うことができる。CDNを使ったBulmaのテンプレートは次のとおり。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
</head>
<body>
<!-- content -->
</body>
</html><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">Grey</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><button class="button">Button</button><a class="button">Link</a><input type="submit" class="button"><input type="reset" class="button">Bulma CSSフレームワークでは、Font Awesome のアイコンを利用できる。
<button class="button is-success">
<span class="icon">
<i class="fas fa-check"></i>
</span>
<span>OK</span>
</button><div class="card">
<div class="card-content">カード</div>
</div><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
<div class="card">
<div class="card-content">Content</div>
<footer class="card-footer">
<p class="card-footer-item">1st footer item</p>
<p class="card-footer-item">2nd footer item</p>
</footer>
</div><div class="columns">
<div class="column">first column</div>
<div class="column">second 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">half 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><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
Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを最大にするには、is-size-1 クラスを指定する。
<p class="is-size-1">一番大きいフォント</p>一番大きいフォント
Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを2番目の大きさにするには、is-size-2 クラスを指定する。
<p class="is-size-2">2番目に大きいフォント</p>2番目に大きいフォント
Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを3番目の大きさにするには、is-size-3 クラスを指定する。
<p class="is-size-3">3番目に大きいフォント</p>3番目に大きいフォント
Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを4番目の大きさにするには、is-size-4 クラスを指定する。
<p class="is-size-4">4番目に大きいフォント</p>4番目に大きいフォント
Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを5番目の大きさにするには、is-size-5 クラスを指定する。
<p class="is-size-5">5番目に大きいフォント</p>5番目に大きいフォント
Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを6番目の大きさにするには、is-size-6 クラスを指定する。
<p class="is-size-6">6番目に大きいフォント</p>6番目に大きいフォント
Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを1番小さくするには、is-size-7 クラスを指定する。
<p class="is-size-7">一番小さいフォント</p>一番小さいフォント
Bulma CSSフレームワークでは、マージン（要素の外側の余白）のサイズを0から6までの7段階で指定できる。マージンを無しにするには、m-0 クラスを指定する。
<div class="m-0 has-background-primary">マージン無し</div>Bulma CSSフレームワークでは、マージン（要素の外側の余白）のサイズを0から6までの7段階で指定できる。マージンを2番目の大きさにするには、m-1 クラスを指定する。
<div class="m-1 has-background-primary">.m-1</div>Bulma CSSフレームワークでは、マージン（要素の外側の余白）のサイズを0から6までの7段階で指定できる。マージンを3番目の大きさにするには、m-2 クラスを指定する。
<div class="m-2 has-background-primary">.m-2</div>Bulma CSSフレームワークでは、マージン（要素の外側の余白）のサイズを0から6までの7段階で指定できる。マージンを4番目の大きさにするには、m-3 クラスを指定する。
<div class="m-3 has-background-primary">.m-3</div>Bulma CSSフレームワークでは、マージン（要素の外側の余白）のサイズを0から6までの7段階で指定できる。マージンを5番目の大きさにするには、m-4 クラスを指定する。
<div class="m-4 has-background-primary">.m-4</div>Bulma CSSフレームワークでは、マージン（要素の外側の余白）のサイズを0から6までの7段階で指定できる。マージンを6番目の大きさにするには、m-5 クラスを指定する。
<div class="m-5 has-background-primary">.m-5</div>Bulma CSSフレームワークでは、マージン（要素の外側の余白）のサイズを0から6までの7段階で指定できる。マージンを一番大きくするには、m-6 クラスを指定する。
<div class="m-6 has-background-primary">一番大きいマージン</div><div class="mb-0 has-background-primary">.mb-0</div><div class="mb-1 has-background-primary">.mb-1</div><div class="mb-2 has-background-primary">.mb-2</div><div class="mb-3 has-background-primary">.mb-3</div><div class="mb-4 has-background-primary">.mb-4</div><div class="mb-5 has-background-primary">.mb-5</div><div class="mb-6 has-background-primary">.mb-6</div><div class="ml-0 mt-1 has-background-primary">.ml-0</div><div class="ml-1 mt-1 has-background-primary">.ml-1</div><div class="ml-2 mt-1 has-background-primary">.ml-2</div><div class="ml-3 mt-1 has-background-primary">.ml-3</div><div class="ml-4 mt-1 has-background-primary">.ml-4</div><div class="ml-5 mt-1 has-background-primary">.ml-5</div><div class="ml-6 mt-1 has-background-primary">.ml-6</div><div class="mx-0 mt-1 has-background-primary">.mx-0</div><div class="mx-1 mt-1 has-background-primary">.mx-1</div><div class="mx-2 mt-1 has-background-primary">.mx-2</div><div class="mx-3 mt-1 has-background-primary">.mx-3</div><div class="mx-4 mt-1 has-background-primary">.mx-4</div><div class="mx-5 mt-1 has-background-primary">.mx-5</div><div class="mx-6 mt-1 has-background-primary">.mx-6</div><div class="my-0 has-background-primary">.my-0</div><div class="my-1 has-background-primary">.my-1</div><div class="my-2 has-background-primary">.my-2</div><div class="my-3 has-background-primary">.my-3</div><div class="my-4 has-background-primary">.my-4</div><div class="my-5 has-background-primary">.my-5</div><div class="my-6 has-background-primary">.my-6</div><p class="has-text-weight-light">Light</p>Light
<p class="has-text-weight-normal">Normal</p>Normal
<p class="has-text-weight-medium">Medium</p>Medium
<p class="has-text-weight-semibold">Semibold</p>Semibold
<p class="has-text-weight-bold">Bold</p>Bold
<footer class="footer">
<div class="content has-text-centered">
<p>SE学院</p>
</div>
</footer><form action="#">
<div class="field">
<label class="label">First name</label>
<div class="control">
<input class="input" type="text" placeholder="First name">
</div>
</div>
</form>Bulma CSSフレームワークでは、Font Awesome アイコンを利用できる。
<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>Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの6段階で指定できる。タイトルやサブタイトルのサイズを最大にするには、is-1 クラスを指定する。
<h1 class="title is-1">Title</h1>
<h1 class="subtitle is-1">Subtitle</h1>Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの6段階で指定できる。タイトルやサブタイトルのサイズを2番目に大きくするには、is-2 クラスを指定する。
<h1 class="title is-2">Title</h1>
<h1 class="subtitle is-2">Subtitle</h1>Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの6段階で指定できる。タイトルやサブタイトルのサイズを3番目に大きくするには、is-3 クラスを指定する。
<h1 class="title is-3">Title</h1>
<h1 class="subtitle is-3">Subtitle</h1>Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの6段階で指定できる。タイトルやサブタイトルのサイズを4番目に大きくするには、is-4 クラスを指定する。
<h1 class="title is-4">Title</h1>
<h1 class="subtitle is-4">Subtitle</h1>Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの6段階で指定できる。タイトルやサブタイトルのサイズを5番目に大きくするには、is-4 クラスを指定する。
<h1 class="title is-5">Title</h1>
<h1 class="subtitle is-5">Subtitle</h1>Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの6段階で指定できる。タイトルやサブタイトルのサイズを最小にするには、is-6 クラスを指定する。
<h1 class="title is-6">Title</h1>
<h1 class="subtitle is-6">Subtitle</h1>Bulma CSSフレームワークでは、Font Awesome のアイコンを使うことができる。
<span class="icon">
<i class="fas fa-home"></i>
</span><a onclick="openModal('modal')" class="button is-primary">開く</a>
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<!-- contnt -->
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<script>
function openModal(id) {
document.getElementById(id).classList.add("is-active")
}
function closeModal(id) {
document.getElementById(id).classList.remove("is-active")
}
<script><nav class="navbar" role="navigation" aria-label="main navigation">
<div id="example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/css/bootstrap/">Bootstrap</a>
<a class="navbar-item" href="/css/materialize/">Materialize</a>
<a class="navbar-item" href="/css/milligram/">Milligram</a>
</div>
</div>
</nav><nav class="navbar" role="navigation" aria-label="main navigation">
<div id="example" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item" href="/css/primer/">Primer CSS</a>
<a class="navbar-item" href="/css/pure/">Pure.css</a>
<a class="navbar-item" href="/css/semantic/">Semantic UI</a>
</div>
</div>
</nav><nav class="navbar is-primary">
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/css/skeleton/">Skeleton</a>
<a class="navbar-item" href="/css/spectre/">Spectre.css</a>
<a class="navbar-item" href="/css/tachyons/">Tachyons</a>
</div>
</div>
</nav><nav class="navbar">
<div class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">Framework</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/css/tailwind/">Tailwind CSS</a>
<a class="navbar-item" href="/css/uikit/">UIkit</a>
<a class="navbar-item" href="/css/foundation/">Zurb Foundation</a>
</div>
</div>
</div>
</div>
</nav><div class="pb-0 mt-1 has-background-primary">.pb-0</div><div class="pb-1 mt-1 has-background-primary">.pb-1</div><div class="pb-2 mt-1 has-background-primary">.pb-2</div><div class="pb-3 mt-1 has-background-primary">.pb-3</div><div class="pb-4 mt-1 has-background-primary">.pb-4</div><div class="pb-5 mt-1 has-background-primary">.pb-5</div><div class="pb-6 mt-1 has-background-primary">.pb-6</div><div class="pl-0 mt-1 has-background-primary">.pl-0</div><div class="pl-1 mt-1 has-background-primary">.pl-1</div><div class="pl-2 mt-1 has-background-primary">.pl-2</div><div class="pl-3 mt-1 has-background-primary">.pl-3</div><div class="pl-4 mt-1 has-background-primary">.pl-4</div><div class="pl-5 mt-1 has-background-primary">.pl-5</div><div class="pl-6 mt-1 has-background-primary">.pl-6</div><div class="py-0 mt-1 has-background-primary">.py-0</div><div class="py-1 mt-1 has-background-primary">.py-1</div><div class="py-2 mt-1 has-background-primary">.py-2</div><div class="py-3 mt-1 has-background-primary">.py-3</div><div class="py-4 mt-1 has-background-primary">.py-4</div><div class="py-5 mt-1 has-background-primary">.py-5</div><div class="py-6 mt-1 has-background-primary">.py-6</div>Bulma CSSでテキストを中央寄せにするには、has-text-centered クラスを指定する。
<p class="has-text-centered">中央寄せ</p>中央寄せ
<p class="has-text-justified">両幅寄せ</p>両幅寄せ
Bulma CSSでテキストを左寄せにするには、has-text-centered クラスを指定する。
<p class="has-text-left">左寄せ</p>左寄せ
Bulma CSSでテキストを右寄せにするには、has-text-centered クラスを指定する。
<p class="has-text-right">右寄せ</p>右寄せ
<p class="has-text-primary">Primary</p>Primary
<p class="has-text-info">Info</p>Info
<p class="has-text-link">Link</p>Link
<p class="has-text-success">Success</p>Success
<p class="has-text-warning">Warning</p>Warning
<p class="has-text-danger">Danger</p>Danger
<p class="has-text-black">Black</p>Black
<p class="has-text-dark">Dark</p>Dark
<p class="has-text-grey-darker">Grey-darker</p>Grey-darker
<p class="has-text-grey-dark">Grey-dark</p>Grey-dark
<p class="has-text-grey">Grey</p>Grey
<p class="has-text-grey-light has-background-black">Grey-light</p>Grey-light
<p class="has-text-grey-lighter has-background-black">Grey-lighter</p>Grey-lighter
<p class="has-text-light has-background-black">Light</p>Light
<p class="has-text-white has-background-black">White</p>White
<section class="section has-background-primary">
<p>Section</p>
</section>Section
<table class="table">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr>
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>| コード | 金融機関 |
|---|---|
| 0001 | みずほ銀行 |
| 0005 | 三菱UFJ銀行 |
| 0009 | 三井住友銀行 |
| 9900 | ゆうちょ銀行 |
<table class="table is-bordered">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr>
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>| コード | 金融機関 |
|---|---|
| 0001 | みずほ銀行 |
| 0005 | 三菱UFJ銀行 |
| 0009 | 三井住友銀行 |
| 9900 | ゆうちょ銀行 |
<table class="table is-striped">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr>
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>| コード | 金融機関 |
|---|---|
| 0001 | みずほ銀行 |
| 0005 | 三菱UFJ銀行 |
| 0009 | 三井住友銀行 |
| 9900 | ゆうちょ銀行 |
テーブルに is-hoverable クラスを指定すると、マウスカーソルを乗せた行の色が変わるようになる。
<table class="table is-hoverable">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr>
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>| コード | 金融機関 |
|---|---|
| 0001 | みずほ銀行 |
| 0005 | 三菱UFJ銀行 |
| 0009 | 三井住友銀行 |
| 9900 | ゆうちょ銀行 |
<table class="table is-narrow">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr>
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>| コード | 金融機関 |
|---|---|
| 0001 | みずほ銀行 |
| 0005 | 三菱UFJ銀行 |
| 0009 | 三井住友銀行 |
| 9900 | ゆうちょ銀行 |
<table class="table is-fullwidth">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr>
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>| コード | 金融機関 |
|---|---|
| 0001 | みずほ銀行 |
| 0005 | 三菱UFJ銀行 |
| 0009 | 三井住友銀行 |
| 9900 | ゆうちょ銀行 |
テーブルの行に is-selected クラスを指定すると、その行の色が変わる。
<table class="table">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
</tr>
<tr class="is-selected">
<td>0005</td>
<td>三菱UFJ銀行</td>
</tr>
<tr>
<td>0009</td>
<td>三井住友銀行</td>
</tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
</tr>
</tbody>
</table>| コード | 金融機関 |
|---|---|
| 0001 | みずほ銀行 |
| 0005 | 三菱UFJ銀行 |
| 0009 | 三井住友銀行 |
| 9900 | ゆうちょ銀行 |
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>Small button
<button class="button is-small">Small 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" class="button is-large">Full width button in Bulma
<button class="button is-fullwidth">Button</button>
<a class="button is-fullwidth">Link</a>
<input type="submit" class="button is-fullwidth">
White button
<button class="button is-white">White button</button>Dark button
<button class="button is-dark">Dark button</button>Black button
<button class="button is-black">Black button</button>Text button
<button class="button is-text">Text button</button>Primary button
<button class="button is-primary">Primary button</button>Link button
<button class="button is-link">Link button</button>Info button
<button class="button is-info">Info button</button>Success button
<button class="button is-success">Success button</button>Warning button
<button class="button is-warning">Warning button</button>Danger button
<button class="button is-danger">Danger button</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>Font style in Bulma
<span class="is-italic">Italic</span>Italic
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>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>Top margin
<div class="mt-0 has-background-primary">.mt-0</div>
<div class="mt-1 has-background-primary">.mt-1</div>
<div class="mt-2 has-background-primary">.mt-2</div>
<div class="mt-3 has-background-primary">.mt-3</div>
<div class="mt-4 has-background-primary">.mt-4</div>
<div class="mt-5 has-background-primary">.mt-5</div>
<div class="mt-6 has-background-primary">.mt-6</div>Right margin
<div class="mr-0 mt-1 has-background-primary">.mr-0</div>
<div class="mr-1 mt-1 has-background-primary">.mr-1</div>
<div class="mr-2 mt-1 has-background-primary">.mr-2</div>
<div class="mr-3 mt-1 has-background-primary">.mr-3</div>
<div class="mr-4 mt-1 has-background-primary">.mr-4</div>
<div class="mr-5 mt-1 has-background-primary">.mr-5</div>
<div class="mr-6 mt-1 has-background-primary">.mr-6</div>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>Padding
<div class="p-0 mt-1 has-background-primary">.p-0</div>
<div class="p-1 mt-1 has-background-primary">.p-1</div>
<div class="p-2 mt-1 has-background-primary">.p-2</div>
<div class="p-3 mt-1 has-background-primary">.p-3</div>
<div class="p-4 mt-1 has-background-primary">.p-4</div>
<div class="p-5 mt-1 has-background-primary">.p-5</div>
<div class="p-6 mt-1 has-background-primary">.p-6</div>Top padding
<div class="pt-0 mt-1 has-background-primary">.pt-0</div>
<div class="pt-1 mt-1 has-background-primary">.pt-1</div>
<div class="pt-2 mt-1 has-background-primary">.pt-2</div>
<div class="pt-3 mt-1 has-background-primary">.pt-3</div>
<div class="pt-4 mt-1 has-background-primary">.pt-4</div>
<div class="pt-5 mt-1 has-background-primary">.pt-5</div>
<div class="pt-6 mt-1 has-background-primary">.pt-6</div>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>