CODEWITHSUNDEEP
htmldjangobulma
Nitesh
Nitesh

Reputation: 148

Columns in Bulma lies horizontally, can we fix the number of column in one row and rest in another?

<section class="section">
<div class="container">
    <div class="tile is-ancestor">
        '''{% for service in allServices %}'''
        <div class="tile is-vertical is-parent">
            <div class="tile is-child box">
              <h1 class="title is-centered">{{service.serviceTitle}} </h1>
            </div>
        </div>
        '''{% endfor %}'''
    </div>
</div>

[So in the image shown, I have list of services which I want it to appear 3 services on one row, 3 more on second and remaining on third and so on.[1]

Upvotes: 1

Views: 679

Answers (1)

Reza Rahemtola
Reza Rahemtola

Reputation: 1182

As said in the docs, the easiest way to have a fixed number of column in one row is to put them in a columns element, and then use a second columns element for the rest.
But you can also add the class is-multiline to your columns container and use size classes (like is-half, is-one-third etc...) to define elements that fit in one row, so the rest will use another row.
Here is the documentation about is-multiline, but if you want all your column elements to have the same size, using 2 columns container will be easier.

Upvotes: 1

Related Questions