Bulma Flex Direction
Last Updated :
30 Jan, 2022
In this article, we’ll be seeing flex-direction in Bulma. In Bulma, the flexbox properties are used as helpers. 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. Sometimes, the horizontal classes can be omitted as the default direction in the browser is row.
Flex-Direction classes:
- is-flex-direction-row: This class of flexbox allows the user to set a horizontal direction of the flex item.
- is-flex-direction-row-reverse: This class of flexbox allows the user to set a horizontal direction of the flex item in reverse or the opposite way.
- is-flex-direction-column: This class of flexbox allows the user to set a vertical direction of the flex item.
- is-flex-direction-column-reverse: This class of flexbox allows the user to set a vertical direction of the flex item in reverse or the opposite way.
Syntax:
// flex-row
<div class="is-flex-direction-row">
....
</div>
// flex-row-reverse
<div class="is-flex-direction-row-reverse">
....
</div>
// flex-column
<div class="is-flex-direction-column">
....
</div>
// flex-column-reverse
<div class="is-flex-direction-column-reverse">
....
</div>
Example 1: Below examples illustrate the Bulma flex-row direction:
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-primary">
Flex item 1
</div>
<div class="p-2 bd-highlight
has-background-warning">
Flex item 2
</div>
<div class="p-2 bd-highlight
has-background-danger">
Flex item 3
</div>
</div>
</div>
</body>
</html>
|
Output:
Bulma Flex direction
Example 2: Below examples illustrate the Bulma flex-row-reverse direction:
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-grey-lighter">
Flex item 1
</div>
<div class="p-2 bd-highlight
has-background-primary">
Flex item 2
</div>
<div class="p-2 bd-highlight
has-background-warning">
Flex item 3
</div>
</div>
</div>
</body>
</html>
|
Output:
Bulma Flex direction
Example 3: Below examples illustrate the Bulma flex-column direction:
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="is-flex-direction-column">
<div class="p-2 bd-highlight
has-background-grey-lighter">
Flex item 1
</div>
<div class="p-2 bd-highlight
has-background-primary">
Flex item 2
</div>
<div class="p-2 bd-highlight
has-background-warning">
Flex item 3
</div>
</div>
</div>
</body>
</html>
|
Output:
Bulma Flex direction
Example 4: Below examples illustrate the Bulma flex-column-reverse direction:
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="is-flex-direction-column-reverse">
<div class="p-2 bd-highlight
has-background-grey-lighter">
Flex item 1
</div>
<div class="p-2 bd-highlight
has-background-danger">
Flex item 2
</div>
<div class="p-2 bd-highlight
has-background-warning">
Flex item 3
</div>
</div>
</div>
</body>
</html>
|
Output:
Bulma Flex direction
Reference: https://bulma.io/documentation/helpers/flexbox-helpers/#flex-direction
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...