Bulma Box– Bulma Css Box is basically simple container which can contain other elements. Class .box is used to create box container in Bulma. Here in this article we are going to explain how you can create box in Bulma. You can use our online editor to edit and run the code online.

Bulma Box Example

Add class .box to create simple container with shadow, border and border radius. You can use it widely for display rich contents such as media object. Here is simple example of box.

   
Tutorialsplane
   
Learn more with examples and demo.

If you run the above example it will produce output something like this-

  

    

      

        
      
    
    

      

        

          John Dee johndee@example.com 31m
          

           Hi My Name is John Dee and i am from London.
        
      
      
    
  

If you run the above example it will produce output something like this-

Video Demo

You can run video demo to see the output of the above example-

Bulma File Upload– Bulma Css provides classes to create beautiful file upload input field. It does not uses JavaScript. Here in this article, we are going to explain how you can create file upload input field in Bulma.

Bulma File Upload Example

To create basic input file upload you need to wrap input file field by div container with class file. Add label using class label. Add icon to show upload button. Here is an example-

  
    
    
      
        
      
      
        Choose a file
      
    
  

If you run the above example it will produce output something like this-

Modifiers

We can use modifiers with Bulma file upload, Like if want to show placeholder for input file.

Show Placeholder

Using .has-name modifier with .file-name you can show the placeholder for selected file.

  
 
 
   
     
   
   
     Choose a file…
   
 
 
   myfile.png
 
  

Full Width File Upload

Add modifier is-fullwidth to make fullwidth file upload.

 

  
 
 
   
     
   
   
     Choose a file…
   
 
 
   myfile.png
 
  

Box Styled

You can add box style by adding is-boxed modifier.

  
 
 
   
     
   
   
     Choose a file…
   
 
 
   myfile.png
 
  

If you run the above example it will produce output something like this-

Colors

You can use color modifiers to change the color of input file upload.

  

    
      
      
        
          
        
        
          Primary file
        
      
    
  



  

    
      
      
        
          
        
        
          Info file
        
      
      
        my__new image.png
      
    
  



  

    
      
      
        
          
        
        
          Warning file
        
      
    
  



  

    
      
      
        
          
        
        
          Danger file
        
      
      
        my__new image.png
      
    
  

Sizes

You can use size modifiers to change the size of input file field. Following sizes are available-

• .is-small
• .is-medium
• .is-large

Example

  

    
      
      
        
          
        
        
          Small file
        
      
    
  

On the same way you can use other size modifiers.

Bulma Form – Bulma Css provides form controls to create beautiful form. Here in this article we are going to explain how to create form controls. You can use our online editor to edit and run the code online.

Bulma Form Example

Following topics are covered in this tutorial-

1. Input
2. Textarea
3. Select
4. Checkbox
5. Radio
6. File

Input

To create a simple input box add class input to input box.

If you run the above example it will produce output like this –

Input Color

We can use color modifiers to change the input color for example – is-primary, is-info.

If you run the above example it will produce output something like this-

Input Size

Following sizes are available for input box-

• Small Input
• Normal Input
• Medium Input
• Large Input

Input States

Following states are available-

• Normal
• Hover
• Focus
• Loading

The output of above example will be –

Textarea

class=”textarea” is used to create textarea in Bulma.

Textarea Colors

You can change the textarea color using the modifier classes.

If you run the above example it will produce output something like this-

Textarea Sizes

You can change the size of textarea by adding the modifier classes. Following sizes are available-

• Small– To create Small Textarea Add modifier class – is-small
• Normal– By default textareas are normal in bulma so you don’t need to add anything.
• Medium Add class is-medium to create medium textarea.
• Large– To create large textarea add class is-large.

Textarea State

You can add following states in textarea by adding modifer classes-

• Hover – Add class is-hovered for hover effect.
• Focused– Add class is-focused to show focused state of textarea.
• Loading– Add class is-loading to show the loading state.

Disabled Textarea

If you want to create disabled textarea add attribute – disabled. Here is an example of disabled textarea.

Select Dropdowm

Wrap form select element by class=”select” it will add the style to default select box.

  
    Select dropdown
    Option 1
    Option 2
    Option 3
    Option 4
  

Out of above example-

Multi Select Dropdown

