Add "is-vcentered" modifier
This commit is contained in:
parent
501dae9949
commit
8b60a49393
1 changed files with 28 additions and 0 deletions
|
@ -10,6 +10,17 @@ breadcrumb:
|
|||
- 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 %}
|
||||
<div class="columns is-multiline is-mobile">
|
||||
<div class="column is-one-quarter">
|
||||
|
@ -87,6 +98,23 @@ breadcrumb:
|
|||
</div>
|
||||
{% 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" %}
|
||||
|
||||
<div class="content">
|
||||
|
|
Loading…
Add table
Reference in a new issue