Open In App

Bulma Flexbox

Last Updated : 26 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

A flexbox is a layout used to define various columns and rows that makes the grid-like structure. It is used to design a flexible responsive layout structure without using float or positioning.

Bulma Flexbox Components:

  • Flex Direction: The flex-direction property allows the user to set the direction of items in a flex container with direction utilities, like row, row-reverse, column, column-reverse. 
  • Flex Wrap: The flex-wrap property in Bulma allows the user to wrap the flex items either into a single line or wrapped onto multiple lines in a container. 
  • Justify Content: It is used to describe the alignment of the flexible box container. It contains the space between and around content items along the main axis of a flex container. 
  • Align content: The align-content is used to specify the alignment between the lines inside a flexible container.
  • Align items: It is used to set the alignment of items inside the flexible container or in the given window. It aligns the Flex Items across the axis.
  • Align Self: It is used to align the selected items in the flexible container in many different manners such as flex-end, center, flex-start, etc.
  • Flex grow and flex shrink: The Flex-grow tells whether the flex item can get extra space or not & the flex-shrink deals with the space not needed by flex items. These classes are used to specify how much the item will grow compared to other items inside that container.

Syntax:

<div class="Flexbox-Component-Class">
  ...
</div>

Example 1: In the below example, we will make use of the ‘is-flex-direction-row-reverse‘ to change the direction of the element.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="container">
        <h1 class="title has-text-centered">
            GeeksforGeeks
        </h1>
        <div class="columns is-flex-direction-row-reverse">
            <div class="p-2 bd-highlight 
                has-background-primary"> 1 </div>
            <div class="p-2 bd-highlight 
                has-background-primary"> 2 </div>
            <div class="p-2 bd-highlight 
                has-background-primary"> 3 </div>
            <div class="p-2 bd-highlight 
                has-background-primary"> 4 </div>
            <div class="p-2 bd-highlight 
                has-background-primary"> 5 </div>
        </div>
    </div>
</body>
</html>


Output:

 

Example 2: In the below example, we will make use of the ‘is-flex-direction-row‘ to change the size of the element.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="container">
        <h1 class="title has-text-centered">
            GeeksforGeeks
        </h1>
        <div class="columns is-flex-direction-row">
            <div class="p-2 bd-highlight
                has-background-danger"> one 
            </div>
            <div class="p-2 bd-highlight
                has-background-warning"> two 
            </div>
            <div class="p-2 bd-highlight
                has-background-danger"> three 
            </div>
        </div>
    </div>
</body>
</html>


Output:

 

Reference: https://bulma.io/documentation/helpers/flexbox-helpers/



Similar Reads

Primer CSS Flexbox Align Items
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Primer CSS Flexbox Align Items used to align items on the cross axis. The cross axis al
3 min read
Primer CSS Flexbox Flex
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Primer CSS Flexbox Flex classes are used to define the ability of a flex item to alter
3 min read
Primer CSS Flexbox Flex Direction
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Primer CSS Flexbox flex-direction is used to set the direction of the flex items in the
2 min read
Advance CSS layout with flexbox
It is also called a flexible box model. It is basically a layout model that provides an easy and clean way to arrange items within a container. Flexbox is different from the block model which is vertically bias and the inline which is horizontally bias. Flexbox was created for small-scale layouts and there's another standard called grids which is g
6 min read
Flexbox utilities in bootstrap with examples
The Flexible Box Layout Module in bootstrap is used for designing the flexible and responsive layout structure. It is used in Bootstrap 4. The d-flex class is used to create a simple flexbox container Syntax: &lt;div class="d-flex p-2"&gt;&lt;/div&gt;The d-inline-flex class is used to create an inline flexbox container Syntax: &lt;div class="d-inli
11 min read
Primer CSS Flexbox Flex Container
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Primer CSS Flexbox Flex Container is used to make an element layout it's content using
2 min read
How to set flexbox having unequal width of elements using CSS ?
The flex property in CSS is the combination of flex-grow, flex-shrink, and flex-basis property. It is used to set the length of flexible items. The flex property is much responsive and mobile friendly. It is easy to positioning child elements and the main container. The margin doesn’t collapse with the content margins. Order of any element can be e
2 min read
Bootstrap 5 Utilities Flexbox Options
Bootstrap 5 layout utility classes are a set of pre-defined classes that can be used to create responsive and flexible layouts. These classes include options for setting the width and height of elements, controlling the placement of elements using margins and padding, and arranging elements using a flexbox. In this article, we'll know about Bootstr
3 min read
How to vertically and horizontally align flexbox to center ?
As we already know, flexbox is a model and not just a CSS property.The below image shows a box with two axis, one is Main Axis (i.e. horizontal axis) and Cross Axis (i.e. vertical axis). And for aligning a flexbox in the centre, both horizontally and vertically, we are going to need to work on both of this axis. So, first of all, we need to remembe
2 min read
How to align flexbox columns left and right using CSS ?
The flex columns can be aligned left or right by using the align-content property in the flex container class. The align-content property changes the behavior of the flex-wrap property. It aligns flex lines. It is used to specify the alignment between the lines inside a flexible container. For aligning columns to the left, the align-content propert
2 min read
Article Tags :