bulma/docs/documentation/columns/options.html

224 lines
6.4 KiB
HTML
Raw Normal View History

2017-08-14 17:25:14 +00:00
---
title: Column options
2024-03-21 16:11:54 +00:00
layout: docs
theme: library
doc-library: true
2017-08-14 17:25:14 +00:00
doc-tab: columns
doc-subtab: options
2018-04-09 11:45:52 +00:00
breadcrumb:
2024-03-21 16:11:54 +00:00
- home
- documentation
- columns
- columns-options
2017-08-14 17:25:14 +00:00
---
2018-12-12 22:37:30 +00:00
{% capture columns_vcentered %}
<div class="columns is-vcentered">
<div class="column is-8">
<p class="bd-notification is-primary">First column</p>
</div>
<div class="column">
2024-03-21 16:11:54 +00:00
<p class="bd-notification is-primary">
Second column with more content. This is so you can see the vertical
alignment.
</p>
2018-12-12 22:37:30 +00:00
</div>
</div>
2024-03-21 16:11:54 +00:00
{% endcapture %} {% capture columns_multiline %}
2017-08-14 17:25:14 +00:00
<div class="columns is-multiline is-mobile">
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-half">
<code>is-half</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
2017-12-20 17:13:54 +00:00
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
2024-03-21 16:11:54 +00:00
<div class="column">Auto</div>
2017-08-14 17:25:14 +00:00
</div>
2024-03-21 16:11:54 +00:00
{% endcapture %} {% capture columns_mobile_centered %}
2017-08-14 18:12:07 +00:00
<div class="columns is-mobile is-centered">
<div class="column is-half">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary">
2024-03-21 16:11:54 +00:00
<code class="html">is-half</code><br />
2017-08-14 18:12:07 +00:00
</p>
</div>
</div>
2024-03-21 16:11:54 +00:00
{% endcapture %} {% capture columns_mobile_multiline_centered %}
2017-08-14 18:12:07 +00:00
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary">
2024-03-21 16:11:54 +00:00
<code class="html">is-narrow</code><br />
2017-08-14 18:12:07 +00:00
First Column
</p>
</div>
<div class="column is-narrow">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary">
2024-03-21 16:11:54 +00:00
<code class="html">is-narrow</code><br />
2017-08-14 18:12:07 +00:00
Our Second Column
</p>
</div>
<div class="column is-narrow">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary">
2024-03-21 16:11:54 +00:00
<code class="html">is-narrow</code><br />
2017-08-14 18:12:07 +00:00
Third Column
</p>
</div>
<div class="column is-narrow">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary">
2024-03-21 16:11:54 +00:00
<code class="html">is-narrow</code><br />
2017-08-14 18:12:07 +00:00
The Fourth Column
</p>
</div>
<div class="column is-narrow">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary">
2024-03-21 16:11:54 +00:00
<code class="html">is-narrow</code><br />
2017-08-14 18:12:07 +00:00
Fifth Column
</p>
</div>
</div>
2024-03-21 16:11:54 +00:00
{% endcapture %} {% include docs/elements/anchor.html name="Vertical alignment"
%}
2018-12-12 22:37:30 +00:00
<div class="content">
2024-03-21 16:11:54 +00:00
<p>
To align your columns vertically, add the <code>is-vcentered</code> modifier
to the <code>columns</code> container.
</p>
2018-12-12 22:37:30 +00:00
</div>
<div class="columns is-vcentered">
<div class="column is-8">
<p class="bd-notification is-primary">First column</p>
</div>
<div class="column">
2024-03-21 16:11:54 +00:00
<p class="bd-notification is-primary">
Second column with more content. This is so you can see the vertical
alignment.
</p>
2018-12-12 22:37:30 +00:00
</div>
</div>
2024-03-21 16:11:54 +00:00
{% highlight html -%} {{- columns_vcentered -}} {%- endhighlight %} {% include
docs/elements/anchor.html name="Multiline" %}
2017-08-14 17:25:14 +00:00
2018-04-09 11:45:52 +00:00
<div class="content">
2024-03-21 16:11:54 +00:00
<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 than would fit in a single row.
</p>
2018-04-09 11:45:52 +00:00
</div>
2017-08-14 17:25:14 +00:00
2018-04-09 11:45:52 +00:00
<div class="columns is-multiline is-mobile">
<div class="column is-one-quarter">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
2018-04-09 11:45:52 +00:00
</div>
<div class="column is-one-quarter">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
2018-04-09 11:45:52 +00:00
</div>
<div class="column is-one-quarter">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
2018-04-09 11:45:52 +00:00
</div>
<div class="column is-one-quarter">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
2018-04-09 11:45:52 +00:00
</div>
<div class="column is-half">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary"><code>is-half</code></p>
2018-04-09 11:45:52 +00:00
</div>
<div class="column is-one-quarter">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
2018-04-09 11:45:52 +00:00
</div>
<div class="column is-one-quarter">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
2018-04-09 11:45:52 +00:00
</div>
<div class="column is-one-quarter">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
2018-04-09 11:45:52 +00:00
</div>
<div class="column">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary">Auto</p>
2018-04-09 11:45:52 +00:00
</div>
</div>
2017-08-14 17:25:14 +00:00
2024-03-21 16:11:54 +00:00
{% highlight html -%} {{- columns_multiline -}} {%- endhighlight %} {% include
docs/elements/anchor.html name="Centering columns" %}
2017-08-14 18:12:07 +00:00
2018-04-09 11:45:52 +00:00
<div class="content">
<p>
2024-03-21 16:11:54 +00:00
While you can use <em>empty columns</em> (like
<code>&lt;div class="column"&gt;&lt;/div&gt;</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:
2018-04-09 11:45:52 +00:00
</p>
</div>
2017-08-14 18:12:07 +00:00
2018-04-09 11:45:52 +00:00
<div class="columns is-mobile is-centered">
<div class="column is-half">
2018-04-10 10:45:48 +00:00
<p class="bd-notification is-primary">
2024-03-21 16:11:54 +00:00
<code class="html">is-half</code><br />
2018-04-09 11:45:52 +00:00
</p>
</div>
</div>
2017-08-14 18:12:07 +00:00
2024-03-21 16:11:54 +00:00
{% highlight html -%} {{- columns_mobile_centered -}} {%- endhighlight %}
2017-08-14 18:12:07 +00:00
2018-04-09 11:45:52 +00:00
<div class="content">
<p>
2024-03-21 16:11:54 +00:00
Use with <code>.is-multiline</code> to create a flexible, centered list (try
resizing to see centering in different viewport sizes):
2018-04-09 11:45:52 +00:00
</p>
</div>
2017-08-14 18:12:07 +00:00
2018-04-09 11:45:52 +00:00
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
2024-03-21 16:11:54 +00:00
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
<code class="html">is-narrow</code><br />
2018-04-09 11:45:52 +00:00
First Column
</p>
</div>
<div class="column is-narrow">
2024-03-21 16:11:54 +00:00
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
<code class="html">is-narrow</code><br />
2018-04-09 11:45:52 +00:00
Our Second Column
</p>
</div>
<div class="column is-narrow">
2024-03-21 16:11:54 +00:00
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
<code class="html">is-narrow</code><br />
2018-04-09 11:45:52 +00:00
Third Column
</p>
</div>
<div class="column is-narrow">
2024-03-21 16:11:54 +00:00
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
<code class="html">is-narrow</code><br />
2018-04-09 11:45:52 +00:00
The Fourth Column
</p>
2017-08-14 17:25:14 +00:00
</div>
2018-04-09 11:45:52 +00:00
<div class="column is-narrow">
2024-03-21 16:11:54 +00:00
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
<code class="html">is-narrow</code><br />
2018-04-09 11:45:52 +00:00
Fifth Column
</p>
</div>
</div>
2024-03-21 16:11:54 +00:00
{% highlight html -%} {{- columns_mobile_multiline_centered -}} {%- endhighlight
%}