This tutorial will guide you in understanding Bulma Columns, Layout, and Forms with programming code examples:
In the previous tutorial, we have seen the introduction to the Bulma CSS framework. This is the second tutorial of the Bulma tutorial series.
In this tutorial, we’ve covered Bulma columns (basics, sizes, responsive columns, nested columns, gap, and layout options), layout (container, level, media object, hero, section, footer, and tile), and forms (basics, colors, sizes, states, form field, form control, form with icons, form addon, form group, horizontal form, and a full form example).
Let us begin!
Bulma Columns, Layout, and Forms
Bulma Columns
Basics
You can add any number of column elements (simply columns) inside a columns container. These column elements have equal widths. Use the columns class for the columns container and the column class for column elements.
Let’s see an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<div class="columns">
<div class="column has-background-success">
Row 1 Column 1
</div>
<div class="column has-background-info">
Row 1 Column 2
</div>
<div class="column has-background-primary">
Row 1 Column 3
</div>
<div class="column has-background-link">
Row 1 Column 4
</div>
</div>
<div class="columns">
<div class="column has-background-light">
Row 2 Column 1
</div>
<div class="column has-background-warning">
Row 2 Column 2
</div>
<div class="column has-background-grey">
Row 2 Column 3
</div>
<div class="column has-background-danger">
Row 2 Column 4
</div>
</div>
</body>
</html>
The below screenshot shows the browser output of the above code:
Sizes
By default, columns have equal widths, as we see in the above example. However, you can adjust a single column size using one of the below classes. Then, the other columns will adjust automatically.
- is-full
- is-four-fifths
- is-three-quarters
- is-two-thirds
- is-three-fifths
- is-half
- is-two-fifths
- is-one-third
- is-one-quarter
- is-one-fifth
Note: If you use the is-full class, the column will take the full width.
The Bulma grid can be divided into 12 columns. The applicable clauses are shown below:
- is-1
- is-2
- is-3
- is-4
- is-5
- is-6
- is-7
- is-8
- is-9
- is-10
- is-11
- is–12
Let’s see a couple of examples:
Example 1:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<div class="columns">
<div class="column is-full has-background-grey has-text-centered">Full Width</div>
</div>
<div class="columns">
<div class="column is-four-fifths has-background-info has-text-centered">4/5</div>
<div class="column has-background-primary has-text-centered">Auto</div>
<div class="column has-background-success has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-three-quarters has-background-grey-light has-text-centered">3/4</div>
<div class="column has-background-grey-lighter has-text-centered">Auto</div>
<div class="column has-background-light has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-two-thirds has-background-info has-text-centered">2/3</div>
<div class="column has-background-primary has-text-centered">Auto</div>
<div class="column has-background-success has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-three-fifths has-background-grey-light has-text-centered">3/5</div>
<div class="column has-background-grey-lighter has-text-centered">Auto</div>
<div class="column has-background-light has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-half has-background-info has-text-centered">1/2</div>
<div class="column has-background-primary has-text-centered">Auto</div>
<div class="column has-background-success has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-two-fifths has-background-grey-light has-text-centered">2/5</div>
<div class="column has-background-grey-lighter has-text-centered">Auto</div>
<div class="column has-background-light has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-one-third has-background-info has-text-centered">1/3</div>
<div class="column has-background-primary has-text-centered">Auto</div>
<div class="column has-background-success has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-one-quarter has-background-grey-light has-text-centered">1/4</div>
<div class="column has-background-grey-lighter has-text-centered">Auto</div>
<div class="column has-background-light has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-one-fifth has-background-info has-text-centered">1/5</div>
<div class="column has-background-primary has-text-centered">Auto</div>
<div class="column has-background-success has-text-centered">Auto</div>
</div>
</body>
</html>
The below screenshot shows the browser output of the above code:
Example 2:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<div class="columns">
<div class="column is-1 has-background-info has-text-centered">1</div>
<div class="column has-background-primary has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-2 has-background-grey-light has-text-centered">2</div>
<div class="column has-background-grey-lighter has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-3 has-background-info has-text-centered">3</div>
<div class="column has-background-primary has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-4 has-background-grey-light has-text-centered">4</div>
<div class="column has-background-grey-lighter has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-5 has-background-info has-text-centered">5</div>
<div class="column has-background-primary has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-6 has-background-grey-light has-text-centered">6</div>
<div class="column has-background-grey-lighter has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-7 has-background-info has-text-centered">7</div>
<div class="column has-background-primary has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-8 has-background-grey-light has-text-centered">8</div>
<div class="column has-background-grey-lighter has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-9 has-background-info has-text-centered">9</div>
<div class="column has-background-primary has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-10 has-background-grey-light has-text-centered">10</div>
<div class="column has-background-grey-lighter has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-11 has-background-info has-text-centered">11</div>
<div class="column has-background-primary has-text-centered">Auto</div>
</div>
<div class="columns">
<div class="column is-12 has-background-grey has-text-centered">12</div>
</div>
</body>
</html>
The below screenshot shows the browser output of the above code:
Responsive Columns
Bulma columns will adjust their size automatically with the screen size. Add the is-mobile class to work columns on mobile also or the is-desktop class to work columns only on desktop.
Let’s see an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<div class="columns is-mobile">
<div class="column has-background-info">Column A</div>
<div class="column has-background-success">Column B</div>
<div class="column has-background-warning">Column C</div>
<div class="column has-background-danger">Column D</div>
</div>
<br>
<div class="columns is-desktop">
<div class="column has-background-info">Column E</div>
<div class="column has-background-success">Column F</div>
<div class="column has-background-warning">Column G</div>
<div class="column has-background-danger">Column H</div>
</div>
</body>
</html>
The below screenshots shows the browser output of the above code:
- On the desktop screen
- On the mobile screen
Nested Columns
In Bulma, columns can be nested, which means nesting columns within another column.
Let’s see an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<div class="columns">
<div class="column">
<p class="has-background-warning">Column one</p>
<div class="columns is-mobile">
<div class="column">
<p class="has-background-danger">Nested column one</p>
</div>
<div class="column">
<p class="has-background-danger">Nested column two</p>
</div>
</div>
</div>
<div class="column">
<p class="has-background-warning">Column two</p>
<div class="columns is-mobile">
<div class="column is-half">
<p class="has-background-danger">Is-half</p>
</div>
<div class="column is-one-third">
<p class="has-background-danger">Is-one-third</p>
</div>
<div class="column">
<p class="has-background-danger">Auto</p>
</div>
</div>
</div>
</div>
</body>
</html>
The below screenshots shows the browser output of the above code:
- On the desktop screen
- On the mobile screen
Gap
You can add gaps between columns. There are 9 custom column gaps.
They are,
- is-0 (0rem) – similar to is-gapless
- is-1 (0.25rem)
- is-2 (0.5 rem)
- is-3 (0.75rem) – the default value
- is-4 (1rem)
- is-5 (1.25rem)
- is-6 (1.5rem)
- is-7( 1.75rem)
- is-8 (2rem)
Let’s see an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<p class="is-size-3">Default Gap</p>
<div class="columns">
<div class="column">
<div class="has-background-info">With gap</div>
</div>
<div class="column">
<div class="has-background-info">With gap</div>
</div>
<div class="column">
<div class="has-background-info">With gap</div>
</div>
<div class="column">
<div class="has-background-info">With gap</div>
</div>
</div>
<p class="is-size-3">Gapless</p>
<div class="columns is-gapless">
<div class="column">
<div class="has-background-info">Without gap</div>
</div>
<div class="column">
<div class="has-background-info">Without gap</div>
</div>
<div class="column">
<div class="has-background-info">Without gap</div>
</div>
<div class="column">
<div class="has-background-info">Without gap</div>
</div>
</div>
<p class="is-size-3">Multiline</p>
<div class="columns is-multiline is-mobile">
<div class="column is-half">
<div class="has-background-danger">Is-half</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-warning">Is-one-quarter</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-warning">Is-one-quarter</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-warning">Is-one-quarter</div>
</div>
<div class="column is-half">
<div class="has-background-danger">Is-half</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-warning">Is-one-quarter</div>
</div>
<div class="column is-one-third">
<div class="has-background-success">Is-one-third</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-warning">Is-one-quarter</div>
</div>
<div class="column">
<div class="has-background-primary">Auto</div>
</div>
</div>
</body>
</html>
The below screenshots shows the browser output of the above code:
- On the desktop screen
- On the mobile screen
Layout Options
There are 3 column layout options.
- Vertical alignment – Add the is-vcentered class for vertical alignment.
- Multiline – Add the is-multiline class for multiline columns.
- Centering columns – Add the is-centered class for centering columns.
Let’s see an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<p class="is-size-3">Vertical Alignment - witht is-vcentered class</p>
<div class="columns is-vcentered ">
<div class="column is-10">
<p class="has-background-info">First column</p>
</div>
<div class="column">
<p class="has-background-info">Second column with more content</p>
</div>
</div>
<p class="is-size-3">Without is-vcentered class</p>
<div class="columns">
<div class="column is-10">
<p class="has-background-info">First column</p>
</div>
<div class="column">
<p class="has-background-info">Second column with more content</p>
</div>
</div>
<p class="is-size-3">Multiline - with is-multiline class</p>
<div class="columns is-multiline is-mobile">
<div class="column is-half">
<div class="has-background-primary">Is-half</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-primary">Is-one-quarter</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-primary">Is-one-quarter</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-primary">Is-one-quarter</div>
</div>
<div class="column is-half">
<div class="has-background-primary">Is-half</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-primary">Is-one-quarter</div>
</div>
<div class="column is-one-third">
<div class="has-background-primary">Is-one-third</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-primary">Is-one-quarter</div>
</div>
<div class="column">
<div class="has-background-primary">Auto</div>
</div>
</div>
<p class="is-size-3">Without is-multiline class</p>
<div class="columns is-mobile">
<div class="column is-half">
<div class="has-background-primary">Is-half</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-primary">Is-one-quarter</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-primary">Is-one-quarter</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-primary">Is-one-quarter</div>
</div>
<div class="column is-half">
<div class="has-background-primary">Is-half</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-primary">Is-one-quarter</div>
</div>
<div class="column is-one-third">
<div class="has-background-primary">Is-one-third</div>
</div>
<div class="column is-one-quarter">
<div class="has-background-primary">Is-one-quarter</div>
</div>
<div class="column">
<div class="has-background-primary">Auto</div>
</div>
</div>
<p class="is-size-3">Centered Columns - With is-centered class</p>
<div class="columns is-mobile is-centered">
<div class="column is-one-third">
<p class="has-background-warning">Centered</p>
</div>
<div class="column is-one-third">
<p class="has-background-warning">Centered</p>
</div>
</div>
<p class="is-size-3">Without is-centered class</p>
<div class="columns is-mobile">
<div class="column is-one-third">
<p class="has-background-warning">Not centered</p>
</div>
<div class="column is-one-third">
<p class="has-background-warning">Not centered</p>
</div>
</div>
</body>
</html>
Below screenshots show the browser output of the above code:
Bulma Layout
Container
The container centers the content horizontally on a larger viewport. The container class is used for it. It can be used with many elements like a hero, section, footer, etc.
Let’s see an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<div class="container">
with container...
</div>
<div>
without container...
</div>
</body>
</html>
The below screenshot shows the browser output of the above code:
Furthermore, you can use the below size classes for different viewport widths:
| Class | Below 1023px | Desktop Between 1024px and 1215px | Widescreen Between 1216px and 1407px | FullHD 1408px and above |
|
|---|---|---|---|---|---|
| 1 | .container | Full width | 960px | 1152px | 1344px |
| 2 | .container with .is-widescreen | Full width | Full width | 1152px | 1344px |
| 3 | .container with .is-fullhd | Full width | Full width | Full width | 1344px |
| 4 | .container with .is-max-desktop | Full width | 960px | 960px | 960px |
| 5 | .container with .is-max-widescreen | Full width | 960px | 1152px | 1152px |
Level
Bulma supports horizontal levels that can contain various elements.
Below shows the structure of the level:
- level – the main container
- level-left or level-right – for the left/right side
- level-item – for each element
- level-left or level-right – for the left/right side
Let’s see an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<p class="is-size-4">Structure of a Level</p>
<nav class="level has-background-grey-lighter">
<div class="level-left has-background-info">
<p class="level-item">Item A</p>
<p class="level-item">Item B</p>
<p class="level-item">Item c</p>
</div>
<div class="level-right has-background-info">
<p class="level-item">Item D</p>
<p class="level-item">Item E</p>
<p class="level-item">Item F</p>
</div>
</nav>
<p class="is-size-4">Centered Level</p>
<nav class="level has-background-success">
<p class="level-item has-text-centered">Item A</p>
<p class="level-item has-text-centered">Item B</p>
<p class="level-item has-text-centered">Item c</p>
<p class="level-item has-text-centered">Item D</p>
<p class="level-item has-text-centered">Item E</p>
<p class="level-item has-text-centered">Item F</p>
</nav>
<p class="is-size-4">Mobile Level</p>
<nav class="level is-mobile has-background-warning">
<p class="level-item has-text-centered">Item A</p>
<p class="level-item has-text-centered">Item B</p>
<p class="level-item has-text-centered">Item c</p>
<p class="level-item has-text-centered">Item D</p>
<p class="level-item has-text-centered">Item E</p>
<p class="level-item has-text-centered">Item F</p>
</nav>
</body>
</html>
Below screenshots show the browser output of the above code:
- On the desktop screen
- On mobile screen
Media Object
Media objects are commonly used for social media interfaces.
Let’s see an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<div class="container">
<p class="is-size-4">Media Object</p>
<article class="media">
<figure class="media-left">
<p class="image is-48x48">
<img src="https://bulma.io/images/placeholders/128x128.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>John Doe</strong> <small><i>Posted on 2 hrs ago</i></small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</article>
<p class="is-size-4">Nested Media Object</p>
<article class = "media">
<figure class="media-left">
<p class="image is-48x48">
<img src="https://bulma.io/images/placeholders/128x128.png">
</p>
</figure>
<div class = "media-content">
<div class="content">
<p>
<strong>John Doe</strong> <small><i>Posted on 2 hrs ago</i></small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<article class = "media">
<figure class="media-left">
<p class="image is-48x48">
<img src="https://bulma.io/images/placeholders/128x128.png">
</p>
</figure>
<div class = "media-content">
<div class="content">
<p>
<strong>John Doe</strong> <small><i>Posted on 2 hrs ago</i></small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<article class = "media">
<figure class="media-left">
<p class="image is-48x48">
<img src="https://bulma.io/images/placeholders/128x128.png">
</p>
</figure>
<div class = "media-content">
<div class="content">
<p>
<strong>John Doe</strong> <small><i>Posted on 2 hrs ago</i></small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</article>
</div>
</article>
<article class = "media">
<figure class="media-left">
<p class="image is-48x48">
<img src="https://bulma.io/images/placeholders/128x128.png">
</p>
</figure>
<div class = "media-content">
<div class="content">
<p>
<strong>John Doe</strong> <small><i>Posted on 2 hrs ago</i></small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</article>
<article class = "media">
<figure class="media-left">
<p class="image is-48x48">
<img src="https://bulma.io/images/placeholders/128x128.png">
</p>
</figure>
<div class = "media-content">
<div class="content">
<p>
<strong>John Doe</strong> <small><i>Posted on 2 hrs ago</i></small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</article>
</div>
</article>
<article class = "media">
<figure class="media-left">
<p class="image is-48x48">
<img src="https://bulma.io/images/placeholders/128x128.png">
</p>
</figure>
<div class = "media-content">
<div class="content">
<p>
<strong>John Doe</strong> <small><i>Posted on 2 hrs ago</i></small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</article>
</div>
</body>
</html>
Below screenshots show the browser output of the above code:
Hero
A hero is similar to a banner.
In Bula, you can use the below classes to create various sizes of hero banners.
- Small – is-small
- Medium – is-medium
- Large – is-large
- Half Height – is-halfheight
- Full Height – is-fullheight
Let’s see an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<section class="hero is-primary">
<div class="hero-body">
<p class="title">
Hero
</p>
<p class="subtitle">
This is a hero banner.
</p>
</div>
</section>
</body>
</html>
The below screenshot shows the browser output of the above code:
Section
A section can be used to divide the page into different sections. A section element with the section class is used for it.
Let’s see an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<section class="section has-background-primary">
<h1 class="title">Section</h1>
<h2 class="subtitle">
This is a section.
</h2>
</section>
<section class="section has-background-link">
<h1 class="title">Another Section</h1>
<h2 class="subtitle">
This is another section.
</h2>
</section>
</body>
</html>
The below screenshot shows the browser output of the above code:
The footer element with the footer class is used to create a footer.
Let’s see an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<footer class="footer">
<p class="has-text-centered">
<strong>© All rights reserved.</strong>
</p>
</footer>
</body>
</html>
The below screenshot shows the browser output of the above code:
Tile
The tile class is the main class used to build two-dimensional grids.
Furthermore, there are 16 classes/modifiers for the tile element.
- 3 contextual classes/modifiers
- 1. is-ancestor
- 2. is-parent
- 3. is-child
- 1 directional class/modifier
- 4. is-vertical
- 12 horizontal size classes/modifiers
- 5. is-1
- 6. is-2
- 7. is-3
- 8. is-4
- 9. is-5
- 10. is-6
- 11. is-7
- 12. is-8
- 13. is-9
- 14. is-10
- 15. is-11
- 16. is-12
Let’s see an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<div class="tile is-ancestor m-2">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child notification is-primary">
<p class="title">Vertical Tile...</p>
<p class="subtitle">Top Tile</p>
</article>
<article class="tile is-child notification is-info">
<p class="title">...Vertical Tile</p>
<p class="subtitle">Bottom Tile</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-success">
<p class="title">Middle Tile</p>
<p class="subtitle">Middle Tile</p>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-danger">
<p class="title">Wide Tile</p>
<p class="subtitle">Wide Tile</p>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-warning">
<div class="content">
<p class="title">Tall Tile</p>
<p class="subtitle">Tall Tile</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vestibulum finibus. Nam fringilla urna sed dui aliquet pulvinar. Ut iaculis, lacus vitae posuere fringilla, quam tellus varius orci, nec.
</div>
</div>
</article>
</div>
</div>
</body>
</html>
The below screenshot shows the browser output of the above code:
Bulma Forms
Basics
Bulma supports the below HTML form elements and CSS classes.
- HTML form elements
- <form>
- <button>
- <input>
- <textarea>
- <label>
- CSS classes
- label
- input
- textarea
- select
- checkbox
- radio
- button
- help
Furthermore, you can use HTML attributes like disabled, readonly, etc. with Bulma Forms.
Radio and checkbox form elements are purposely not styled for preserving cross-browser compatibility.
Colors
You can use the classes below to add colors/colored outlines to the form fields like input, textarea, select, and file.
- White – is-white
- Black – is-black
- White-ter – is-light
- Grey-darker – is-dark
- Turquoise – is-primary
- Blue – is-link
- Cyan – is-info
- Green – is-success
- Yellow – is-warning
- Red – is-danger
Sizes
You can use the classes below to change the size of the form fields like input, textarea, select, and file.
- Small – is-small
- Normal (default)
- Medium – is-medium
- Large – is-large
States
You can use the classes below to change the state of the form fields like input, textarea, and select.
- Normal (default)
- Hover – is-normal
- Focus – is-focused
- Loading – is-loading
Form Field and Form Control
A form field (<div class=”field“>…</div>) acts as a container for a text label, form control and/or help text. A form control (<div class=”control“>…</div>) wraps the form elements like input, select, button and icon.
Form with Icons
You can add Fontawesome icons to the form fields. First, you need to link/add Font Awesome to your project. One easy method is to link the Font Awesome CDN to the <head> element as shown in the below example (we have used Font Awesome 5 in the example).
Use the below Bulma classes to add icons:
- has-icons-left – Put the icons on the left side
- has-icons-right– Put the icons on the right side
- icon is-left (if has-icons-left is used)
- icon is-right (if has-icons-right is used)
Full Form Example
Let’s see a full example of the form:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
</head>
<body>
<div class="container">
<div class="field">
<label class="label">Title</label>
<div class="control">
<div class="select">
<select>
<option>--Select--</option>
<option>Mr.</option>
<option>Ms.</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" placeholder="Full Name">
</div>
</div>
<div class="field">
<label class="label">Gender</label>
<div class="control">
<label class="radio">
<input type="radio" name="gender">
Male
</label>
<label class="radio">
<input type="radio" name="gender">
Female
</label>
</div>
</div>
<div class="field">
<label class="label">Address</label>
<div class="control">
<textarea class="textarea" placeholder="Type your address..."></textarea>
</div>
</div>
<div class="field">
<label class="label">Email</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-danger" type="email" placeholder="Email" value="abc@xyz.com">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-exclamation-circle"></i>
</span>
</div>
<p class="help is-danger">This email already exists.</p>
</div>
<div class="field">
<label class="label">Username</label>
<div class="control">
<input class="input" type="text" placeholder="Username (Disabled)" disabled>
</div>
</div>
<div class="field">
<label class="label">Profile Image</label>
<div class="file has-name">
<label class="file-label">
<input class="file-input" type="file" name="profile_img">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Browse...
</span>
</span>
<span class="file-name">
sample.png
</span>
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">
I agree to the <a href="#">Terms and Conditions</a> and <a href="#">Privacy Statement</a>.
</label>
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-primary mb-2">Send</button>
</div>
</div>
</div>
</body>
</html>
The below screenshot shows the browser output of the above code:
Form Addon, Form Group, and Horizontal Form
Form Addon
A form addon is used to combine form controls using the has-addons class. You can use the has-addons-centered class or the has-addons-right class to change the alignment. Further, use the is-expanded class to fill up the remaining space.
Form Group
A form group is a group of form controls. The is-grouped class is used to group controls together. You can use the is-grouped-centered class or the is-grouped-right class to change the alignment. Further, use the is-expanded class to fill up the remaining space or the is-grouped-multiline class to fill up multiple lines.
Horizontal Form
The form controls can be arranged horizontally too.
You can use the classes below for horizontal forms.
- is-horizontal – For the field container
- field-label – For the side label
- field-body – A container for the input/select/textarea
- is-grouped or has-addons – For child elements
Let’s see an example of a horizontal form with a form addon and a form group.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<div class="field is-horizontal m-2">
<div class="field-label">
<label class="label">Name</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="First Name">
</div>
</div>
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Last Name">
</div>
</div>
</div>
</div>
<div class="field is-horizontal m-2">
<div class="field-label">
<label class="label">Email</label>
</div>
<div class="field-body">
<div class="field has-addons">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Gmail">
</p>
<p class="control">
<a class="button is-static">
@gmail.com
</a>
</p>
</div>
</div>
</div>
<div class="field is-horizontal m-2">
<div class="field-label">
<!--some empty space for the left side-->
</div>
<div class="field-body">
<div class="field is-grouped">
<div class="control">
<button class="button is-primary">Register</button>
</div>
<div class="control">
<button class="button">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
The below screenshot shows the browser output of the above code:
Please use this link to find more details about Bulma Forms.
Conclusion
There can be any number of column elements inside a column’s container. The columns and column classes are used for the columns container and column elements respectively.
The container class is used to center the content horizontally on a larger viewport. Furthermore, Bulma supports level, media object, hero, section, footer, and tile.
When it comes to forms, Bulma supports HTML <form>, <button>, <input>, <textarea> and <label> form elements including the CSS classes; label, input, textarea, select, radio, checkbox, button and help.
Happy learning!
<<PREV Tutorial | NEXT Tutorial>>
Was this helpful?
Thanks for your feedback!