Search code examples
cssstylesheetbulma

How to create a spacing before a title in Bulma, without using a content container

I want to create a simple html page by using Bulma as stylesheet. My expectation is, that there is a reasonable default spacing when using headlines and text. Expecially I am expecting a spacing between a paragraph and the next headline. The documentation is saying

When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container.

With a content container <div class="content">...</div> then the spacing is satisfying. But my understanding is that content container is optional and that I can achieve the same without a content container. But with the following example there is no space between first paragraph and second headline. What is the best practice to create such a spacing without content container?

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first Bulma website</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
</head>

<body>
  <section class="section">
    <div class="container">
      <div class="columns">
        <div class="column">
          <h3 class="title is-4">First title</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
            urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
            finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
            sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo. 
          </p>
          <h3 class="title is-4">Second title - with no spacing to previous paragraph</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
            urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
            finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
            sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo.
          </p>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

Rendered result in firefox:

enter image description here

Solution

  • You can just use HTML < br > tags for a line break.

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first Bulma website</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
</head>

<body>
  <section class="section">
    <div class="container">
      <div class="columns">
        <div class="column">
          <h3 class="title is-4">First title</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
            urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
            finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
            sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo. 
          </p><br><br>
          <h3 class="title is-4">Second title - with no spacing to previous paragraph</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
            urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
            finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
            sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo.
          </p>
        </div>
      </div>
    </div>
  </section>
</body>

</html>