columns

Columns powered by Flexbox

sizes



If you want to change the size of a single column, you can use one of the following classes:

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter
  • is-full

The other columns will fill up the remaining space automatically.

You can now use the following multiples of 20% as well:

  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

is-full

is-four-fifths

Auto

Auto

is-three-quarters

Auto

Auto

is-two-thirds

Auto

Auto

is-three-fifths

Auto

Auto

is-half

Auto

Auto

is-two-fifths

Auto

Auto

is-one-third

Auto

Auto

is-one-quarter

Auto

Auto

is-one-fifth

Auto

Auto

                    

                        
                        <div class="columns">
                          <div class="column is-four-fifths">is-four-fifths</div>
                          <div class="column">Auto</div>
                          <div class="column">Auto</div>
                        </div>

                        <div class="columns">
                          <div class="column is-three-quarters">is-three-quarters</div>
                          <div class="column">Auto</div>
                          <div class="column">Auto</div>
                        </div>

                        <div class="columns">
                          <div class="column is-two-thirds">is-two-thirds</div>
                          <div class="column">Auto</div>
                          <div class="column">Auto</div>
                        </div>

                        <div class="columns">
                          <div class="column is-three-fifths">is-three-fifths</div>
                          <div class="column">Auto</div>
                          <div class="column">Auto</div>
                        </div>

                        <div class="columns">
                          <div class="column is-half">is-half</div>
                          <div class="column">Auto</div>
                          <div class="column">Auto</div>
                        </div>

                        <div class="columns">
                          <div class="column is-two-fifths">is-two-fifths</div>
                          <div class="column">Auto</div>
                          <div class="column">Auto</div>
                        </div>

                        <div class="columns">
                          <div class="column is-one-third">is-one-third</div>
                          <div class="column">Auto</div>
                          <div class="column">Auto</div>
                        </div>

                        <div class="columns">
                          <div class="column is-one-quarter">is-one-quarter</div>
                          <div class="column">Auto</div>
                          <div class="column">Auto</div>
                        </div>

                        <div class="columns">
                          <div class="column is-one-fifth">is-one-fifth</div>
                          <div class="column">Auto</div>
                          <div class="column">Auto</div>
                        </div>
                        

                    
                

columns system



As the grid can be divided into 12 columns, there are size classes for each division:

  • is-1
  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11
  • is-12

Naming convention

Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7.

is-1

1

1

1

1

1

1

1

1

1

1

1

is-2

1

1

1

1

1

1

1

1

1

1

is-3

1

1

1

1

1

1

1

1

1

is-4

1

1

1

1

1

1

1

1

is-5

1

1

1

1

1

1

1

is-6

1

1

1

1

1

1

is-7

1

1

1

1

1

is-8

1

1

1

1

is-9

1

1

1

is-10

1

1

is-11

1

is-12




Niche Templates

Joo - Niche Multi-Purpose HTML Template
Creative 01
View more
Joo - Niche Multi-Purpose HTML Template
Corporate 01
View more
Joo - Niche Multi-Purpose HTML Template
Burger Restaurant
View more
Joo - Niche Multi-Purpose HTML Template
Wedding
View more
Joo - Niche Multi-Purpose HTML Template
Corporate 02
View more
Joo - Niche Multi-Purpose HTML Template active
Barber Shop
Joo - Niche Multi-Purpose HTML Template
Logistics Cargo
View more
Joo - Niche Multi-Purpose HTML Template
Restaurant 01
View more
Joo - Niche Multi-Purpose HTML Template
Wedding Planner
View more
Joo - Niche Multi-Purpose HTML Template
Logistics Cargo 02
View more
Joo - Niche Multi-Purpose HTML Template
Creative 02
View more
Joo - Niche Multi-Purpose HTML Template
Bridal Dresses
View more
Joo - Niche Multi-Purpose HTML Template
Coming Soon
View more
Joo - Niche Multi-Purpose HTML Template
Creative 03
View more