Bulma Layout

Bulma provides several layout components that help you structure your web pages effectively. These components follow modern design principles and are fully responsive.

Container

The .container class centers your content horizontally and adds appropriate padding.

Basic Container

<div class="container">
  <div class="notification is-primary">
    This container is centered and has max-width
  </div>
</div>

Container Variants

<!-- Default container (responsive max-width) -->
<div class="container">Content</div>

<!-- Fullwidth until specific breakpoint -->
<div class="container is-fluid">Content</div>

<!-- Max-width: 1280px -->
<div class="container is-widescreen">Content</div>

<!-- Max-width: 1408px -->
<div class="container is-fullhd">Content</div>

<!-- Custom container with breakpoints -->
<div class="container is-max-desktop">Content</div>
<div class="container is-max-widescreen">Content</div>

Hero

The hero component allows you to create large featured sections, typically used for landing pages or important content highlights.

Basic Hero

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">Primary hero</p>
    <p class="subtitle">Primary subtitle</p>
  </div>
</section>

Hero with Head and Foot

<section class="hero is-success">
  <div class="hero-head">
    <nav class="navbar">
      <!-- Navbar content -->
    </nav>
  </div>
  
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Hero Title</h1>
      <h2 class="subtitle">Hero Subtitle</h2>
    </div>
  </div>
  
  <div class="hero-foot">
    <nav class="tabs is-boxed">
      <!-- Tabs content -->
    </nav>
  </div>
</section>

Hero Sizes

<!-- Different hero sizes -->
<section class="hero is-small is-primary">
  <div class="hero-body">Small Hero</div>
</section>

<section class="hero is-medium is-link">
  <div class="hero-body">Medium Hero</div>
</section>

<section class="hero is-large is-info">
  <div class="hero-body">Large Hero</div>
</section>

<section class="hero is-halfheight is-warning">
  <div class="hero-body">Half Height Hero</div>
</section>

<section class="hero is-fullheight is-danger">
  <div class="hero-body">Full Height Hero</div>
</section>

Section

Sections are used to separate major parts of your content. They provide consistent spacing and can be nested.

Basic Section

<section class="section">
  <div class="container">
    <h1 class="title">Section Title</h1>
    <h2 class="subtitle">Section Subtitle</h2>
    <p>Section content goes here...</p>
  </div>
</section>

Section Sizes

<!-- Different section sizes -->
<section class="section is-small">
  <div class="container">Small Section</div>
</section>

<section class="section is-medium">
  <div class="container">Medium Section</div>
</section>

<section class="section is-large">
  <div class="container">Large Section</div>
</section>

Footer

The footer component is perfect for displaying copyright information, links, and other end-of-page content.

Basic Footer

<footer class="footer">
  <div class="content has-text-centered">
    <p>
      <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. 
      The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
    </p>
  </div>
</footer>

Complex Footer

<footer class="footer">
  <div class="container">
    <div class="columns">
      <div class="column is-3">
        <h3 class="title is-5">Company</h3>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Careers</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      <div class="column is-3">
        <h3 class="title is-5">Products</h3>
        <ul>
          <li><a href="#">Features</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">API</a></li>
        </ul>
      </div>
      <div class="column is-3">
        <h3 class="title is-5">Support</h3>
        <ul>
          <li><a href="#">Help Center</a></li>
          <li><a href="#">Community</a></li>
          <li><a href="#">Status</a></li>
        </ul>
      </div>
      <div class="column is-3">
        <h3 class="title is-5">Connect</h3>
        <div class="buttons">
          <a class="button is-primary" href="#">
            <span class="icon"><i class="fab fa-twitter"></i></span>
          </a>
          <a class="button is-info" href="#">
            <span class="icon"><i class="fab fa-linkedin"></i></span>
          </a>
        </div>
      </div>
    </div>
    <div class="content has-text-centered">
      <p>&copy; 2024 Your Company. All rights reserved.</p>
    </div>
  </div>
</footer>

Level

