CODEWITHSUNDEEP
htmlcssbulma
MaYaN
MaYaN

Reputation: 6996

How can I centrally align columns in Bulma?

I am trying to have a tile-based dashboard (without having to use Bulma tiles) using the following layout:

https://jsfiddle.net/foobarbazian/9szfn8db/2/

<div class="container">
  <br>
  <div class="columns is-multiline">
    <div class="column is-3">
      <div class="box has-background-success">
        <p class="title has-text-centered">One</p>
        <div>
          <div class="columns ">
            <div class="column box is-5">A</div>
            <div class="column"></div>
            <div class="column box is-5">B</div>
            <div class="column"></div>
          </div>

          <div class="columns">
            <div class="column box is-5">C</div>
            <div class="column"></div>
            <div class="column box is-5">D</div>
            <div class="column"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="column is-3">
      <div class="box has-background-danger">
        <p class="title has-text-centered">Two</p>
        <div>
          <div class="columns ">
            <div class="column box is-5">A</div>
            <div class="column"></div>
            <div class="column box is-5">B</div>
            <div class="column"></div>
          </div>

          <div class="columns">
            <div class="column box is-5">C</div>
            <div class="column"></div>
            <div class="column box is-5">D</div>
            <div class="column"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="column is-3">
      <div class="box has-background-success">
        <p class="title has-text-centered">Three</p>
        <div>
          <div class="columns ">
            <div class="column box is-5">A</div>
            <div class="column"></div>
            <div class="column box is-5">B</div>
            <div class="column"></div>
          </div>

          <div class="columns">
            <div class="column box is-5">C</div>
            <div class="column"></div>
            <div class="column box is-5">D</div>
            <div class="column"></div>
          </div>
        </div>
      </div>
    </div>        
  </div>
</div>

However I can see there is a gap on the left which is smaller on the gap at the right of the box, there is also a gap at the bottom of each box.

How can I ensure the content is nicely placed in the middle of each box?

Upvotes: 0

Views: 1330

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

 
.columns {
   flex-wrap: wrap; 
   justify-content: space-between
}
.column.is-5 {
height: 100%;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<div class="container">
  <br>
  <div class="columns is-multiline">
<div class="column is-3">
  <div class="box has-background-success">
    <p class="title has-text-centered">One</p>
    <div>
      <div class="columns ">
        <div class="column box is-5">A</div>
       
        <div class="column box is-5">B</div>
      
        <div class="column box is-5">C</div>
       
        <div class="column box is-5">D</div>
       
      </div>
    </div>
  </div>


</div>

Upvotes: 1

Related Questions