bulma/docs/documentation/columns/basics.html
2018-03-26 14:46:39 +01:00

61 lines
1.5 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/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>
<div class="highlight-full">
{% highlight html %}{{ columns }}{% endhighlight %}
</div>
</div>
</section>