Bulma is an open-source CSS framework that provides pre-built components which can be combined together to make responsive websites and web applications. In this article, we will be seeing the 12 column system provided by Bulma.
Bulma provides us with a responsive grid system in which a container is divided into 12 columns and we can resize our content according to the CSS classes provided by Bulma.
Bulma 12 Columns System Classes:
- is-1: This class is used to make an element take up the width of 1 column out of 12 columns.
- is-2: This class is used to make an element take up the width of 2 columns out of 12 columns.
- is-3: This class is used to make an element take up the width of 3 columns out of 12 columns.
- is-4: This class is used to make an element take up the width of 4 columns out of 12 columns.
- is-5: This class is used to make an element take up the width of 5 columns out of 12 columns.
- is-6: This class is used to make an element take up the width of 6 columns out of 12 columns.
- is-7: This class is used to make an element take up the width of 7 columns out of 12 columns.
- is-8: This class is used to make an element take up the width of 8 columns out of 12 columns.
- is-9: This class is used to make an element take up the width of 9 columns out of 12 columns.
- is-10: This class is used to make an element take up the width of 10 columns out of 12 columns.
- is-11: This class is used to make an element take up the width of 11 columns out of 12 columns.
- is-12: This class is used to make an element take up the width of 12 columns out of 12 columns.
Syntax:
<div class="columns">
<div class="column is-2">...</div>
...
</div>Example: The example below illustrates the use of the 12 column system classes provided with Bulma.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bulma 12 Column System</title>
<link rel='stylesheet' href=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">
Bulma 12 Column System
</b>
<div class="container">
<!-- is-12 -->
<div class="columns">
<div class="column is-12">
<div class="notification is-link">
<code>is-12</code>
</div>
</div>
</div>
<!-- is-11 -->
<div class="columns">
<div class="column is-11">
<div class="notification is-link">
<code>is-11</code>
</div>
</div>
<div class="column">
<div class="notification is-link">
1
</div>
</div>
</div>
<!-- is-10 -->
<div class="columns">
<div class="column is-10">
<div class="notification is-link">
<code>is-10</code>
</div>
</div>
<div class="column">
<div class="notification is-link">
2
</div>
</div>
</div>
<!-- is-9 -->
<div class="columns">
<div class="column is-9">
<div class="notification is-link">
<code>is-9</code>
</div>
</div>
<div class="column">
<div class="notification is-link">
3
</div>
</div>
</div>
<!-- is-8 -->
<div class="columns">
<div class="column is-8">
<div class="notification is-link">
<code>is-8</code>
</div>
</div>
<div class="column">
<div class="notification is-link">
4
</div>
</div>
</div>
<!-- is-7 -->
<div class="columns">
<div class="column is-7">
<div class="notification is-link">
<code>is-7</code>
</div>
</div>
<div class="column">
<div class="notification is-link">
5
</div>
</div>
</div>
<!-- is-6 -->
<div class="columns">
<div class="column is-6">
<div class="notification is-link">
<code>is-6</code>
</div>
</div>
<div class="column">
<div class="notification is-link">
6
</div>
</div>
</div>
<!-- is-5 -->
<div class="columns">
<div class="column is-5">
<div class="notification is-link">
<code>is-5</code>
</div>
</div>
<div class="column">
<div class="notification is-link">
7
</div>
</div>
</div>
<!-- is-4 -->
<div class="columns">
<div class="column is-4">
<div class="notification is-link">
<code>is-4</code>
</div>
</div>
<div class="column">
<div class="notification is-link">
8
</div>
</div>
</div>
<!-- is-3 -->
<div class="columns">
<div class="column is-3">
<div class="notification is-link">
<code>is-3</code>
</div>
</div>
<div class="column">
<div class="notification is-link">
9
</div>
</div>
</div>
<!-- is-2 -->
<div class="columns">
<div class="column is-2">
<div class="notification is-link">
<code>is-2</code>
</div>
</div>
<div class="column">
<div class="notification is-link">
10
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/columns/sizes/#12-columns-system