Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 19:34:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add columns section

Browse Source
This commit is contained in:
Jeremy Thomas
2017-08-14 18:25:14 +01:00
parent ab5a72b202
commit 6fe43b8f94
39 changed files with 2669 additions and 2070 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
docs/documentation/columns/basics.html Normal file
View File

@@ -0,0 +1,58 @@
---
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>