By adding the modifier class is-multiple, you can change the style of default muli select dropdown.

 

  
 Select dropdown
 Option 1
 Option 2
 Option 3
 Option 4
  
  

Select Dropdown Colors

You can use modifiers classes to change the dorpdown colors. In the below example we have used color modifier class – is-primary to change the dropdown menu color.

 

  
 Select dropdown
 Option 1
 Option 2
 Option 3
 Option 4
  
  

Add Icon to Select Dropdown

You can add icon to select dropdown menu. Here is an example of icon-

  

    

      
        Country
        Select dropdown
        With options
      
    
    

      
    
  

The output of above example will look something like this-

Checkbox

To style checkbox wrap the default checkbox by label class=”checkbox”.

  
  Remember me

Radio Button

You can create radio button simply as below-

  
    
    Yes
  
  
    
    No
  

Bulma Tiles– Bulma Css provides classes to create two-dimensional elements called tiles. You can create beautiful tiles layout using these classes. Here in this article we are going to explain the tiles with different-different examples.

Bulma Tiles Example

Let us create very basic tile. Create an element with class title and then add child elements. Here is an example-

	  

	    

	      
First Tile
	    
	    

	      
Second Tile
	    
	  
	  

	    

	      
Third Tile
	    
	  
	

If yo run the above example it will produce the output something like this.

Modifiers

Tiles has following modifiers-

1. 3 Contextual
   
   is-ancestor
   is-parent
   is-child
2. 1 Directional
   is-vertical
3. 12 horizontal Size
   is-1 to is-12– You can use any size like – is-1, is-2, is-3, is-4…..is-12.

Nested Tiles

You can create nested tiles using the class- tiles.

	  

	    

	      

	        

	          Title 1
	        
	        

	          Title 2
	        
	      
	      

	        

	         Title 3
	        
	      
	    
	    

	      

	        Title 4
	      
	    
	  
	  

	    

	      Title 5
	    
	  
	

If You run the above example it will look something like this –

Bulma Layout Bulma Css provides various classes that can be used to create layout such as – container, media object, section and footer etc. Here in this tutorial,we are going to explain each topics with example and demo.

Bulma Layout | Container | Section

Following topics are covered in this tutorial-

1. Container
2. Level
3. Media Object
4. Hero
5. Section
6. Footer
7. Tiles

Container

.container class is used to create container. Container class can be used anywhere but it mostly used direct child of navbar, hero, section and footer.

  

    This container is Demo Container on desktop.
  

If you run the above example it will produce the output something like this-

• On Desktop– On Desktop maximum width is 960px and it will be horizontally centered.
• On Widescreen– On widescreen maximum width is 1152px.
• On Full Hd– On Full Hd maximum width will be 1344px.

Fluid Container

If you want to create a container of full width with 24px margin on left and right side add class is-fluid to container.

	

			    This container is fluid: it will have a 24px gap on either side, on any viewport size.
         

If you run the above exmaple it will produce output something like this-

Breakpoint Containers

Using modifiers – .is-widescreen and .is-fullhd we can create fullwidth container until the specific breakpoints.

   

	This container is fullwidth until the $widescreen breakpoint.
   

Level

Level is basically container which can contain any other element.

To create level you need to create a wrapper element with class – .level then add container with class .level-left and .level-right and then add level item by adding class .level-item.

If you run the above example it will produce output something like this-

Centered Level

If you want to make the level text centered add the class- has-text-centered to the level item container.

If you run the above example it will produce output something like this-

Media Object

Bulma provides classes to create media object. Media object is basically ui element that is used for repeatable content.

 

		  

		    

		      
		    
		  
		  

		    

		      

		        John Dee @johndee 35m
		        

              This is dummy Text....		        
		        
		    
		    
		  
		  

		    
		  
		

Hero

Bulma provides classes to create Hero banners which can be used to showcase something. Class hero and hero-body is used to create hero banner.

  

    

      

        Primary title
      
      

        Primary subtitle
      
    
  

On the same way you can change the background color of Hero banner using modifier classes.

If you run the above example it will produce output something like this-

Colored Hero Banner

You can watch this video for demo-

Sections

Section is basically a container that is used to divide page into parts. Sections are directly used as child of body.

  

    

      
My Section
      

       This is simple container.
      
    
  