The level component allows you to create horizontally distributed content, perfect for navigation bars, stats, or any balanced layout.

Basic Level

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

Level with Multiple Items

<nav class="level">
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Tweets</p>
      <p class="title">3,456</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Following</p>
      <p class="title">123</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Followers</p>
      <p class="title">456K</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Likes</p>
      <p class="title">789</p>
    </div>
  </div>
</nav>

Media Object

The media object is a classic UI pattern for displaying content with an image on the left and descriptive content on the right.

<article class="media">
  <figure class="media-left">
    <p class="image is-64x64">
      <img src="https://bulma.io/images/placeholders/128x128.png">
    </p>
  </figure>
  <div class="media-content">
    <div class="content">
      <p>
        <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Proin ornare magna eros, eu pellentesque tortor vestibulum ut. 
        Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
      </p>
    </div>
    <nav class="level is-mobile">
      <div class="level-left">
        <a class="level-item">
          <span class="icon is-small"><i class="fas fa-reply"></i></span>
        </a>
        <a class="level-item">
          <span class="icon is-small"><i class="fas fa-retweet"></i></span>
        </a>
        <a class="level-item">
          <span class="icon is-small"><i class="fas fa-heart"></i></span>
        </a>
      </div>
    </nav>
  </div>
  <div class="media-right">
    <button class="delete"></button>
  </div>
</article>

Tiles

Tiles allow you to create complex two-dimensional layouts with nested columns and rows.

Basic Tiles

<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">
          <p class="title">Vertical tile</p>
          <p class="subtitle">Top tile</p>
        </article>
        <article class="tile is-child notification is-warning">
          <p class="title">Vertical tile</p>
          <p class="subtitle">Bottom tile</p>
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child notification is-info">
          <p class="title">Middle tile</p>
          <p class="subtitle">With an image</p>
          <figure class="image is-4by3">
            <img src="https://bulma.io/images/placeholders/640x480.png">
          </figure>
        </article>
      </div>
    </div>
    <div class="tile is-parent">
      <article class="tile is-child notification is-danger">
        <p class="title">Wide tile</p>
        <p class="subtitle">Aligned with the right tile</p>
        <div class="content">Content</div>
      </article>
    </div>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child notification is-success">
      <div class="content">
        <p class="title">Tall tile</p>
        <p class="subtitle">With even more content</p>
        <div class="content">Content</div>
      </div>
    </article>
  </div>
</div>

Complete Page Layout Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Complete Layout</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
</head>
<body>
  <!-- Hero Section -->
  <section class="hero is-primary is-medium">
    <div class="hero-head">
      <nav class="navbar">
        <div class="container">
          <div class="navbar-brand">
            <a class="navbar-item" href="#">
              <strong>MySite</strong>
            </a>
          </div>
        </div>
      </nav>
    </div>
    <div class="hero-body">
      <div class="container has-text-centered">
        <h1 class="title">Welcome to Our Site</h1>
        <h2 class="subtitle">This is a complete layout example</h2>
      </div>
    </div>
  </section>

  <!-- Main Content Sections -->
  <section class="section">
    <div class="container">
      <div class="columns is-multiline">
        <div class="column is-4">
          <div class="card">
            <div class="card-content">
              <p class="title">Feature One</p>
              <p>Description of feature one</p>
            </div>
          </div>
        </div>
        <div class="column is-4">
          <div class="card">
            <div class="card-content">
              <p class="title">Feature Two</p>
              <p>Description of feature two</p>
            </div>
          </div>
        </div>
        <div class="column is-4">
          <div class="card">
            <div class="card-content">
              <p class="title">Feature Three</p>
              <p>Description of feature three</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="content has-text-centered">
      <p>&copy; 2024 MySite. Built with Bulma.</p>
    </div>
  </footer>
</body>
</html>

Best Practices

Use containers to limit content width on large screens
Combine hero with navbar for landing pages
Use sections to separate major content areas
Implement responsive footers with multiple columns
Use level components for balanced horizontal layouts

Up next: Bulma Form Elements

Bulma CSS Tutorial