Bulma Layout Complete Reference

Bulma Layout can be used to design the structure of the website. It contains the different classes that can be useful to organize the data on the website.

Bulma is a free, open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior. It allows us to add our own CSS styling but it is advised to use an external stylesheet over inline styling.

The list of complete references for the Bulma Layout are given below:

Bulma Container

The Bulma container is the element that is used to center the content horizontally on the bigger screen sizes. Mostly, it is used as the child of the following navbar, hero, section, footer, … etc.

Layouts	Description
Bulma Container Default behavior	The default behavior of the container will be activated from the desktop breakpoint. When the screen size is equal to widescreen or full HD, then the container will automatically increase its maximum width.
Bulma Container Widescreen or FullHD only	With the help of widescreen or fullhd container classes, we can have the full width until there would be any breakpoints. When we want that in widescreens, the content should be in full width then we can use these container class modifiers to do so.
Bulma Desktop and Widescreen maximum widths	Bulma Desktop and Widescreen maximum widths classes provide narrow containers like desktop or widescreen container sizes.
Bulma Container Absolute maximum width	The absolute maximum width of the container is set to $fullhd breakpoint value by default.
Bulma Fluid container	A Bulma fluid container is a special type of container that does not have a maximum width and has a 32px margin on both the left and right sides. To make a container fluid container you have to add an is-fluid modifier on the container.
Bulma Container Variables	A bulma container provides a custom variable for the container that the user can apply their own theme and style.

Bulma Level

The Bulma Level is a multi-purpose horizontal level, which can contain almost any other element. The level component includes several other components that we have to add exclusively to design our content well.

Layouts	Description
Bulma Centered level	Bulma Centered Level is used to level the items in the center. To center the level, we use a has-text-centered class.
Bulma Mobile level	Bulma Mobile level is used on the level element to make it vertical on mobile devices.

Bulma Media Object

Bulma Media Object is a component that is very relevant to use in a social media interface as a part of the common commenting section.

Element	Description
Bulma Nesting Media Object	These classes are used to create nested media objects. User can do nesting a media objects up to three levels.

Bulma Hero

Bulma hero component allows you to add a full width banner to your webpage, which can optionally cover the full height of the page as well. Hero component includes several other component which we have to add exclusively to design our content well.

Layouts	Description
Bulma Hero Colors	Bulma Hero Provides different types of colors that are available for the Hero modifier. These various colors are known as color modifiers.
Bulma Hero Sizes	Bulma Hero size classes are used to set the size of the hero component. There are 5 different sizes: small, medium, large, halfheight, and fullheight.
Bulma Hero Fullheight with navbar	This modifier is used to include the navbar within the Hero section by reducing some space from the viewport.
Bulma Fullheight hero in 3 parts	The full-height hero takes up the whole height of the viewport. It can be split up into three parts: hero-head, hero-body and hero-foot.
Bulma Hero Variables	Bulma Hero variables are used to customize Hero component in own ways.

Bulma Section

A Bulma Section is a basic container that is used to divide the webpage content into different sections.

Layouts	Description
Bulma Section Sizes	There are two types of sizes to devide the webpage content in Bulma sections: medium and large.
Bulma Section Variables	Bulma Sections variables are used to customize sections in own ways.

Bulma Footer

A Bulma Footer is used to attract the users to the website and also provides the important links, about the company, contact us pages link, etc. 

Layouts	Description
Bulma Footer Variables	Bulma Footer Variables are the SCSS variables that are compiled to CSS, which in turn, are utilized to add styling in various customization options.

Bulma Tiles

Bulma provides tile elements to create a 2-dimentional layout in the form of grid tiles like pinterest, metro, etc.

Layouts	Description
Bulma Tiles Modifiers	Bulma tile modifires has 16 different modifires: 3 contextual, 1 directional, and 12 horizonal size modifires.
Bulma Nesting Tiles	Bulma nesting tiles are used to divide the webpage into several parts of different sizes.
Bulma Nesting requirements	This classes are used create nesting tiles. To done nesting need at least 3 levels of hierarchy: ancestor, parent and child.
Bulma 3 columns Tiles	There is no defined class to create 4 columns in Bulma, we just need to simply put 4 div inside of ancestor class.
Bulma 4 columns Tiles	There is no defined class to create 4 columns in Bulma, we just need to simply put 4 div inside of ancestor class.