<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Column</h1>
<p class="subtitle is-5">
    <span class="has-text-weight-semibold">Columns</span> are used for creating page layouts by structuring your content horizontally. Biings DS uses a responsive fluid system that automatically scales up to 12 columns.
</p>

<hr class="is-large is-visible">

<div class="box has-background-light is-marginless is-relaxed">
<div class="columns has-text-white has-text-centered">
    <div class="column">
      <div class="message has-background-red-light has-text-weight-semibold"><br>First<br><br></div>
    </div>
    <div class="column">
      <div class="message has-background-pink-light has-text-weight-semibold"><br>Second<br><br></div>
    </div>
    <div class="column">
      <div class="message has-background-turquoise has-text-weight-semibold"><br>Third<br><br></div>
    </div>
    <div class="column">
      <div class="message has-background-cyan has-text-weight-semibold"><br>Fourth<br><br></div>
    </div>
  </div>
</div>

    <div class="columns">
      <div class="column">First</div>
      <div class="column">Second</div>
      <div class="column">Third</div>
      <div class="column">Fourth</div>
    </div>

<hr>

<div class="box is-bordered">
    Find more possibilities on &nbsp;→&nbsp; <a href="https://bulma.io/documentation/columns/" target="blank">Bulma / <strong>Columns</strong></a>
</div>