Bulma Content

The Content component in Bulma is designed for styling typography and text-based content. It provides consistent spacing, typography, and formatting for articles, blog posts, documentation, and other text-heavy content.

Basic Content Container

Wrap your content with .content class:

<div class="content">
  <h1>Heading 1</h1>
  <p>This is a paragraph inside content container.</p>
  
  <h2>Heading 2</h2>
  <p>Another paragraph with more content.</p>
</div>

Heading 1

This is a paragraph inside content container.

Heading 2

Another paragraph with more content.

Typography

Headings

<div class="content">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</div>

Paragraphs and Text Formatting

<div class="content">
  <p>This is a normal paragraph.</p>
  <p><small>This is small text.</small></p>
  <p><strong>This is bold text.</strong></p>
  <p><em>This is italic text.</em></p>
  <p><u>This is underlined text.</u></p>
  <p><del>This is deleted text.</del></p>
  <p><ins>This is inserted text.</ins></p>
  <p><mark>This is marked/highlighted text.</mark></p>
  <p><code>This is inline code.</code></p>
  <p><kbd>This is keyboard input.</kbd></p>
  <p><abbr title="HyperText Markup Language">HTML</abbr> abbreviation.</p>
  <p><sup>Superscript</sup> and <sub>Subscript</sub></p>
</div>

Lists

Unordered List

<div class="content">
  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
  </ul>
</div>

Ordered List

<div class="content">
  <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
  </ol>
</div>

Nested Lists

<div class="content">
  <ul>
    <li>First level
      <ul>
        <li>Second level
          <ul>
            <li>Third level</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Back to first level</li>
  </ul>
</div>

Mixed List Types

<div class="content">
  <ol>
    <li>First ordered item</li>
    <li>Second ordered item
      <ul>
        <li>Unordered subitem 1</li>
        <li>Unordered subitem 2</li>
      </ul>
    </li>
    <li>Third ordered item</li>
  </ol>
</div>

Blockquotes

<div class="content">
  <blockquote>
    <p>This is a blockquote. It's great for highlighting important quotes or citations.</p>
  </blockquote>
  
  <blockquote>
    <p>Another insightful quote that deserves attention.</p>
    <footer>— Author Name, <cite>Source Title</cite></footer>
  </blockquote>
</div>

Code Blocks

Inline Code

<div class="content">
  <p>Use <code>&lt;div&gt;</code> tags to create containers.</p>
  <p>The <code>console.log()</code> function outputs to the console.</p>
</div>

Code Blocks with Syntax Highlighting

<div class="content">
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;My First Heading&lt;/h1&gt;
  &lt;p&gt;My first paragraph.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>

Tables

<div class="content">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>25</td>
        <td>London</td>
      </tr>
      <tr>
        <td>Bob Johnson</td>
        <td>35</td>
        <td>Tokyo</td>
      </tr>
    </tbody>
  </table>
</div>

Content Sizes

<!-- Small content -->
<div class="content is-small">
  <h1>Small Heading</h1>
  <p>Small text content.</p>
</div>

<!-- Normal content (default) -->
<div class="content">
  <h1>Normal Heading</h1>
  <p>Normal text content.</p>
</div>

<!-- Medium content -->
<div class="content is-medium">
  <h1>Medium Heading</h1>
  <p>Medium text content.</p>
</div>

<!-- Large content -->
<div class="content is-large">
  <h1>Large Heading</h1>
  <p>Large text content.</p>
</div>

Responsive Content

<div class="content">
  <!-- Responsive images -->
  <img src="image.jpg" alt="Description" class="is-responsive">
  
  <!-- Responsive iframes -->
  <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
          frameborder="0" allowfullscreen class="is-responsive"></iframe>
  
  <!-- Responsive tables -->
  <div class="table-container">
    <table class="is-responsive">
      <!-- Table content -->
    </table>
  </div>
</div>

Use Cases

1. Blog Article

<div class="content">
  <h1>Getting Started with Bulma</h1>
  <p class="subtitle">A comprehensive guide to the modern CSS framework</p>
  
  <div class="tags">
    <span class="tag is-primary">CSS</span>
    <span class="tag is-info">Frontend</span>
    <span class="tag is-success">Framework</span>
  </div>
  
  <p>Published on <time datetime="2023-12-01">December 1, 2023</time> by <strong>John Doe</strong></p>
  
  <hr>
  
  <h2>Introduction</h2>
  <p>Bulma is a free, open source CSS framework based on Flexbox. It's:</p>
  <ul>
    <li><strong>Modern:</strong> Built with Flexbox</li>
    <li><strong>Responsive:</strong> Mobile-first approach</li>
    <li><strong>Modular:</strong> Import only what you need</li>
    <li><strong>Customizable:</strong> Easy to theme</li>
  </ul>
  
  <h2>Installation</h2>
  <p>You can install Bulma via npm:</p>
  <pre><code>npm install bulma</code></pre>
  
  <p>Or include it via CDN:</p>
  <pre><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"&gt;</code></pre>
  
  <h2>Basic Example</h2>
  <p>Here's a simple Bulma component:</p>
  
  <div class="notification is-info">
    <p>This is a notification component in Bulma.</p>
  </div>
  
  <blockquote>
    <p>"Bulma makes it easy to create beautiful websites."</p>
    <footer>— Happy Developer</footer>
  </blockquote>
  
  <h2>Conclusion</h2>
  <p>Bulma is a powerful framework that can speed up your development process significantly.</p>
