article
April 10, 2018
The main component of a healthy environment for self esteem is that it needs be nurturing. It should provide unconditional warmth.
April 10, 2018
April 14, 2018
The main component of a healthy environment for self esteem is that.
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>
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