mirror of
https://github.com/jgthms/bulma
synced 2026-03-18 11:24:29 -07:00
Create links nav
This commit is contained in:
Jeremy Thomas
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user