library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add "is-vcentered" modifier

Browse Source
This commit is contained in:
Tom Hartley 2018-12-12 22:37:30 +00:00 committed by Jeremy Thomas
parent 501dae9949
commit 8b60a49393
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/documentation/columns/options.html
View File

@ -10,6 +10,17 @@ breadcrumb:
- columns-options - columns-options
--- ---
{% capture columns_vcentered %}
<div class="columns is-vcentered">
<div class="column is-8">
<p class="bd-notification is-primary">First column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Second column with more content. This is so you can see the vertical alignment.</p>
</div>
</div>
{% endcapture %}
{% capture columns_multiline %} {% capture columns_multiline %}
<div class="columns is-multiline is-mobile"> <div class="columns is-multiline is-mobile">
<div class="column is-one-quarter"> <div class="column is-one-quarter">
@ -87,6 +98,23 @@ breadcrumb:
</div> </div>
{% endcapture %} {% endcapture %}
{% include elements/anchor.html name="Vertical alignment" %}
<div class="content">
<p>To align your columns vertically, add the <code>is-vcentered</code> modifier to the <code>columns</code> container.</p>
</div>
<div class="columns is-vcentered">
<div class="column is-8">
<p class="bd-notification is-primary">First column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Second column with more content. This is so you can see the vertical alignment.</p>
</div>
</div>
{% highlight html %}{{ columns_vcentered }}{% endhighlight %}
{% include elements/anchor.html name="Multiline" %} {% include elements/anchor.html name="Multiline" %}
<div class="content"> <div class="content">