mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Create links nav
This commit is contained in:
Jeremy Thomas
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Columns powered by Flexbox
|
||||
subtitle: "A simple way to build <strong>responsive columns</strong>"
|
||||
layout: documentation
|
||||
doc-tab: columns
|
||||
doc-subtab: basics
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-basics
|
||||
---
|
||||
|
||||
{% capture columns %}
|
||||
@@ -22,39 +28,30 @@ doc-subtab: basics
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-columns.html %}
|
||||
<div class="content">
|
||||
<p>Building a <strong>columns layout</strong> with Bulma is very simple:</p>
|
||||
<ol>
|
||||
<li>Add a <code>columns</code> container</li>
|
||||
<li>Add as many <code>column</code> elements as you want</li>
|
||||
</ol>
|
||||
<p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Columns</h1>
|
||||
<h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
|
||||
<hr>
|
||||
<div class="content">
|
||||
<p>Building a <strong>columns layout</strong> with Bulma is very simple:</p>
|
||||
<ol>
|
||||
<li>Add a <code>columns</code> container</li>
|
||||
<li>Add as many <code>column</code> elements as you want</li>
|
||||
</ol>
|
||||
<p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">First column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Second column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Third column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Fourth column</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns }}{% endhighlight %}
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">First column</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Second column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Third column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Fourth column</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Columns gap
|
||||
subtitle: Customize the <strong>gap</strong> between the columns
|
||||
layout: documentation
|
||||
doc-tab: columns
|
||||
doc-subtab: gap
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-gap
|
||||
---
|
||||
|
||||
{% capture columns_default_gap %}
|
||||
@@ -79,146 +85,134 @@ doc-subtab: gap
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-columns.html %}
|
||||
{% include anchor.html name="Default gap" %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Columns gap</h1>
|
||||
<h2 class="subtitle">
|
||||
Customize the <strong>gap</strong> between the columns
|
||||
</h2>
|
||||
<div class="content">
|
||||
<p>
|
||||
Each column has a <strong>gap</strong> equal to the <strong>variable</strong> <code>$column-gap</code>, which has a default value of <code>0.75rem</code>.
|
||||
<br>
|
||||
Since the gap is on <em>each side</em> of a column, the gap between two adjacent columns will be twice the value of <code>$column-gap</code>, or <code>1.5rem</code> by default.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Default gap" %}
|
||||
{{ columns_default_gap }}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Each column has a <strong>gap</strong> equal to the <strong>variable</strong> <code>$column-gap</code>, which has a default value of <code>0.75rem</code>.
|
||||
<br>
|
||||
Since the gap is on <em>each side</em> of a column, the gap between two adjacent columns will be twice the value of <code>$column-gap</code>, or <code>1.5rem</code> by default.
|
||||
</p>
|
||||
</div>
|
||||
{% include anchor.html name="Gapless" %}
|
||||
|
||||
{{ columns_default_gap }}
|
||||
|
||||
{% include anchor.html name="Gapless" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-gapless">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">First column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Second column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Third column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Fourth column</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns_gapless }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>You can combine it with the <code>is-multiline</code> modifier:</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline is-mobile is-gapless">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-info"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-info"><code>is-half</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Variable gap" %}
|
||||
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
<div class="tags">
|
||||
<span class="tag is-warning">Experimental</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">New</span>
|
||||
<span class="tag is-info">0.5.2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can specify a <strong>custom column gap</strong> by appending one of <strong>9 modifiers</strong> on the <code>.columns</code> container.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-0</code> will remove any gap (similar to <code>is-gapless</code>)
|
||||
</li>
|
||||
<li>
|
||||
<code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value
|
||||
</li>
|
||||
<li>
|
||||
<code>is-8</code> is the maximum gap of <code>2rem</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include klmn.html %}
|
||||
|
||||
<div class="message is-warning">
|
||||
<div class="message-body">
|
||||
<p>
|
||||
This feature is only available in browsers that support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a>:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
<p>
|
||||
If your Sass setup doesn't support CSS Variables, you can <strong>disable this feature</strong> by setting <code>$variable-columns</code> to <code>false</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-gapless">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">First column</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Second column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Third column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Fourth column</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns_gapless }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>You can combine it with the <code>is-multiline</code> modifier:</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline is-mobile is-gapless">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-info"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-info"><code>is-half</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Variable gap" %}
|
||||
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
<div class="tags">
|
||||
<span class="tag is-warning">Experimental</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">New</span>
|
||||
<span class="tag is-info">0.5.2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can specify a <strong>custom column gap</strong> by appending one of <strong>9 modifiers</strong> on the <code>.columns</code> container.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-0</code> will remove any gap (similar to <code>is-gapless</code>)
|
||||
</li>
|
||||
<li>
|
||||
<code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value
|
||||
</li>
|
||||
<li>
|
||||
<code>is-8</code> is the maximum gap of <code>2rem</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include klmn.html %}
|
||||
|
||||
<div class="message is-warning">
|
||||
<div class="message-body">
|
||||
<p>
|
||||
This feature is only available in browsers that support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a>:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
<p>
|
||||
If your Sass setup doesn't support CSS Variables, you can <strong>disable this feature</strong> by setting <code>$variable-columns</code> to <code>false</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,79 +1,75 @@
|
||||
---
|
||||
title: Nesting columns
|
||||
subtitle: "A simple way to build <strong>responsive columns</strong>"
|
||||
layout: documentation
|
||||
doc-tab: columns
|
||||
doc-subtab: nesting
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-nesting
|
||||
---
|
||||
|
||||
{% include subnav/subnav-columns.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Nesting columns</h1>
|
||||
<h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
|
||||
</p>
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>columns</code>: top-level columns container
|
||||
<ul>
|
||||
<li>
|
||||
<code>columns</code>: top-level columns container
|
||||
<code>column</code>
|
||||
<ul>
|
||||
<li>
|
||||
<code>column</code>
|
||||
<code>columns</code>: nested columns
|
||||
<ul>
|
||||
<li>
|
||||
<code>columns</code>: nested columns
|
||||
<ul>
|
||||
<li>
|
||||
<code>column</code> and so on…
|
||||
</li>
|
||||
</ul>
|
||||
<code>column</code> and so on…
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
The difference with <a href="{{ site.url }}/documentation/columns/options/#multiline">multiline columns</a> is the <strong>order</strong> in the HTML code: all the <strong class="has-text-info">blue</strong> columns appear <em>before</em> the <strong class="has-text-danger">red</strong> ones. Resize to a narrower viewport to see the result.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
The difference with <a href="{{ site.url }}/documentation/columns/options/#multiline">multiline columns</a> is the <strong>order</strong> in the HTML code: all the <strong class="has-text-info">blue</strong> columns appear <em>before</em> the <strong class="has-text-danger">red</strong> ones. Resize to a narrower viewport to see the result.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">First column</p>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">First column</p>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">First nested column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">Second nested column</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="bd-notification is-info">First nested column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Second column</p>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-danger">50%</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="bd-notification is-info">Second nested column</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Second column</p>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-danger">50%</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Column options
|
||||
subtitle: "Design different <strong>types</strong> of column layouts"
|
||||
layout: documentation
|
||||
doc-tab: columns
|
||||
doc-subtab: options
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-options
|
||||
---
|
||||
|
||||
{% capture columns_multiline %}
|
||||
@@ -83,111 +89,100 @@ doc-subtab: options
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-columns.html %}
|
||||
{% include anchor.html name="Multiline" %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Column options</h1>
|
||||
<h2 class="subtitle">
|
||||
Design different <strong>types</strong> of column layouts
|
||||
</h2>
|
||||
<div class="content">
|
||||
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Multiline" %}
|
||||
|
||||
<div class="content">
|
||||
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline is-mobile">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-info"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-info"><code>is-half</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_multiline }}{% endhighlight %}
|
||||
|
||||
{% include anchor.html name="Centering columns" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
While you can use <em>empty columns</em> (like <code><div class="column"></div></code>) to create horizontal space around <code>.column</code> elements, you can also use <code>.is-centered</code> on the parent <code>.columns</code> element:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-half is-narrow">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-half</code><br>
|
||||
<code class="html">is-narrow</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Use with <code>.is-multiline</code> to create a flexible, centered list (try resizing to see centering in different viewport sizes):
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile is-multiline is-centered">
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
First Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
Our Second Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-danger" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
Third Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
The Fourth Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
Fifth Column
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
|
||||
<div class="columns is-multiline is-mobile">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-info"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-info"><code>is-half</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_multiline }}{% endhighlight %}
|
||||
|
||||
{% include anchor.html name="Centering columns" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
While you can use <em>empty columns</em> (like <code><div class="column"></div></code>) to create horizontal space around <code>.column</code> elements, you can also use <code>.is-centered</code> on the parent <code>.columns</code> element:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-half is-narrow">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-half</code><br>
|
||||
<code class="html">is-narrow</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Use with <code>.is-multiline</code> to create a flexible, centered list (try resizing to see centering in different viewport sizes):
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile is-multiline is-centered">
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
First Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
Our Second Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-danger" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
Third Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
The Fourth Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
Fifth Column
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Columns responsiveness
|
||||
subtitle: "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>"
|
||||
layout: documentation
|
||||
doc-tab: columns
|
||||
doc-subtab: responsiveness
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-responsiveness
|
||||
---
|
||||
|
||||
{% capture columns_mobile %}
|
||||
@@ -37,107 +43,96 @@ doc-subtab: responsiveness
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-columns.html %}
|
||||
{% include anchor.html name="Mobile columns" %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Columns responsiveness</h1>
|
||||
<h2 class="subtitle">
|
||||
Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>
|
||||
</h2>
|
||||
<div class="content">
|
||||
<p>
|
||||
By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.
|
||||
<br>
|
||||
If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Mobile columns" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.
|
||||
<br>
|
||||
If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">2</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">3</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">4</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_mobile }}{% endhighlight %}
|
||||
|
||||
<div class="message is-info">
|
||||
<p class="message-header">
|
||||
Resize
|
||||
</p>
|
||||
<p class="message-body">
|
||||
If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you <em>only</em> want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-desktop">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">2</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">3</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">4</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_desktop }}{% endhighlight %}
|
||||
|
||||
{% include anchor.html name="Different column sizes per breakpoint" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
|
||||
<p class="bd-notification is-info">
|
||||
<code>is-half-mobile</code><br>
|
||||
<code>is-one-third-tablet</code><br>
|
||||
<code>is-one-quarter-desktop</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">1</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<p class="message-header">Resize</p>
|
||||
<p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
|
||||
<div class="columns is-mobile">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">1</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">2</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">3</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">4</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_mobile }}{% endhighlight %}
|
||||
|
||||
<div class="message is-info">
|
||||
<p class="message-header">
|
||||
Resize
|
||||
</p>
|
||||
<p class="message-body">
|
||||
If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you <em>only</em> want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-desktop">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">2</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">3</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">4</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_desktop }}{% endhighlight %}
|
||||
|
||||
{% include anchor.html name="Different column sizes per breakpoint" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
|
||||
<p class="bd-notification is-info">
|
||||
<code>is-half-mobile</code><br>
|
||||
<code>is-one-third-tablet</code><br>
|
||||
<code>is-one-quarter-desktop</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">1</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<p class="message-header">Resize</p>
|
||||
<p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Column sizes
|
||||
subtitle: "Define the <strong>size</strong> of each column <strong>individually</strong>"
|
||||
layout: documentation
|
||||
doc-tab: columns
|
||||
doc-subtab: sizes
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-sizes
|
||||
---
|
||||
|
||||
{% capture columns_sizes %}
|
||||
@@ -95,514 +101,501 @@ doc-subtab: sizes
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-columns.html %}
|
||||
<div class="content">
|
||||
<p>If you want to change the <strong>size</strong> of a single column, you can use one of the following classes:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-three-quarters</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-two-thirds</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-half</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-one-third</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-one-quarter</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Column sizes</h1>
|
||||
<h2 class="subtitle">
|
||||
Define the <strong>size</strong> of each column <strong>individually</strong>
|
||||
</h2>
|
||||
{% include elements/new-tag.html version="0.6.1" %}
|
||||
|
||||
<hr>
|
||||
<div class="content">
|
||||
<p>You can now use the following multiples of <code>20%</code> as well:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-four-fifths</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-three-fifths</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-two-fifths</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-one-fifth</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>If you want to change the <strong>size</strong> of a single column, you can use one of the following classes:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-three-quarters</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-two-thirds</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-half</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-one-third</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-one-quarter</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-four-fifths">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-four-fifths</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/new-tag.html version="0.6.1" %}
|
||||
<div class="columns">
|
||||
<div class="column is-three-quarters">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-three-quarters</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>You can now use the following multiples of <code>20%</code> as well:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-four-fifths</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-three-fifths</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-two-fifths</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-one-fifth</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-two-thirds">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-two-thirds</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-four-fifths">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-four-fifths</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-three-fifths">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-three-fifths</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-three-quarters">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-three-quarters</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-half</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-two-thirds">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-two-thirds</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-two-fifths">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-two-fifths</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-three-fifths">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-three-fifths</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-one-third</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-half</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-one-quarter</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-two-fifths">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-two-fifths</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-one-fifth">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-one-fifth</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-one-third</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns_sizes }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-one-quarter</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
{% include anchor.html name="12 columns system" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-fifth">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-one-fifth</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
<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-2</code></li>
|
||||
<li><code>is-3</code></li>
|
||||
<li><code>is-4</code></li>
|
||||
<li><code>is-5</code></li>
|
||||
<li><code>is-6</code></li>
|
||||
<li><code>is-7</code></li>
|
||||
<li><code>is-8</code></li>
|
||||
<li><code>is-9</code></li>
|
||||
<li><code>is-10</code></li>
|
||||
<li><code>is-11</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns_sizes }}{% endhighlight %}
|
||||
</div>
|
||||
<div class="message is-info">
|
||||
<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>
|
||||
|
||||
{% include anchor.html name="12 columns system" %}
|
||||
<div class="columns">
|
||||
<div class="column is-2">
|
||||
<p class="bd-notification is-info"><code>is-2</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<p class="bd-notification is-info"><code>is-3</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<p class="bd-notification is-info"><code>is-4</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-5">
|
||||
<p class="bd-notification is-info"><code>is-5</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<p class="bd-notification is-info"><code>is-6</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-7">
|
||||
<p class="bd-notification is-info"><code>is-7</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-8">
|
||||
<p class="bd-notification is-info"><code>is-8</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-9">
|
||||
<p class="bd-notification is-info"><code>is-9</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-10">
|
||||
<p class="bd-notification is-info"><code>is-10</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-11">
|
||||
<p class="bd-notification is-info"><code>is-11</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-2</code></li>
|
||||
<li><code>is-3</code></li>
|
||||
<li><code>is-4</code></li>
|
||||
<li><code>is-5</code></li>
|
||||
<li><code>is-6</code></li>
|
||||
<li><code>is-7</code></li>
|
||||
<li><code>is-8</code></li>
|
||||
<li><code>is-9</code></li>
|
||||
<li><code>is-10</code></li>
|
||||
<li><code>is-11</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% include anchor.html name="Offset" %}
|
||||
|
||||
<div class="message is-info">
|
||||
<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="content">
|
||||
<p>
|
||||
While you can use <em>empty columns</em> (like <code><div class="column"></div></code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-2">
|
||||
<p class="bd-notification is-info"><code>is-2</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<p class="bd-notification is-info"><code>is-3</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<p class="bd-notification is-info"><code>is-4</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-5">
|
||||
<p class="bd-notification is-info"><code>is-5</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<p class="bd-notification is-info"><code>is-6</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-7">
|
||||
<p class="bd-notification is-info"><code>is-7</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-8">
|
||||
<p class="bd-notification is-info"><code>is-8</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-9">
|
||||
<p class="bd-notification is-info"><code>is-9</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-10">
|
||||
<p class="bd-notification is-info"><code>is-10</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-11">
|
||||
<p class="bd-notification is-info"><code>is-11</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-half is-offset-one-quarter">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-half</code><br>
|
||||
<code class="html">is-offset-one-quarter</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Offset" %}
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-three-fifths is-offset-one-fifth">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-three-fifths</code><br>
|
||||
<code class="html">is-offset-one-fifth</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
While you can use <em>empty columns</em> (like <code><div class="column"></div></code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
|
||||
</p>
|
||||
</div>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-4 is-offset-8">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-4</code><br>
|
||||
<code class="html">is-offset-8</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-half is-offset-one-quarter">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-half</code><br>
|
||||
<code class="html">is-offset-one-quarter</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-11 is-offset-1">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-11</code><br>
|
||||
<code class="html">is-offset-1</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-three-fifths is-offset-one-fifth">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-three-fifths</code><br>
|
||||
<code class="html">is-offset-one-fifth</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns_offset }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-4 is-offset-8">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-4</code><br>
|
||||
<code class="html">is-offset-8</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% include anchor.html name="Narrow column" %}
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-11 is-offset-1">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-11</code><br>
|
||||
<code class="html">is-offset-1</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns_offset }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Narrow column" %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<div class="box" style="width: 200px;">
|
||||
<p class="title is-5">Narrow column</p>
|
||||
<p class="subtitle">This column is only 200px wide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="box">
|
||||
<p class="title is-5">Flexible column</p>
|
||||
<p class="subtitle">This column will take up the remaining space available.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns_narrow }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-narrow-mobile</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-narrow-tablet</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-narrow-desktop</code>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<div class="box" style="width: 200px;">
|
||||
<p class="title is-5">Narrow column</p>
|
||||
<p class="subtitle">This column is only 200px wide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="column">
|
||||
<div class="box">
|
||||
<p class="title is-5">Flexible column</p>
|
||||
<p class="subtitle">This column will take up the remaining space available.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns_narrow }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-narrow-mobile</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-narrow-tablet</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-narrow-desktop</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,11 @@ subtitle: "The classic <strong>button</strong>, in different colors, sizes, and
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: button
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- button
|
||||
meta:
|
||||
- colors: true
|
||||
- sizes: true
|
||||
|
||||
Reference in New Issue
Block a user