Bulmaの使い方

Bulma CSSフレームワーク入門

使い方

Bulma
ItemDescription
URL https://bulma.io/
License MIT
Bulma v0.9.1
ModuleSize
bulma.min.css199KB

チートシート

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

Code

<div class="columns">
  <div class="column is-full has-background-primary">Full column</div>
</div>

Preview

Full column

Code

<div class="columns">
  <div class="column is-half has-background-primary">1/2 column</div>
</div>

Preview

1/2 column

Code

<div class="columns">
  <div class="column is-one-third has-background-primary">1/3 column</div>
</div>

Preview

1/3 column

Code

<div class="columns">
  <div class="column is-two-thirds has-background-primary">2/3 column</div>
</div>

Preview

2/3 column

Code

<div class="columns">
  <div class="column is-one-quarter has-background-primary">1/4 column</div>
</div>

Preview

1/4 column

Code

<div class="columns">
  <div class="column is-three-quarters has-background-primary">3/4 column</div>
</div>

Preview

3/4 column

Code

<div class="container has-background-primary">
  <p>Container</p>
</div/>

Preview

Container

Code

<div class="container is-fluid has-background-primary">
  <p>Fluid container</p>
</div/>

Preview

Fluid container

Code

<div class="container is-widescreen has-background-primary">
  <p>Widescreen container</p>
</div/>

Preview

Widescreen container

Code

<div class="container is-fullhd has-background-primary">
  <p>Full HD container</p>
</div/>

Preview

Full HD Container

Code

<section class="section has-background-primary">
  <p>Section</p>
</section>

Preview

Section