</div>

2. Documentation

<div class="content">
  <h1>API Documentation</h1>
  
  <h2>Introduction</h2>
  <p>This API allows you to manage users in our system.</p>
  
  <h2>Authentication</h2>
  <p>All API requests require an API key in the header:</p>
  <pre><code>Authorization: Bearer YOUR_API_KEY</code></pre>
  
  <h2>Endpoints</h2>
  
  <h3>GET /users</h3>
  <p>Retrieve a list of users.</p>
  
  <h4>Parameters</h4>
  <table>
    <thead>
      <tr>
        <th>Parameter</th>
        <th>Type</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>page</code></td>
        <td>integer</td>
        <td>Page number (default: 1)</td>
      </tr>
      <tr>
        <td><code>limit</code></td>
        <td>integer</td>
        <td>Items per page (default: 10)</td>
      </tr>
    </tbody>
  </table>
  
  <h4>Response</h4>
  <pre><code>{
  "users": [
    {
      "id": 1,
      "name": "John Doe",
      "email": "john@example.com"
    }
  ],
  "total": 100,
  "page": 1,
  "limit": 10
}</code></pre>
  
  <h3>POST /users</h3>
  <p>Create a new user.</p>
  
  <h4>Request Body</h4>
  <pre><code>{
  "name": "Jane Smith",
  "email": "jane@example.com",
  "password": "securepassword"
}</code></pre>
</div>

3. FAQ Section

<div class="content">
  <h1>Frequently Asked Questions</h1>
  
  <h2>General Questions</h2>
  
  <h3>What is Bulma?</h3>
  <p>Bulma is a free, open source CSS framework based on Flexbox.</p>
  
  <h3>Is Bulma responsive?</h3>
  <p>Yes, Bulma is mobile-first and fully responsive.</p>
  
  <h3>Do I need to know JavaScript to use Bulma?</h3>
  <p>No, Bulma is CSS-only. However, you can enhance it with JavaScript if needed.</p>
  
  <h2>Technical Questions</h2>
  
  <h3>How do I customize Bulma?</h3>
  <p>You can customize Bulma by overriding Sass variables:</p>
  <pre><code>$primary: #ff3860;
$family-sans-serif: "Helvetica", "Arial", sans-serif;</code></pre>
  
  <h3>Can I use Bulma with React/Vue/Angular?</h3>
  <p>Yes, Bulma works well with all modern JavaScript frameworks.</p>
  
  <h2>Support Questions</h2>
  
  <h3>Where can I get help?</h3>
  <p>You can:</p>
  <ul>
    <li>Check the <a href="#">official documentation</a></li>
    <li>Ask on <a href="#">Stack Overflow</a></li>
    <li>Join the <a href="#">Discord community</a></li>
  </ul>
</div>

Customization

/* Custom content styles */
.content {
  /* Custom line height */
  line-height: 1.8;
  
  /* Custom font */
  font-family: 'Georgia', serif;
  
  /* Custom colors */
  color: #333;
}

/* Custom headings */
.content h1, 
.content h2, 
.content h3 {
  font-family: 'Arial', sans-serif;
  font-weight: 700;
}

.content h1 {
  border-bottom: 2px solid #3273dc;
  padding-bottom: 0.5rem;
}

/* Custom lists */
.content ul {
  list-style-type: square;
}

.content ol {
  list-style-type: decimal-leading-zero;
}

/* Custom blockquotes */
.content blockquote {
  border-left: 4px solid #00d1b2;
  background-color: #f5f5f5;
  padding: 1.5rem;
  border-radius: 0 4px 4px 0;
}

/* Custom code blocks */
.content pre {
  background: #2d2d2d;
  color: #f8f8f2;
  border-radius: 6px;
  padding: 1.5rem;
}

.content code {
  background: #f5f5f5;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
}

/* Custom tables */
.content table {
  border-collapse: separate;
  border-spacing: 0;
}

.content table th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.content table tr:nth-child(even) {
  background-color: #f9f9f9;
}

Accessibility

<!-- Semantic HTML structure -->
<div class="content">
  <article>
    <header>
      <h1>Article Title</h1>
      <p class="subtitle">Article subtitle</p>
    </header>
    
    <section>
      <h2>Section Heading</h2>
      <p>Section content.</p>
    </section>
    
    <footer>
      <p>Published on <time datetime="2023-12-01">December 1, 2023</time></p>
    </footer>
  </article>
</div>

<!-- Properly labeled links -->
<div class="content">
  <p>Learn more about <a href="#" aria-label="Read more about Bulma framework">Bulma</a>.</p>
</div>

<!-- Screen reader only text -->
<div class="content">
  <h2>Statistics <span class="sr-only">for the current year</span></h2>
  <p>View the data table below.</p>
</div>

Best Practices

Use semantic HTML elements within content containers
Maintain consistent typography throughout your content
Use appropriate heading hierarchy (h1 → h2 → h3, etc.)
Break up long content with headings and images
Use lists to present information clearly
Include alt text for images and proper captions
Ensure sufficient contrast for readability
Test content on various screen sizes
Use responsive images and tables
Keep paragraphs concise and focused

Tip: The Content component is perfect for blog posts, documentation, articles, and any text-heavy pages where consistent typography and spacing are important.

Up next: Bulma Delete Component

Bulma CSS Tutorial