mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
54 lines
1.2 KiB
HTML
54 lines
1.2 KiB
HTML
---
|
|
title: Columns powered by Flexbox
|
|
layout: docs
|
|
theme: library
|
|
doc-library: true
|
|
doc-tab: columns
|
|
doc-subtab: basics
|
|
breadcrumb:
|
|
- home
|
|
- documentation
|
|
- columns
|
|
- columns-basics
|
|
---
|
|
|
|
{% capture columns %}
|
|
<div class="columns">
|
|
<div class="column">First column</div>
|
|
<div class="column">Second column</div>
|
|
<div class="column">Third column</div>
|
|
<div class="column">Fourth column</div>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
<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-primary">First column</p>
|
|
</div>
|
|
<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="bd-highlight-full">
|
|
{% highlight html -%} {{- columns -}} {%- endhighlight %}
|
|
</div>
|