Bulma Box

The Bulma box element is basically a container having white a background, some padding and a box shadow.

Example

I'm in a box.

General Syntax

      
        <element class="box"></element>

Try it now

Source Code

Download

          
            <form class="box">
  <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" placeholder="e.g. alex@example.com">
    </div>
  </div>

  <div class="field">
    <label class="label">Password</label>
    <div class="control">
      <input class="input" type="password" placeholder="********">
    </div>
  </div>

  <button class="button is-primary">Sign in</button>
</form>

Try it now

Source Code : Output

Code Explanation

Since, the box element is a container, therefore other components can be included too.

Bulma CSS Box With Media Object

You can also use the box element with a media object too.

General Syntax

      
        <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="Image">
      </figure>
    </div>
    <div class="media-content">
      <div class="content">Write Media Content..</div>
      <nav class="level is-mobile"></nav>
    </div>
  </article>
</div>

Try it now

Source Code

Download

          
            <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="Image">
      </figure>
    </div>
    <div class="media-content">
      <div class="content">Write media content...</div>
      <nav class="level is-mobile"></nav>
    </div>
  </article>
</div>

Try it now

Source Code : Output

Write media content...

Bulma Box

Bulma CSS Box With Media Object

Web Tutorials