<div class="content">
<p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
<ul>
+ <li><code>is-1</code></li>
<li><code>is-2</code></li>
<li><code>is-3</code></li>
<li><code>is-4</code></li>
<p class="message-header">Naming convention</p>
<p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
</div>
-
+<div class="columns">
+ <div class="column is-1">
+ <p class="bd-notification is-primary"><code>is-1</code></p>
+ </div>
+ <div class="column">
+ <p class="bd-notification has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification has-text-centered">1</p>
+ </div>
+</div>
<div class="columns">
<div class="column is-2">
<p class="bd-notification is-primary"><code>is-2</code></p>