Bulma Container

The container is a fundamental layout element in Bulma that centers your content horizontally and adds appropriate padding on both sides. It's the simplest way to create a responsive centered layout.

Basic Container

The .container class centers your content with responsive max-width based on the viewport width.

Example:

This is a default container

Bulma Code Playground

Live Preview

Edit Bulma HTML Code:HTML + Bulma Classes

Quick Examples:

<button class="button is-primary">Click me</button>
<div class="notification is-success">
  <button class="delete"></button>
  Success! Your code is working.
</div>

Tip: Use Bulma CSS classes like .button, .notification, .card

Code:

<!-- Default container -->
<div class="container">
  <!-- Your content here -->
</div>

<!-- Container with background -->
<div class="container has-background-primary has-text-white">
  Centered content with background
</div>

Container Behavior

The container has different behaviors based on the viewport width:

Viewport	Behavior	Max Width
Mobile (< 768px)	Full width with padding	Auto (100%)
Tablet (≥ 768px)	Max-width with padding	750px
Desktop (≥ 1024px)	Max-width with padding	960px
Widescreen (≥ 1216px)	Max-width with padding	1152px
FullHD (≥ 1408px)	Max-width with padding	1344px

Container Modifiers

1. Fluid Container

Use .is-fluid modifier to make the container full width with padding on all screen sizes.

<!-- Fluid container (always full width with padding) -->
<div class="container is-fluid">
  Fluid container content
</div>

2. Widescreen Container

Use .is-widescreen for containers that should be full width until the widescreen breakpoint.

<!-- Widescreen container -->
<div class="container is-widescreen">
  Widescreen container content
</div>

3. FullHD Container

Use .is-fullhd for containers that should be full width until the FullHD breakpoint.

<!-- FullHD container -->
<div class="container is-fullhd">
  FullHD container content
</div>

Container with Other Components

Container in Hero

<!-- Hero with container -->
<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Hero Title</h1>
      <h2 class="subtitle">Hero Subtitle</h2>
    </div>
  </div>
</section>

Container with Columns

<!-- Container with grid -->
<div class="container">
  <div class="columns">
    <div class="column">First column</div>
    <div class="column">Second column</div>
    <div class="column">Third column</div>
  </div>
</div>

Nested Containers

<!-- Nested containers -->
<div class="container">
  <h1 class="title">Main Container</h1>
  
  <div class="container">
    <p>Nested container content</p>
  </div>
</div>

Custom Container Sizes

You can customize container sizes by overriding Sass variables.

Sass Customization

// Customize container breakpoints and sizes
$container-offset: (2 * $gap) !default;

$container-max-width: $fullhd !default;
$container-max-width-tablet: $tablet !default;
$container-max-width-desktop: $desktop !default;
$container-max-width-widescreen: $widescreen !default;

// Custom container class
.my-custom-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

Responsive Container Examples

Basic Responsive Layout

<!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@1.0.0/css/bulma.min.css">
  <title>Container Example</title>
</head>
<body>
  <section class="section">
    <div class="container">
      <h1 class="title">Welcome to My Site</h1>
      <p class="subtitle">This content is centered with proper padding</p>
      
      <div class="columns">
        <div class="column">
          <div class="box">
            <p>Column 1 content</p>
          </div>
        </div>
        <div class="column">
          <div class="box">
            <p>Column 2 content</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

Fluid Container Example

<div class="container is-fluid">
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <!-- Navbar content -->
  </nav>
  
  <div class="section">
    <div class="container">
      <!-- Regular container inside fluid container -->
      <h1 class="title">Page Title</h1>
      <!-- Content -->
    </div>
  </div>
</div>

Best Practices

1. When to Use Container

For main content areas that should be centered
When you need consistent padding on both sides
For creating responsive layouts that work on all screen sizes
As a wrapper for grid systems (columns)

2. When Not to Use Container

For full-width elements like hero sections or footers
When you need edge-to-edge design
For fixed-width layouts (use custom CSS instead)

3. Accessibility Considerations

Ensure container doesn't restrict zoom functionality
Maintain sufficient padding for touch targets on mobile
Test with screen readers to ensure content flow is logical

Pro Tip: Use .container as the main wrapper for your content. For full-width backgrounds, wrap your container in a .section or .hero with background styling.

Try It Yourself

Experiment with different container types and modifiers: