Bulma Section

Bulma Sections are vertical containers used to structure content on a page. They provide consistent padding and spacing, helping to create visual separation between different parts of your layout.

Basic Section

Simple section with default padding:

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

Section Sizes

Control the padding with size modifiers:

<!-- Small section -->
<section class="section is-small">
  <p>Small section with less padding</p>
</section>

<!-- Medium section (default) -->
<section class="section is-medium">
  <p>Medium section with default padding</p>
</section>

<!-- Large section -->
<section class="section is-large">
  <p>Large section with more padding</p>
</section>

Section with Background Colors

<!-- Light background -->
<section class="section has-background-light">
  <p>Section with light background</p>
</section>

<!-- Primary background -->
<section class="section has-background-primary has-text-white">
  <p>Section with primary background</p>
</section>

<!-- Gradient background -->
<section class="section has-background-primary-dark has-text-white">
  <p>Section with dark primary background</p>
</section>

<!-- Custom background -->
<section class="section" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
  <p>Section with custom gradient</p>
</section>

Nested Sections

Create complex layouts with nested sections:

<section class="section">
  <div class="container">
    <!-- Hero section -->
    <section class="hero is-primary">
      <div class="hero-body">
        <h1 class="title">Main Hero</h1>
      </div>
    </section>
    
    <!-- Content section -->
    <section class="section">
      <div class="columns">
        <div class="column">
          <h2 class="title">Left Column</h2>
          <p>Content here...</p>
        </div>
        <div class="column">
          <h2 class="title">Right Column</h2>
          <p>Content here...</p>
        </div>
      </div>
    </section>
    
    <!-- Footer section -->
    <section class="section has-background-light">
      <p>Footer content...</p>
    </section>
  </div>
</section>

Section with Container

Combine section with container for centered content:

<section class="section">
  <div class="container">
    <h1 class="title">Centered Content</h1>
    <p>This content is centered within the container width.</p>
    
    <!-- Nested sections within container -->
    <section class="section has-background-white-ter">
      <p>Inner section with different background</p>
    </section>
  </div>
</section>

Responsive Sections

Adjust section padding for different screen sizes:

<section class="section py-2 py-4-tablet py-6-desktop">
  <p>Responsive padding: small on mobile, medium on tablet, large on desktop</p>
</section>

<!-- Using Bulma helpers -->
<section class="section px-0 px-3-tablet">
  <p>No horizontal padding on mobile, normal on tablet and up</p>
</section>

Section with Media

<section class="section">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column is-half">
        <h2 class="title">Feature Heading</h2>
        <p>Feature description goes here with details about what this section offers.</p>
        <button class="button is-primary">Learn More</button>
      </div>
      <div class="column is-half">
        <figure class="image is-16by9">
          <img src="feature-image.jpg" alt="Feature illustration">
        </figure>
      </div>
    </div>
  </div>
</section>

Section as Page Layout

Structure entire pages with sections:

<!-- Navigation (optional fixed navbar above sections) -->
<nav class="navbar is-fixed-top">
  <!-- Navbar content -->
</nav>

<!-- Hero Section -->
<section class="hero is-primary is-medium">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Welcome to Our Site</h1>
      <h2 class="subtitle">Discover amazing features</h2>
    </div>
  </div>
</section>

<!-- Features Section -->
<section class="section">
  <div class="container">
    <h2 class="title has-text-centered">Features</h2>
    <div class="columns is-multiline">
      <!-- Feature columns -->
    </div>
  </div>
</section>

<!-- Testimonials Section -->
<section class="section has-background-light">
  <div class="container">
    <h2 class="title has-text-centered">What Our Users Say</h2>
    <!-- Testimonial content -->
  </div>
</section>

<!-- CTA Section -->
<section class="section has-background-primary has-text-white">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column">
        <h2 class="title has-text-white">Ready to Get Started?</h2>
      </div>
      <div class="column is-narrow">
        <button class="button is-light is-large">Sign Up Free</button>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer class="footer">
  <!-- Footer content -->
</footer>

Section Spacing Customization

<!-- Custom padding using Bulma spacing helpers -->
<section class="section py-6">
  <p>Section with 3rem vertical padding (py-6)</p>
</section>

<section class="section px-4 py-8">
  <p>Section with 2rem horizontal and 4rem vertical padding</p>
</section>

<!-- Remove specific padding -->
<section class="section pt-0">
  <p>Section with no top padding</p>
</section>

<section class="section pb-6 px-0">
  <p>Section with large bottom padding and no horizontal padding</p>
</section>

Practical Examples

Pricing Page Sections

<!-- Hero Section -->
<section class="hero is-info is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Simple, Transparent Pricing</h1>
      <h2 class="subtitle">Choose the perfect plan for your needs</h2>
    </div>
  </div>
</section>

<!-- Pricing Plans Section -->
<section class="section">
  <div class="container">
    <div class="columns is-centered is-multiline">
      <!-- Pricing cards -->
      <div class="column is-one-third">
        <div class="card">
          <div class="card-content">
            <p class="title">Basic</p>
            <p class="subtitle">$10/month</p>
            <ul>
              <li>Feature 1</li>
              <li>Feature 2</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- More pricing cards -->
    </div>
  </div>
</section>

<!-- FAQ Section -->
<section class="section has-background-light">
  <div class="container">
    <h2 class="title has-text-centered">Frequently Asked Questions</h2>
    <div class="content">
      <!-- FAQ content -->
    </div>
  </div>
</section>

<!-- CTA Section -->
<section class="section">
  <div class="container">
    <div class="has-text-centered">
      <h2 class="title">Still have questions?</h2>
      <p class="subtitle">Contact our sales team for more information</p>
      <button class="button is-primary is-large">Contact Sales</button>
    </div>
  </div>
</section>

Dashboard Layout with Sections

<!-- Stats Overview Section -->
<section class="section pt-5">
  <div class="container">
    <h1 class="title">Dashboard Overview</h1>
    <div class="columns is-multiline">
      <!-- Stat cards -->
      <div class="column is-3">
        <div class="card">
          <div class="card-content">
            <p class="title">1,234</p>
            <p class="subtitle">Total Users</p>
          </div>
        </div>
      </div>
      <!-- More stat cards -->
    </div>
  </div>
</section>

<!-- Recent Activity Section -->
<section class="section">
  <div class="container">
    <h2 class="title">Recent Activity</h2>
    <div class="box">
      <!-- Activity list -->
    </div>
  </div>
</section>

<!-- Charts Section -->
<section class="section">
  <div class="container">
    <div class="columns">
      <div class="column is-two-thirds">
        <div class="card">
          <div class="card-content">
            <h3 class="title is-4">Monthly Traffic</h3>
            <!-- Chart here -->
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card">
          <div class="card-content">
            <h3 class="title is-4">Top Pages</h3>
            <!-- List here -->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Blog Post Layout

<!-- Article Header Section -->
<section class="section pt-6">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-8">
        <h1 class="title is-1">Blog Post Title</h1>
        <p class="subtitle">Published on January 15, 2024 • 5 min read</p>
        <div class="tags">
          <span class="tag is-primary">Technology</span>
          <span class="tag is-info">Web Development</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Article Content Section -->
<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-8">
        <div class="content is-medium">
          <!-- Article content here -->
          <p>First paragraph of the article...</p>
          <!-- More content -->
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Author Bio Section -->
<section class="section has-background-light">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-8">
        <div class="media">
          <div class="media-left">
            <figure class="image is-64x64">
              <img class="is-rounded" src="author.jpg" alt="Author">
            </figure>
          </div>
          <div class="media-content">
            <h3 class="title is-4">About the Author</h3>
            <p>Author bio goes here...</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Comments Section -->
<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-8">
        <h2 class="title">Comments</h2>
        <!-- Comments here -->
      </div>
    </div>
  </div>
</section>

Best Practices

• Use sections to create logical content groupings on your page
• Combine sections with containers for centered, readable content
• Use background colors to visually separate different sections
• Adjust section sizes based on content importance (hero sections can be larger)
• Consider using fixed navbar with appropriate section margin/padding adjustments
• Use responsive padding utilities for different screen sizes
• Maintain consistent spacing between sections for visual harmony

Next: Bulma Table Component