mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
59 lines
1.4 KiB
HTML
59 lines
1.4 KiB
HTML
|
---
|
||
|
|
title: Columns powered by Flexbox
|
||
|
|
layout: documentation
|
||
|
|
doc-tab: columns
|
||
|
|
doc-subtab: 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 %}
|
||
|
|
|
||
|
|
{% include subnav-columns.html %}
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
{% highlight html %}{{ columns }}{% endhighlight %}
|
||
|
|
</div>
|
||
|
|
</section>
|