Footer

Bulma provides footer class to create responsive footer. Footer can contain lists, columns, icons and buttons etc.

Bulma Columns– Bulma Css provides simple classes to create responsive columns. It is very easy to create responsive columns in Bulma. Here in this article we are going to explain how you can column container and column class to create responsive columns. You can also use our online editor to edit and run the code online.

Bulma Columns

This Article contains the following topics-

1. Basics
2. Sizes
3. Responsiveness
4. Nesting
5. Gap
6. Options

1. Basics

To create column layout you need to create column container and then add as many container as you want. Here is simple example of column layout.

  

    Column 1
  
  

    Column 2
  
  

    Column 3
  
  

    Column 4
  

If you run the above example it will produce output something like this-

You can as many columns you want there is no limitation on it, Bulma will automatically handle the columns on all devices.

2. Sizes

There are various classes available that we can use to change the size of column.

• is-three-quarters
• is-two-thirds
• is-half
• is-one-third
• is-one-quarter
• is-four-fifths
• is-three-fifths
• is-two-fifths
• is-one-fifth

The columns will occupy the space as class name example -is-half ie. half width of the container. Other columns will automatically manage and adjust in remaining space.

Let us create simple example to understand the above classes.

  

 
is-four-fifths
Auto
Auto
					
					

is-three-quarters
Auto
Auto

					

is-two-thirds
Auto
Auto
 

If you run the above example it will produce output something like this-

12 Columns Grid System

Bulma Also provides classes to create 12 column grid system. Following classes are available to create grid.

• is-2
• is-3
• is-4
• is-5
• is-6
• is-7
• is-8
• is-9
• is-10
• is-11

Now let us create simple example to understand the grid system.

 

					  
is-2
					  
Auto
					
					

					  
is-3
					  
Auto
					
	
					

					  
is-4
					  
Auto
					
					

					  
is-5
					  
Auto
					
					

					  
is-6
					  
Auto
					
					

					  
is-7
					  
Auto
					
					

					  
is-8
					  
Auto
					
					

					  
is-9
					  
Auto
					
					

					  
is-10
					  
Auto
					
					

					  
is-11
					  
Auto
					
							

If you run the above example it will produce output something like this-

Offset

You can use offset classes to add offset to the columns.

• is-offset-x – Where x is number for example – is-offset-2, is-offset-3, is-offset-8, is-offset-11 etc.
• is-offset-one-fifth
• is-offset-one-quarter
• is-offset-one-quarter

Narrow Columns

If want to create a column to occupy the space that it really needs, use is-narrow modifier class.

  

    

      
Narrow column
      
 250px wide column.
    
  
  

    

      
Flexible column
      
This will cover the remaining space.
    
  

Following Narrow Modifiers are available-

• is-narrow-mobile
• is-narrow-tablet
• is-narrow-desktop

Responsiveness

There are some classes that can be used to handle the responsiveness of the application.

Mobile Columns

By default columns on mobile devices are stacked on each other. To work columns on mobile add the class is-mobile.

  
1
  
2
  
3
  
4

Now the above columns will work on mobile devices also.

Desktop Columns

If you want columns to work on desktop upwards use is-desktop class.

  
1
  
2
  
3
  
4

3. Nesting Columns

We can create nested columns by adding column container and columns inside another column.

        
First column
        

          

            
1st nested column
          
          

            
2nd nested column
          
        

Gap

Bulma provides classes to manage the gaps between the columns.

Default Gap

By default columns have gap with 0.75rem on each side hence gap between two columns is 1.5rem.

Gapless Columns

We can remove the column gaps using modifier class is-gapless.

  

    No gap
  
  

    No gap
  

is-multiline is used to combine the columns.

  

    No gap
  
  

    No gap
  

Variable Gap

If you want to add variable gaps, use the following classes-

1. is-0
2. is-1
3. is-2
4. is-3
5. is-4
6. is-5
7. is-6
8. is-7
9. is-8

Example

  

    No gap
  
  

    No gap
  

Note: Please Add is-variavle class to add the variable gap.

Column Options

Multiline

You can use is-multiline modifier to add more column elements that will fit in single row.

Centering Column

You can use the is-centered class to center align the columns in Bulma.

  

    

      is-half

      is-narrow
    
  

