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

Create links nav

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-09 12:45:52 +01:00
parent 4ede497c96
commit 0f9d338f66
17 changed files with 1087 additions and 963 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
docs/documentation/columns/basics.html
View File

@@ -1,8 +1,14 @@
---
title: Columns powered by Flexbox
subtitle: "A simple way to build <strong>responsive columns</strong>"
layout: documentation
doc-tab: columns
doc-subtab: basics
breadcrumb:
- home
- documentation
- columns
- columns-basics
---
{% capture columns %}
@@ -22,39 +28,30 @@ doc-subtab: basics
</div>
{% endcapture %}
{% include subnav/subnav-columns.html %}
<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>
<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 class="columns">
<div class="column">
<p class="bd-notification is-primary">First column</p>
</div>
</section>
<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="highlight-full">
{% highlight html %}{{ columns }}{% endhighlight %}
</div>