Table of Contents
Popular assets | Blocs |
Buttons | Lists |
Tables | Columns |
Divers |
Popular assets
Button
<a class="button" title="Click to get to website" href="#" target="_blank">Your text</a>
- Button available in blue with class=”button is-primary”
- Please don’t forget to define the “title” attribute which defines the text that appears on hover the link
Bullet points
- Argument 1
- Argument 2
<ul>
<li>Argument 1</li>
<li>Argument 2</li>
</ul>
Extrait code HTML
<a class="button" href="#" target="_blank">Your text</a>
You can use this code to insert HTML / CSS code without being interpreted by the browser.
In addition to wrapping your code snippet with the pre i> and code i> tags, you must replace the & lt; by & lt; and the & gt; by & gt;
This is done quickly using the “Find and Replace” function on Word or Notepad (shortcut CTRL + H).
<pre><code>
<a class="button" title="Page title" href="#">Your text</a>
</code></pre>
Blocs
Box
My incredible Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis.
<p class="box"><i class="fa fa-lightbulb-o"></i><span class="title is-5">My incredible Title</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Bloc Tips
My incredible Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis.
<p class="bloc-tips"><i class="fa fa-lightbulb-o"></i><span class="title is-5">My incredible Title</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
Bloc Tips with bullet points
If you’re looking for more information on this topic, we invite you to read:
<div class="bloc-tips"><i class="fa fa-book"></i><span class="title is-5">More information on this topic</span>
If you're looking for more information on this topic, we invite you to read:
<ul class="icon-chevron" style="margin-bottom: 0px;">
<li><a title="Titre de l'article" href="#" target="_blank" rel="noopener noreferrer">Article 1</a></li>
<li><a title="Titre de l'article" href="#" target="_blank" rel="noopener noreferrer">Article 2</a></li>
<li><a title="Titre de l'article" href="#" target="_blank" rel="noopener noreferrer">Article 3</a></li>
</ul>
</div>
<div class="spacer1"></div>
Quote
“If you’re proud of your product during his launch, it means that you waited too long.”
<p class="bloc-quote">"Your text."</p>
Summary – 2 columns
- Argument : Text.
- Argument : Text.
- Argument : Text.
- Argument : Text.
<div class="bloc-exec">
<span class="title is-6 pink uppercase">Summary</span>
<div class="columns">
<div class="column">
<ul class="icon-chevron">
<li><strong>Argument</strong> : Text.</li>
<li><strong>Argument</strong> : Text.</li>
</ul>
</div>
<div class="column">
<ul class="icon-chevron">
<li><strong>Argument</strong> : Text.</li>
<li><strong>Argument</strong> : Text.</li>
</ul>
</div>
</div>
</div>
Synthèse structurée – 1 colonne
- Adapté pour : Présentation d’une activité, d’une offre de services ou d’un évènement.
- Technologie : WordPress, utilisé par 30% des sites dans le monde.
<div class="bloc-exec">
<ul class="icon-chevron list-left">
<li><strong>Adapté pour</strong> : Présentation d'une activité, d'une offre de services ou d'un évènement.</li>
<li><strong>Technologie</strong> : WordPress, utilisé par 30% des sites dans le monde.</li>
</ul>
</div>
BUTTONS
Button – Classic
<a class="button" title="Text which appears on hover" href="#">Your text</a>
Button – Classic – Open in a new tab
<a class="button" title="Text which appears on hover" href="#" target="_blank">Your text</a>
Button light
<a class="button is-light" title="Text which appears on hover" href="#" >Your text</a>
<a class="button is-primary is-outlined" title="Text which appears on hover" href="#" >Your text</a>
Button Blue – Centered
<div class="buttons is-centered"><a class="button is-primary" title="Page title" href="#" target="_blank" rel="noopener noreferrer">Your text</a></div>
<div class="buttons is-centered"><a class="button is-light is-fullwidth" title="Page title" href="#" target="_blank" rel="noopener noreferrer">Your text</a></div>
Double Button
<div class="columns">
<div class="column is-2"><a class="button is-danger" title="Page title" href="#" target="_blank" rel="noopener">Your text</a></div>
<div class="column is-2"><a class="button is-primary" title="Page title" href="#" target="_blank" rel="noopener">Your text</a></div>
</div>
Button – More options
<div class="buttons">
<a class="button is-danger is-normal" title="Page title" href="#" target="_blank" rel="noopener noreferrer"><span class="icon is-small"><i class="fas fa-check"></i></span><span>Your text</span></a>
<a class="button is-primary is-medium" title="Page title" href="#" target="_blank" rel="noopener noreferrer">Your text</a>
<a class="button is-primary is-medium is-outlined" title="Page title" href="#" target="_blank" rel="noopener noreferrer">Your text</a>
<a class="button is-primary is-medium is-rounded" title="Page title" href="#" target="_blank" rel="noopener noreferrer">Your text</a>
<a class="button is-primary is-large" title="Page title" href="#" target="_blank" rel="noopener noreferrer">Your text</a>
</div>
Bullet points
Bullet points – Classic
- Argument 1
- Argument 1
- Argument 1
<ul>
<li>Argument 1</li>
<li>Argument 2</li>
</ul>
Bullet points – Check
- Argument 1
- Argument 1
- Argument 1
<ul class="icon-check">
<li>Argument 1</li>
<li>Argument 2</li>
</ul>
Bullet points – Chevron – Left margin
- Argument 1
- Argument 1
- Argument 1
<ul class="icon-chevron margin-left-15">
<li>Argument 1</li>
<li>Argument 2</li>
</ul>
Bullet points – Checkbox
- Argument 1
- Argument 1
- Argument 1
<ul class="icon-checkbox">
<li>Argument 1</li>
<li>Argument 2</li>
</ul>
Bullet points – Cercle +
- Argument 1
- Argument 1
- Argument 1
<ul class="icon-circle-plus">
<li>Argument 1</li>
<li>Argument 2</li>
</ul>
Bullet points – Cercle –
- Argument 1
- Argument 1
- Argument 1
<ul class="icon-circle-minus">
<li>Argument 1</li>
<li>Argument 2</li>
</ul>
Custom icon
- Argument 1
- Argument 1
- Argument 1
<style>
.icon-twitter li:before {
content: '\f099c' !important; /* fa-check */
color: #e55d42;
}
</style>
<ul class="icon-twitter">
<li>Argument 1</li>
<li>Argument 2</li>
</ul>
Please note that the <style>..</style> code is CSS code. It should be copied in the “Header scripts” section.
Columns
N columns – Same size
Building a columns layout with Bulma is very simple:
- Add a columns container
- Add as many column elements as you want
Each column will have an equal width, no matter the number of columns.
First column
Second column
Thirdcolumn
Fourth column
Fifth column
<div class="columns">
<div class="column">
<p class="notification is-primary">First column</p>
</div>
<div class="column">
<p class="notification is-danger">Second column</p>
</div>
<div class="column">
<p class="notification is-success">Thirdcolumn</p>
</div>
<div class="column">
<p class="notification is-info">Fourth column</p>
</div>
<div class="column">
<p class="notification is-warning">Fifth column</p>
</div>
</div>
N columns – Custom size
If you want to change the size of a single column, you can use one of the following classes:
- is-three-quarters
- is-two-thirds
- is-half
- is-one-third
- is-one-quarter
- is-full
The other columns will fill up the remaining space automatically.
First column
One quarter
Second column
One third
Third column
What is left
<div class="columns">
<div class="column is-one-quarter">
<p class="notification is-primary">First column<br />One quarter</p>
</div>
<div class="column is-one-third">
<p class="notification is-danger">Second column<br />One third</p>
</div>
<div class="column">
<p class="notification is-info">Third column<br />What is left</p>
</div>
</div>
For more information / options, please have a look at Bulma Documentation / Columns.
Table
Method #1 – Table with Div tag (recommended)
To build tables, we use Bulma “columns” and not classic table tag for responsive design purpose.
The easiest way to build a table is to use this Table Generator, basically a spreadsheet that generate the HTML code to copy / past into your page.
<div class='table table-primary'>
<div class='columns headline'>
<div class='column col1 is-3'>Title 1</div><div class='column col2 is-3'>Title 2</div><div class='column col3 is-2'>Title 3</div><div class='column col4 is-2'>Title 4</div><div class='column col5 is-2'>Title 5</div>
</div><div class='columns'>
<div class='column col1 is-3'>XYZ</div><div class='column col2 is-3'>Lorem Ipsum</div><div class='column col3 is-2'>Lorem Ipsum</div><div class='column col4 is-2'>Lorem Ipsum</div><div class='column col5 is-2'>Lorem Ipsum</div>
</div><div class='columns'>
<div class='column col1 is-3'>XXX</div><div class='column col2 is-3'>Example</div><div class='column col3 is-2'>Example</div><div class='column col4 is-2'>Example</div><div class='column col5 is-2'>Example</div>
</div>
</div>
Method #2 – Tables with Table tag
If never you have to copy an existing table, it could be much easier to use the classic tag “table”.
In this case, you have to use the CSS class “table-top-5”.
Title 1 | Title 2 | Title 3 |
---|---|---|
Value A | Value B | Value C |
Value A | Value B | Value C |
<table class="table-top-5">
<tr>
<th width="50%">Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>Value A</td>
<td>Value B</td>
<td>Value C</td>
</tr>
<tr>
<td>Value A</td>
<td>Value B</td>
<td>Value C</td>
</tr>
</table>