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/