Bulma Modifiers– Bulma Css provides modifier classes which can be used to add the alternative styles. Using Modifier classes you can easily modify the default styles. Modifier classes starts with is- or has-. Here in this article, we are going to explain how we can use modifier classes in Bulma.

Bulma Modifiers | Helpers | Css Classes Syntax & Example

Let us understand how modifier classes works step by step.

Topics

1. Syntax
2. Helpers
3. Responsive Helpers
4. Typography Helpers

Syntax

Modifier classes starts with is- or has- for example- is-primary, is-link. Suppose we want to change the default button style we can use these modifier classes. Now let us go through some important modifier classes.

Change Button Color

There are following classes that can be used to change the button color in Bulma.

1. is-primary
2. is-link
3. is-info
4. is-success
5. is-warning
6. is-danger

Using the above modifier classes you can create the following buttons-

  Button Primary


  Button Link


  Button Info


  Button Success


  Button Warning


  Button Danger

If you run the above example it will produce output something like this-

Change Button Size

You can create small, medium or large buttons in Bulma. You can use the following classes to change size-

1. is-small
2. is-medium
3. is-large

 Button Small


Button 


Button Medium


Button Large
   

If you run the above example it will produce output something like this-

Change Button Style/State

You can create outlined, loading, disabled buttons using the following class-

1. is-outlined
2. is-loading
3. is-disabled

Button


Button


Button

Output of the above example will be-

Helpers

Following responsive classes are available which can be used easily anywhere-

1. is-clearfix– Fixes an element’s floating children
2. is-pulled-left– Moves an element to the left
3. is-pulled-right– Moves an element to the right
4. is-marginless– Removes any margin
5. is-paddingless– Removes any padding
6. is-overlay– Completely covers the first positioned parent
7. is-clipped– Adds overflow hidden
8. is-radiusless– Removes any radius
9. is-shadowless– Removes any shadow
10. is-unselectable– Prevents the text from being selectable
11. is-invisible-Adds visibility hidden

Responsive Helpers

You can use the responsive helper to show/hide the content based on viewport of device.

Show

You can use following display classes-

1. block
2. flex
3. inline
4. inline-block
5. inline-flex

Hide Classes

You can use following classes to hide on specific devices-

1. is-hidden-mobile– Hidden on Mobile devices.
2. is-hidden-tablet-only– Hidden only on Tablet.
3. is-hidden-desktop-only-Hidden only on desktop.
4. is-hidden-widescreen-only– Hidden on wide screen between 1216px and 1407px.

Typography Helpers

Bulma Installation Steps– It is very simple to install Bulma Css. There are many ways to install Bulma css. Here in this tutorial, we are going to explain the installation steps. You can also use starter template to start quickly.

Bulma Installation Steps

You can get started with Bulma Css using the one of following method-

1. Using Npm

Using Npm you can install Bulma Package simply as below-

npm install bulma

2. Using Hosted CDN

You can also use hosted CDN to include Bulma css. Add the following url in head to include Bulma css.

3. Install Locally

If you want to install Bulma locally just download files from https://github.com/jgthms/bulma/tree/master/css and include in head.

If you want to use the icons with Bulma please include font-awesome.

Quick Start

You can start with Bulma using the starter template-

  
    
    
    
    
    
  
  
  

    

      

        Welcome to Bulma!
      
      

        My first website with Bulma!
      
    
  
  

If you run the above example it will produce output something like this-

Bulma Tutorial– Bulma is Open source Modern Css framework which is lightweight, responsive & moduler. Bulma is 100% responsive and designed for mobile first, it is based on Flexbox.

Bulma Tutorial Step By Step

Here in this tutorial, we are going to cover each topic of Bulma framework with various examples & demo.

Bulma Features

• Responsive– This framework is 100% responsive which works across all devices.
• Mobile First– This is designed keeping mobile first.
• Moduler– This is built on modular approach so just import the part that you want to use for example – if you want to use only Bulma buttons just import buttons as-

  @import "bulma/sass/elements/button.sass"

• Modern– This is modern framework and built with Flexbox.
• Free And Open Source– This framework is fully opensource and free to use.

What You Should Know?

Before starting you should have basic knowledge of HTML and CSS.