library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

include example for .is-centered (#978)

Browse Source 
and for .is-multiline and .is-centered
This commit is contained in:
kennedybaird 2017-08-01 01:20:19 +07:00 committed by Jeremy Thomas
parent e718525936
commit 915d0b4a15
1 changed files with 97 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
docs/documentation/grid/columns.html
View File

@ -494,6 +494,103 @@ doc-subtab: columns
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 class="title">Centering columns</h3>
<div class="content">
<p>While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <code>.is-centered</code> on the parent <code>.columns</code> element:
</div>
<div class="columns is-mobile is-centered">
<div class="column is-half is-narrow">
<p class="notification is-info">
<code class="html">is-half</code><br>
<code class="html">is-narrow</code>
</p>
</div>
</div>
{% highlight html %}
<div class="columns is-mobile is-centered">
<div class="column is-half is-narrow">
<p class="notification is-info">
<code class="html">is-half</code><br>
<code class="html">is-narrow</code>
</p>
</div>
</div>
{% endhighlight %}
<div class="content">
<p>Use with <code>.is-multiline</code> to create a flexible, centered list (try resizing to see centering in different viewport sizes):
</div>
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<p class="notification is-info">
<code class="html">is-narrow</code><br>
First Column
</p>
</div>
<div class="column is-narrow">
<p class="notification is-success">
<code class="html">is-narrow</code><br>
Our Second Column
</p>
</div>
<div class="column is-narrow">
<p class="notification is-danger">
<code class="html">is-narrow</code><br>
Third Column
</p>
</div>
<div class="column is-narrow">
<p class="notification is-info">
<code class="html">is-narrow</code><br>
The Fourth Column
</p>
</div>
<div class="column is-narrow">
<p class="notification is-success">
<code class="html">is-narrow</code><br>
Fifth Column
</p>
</div>
</div>
{% highlight html %}
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<p class="notification is-info">
<code class="html">is-narrow</code><br>
First Column
</p>
</div>
<div class="column is-narrow">
<p class="notification is-success">
<code class="html">is-narrow</code><br>
Our Second Column
</p>
</div>
<div class="column is-narrow">
<p class="notification is-danger">
<code class="html">is-narrow</code><br>
Third Column
</p>
</div>
<div class="column is-narrow">
<p class="notification is-info">
<code class="html">is-narrow</code><br>
The Fourth Column
</p>
</div>
<div class="column is-narrow">
<p class="notification is-success">
<code class="html">is-narrow</code><br>
Fifth Column
</p>
</div>
</div>
{% endhighlight %}
<hr> <hr>
<h3 class="title">Responsiveness</h3> <h3 class="title">Responsiveness</h3>