--- /dev/null
+{
+ "by_id": {
+ "home": {
+ "name": "Home",
+ "path": ""
+ },
+ "documentation": {
+ "name": "Documentation",
+ "path": "/documentation"
+ },
+ "columns": {
+ "name": "Columns",
+ "path": "/documentation/columns"
+ },
+ "columns-basics": {
+ "name": "Basics",
+ "path": "/documentation/columns/basics"
+ },
+ "columns-gap": {
+ "name": "Gap",
+ "path": "/documentation/columns/gap"
+ },
+ "columns-nesting": {
+ "name": "Nesting",
+ "path": "/documentation/columns/nesting"
+ },
+ "columns-options": {
+ "name": "Options",
+ "path": "/documentation/columns/options"
+ },
+ "columns-responsiveness": {
+ "name": "Responsiveness",
+ "path": "/documentation/columns/responsiveness"
+ },
+ "columns-sizes": {
+ "name": "Sizes",
+ "path": "/documentation/columns/sizes"
+ },
+ "elements": {
+ "name": "Elements",
+ "path": "/documentation/elements"
+ },
+ "button": {
+ "name": "Button",
+ "path": "/documentation/elements/button"
+ }
+ },
+ "order": {
+ "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"]
+ }
+}
"name": "$title-strong-weight",
"value": "inherit"
},
+ "title-line-height": {
+ "id": "title-line-height",
+ "name": "$title-line-height",
+ "value": "1.125"
+ },
"subtitle-color": {
"id": "subtitle-color",
"name": "$subtitle-color",
"name": "$subtitle-weight",
"value": "$weight-normal"
},
+ "subtitle-line-height": {
+ "id": "subtitle-line-height",
+ "name": "$subtitle-line-height",
+ "value": "1.25"
+ },
"subtitle-strong-color": {
"id": "subtitle-strong-color",
"name": "$subtitle-strong-color",
"id": "subtitle-strong-weight",
"name": "$subtitle-strong-weight",
"value": "$weight-semibold"
+ },
+ "subtitle-negative-margin": {
+ "id": "subtitle-negative-margin",
+ "name": "$subtitle-negative-margin",
+ "value": "-1.25rem"
}
}
-}
\ No newline at end of file
+}
-<hr style="margin-bottom: 0;">
+<hr class="hr" style="margin-bottom: 0;">
<h3 id="{{ include.name | slugify }}" class="title is-4 is-spaced bd-anchor-title">
{{ include.name }}
<section class="section bd-typo">
<div class="container">
- <p class="has-text-centered has-text-grey-light">
+ <p class="has-text-grey-light">
<a href="{{ site.url }}/made-with-bulma/">
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
</a>
{% include navbar.html id="Documentation" %}
+{% assign current_link_id = page.breadcrumb | last %}
+{% assign category_links = site.data.links.order[page.doc-tab] %}
+
+{% for link_id in category_links %}
+ {% if link_id == current_link_id %}
+ {% unless forloop.first %}
+ {% assign previous_index = forloop.index0 | minus: 1 %}
+ {% assign previous_link_id = category_links[previous_index] %}
+ {% assign previous_link = site.data.links.by_id[previous_link_id] %}
+ {% endunless %}
+
+ {% unless forloop.last %}
+ {% assign next_index = forloop.index0 | plus: 1 %}
+ {% assign next_link_id = category_links[next_index] %}
+ {% assign next_link = site.data.links.by_id[next_link_id] %}
+ {% endunless %}
+ {% endif %}
+{% endfor %}
+
<main class="bd-main">
<div class="bd-side-background"></div>
<div class="bd-main-container container">
<div class="bd-breadcrumb">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
- <li>
- <a href="{{ site.url }}">Home</a>
- </li>
- <li>
- <a href="{{ site.url }}/documentation">Documentation</a>
- </li>
- <li>
- <a href="{{ site.url }}/documentation/elements">Elements</a>
- </li>
- <li class="is-active">
- <a href="#" aria-current="page">Button</a>
- </li>
+ {% for key in page.breadcrumb %}
+ {% assign link = site.data.links.by_id[key] %}
+ <li{% if forloop.last %} class="is-active"{% endif %}>
+ <a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
+ </li>
+ {% endfor %}
</ul>
</nav>
+
+ <nav class="bd-prev-next">
+ {% if previous_link %}
+ <a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
+ ←
+ </a>
+ {% else %}
+ <span>
+ ←
+ </span>
+ {% endif %}
+
+ {% if next_link %}
+ <a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
+ →
+ </a>
+ {% else %}
+ <span>
+ →
+ </span>
+ {% endif %}
+ </nav>
</div>
<header class="bd-header">
<h1 class="title">
{{ page.title }}
</h1>
- <p class="subtitle">
+ <p class="subtitle is-4">
{{ page.subtitle }}
</p>
</header>
<div class="bd-content">
{{ content }}
</div>
+
+ {% include elements/improve-page.html %}
</div>
<aside class="bd-side">
</aside>
</div>
</main>
-
-{% include elements/improve-page.html %}
position: relative
.bd-breadcrumb
+ display: flex
+ justify-content: space-between
margin-bottom: 2.5rem
+ .breadcrumb:not(:last-child)
+ margin-bottom: 0
+
+.bd-prev-next
+ align-items: flex-start
+ color: $grey-light
+ display: none
+ flex-grow: 0
+ flex-shrink: 0
+ margin-left: 0.5rem
+ text-align: center
+ a,
+ span
+ border-radius: $radius
+ width: 1.5rem
+ a
+ &:hover
+ background-color: $background
.bd-header
margin-bottom: 2.5rem
overflow: hidden
flex-grow: 1
flex-shrink: 1
+ .bd-prev-next
+ display: flex
.bd-side
flex: 0 0 300px
}
hr {
- background-color: #dbdbdb;
+ background-color: whitesmoke;
border: none;
display: block;
- height: 1px;
+ height: 2px;
margin: 1.5rem 0;
}
}
.title:not(.is-spaced) + .subtitle {
- margin-top: -1.5rem;
+ margin-top: -1.25rem;
}
.title.is-1 {
}
.subtitle:not(.is-spaced) + .title {
- margin-top: -1.5rem;
+ margin-top: -1.25rem;
}
.subtitle.is-1 {
}
.breadcrumb {
- align-items: stretch;
- display: flex;
font-size: 1rem;
- overflow: hidden;
- overflow-x: auto;
white-space: nowrap;
}
}
.breadcrumb li + li::before {
- color: #4a4a4a;
+ color: #b5b5b5;
content: "\0002f";
}
-.breadcrumb ul, .breadcrumb ol {
- align-items: center;
+.breadcrumb ul,
+.breadcrumb ol {
+ align-items: flex-start;
display: flex;
- flex-grow: 1;
- flex-shrink: 0;
+ flex-wrap: wrap;
justify-content: flex-start;
}
margin-left: 0.5em;
}
-.breadcrumb.is-centered ol, .breadcrumb.is-centered ul {
+.breadcrumb.is-centered ol {
justify-content: center;
}
-.breadcrumb.is-right ol, .breadcrumb.is-right ul {
+.breadcrumb.is-right ol {
justify-content: flex-end;
}
}
.bd-breadcrumb {
+ display: flex;
+ justify-content: space-between;
margin-bottom: 2.5rem;
}
+.bd-breadcrumb .breadcrumb:not(:last-child) {
+ margin-bottom: 0;
+}
+
+.bd-prev-next {
+ align-items: flex-start;
+ color: #b5b5b5;
+ display: none;
+ flex-grow: 0;
+ flex-shrink: 0;
+ margin-left: 0.5rem;
+ text-align: center;
+}
+
+.bd-prev-next a,
+.bd-prev-next span {
+ border-radius: 3px;
+ width: 1.5rem;
+}
+
+.bd-prev-next a:hover {
+ background-color: whitesmoke;
+}
+
.bd-header {
margin-bottom: 2.5rem;
}
flex-grow: 1;
flex-shrink: 1;
}
+ .bd-prev-next {
+ display: flex;
+ }
.bd-side {
flex: 0 0 300px;
}
---
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 %}
</div>
{% endcapture %}
-{% include subnav/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>
+<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="highlight-full">
- {% highlight html %}{{ columns }}{% endhighlight %}
- </div>
+<div class="columns">
+ <div class="column">
+ <p class="bd-notification is-primary">First column</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-primary">Second column</p>
</div>
-</section>
+ <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>
---
title: Columns gap
+subtitle: Customize the <strong>gap</strong> between the columns
layout: documentation
doc-tab: columns
doc-subtab: gap
+breadcrumb:
+- home
+- documentation
+- columns
+- columns-gap
---
{% capture columns_default_gap %}
</div>
{% endcapture %}
-{% include subnav/subnav-columns.html %}
+{% include anchor.html name="Default gap" %}
-<section class="section">
- <div class="container">
- <h1 class="title">Columns gap</h1>
- <h2 class="subtitle">
- Customize the <strong>gap</strong> between the columns
- </h2>
-
- {% include anchor.html name="Default gap" %}
+<div class="content">
+ <p>
+ Each column has a <strong>gap</strong> equal to the <strong>variable</strong> <code>$column-gap</code>, which has a default value of <code>0.75rem</code>.
+ <br>
+ Since the gap is on <em>each side</em> of a column, the gap between two adjacent columns will be twice the value of <code>$column-gap</code>, or <code>1.5rem</code> by default.
+ </p>
+</div>
- <div class="content">
- <p>
- Each column has a <strong>gap</strong> equal to the <strong>variable</strong> <code>$column-gap</code>, which has a default value of <code>0.75rem</code>.
- <br>
- Since the gap is on <em>each side</em> of a column, the gap between two adjacent columns will be twice the value of <code>$column-gap</code>, or <code>1.5rem</code> by default.
- </p>
- </div>
+{{ columns_default_gap }}
- {{ columns_default_gap }}
+{% include anchor.html name="Gapless" %}
- {% include anchor.html name="Gapless" %}
+<div class="content">
+ <p>
+ If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:
+ </p>
+</div>
- <div class="content">
- <p>
- If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:
- </p>
- </div>
+<div class="columns is-gapless">
+ <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="columns is-gapless">
- <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_gapless }}{% endhighlight %}
+</div>
- <div class="highlight-full">
- {% highlight html %}{{ columns_gapless }}{% endhighlight %}
- </div>
+<div class="content">
+ <p>You can combine it with the <code>is-multiline</code> modifier:</p>
+</div>
- <div class="content">
- <p>You can combine it with the <code>is-multiline</code> modifier:</p>
- </div>
+<div class="columns is-multiline is-mobile is-gapless">
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-info"><code>is-one-quarter</code></p>
+ </div>
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-success"><code>is-one-quarter</code></p>
+ </div>
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
+ </div>
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
+ </div>
+ <div class="column is-half">
+ <p class="bd-notification is-info"><code>is-half</code></p>
+ </div>
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-success"><code>is-one-quarter</code></p>
+ </div>
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
+ </div>
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-info">Auto</p>
+ </div>
+</div>
- <div class="columns is-multiline is-mobile is-gapless">
- <div class="column is-one-quarter">
- <p class="bd-notification is-info"><code>is-one-quarter</code></p>
- </div>
- <div class="column is-one-quarter">
- <p class="bd-notification is-success"><code>is-one-quarter</code></p>
- </div>
- <div class="column is-one-quarter">
- <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
- </div>
- <div class="column is-one-quarter">
- <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
- </div>
- <div class="column is-half">
- <p class="bd-notification is-info"><code>is-half</code></p>
- </div>
- <div class="column is-one-quarter">
- <p class="bd-notification is-success"><code>is-one-quarter</code></p>
- </div>
- <div class="column is-one-quarter">
- <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
- </div>
- <div class="column is-one-quarter">
- <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
- </div>
- <div class="column">
- <p class="bd-notification is-info">Auto</p>
- </div>
- </div>
+<div class="highlight-full">
+ {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
+</div>
- <div class="highlight-full">
- {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
- </div>
+{% include anchor.html name="Variable gap" %}
- {% include anchor.html name="Variable gap" %}
-
- <div class="field is-grouped is-grouped-multiline">
- <div class="control">
- <div class="tags">
- <span class="tag is-warning">Experimental</span>
- </div>
- </div>
-
- <div class="control">
- <div class="tags has-addons">
- <span class="tag">New</span>
- <span class="tag is-info">0.5.2</span>
- </div>
- </div>
+<div class="field is-grouped is-grouped-multiline">
+ <div class="control">
+ <div class="tags">
+ <span class="tag is-warning">Experimental</span>
</div>
+ </div>
- <div class="content">
- <p>
- You can specify a <strong>custom column gap</strong> by appending one of <strong>9 modifiers</strong> on the <code>.columns</code> container.
- </p>
- <ul>
- <li>
- <code>is-0</code> will remove any gap (similar to <code>is-gapless</code>)
- </li>
- <li>
- <code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value
- </li>
- <li>
- <code>is-8</code> is the maximum gap of <code>2rem</code>
- </li>
- </ul>
- <p>
- Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.
- </p>
+ <div class="control">
+ <div class="tags has-addons">
+ <span class="tag">New</span>
+ <span class="tag is-info">0.5.2</span>
</div>
+ </div>
+</div>
- {% include klmn.html %}
+<div class="content">
+ <p>
+ You can specify a <strong>custom column gap</strong> by appending one of <strong>9 modifiers</strong> on the <code>.columns</code> container.
+ </p>
+ <ul>
+ <li>
+ <code>is-0</code> will remove any gap (similar to <code>is-gapless</code>)
+ </li>
+ <li>
+ <code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value
+ </li>
+ <li>
+ <code>is-8</code> is the maximum gap of <code>2rem</code>
+ </li>
+ </ul>
+ <p>
+ Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.
+ </p>
+</div>
- <div class="message is-warning">
- <div class="message-body">
- <p>
- This feature is only available in browsers that support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a>:
- </p>
- </div>
- </div>
+{% include klmn.html %}
- <div class="message is-info">
-
<div class="message-body">
- If your Sass setup doesn't support CSS Variables, you can <strong>disable this feature</strong> by setting <code>$variable-columns</code> to <code>false</code>.
- </p>
- </div>
- </div>
+<div class="message is-warning">
+ <div class="message-body">
+ <p>
+ This feature is only available in browsers that support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a>:
+ </p>
+ </div>
+</div>
+<div class="message is-info">
+ <div class="message-body">
+ <p>
+ If your Sass setup doesn't support CSS Variables, you can <strong>disable this feature</strong> by setting <code>$variable-columns</code> to <code>false</code>.
+ </p>
</div>
-</section>
+</div>
---
title: Nesting columns
+subtitle: "A simple way to build <strong>responsive columns</strong>"
layout: documentation
doc-tab: columns
doc-subtab: nesting
+breadcrumb:
+- home
+- documentation
+- columns
+- columns-nesting
---
-{% include subnav/subnav-columns.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Nesting columns</h1>
- <h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
- <hr>
-
- <div class="content">
- <p>
- You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
- </p>
+<div class="content">
+ <p>
+ You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
+ </p>
+ <ul>
+ <li>
+ <code>columns</code>: top-level columns container
<ul>
<li>
- <code>columns</code>: top-level columns container
+ <code>column</code>
<ul>
<li>
- <code>column</code>
+ <code>columns</code>: nested columns
<ul>
<li>
- <code>columns</code>: nested columns
- <ul>
- <li>
- <code>column</code> and so on…
- </li>
- </ul>
+ <code>column</code> and so on…
</li>
</ul>
</li>
</ul>
</li>
</ul>
- <p>
- The difference with <a href="{{ site.url }}/documentation/columns/options/#multiline">multiline columns</a> is the <strong>order</strong> in the HTML code: all the <strong class="has-text-info">blue</strong> columns appear <em>before</em> the <strong class="has-text-danger">red</strong> ones. Resize to a narrower viewport to see the result.
- </p>
- </div>
+ </li>
+ </ul>
+ <p>
+ The difference with <a href="{{ site.url }}/documentation/columns/options/#multiline">multiline columns</a> is the <strong>order</strong> in the HTML code: all the <strong class="has-text-info">blue</strong> columns appear <em>before</em> the <strong class="has-text-danger">red</strong> ones. Resize to a narrower viewport to see the result.
+ </p>
+</div>
- <div class="columns">
+<div class="columns">
+ <div class="column">
+ <p class="bd-notification is-info">First column</p>
+ <div class="columns is-mobile">
<div class="column">
- <p class="bd-notification is-info">First column</p>
- <div class="columns is-mobile">
- <div class="column">
- <p class="bd-notification is-info">First nested column</p>
- </div>
- <div class="column">
- <p class="bd-notification is-info">Second nested column</p>
- </div>
- </div>
+ <p class="bd-notification is-info">First nested column</p>
</div>
<div class="column">
- <p class="bd-notification is-danger">Second column</p>
- <div class="columns is-mobile">
- <div class="column is-half">
- <p class="bd-notification is-danger">50%</p>
- </div>
- <div class="column">
- <p class="bd-notification is-danger">Auto</p>
- </div>
- <div class="column">
- <p class="bd-notification is-danger">Auto</p>
- </div>
- </div>
+ <p class="bd-notification is-info">Second nested column</p>
</div>
</div>
-
- <div class="content">
- <p>
- Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
- </p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-danger">Second column</p>
+ <div class="columns is-mobile">
+ <div class="column is-half">
+ <p class="bd-notification is-danger">50%</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-danger">Auto</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-danger">Auto</p>
+ </div>
</div>
</div>
-</section>
+</div>
+
+<div class="content">
+ <p>
+ Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
+ </p>
+</div>
---
title: Column options
+subtitle: "Design different <strong>types</strong> of column layouts"
layout: documentation
doc-tab: columns
doc-subtab: options
+breadcrumb:
+- home
+- documentation
+- columns
+- columns-options
---
{% capture columns_multiline %}
</div>
{% endcapture %}
-{% include subnav/subnav-columns.html %}
+{% include anchor.html name="Multiline" %}
-<section class="section">
- <div class="container">
- <h1 class="title">Column options</h1>
- <h2 class="subtitle">
- Design different <strong>types</strong> of column layouts
- </h2>
-
- {% include anchor.html name="Multiline" %}
-
- <div class="content">
- <p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
- </div>
-
- <div class="columns is-multiline is-mobile">
- <div class="column is-one-quarter">
- <p class="bd-notification is-info"><code>is-one-quarter</code></p>
- </div>
- <div class="column is-one-quarter">
- <p class="bd-notification is-success"><code>is-one-quarter</code></p>
- </div>
- <div class="column is-one-quarter">
- <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
- </div>
- <div class="column is-one-quarter">
- <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
- </div>
- <div class="column is-half">
- <p class="bd-notification is-info"><code>is-half</code></p>
- </div>
- <div class="column is-one-quarter">
- <p class="bd-notification is-success"><code>is-one-quarter</code></p>
- </div>
- <div class="column is-one-quarter">
- <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
- </div>
- <div class="column is-one-quarter">
- <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
- </div>
- <div class="column">
- <p class="bd-notification is-info">Auto</p>
- </div>
- </div>
+<div class="content">
+ <p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
+</div>
- {% highlight html %}{{ columns_multiline }}{% endhighlight %}
+<div class="columns is-multiline is-mobile">
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-info"><code>is-one-quarter</code></p>
+ </div>
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-success"><code>is-one-quarter</code></p>
+ </div>
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
+ </div>
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
+ </div>
+ <div class="column is-half">
+ <p class="bd-notification is-info"><code>is-half</code></p>
+ </div>
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-success"><code>is-one-quarter</code></p>
+ </div>
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
+ </div>
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-info">Auto</p>
+ </div>
+</div>
- {% include anchor.html name="Centering columns" %}
+{% highlight html %}{{ columns_multiline }}{% endhighlight %}
- <div class="content">
- <p>
- While you can use <em>empty columns</em> (like <code><div class="column"></div></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:
- </p>
- </div>
+{% include anchor.html name="Centering columns" %}
- <div class="columns is-mobile is-centered">
- <div class="column is-half is-narrow">
- <p class="bd-notification is-info">
- <code class="html">is-half</code><br>
- <code class="html">is-narrow</code>
- </p>
- </div>
- </div>
+<div class="content">
+ <p>
+ While you can use <em>empty columns</em> (like <code><div class="column"></div></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:
+ </p>
+</div>
- {% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}
+<div class="columns is-mobile is-centered">
+ <div class="column is-half is-narrow">
+ <p class="bd-notification is-info">
+ <code class="html">is-half</code><br>
+ <code class="html">is-narrow</code>
+ </p>
+ </div>
+</div>
- <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):
- </p>
- </div>
+{% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}
- <div class="columns is-mobile is-multiline is-centered">
- <div class="column is-narrow">
- <p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
- <code class="html">is-narrow</code><br>
- First Column
- </p>
- </div>
- <div class="column is-narrow">
- <p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
- <code class="html">is-narrow</code><br>
- Our Second Column
- </p>
- </div>
- <div class="column is-narrow">
- <p class="bd-notification is-danger" style="padding: 1.25rem 1.5rem;">
- <code class="html">is-narrow</code><br>
- Third Column
- </p>
- </div>
- <div class="column is-narrow">
- <p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
- <code class="html">is-narrow</code><br>
- The Fourth Column
- </p>
- </div>
- <div class="column is-narrow">
- <p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
- <code class="html">is-narrow</code><br>
- Fifth Column
- </p>
- </div>
- </div>
+<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):
+ </p>
+</div>
- {% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
+<div class="columns is-mobile is-multiline is-centered">
+ <div class="column is-narrow">
+ <p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
+ <code class="html">is-narrow</code><br>
+ First Column
+ </p>
+ </div>
+ <div class="column is-narrow">
+ <p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
+ <code class="html">is-narrow</code><br>
+ Our Second Column
+ </p>
+ </div>
+ <div class="column is-narrow">
+ <p class="bd-notification is-danger" style="padding: 1.25rem 1.5rem;">
+ <code class="html">is-narrow</code><br>
+ Third Column
+ </p>
+ </div>
+ <div class="column is-narrow">
+ <p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
+ <code class="html">is-narrow</code><br>
+ The Fourth Column
+ </p>
</div>
-</section>
+ <div class="column is-narrow">
+ <p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
+ <code class="html">is-narrow</code><br>
+ Fifth Column
+ </p>
+ </div>
+</div>
+
+{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
---
title: Columns responsiveness
+subtitle: "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>"
layout: documentation
doc-tab: columns
doc-subtab: responsiveness
+breadcrumb:
+- home
+- documentation
+- columns
+- columns-responsiveness
---
{% capture columns_mobile %}
</div>
{% endcapture %}
-{% include subnav/subnav-columns.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Columns responsiveness</h1>
- <h2 class="subtitle">
- Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>
- </h2>
-
- {% include anchor.html name="Mobile columns" %}
-
- <div class="content">
- <p>
- By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.
- <br>
- If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:
- </p>
- </div>
-
- <div class="columns is-mobile">
- <div class="column">
- <p class="bd-notification is-info">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success">2</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning">3</p>
- </div>
- <div class="column">
- <p class="bd-notification is-danger">4</p>
- </div>
- </div>
-
- {% highlight html %}{{ columns_mobile }}{% endhighlight %}
-
- <div class="message is-info">
- <p class="message-header">
- Resize
- </p>
- <p class="message-body">
- If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.
- </p>
- </div>
-
- <div class="content">
- <p>
- If you <em>only</em> want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:
- </p>
- </div>
-
- <div class="columns is-desktop">
- <div class="column">
- <p class="bd-notification is-info">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success">2</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning">3</p>
- </div>
- <div class="column">
- <p class="bd-notification is-danger">4</p>
- </div>
- </div>
-
- {% highlight html %}{{ columns_desktop }}{% endhighlight %}
-
- {% include anchor.html name="Different column sizes per breakpoint" %}
-
- <div class="content">
- <p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
- </div>
-
- <div class="columns is-mobile">
- <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
- <p class="bd-notification is-info">
- <code>is-half-mobile</code><br>
- <code>is-one-third-tablet</code><br>
- <code>is-one-quarter-desktop</code>
- </p>
- </div>
- <div class="column">
- <p class="bd-notification is-success">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning">1</p>
- </div>
- </div>
-
- <div class="message is-info">
- <p class="message-header">Resize</p>
- <p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
- </div>
-
- {% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
+{% include anchor.html name="Mobile columns" %}
+
+<div class="content">
+ <p>
+ By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.
+ <br>
+ If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:
+ </p>
+</div>
+
+<div class="columns is-mobile">
+ <div class="column">
+ <p class="bd-notification is-info">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success">2</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning">3</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-danger">4</p>
+ </div>
+</div>
+
+{% highlight html %}{{ columns_mobile }}{% endhighlight %}
+
+<div class="message is-info">
+ <p class="message-header">
+ Resize
+ </p>
+ <p class="message-body">
+ If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.
+ </p>
+</div>
+
+<div class="content">
+ <p>
+ If you <em>only</em> want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:
+ </p>
+</div>
+
+<div class="columns is-desktop">
+ <div class="column">
+ <p class="bd-notification is-info">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success">2</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning">3</p>
</div>
-</section>
+ <div class="column">
+ <p class="bd-notification is-danger">4</p>
+ </div>
+</div>
+
+{% highlight html %}{{ columns_desktop }}{% endhighlight %}
+
+{% include anchor.html name="Different column sizes per breakpoint" %}
+
+<div class="content">
+ <p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
+</div>
+
+<div class="columns is-mobile">
+ <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+ <p class="bd-notification is-info">
+ <code>is-half-mobile</code><br>
+ <code>is-one-third-tablet</code><br>
+ <code>is-one-quarter-desktop</code>
+ </p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning">1</p>
+ </div>
+</div>
+
+<div class="message is-info">
+ <p class="message-header">Resize</p>
+ <p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
+</div>
+
+{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
---
title: Column sizes
+subtitle: "Define the <strong>size</strong> of each column <strong>individually</strong>"
layout: documentation
doc-tab: columns
doc-subtab: sizes
+breadcrumb:
+- home
+- documentation
+- columns
+- columns-sizes
---
{% capture columns_sizes %}
</div>
{% endcapture %}
-{% include subnav/subnav-columns.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Column sizes</h1>
- <h2 class="subtitle">
- Define the <strong>size</strong> of each column <strong>individually</strong>
- </h2>
-
- <hr>
-
- <div class="content">
- <p>If you want to change the <strong>size</strong> of a single column, you can use one of the following classes:</p>
- <ul>
- <li>
- <code>is-three-quarters</code>
- </li>
- <li>
- <code>is-two-thirds</code>
- </li>
- <li>
- <code>is-half</code>
- </li>
- <li>
- <code>is-one-third</code>
- </li>
- <li>
- <code>is-one-quarter</code>
- </li>
- </ul>
- <p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
- </div>
-
- {% include elements/new-tag.html version="0.6.1" %}
-
- <div class="content">
- <p>You can now use the following multiples of <code>20%</code> as well:</p>
- <ul>
- <li>
- <code>is-four-fifths</code>
- </li>
- <li>
- <code>is-three-fifths</code>
- </li>
- <li>
- <code>is-two-fifths</code>
- </li>
- <li>
- <code>is-one-fifth</code>
- </li>
- </ul>
- </div>
+<div class="content">
+ <p>If you want to change the <strong>size</strong> of a single column, you can use one of the following classes:</p>
+ <ul>
+ <li>
+ <code>is-three-quarters</code>
+ </li>
+ <li>
+ <code>is-two-thirds</code>
+ </li>
+ <li>
+ <code>is-half</code>
+ </li>
+ <li>
+ <code>is-one-third</code>
+ </li>
+ <li>
+ <code>is-one-quarter</code>
+ </li>
+ </ul>
+ <p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
+</div>
- <div class="columns">
- <div class="column is-four-fifths">
- <p class="bd-notification is-info">
- <code class="html">is-four-fifths</code>
- </p>
- </div>
- <div class="column">
- <p class="bd-notification is-success">Auto</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning">Auto</p>
- </div>
- </div>
+{% include elements/new-tag.html version="0.6.1" %}
+
+<div class="content">
+ <p>You can now use the following multiples of <code>20%</code> as well:</p>
+ <ul>
+ <li>
+ <code>is-four-fifths</code>
+ </li>
+ <li>
+ <code>is-three-fifths</code>
+ </li>
+ <li>
+ <code>is-two-fifths</code>
+ </li>
+ <li>
+ <code>is-one-fifth</code>
+ </li>
+ </ul>
+</div>
- <div class="column is-three-quarters">
-
<p class="bd-notification is-info">
- <code class="html">is-three-quarters</code>
- </p>
- </div>
-
<p class="bd-notification is-success">Auto</p>
- </div>
-
<p class="bd-notification is-warning">Auto</p>
- </div>
- </div>
+<div class="columns">
+ <div class="column is-four-fifths">
+ <p class="bd-notification is-info">
+ <code class="html">is-four-fifths</code>
+ </p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success">Auto</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning">Auto</p>
+ </div>
+</div>
- <div class="column is-two-thirds">
-
<p class="bd-notification is-info">
- <code class="html">is-two-thirds</code>
- </p>
- </div>
-
<p class="bd-notification is-success">Auto</p>
- </div>
-
<p class="bd-notification is-warning">Auto</p>
- </div>
- </div>
+<div class="columns">
+ <div class="column is-three-quarters">
+ <p class="bd-notification is-info">
+ <code class="html">is-three-quarters</code>
+ </p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success">Auto</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning">Auto</p>
+ </div>
+</div>
- <div class="column is-three-fifths">
-
<p class="bd-notification is-info">
- <code class="html">is-three-fifths</code>
- </p>
- </div>
-
<p class="bd-notification is-success">Auto</p>
- </div>
-
<p class="bd-notification is-warning">Auto</p>
- </div>
- </div>
+<div class="columns">
+ <div class="column is-two-thirds">
+ <p class="bd-notification is-info">
+ <code class="html">is-two-thirds</code>
+ </p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success">Auto</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning">Auto</p>
+ </div>
+</div>
- <div class="column is-half">
-
<p class="bd-notification is-info">
- <code class="html">is-half</code>
- </p>
- </div>
-
<p class="bd-notification is-success">Auto</p>
- </div>
-
<p class="bd-notification is-warning">Auto</p>
- </div>
- </div>
+<div class="columns">
+ <div class="column is-three-fifths">
+ <p class="bd-notification is-info">
+ <code class="html">is-three-fifths</code>
+ </p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success">Auto</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning">Auto</p>
+ </div>
+</div>
- <div class="column is-two-fifths">
-
<p class="bd-notification is-info">
- <code class="html">is-two-fifths</code>
- </p>
- </div>
-
<p class="bd-notification is-success">Auto</p>
- </div>
-
<p class="bd-notification is-warning">Auto</p>
- </div>
- </div>
+<div class="columns">
+ <div class="column is-half">
+ <p class="bd-notification is-info">
+ <code class="html">is-half</code>
+ </p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success">Auto</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning">Auto</p>
+ </div>
+</div>
- <div class="column is-one-third">
-
<p class="bd-notification is-info">
- <code class="html">is-one-third</code>
- </p>
- </div>
-
<p class="bd-notification is-success">Auto</p>
- </div>
-
<p class="bd-notification is-warning">Auto</p>
- </div>
- </div>
+<div class="columns">
+ <div class="column is-two-fifths">
+ <p class="bd-notification is-info">
+ <code class="html">is-two-fifths</code>
+ </p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success">Auto</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning">Auto</p>
+ </div>
+</div>
- <div class="column is-one-quarter">
-
<p class="bd-notification is-info">
- <code class="html">is-one-quarter</code>
- </p>
- </div>
-
<p class="bd-notification is-success">Auto</p>
- </div>
-
<p class="bd-notification is-warning">Auto</p>
- </div>
- </div>
+<div class="columns">
+ <div class="column is-one-third">
+ <p class="bd-notification is-info">
+ <code class="html">is-one-third</code>
+ </p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success">Auto</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning">Auto</p>
+ </div>
+</div>
- <div class="column is-one-fifth">
-
<p class="bd-notification is-info">
- <code class="html">is-one-fifth</code>
- </p>
- </div>
-
<p class="bd-notification is-success">Auto</p>
- </div>
-
<p class="bd-notification is-warning">Auto</p>
- </div>
- </div>
+<div class="columns">
+ <div class="column is-one-quarter">
+ <p class="bd-notification is-info">
+ <code class="html">is-one-quarter</code>
+ </p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success">Auto</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning">Auto</p>
+ </div>
+</div>
- <div class="highlight-full">
- {% highlight html %}{{ columns_sizes }}{% endhighlight %}
- </div>
+<div class="columns">
+ <div class="column is-one-fifth">
+ <p class="bd-notification is-info">
+ <code class="html">is-one-fifth</code>
+ </p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success">Auto</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning">Auto</p>
+ </div>
+</div>
- {% include anchor.html name="12 columns system" %}
-
- <div class="content">
- <p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
- <ul>
- <li><code>is-2</code></li>
- <li><code>is-3</code></li>
- <li><code>is-4</code></li>
- <li><code>is-5</code></li>
- <li><code>is-6</code></li>
- <li><code>is-7</code></li>
- <li><code>is-8</code></li>
- <li><code>is-9</code></li>
- <li><code>is-10</code></li>
- <li><code>is-11</code></li>
- </ul>
- </div>
+<div class="highlight-full">
+ {% highlight html %}{{ columns_sizes }}{% endhighlight %}
+</div>
- <div class="message is-info">
- <p class="message-header">Naming convention</p>
- <p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
- </div>
+{% include anchor.html name="12 columns system" %}
+
+<div class="content">
+ <p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
+ <ul>
+ <li><code>is-2</code></li>
+ <li><code>is-3</code></li>
+ <li><code>is-4</code></li>
+ <li><code>is-5</code></li>
+ <li><code>is-6</code></li>
+ <li><code>is-7</code></li>
+ <li><code>is-8</code></li>
+ <li><code>is-9</code></li>
+ <li><code>is-10</code></li>
+ <li><code>is-11</code></li>
+ </ul>
+</div>
- <div class="columns">
- <div class="column is-2">
- <p class="bd-notification is-info"><code>is-2</code></p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- </div>
- <div class="columns">
- <div class="column is-3">
- <p class="bd-notification is-info"><code>is-3</code></p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- </div>
- <div class="columns">
- <div class="column is-4">
- <p class="bd-notification is-info"><code>is-4</code></p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- </div>
- <div class="columns">
- <div class="column is-5">
- <p class="bd-notification is-info"><code>is-5</code></p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- </div>
- <div class="columns">
- <div class="column is-6">
- <p class="bd-notification is-info"><code>is-6</code></p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- </div>
- <div class="columns">
- <div class="column is-7">
- <p class="bd-notification is-info"><code>is-7</code></p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- </div>
- <div class="columns">
- <div class="column is-8">
- <p class="bd-notification is-info"><code>is-8</code></p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- </div>
- <div class="columns">
- <div class="column is-9">
- <p class="bd-notification is-info"><code>is-9</code></p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- </div>
- <div class="columns">
- <div class="column is-10">
- <p class="bd-notification is-info"><code>is-10</code></p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- <div class="column">
- <p class="bd-notification is-warning has-text-centered">1</p>
- </div>
- </div>
- <div class="columns">
- <div class="column is-11">
- <p class="bd-notification is-info"><code>is-11</code></p>
- </div>
- <div class="column">
- <p class="bd-notification is-success has-text-centered">1</p>
- </div>
- </div>
+<div class="message is-info">
+ <p class="message-header">Naming convention</p>
+ <p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
+</div>
- {% include anchor.html name="Offset" %}
+<div class="columns">
+ <div class="column is-2">
+ <p class="bd-notification is-info"><code>is-2</code></p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+</div>
+<div class="columns">
+ <div class="column is-3">
+ <p class="bd-notification is-info"><code>is-3</code></p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+</div>
+<div class="columns">
+ <div class="column is-4">
+ <p class="bd-notification is-info"><code>is-4</code></p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+</div>
+<div class="columns">
+ <div class="column is-5">
+ <p class="bd-notification is-info"><code>is-5</code></p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+</div>
+<div class="columns">
+ <div class="column is-6">
+ <p class="bd-notification is-info"><code>is-6</code></p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+</div>
+<div class="columns">
+ <div class="column is-7">
+ <p class="bd-notification is-info"><code>is-7</code></p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+</div>
+<div class="columns">
+ <div class="column is-8">
+ <p class="bd-notification is-info"><code>is-8</code></p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+</div>
+<div class="columns">
+ <div class="column is-9">
+ <p class="bd-notification is-info"><code>is-9</code></p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+</div>
+<div class="columns">
+ <div class="column is-10">
+ <p class="bd-notification is-info"><code>is-10</code></p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-warning has-text-centered">1</p>
+ </div>
+</div>
+<div class="columns">
+ <div class="column is-11">
+ <p class="bd-notification is-info"><code>is-11</code></p>
+ </div>
+ <div class="column">
+ <p class="bd-notification is-success has-text-centered">1</p>
+ </div>
+</div>
- <div class="content">
- <p>
- While you can use <em>empty columns</em> (like <code><div class="column"></div></code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
- </p>
- </div>
+{% include anchor.html name="Offset" %}
- <div class="columns is-mobile">
- <div class="column is-half is-offset-one-quarter">
- <p class="bd-notification is-info">
- <code class="html">is-half</code><br>
- <code class="html">is-offset-one-quarter</code>
- </p>
- </div>
- </div>
+<div class="content">
+ <p>
+ While you can use <em>empty columns</em> (like <code><div class="column"></div></code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
+ </p>
+</div>
-
<div class="columns is-mobile">
- <div class="column is-three-fifths is-offset-one-fifth">
-
<p class="bd-notification is-info">
- <code class="html">is-three-fifths</code><br>
- <code class="html">is-offset-one-fifth</code>
- </p>
- </div>
- </div>
+<div class="columns is-mobile">
+ <div class="column is-half is-offset-one-quarter">
+ <p class="bd-notification is-info">
+ <code class="html">is-half</code><br>
+ <code class="html">is-offset-one-quarter</code>
+ </p>
+ </div>
+</div>
-
<div class="columns is-mobile">
- <div class="column is-4 is-offset-8">
-
<p class="bd-notification is-info">
- <code class="html">is-4</code><br>
- <code class="html">is-offset-8</code>
- </p>
- </div>
- </div>
+<div class="columns is-mobile">
+ <div class="column is-three-fifths is-offset-one-fifth">
+ <p class="bd-notification is-info">
+ <code class="html">is-three-fifths</code><br>
+ <code class="html">is-offset-one-fifth</code>
+ </p>
+ </div>
+</div>
-
<div class="columns is-mobile">
- <div class="column is-11 is-offset-1">
-
<p class="bd-notification is-info">
- <code class="html">is-11</code><br>
- <code class="html">is-offset-1</code>
- </p>
- </div>
- </div>
+<div class="columns is-mobile">
+ <div class="column is-4 is-offset-8">
+ <p class="bd-notification is-info">
+ <code class="html">is-4</code><br>
+ <code class="html">is-offset-8</code>
+ </p>
+ </div>
+</div>
- <div class="highlight-full">
- {% highlight html %}{{ columns_offset }}{% endhighlight %}
- </div>
+<div class="columns is-mobile">
+ <div class="column is-11 is-offset-1">
+ <p class="bd-notification is-info">
+ <code class="html">is-11</code><br>
+ <code class="html">is-offset-1</code>
+ </p>
+ </div>
+</div>
- {% include anchor.html name="Narrow column" %}
+<div class="highlight-full">
+ {% highlight html %}{{ columns_offset }}{% endhighlight %}
+</div>
- <div class="content">
- <p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
- </div>
+{% include anchor.html name="Narrow column" %}
- <div class="columns">
- <div class="column is-narrow">
- <div class="box" style="width: 200px;">
- <p class="title is-5">Narrow column</p>
- <p class="subtitle">This column is only 200px wide.</p>
- </div>
- </div>
- <div class="column">
- <div class="box">
- <p class="title is-5">Flexible column</p>
- <p class="subtitle">This column will take up the remaining space available.</p>
- </div>
- </div>
- </div>
+<div class="content">
+ <p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
+</div>
- <div class="highlight-full">
- {% highlight html %}{{ columns_narrow }}{% endhighlight %}
+<div class="columns">
+ <div class="column is-narrow">
+ <div class="box" style="width: 200px;">
+ <p class="title is-5">Narrow column</p>
+ <p class="subtitle">This column is only 200px wide.</p>
</div>
-
- <div class="content">
- <p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
- <ul>
- <li>
- <code>is-narrow-mobile</code>
- </li>
- <li>
- <code>is-narrow-tablet</code>
- </li>
- <li>
- <code>is-narrow-desktop</code>
- </li>
- </ul>
+ </div>
+ <div class="column">
+ <div class="box">
+ <p class="title is-5">Flexible column</p>
+ <p class="subtitle">This column will take up the remaining space available.</p>
</div>
</div>
-</section>
+</div>
+
+<div class="highlight-full">
+ {% highlight html %}{{ columns_narrow }}{% endhighlight %}
+</div>
+
+<div class="content">
+ <p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
+ <ul>
+ <li>
+ <code>is-narrow-mobile</code>
+ </li>
+ <li>
+ <code>is-narrow-tablet</code>
+ </li>
+ <li>
+ <code>is-narrow-desktop</code>
+ </li>
+ </ul>
+</div>
layout: documentation
doc-tab: elements
doc-subtab: button
+breadcrumb:
+- home
+- documentation
+- elements
+- button
meta:
- colors: true
- sizes: true
$code-weight: normal !default
$code-size: 0.875em !default
-$hr-background-color: $border !default
-$hr-height: 1px !default
+$hr-background-color: $background !default
+$hr-height: 2px !default
$hr-margin: 1.5rem 0 !default
$strong-color: $text-strong !default
$breadcrumb-item-padding-vertical: 0 !default
$breadcrumb-item-padding-horizontal: 0.75em !default
-$breadcrumb-item-separator-color: $text !default
+$breadcrumb-item-separator-color: $grey-light !default
.breadcrumb
+block
+unselectable
- align-items: stretch
- display: flex
font-size: $size-normal
- overflow: hidden
- overflow-x: auto
white-space: nowrap
a
align-items: center
& + li::before
color: $breadcrumb-item-separator-color
content: "\0002f"
- ul, ol
- align-items: center
+ ul,
+ ol
+ align-items: flex-start
display: flex
- flex-grow: 1
- flex-shrink: 0
+ flex-wrap: wrap
justify-content: flex-start
.icon
&:first-child
margin-left: 0.5em
// Alignment
&.is-centered
- ol, ul
+ ol,
+ ul
justify-content: center
&.is-right
- ol, ul
+ ol,
+ ul
justify-content: flex-end
// Sizes
&.is-small
$title-color: $grey-darker !default
$title-size: $size-3 !default
$title-weight: $weight-semibold !default
+$title-line-height: 1.125 !default
$title-strong-color: inherit !default
$title-strong-weight: inherit !default
$title-sub-size: 0.75em !default
$subtitle-color: $grey-dark !default
$subtitle-size: $size-5 !default
$subtitle-weight: $weight-normal !default
+$subtitle-line-height: 1.25 !default
$subtitle-strong-color: $grey-darker !default
$subtitle-strong-weight: $weight-semibold !default
+$subtitle-negative-margin: -1.25rem !default
.title,
.subtitle
color: $title-color
font-size: $title-size
font-weight: $title-weight
- line-height: 1.125
+ line-height: $title-line-height
strong
color: $title-strong-color
font-weight: $title-strong-weight
& + .highlight
margin-top: -0.75rem
&:not(.is-spaced) + .subtitle
- margin-top: -1.5rem
+ margin-top: $subtitle-negative-margin
// Sizes
@each $size in $sizes
$i: index($sizes, $size)
color: $subtitle-color
font-size: $subtitle-size
font-weight: $subtitle-weight
- line-height: 1.25
+ line-height: $subtitle-line-height
strong
color: $subtitle-strong-color
font-weight: $subtitle-strong-weight
&:not(.is-spaced) + .title
- margin-top: -1.5rem
+ margin-top: $subtitle-negative-margin
// Sizes
@each $size in $sizes
$i: index($sizes, $size)
projects / thirdparty / bulma.git / commitdiff
