Bulma Justify Content
Last Updated :
08 Feb, 2022
Bulma is a modern, free and open-source CSS framework built on flexbox. It comes with pre-styled components and elements that let you create beautiful and responsive websites fast. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.
Bulma Justify content 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. It is basically used for controlling how flex and grid items are positioned along a container’s main axis.
Justify Content classes:
- is-justify-content-flex-start: It is used to align flex items or children components from the beginning of the container.
- is-justify-content-flex-end: It acts in the opposite manner of is-justify-content-flex-start. It is used to align the children’s component at the end of the container.
- is-justify-content-center: It aligns the children component at the center of the container.
- is-justify-content-space-between: The children’s components are placed with equal spacing where the item is pushed to start and the last item is pushed to end.
- is-justify-content-space-around: The space between the children component and space from the corners is the same.
- is-justify-content-space-evenly: The children component are positioned with equal spacing between them but the spacing from corners differs.
- is-justify-content-start: It aligns the children component at the start of the container.
- is-justify-content-end: It aligns the children component at the end of the container.
- is-justify-content-left: It aligns the children component at the left of the container.
- is-justify-content-right: It aligns the children component at the right of the container.
Syntax:
<element class="...">...</element>
Example 1: Following example covers the is-justify-content-flex-start class applied to the element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Justify content</title>
<link rel='stylesheet'
<style>
#main div {
margin-top: 10px;
width: 110px;
height: 120px;
border: 1px solid black;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="title is-1 has-text-success-dark">
GeeksforGeeks
</h1>
<h2 class="title is-3">Bulma Justify content</h2>
<div id="main"
class="is-flex
is-justify-content-flex-start
is-flex-direction-row">
<div class="has-background-success-dark">1</div>
<div class="has-background-success">2</div>
<div class="has-background-primary-dark">3</div>
<div class="has-background-primary">4</div>
</div>
</body>
</html>
|
Output:
Example 2: Following example covers the is-justify-content-flex-end class applied to the element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Justify content</title>
<link rel='stylesheet' href=
<style>
#main div {
margin-top: 10px;
width: 110px;
height: 120px;
border: 1px solid black;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="title is-1 has-text-success-dark">
GeeksforGeeks
</h1>
<h2 class="title is-3">Bulma Justify content</h2>
<h3 class="title is-5">is-justify-content-flex-end</h3>
<div id="main" class="is-flex
is-justify-content-flex-end is-flex-direction-row">
<div class="has-background-success-dark">1</div>
<div class="has-background-success">2</div>
<div class="has-background-primary-dark">3</div>
<div class="has-background-primary">4</div>
</div>
</body>
</html>
|
Output:
Bulma Justify Content
Example 3: Following example covers the is-justify-content-center class applied to elements.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Justify content</title>
<link rel='stylesheet' href=
<style>
#main div {
margin-top: 10px;
width: 110px;
height: 120px;
border: 1px solid black;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="title is-1 has-text-success-dark">
GeeksforGeeks
</h1>
<h2 class="title is-3">Bulma Justify content</h2>
<h3 class="title is-5">is-justify-content-center</h3>
<div id="main" class="is-flex
is-justify-content-center is-flex-direction-row">
<div class="has-background-success-dark">1</div>
<div class="has-background-success">2</div>
<div class="has-background-primary-dark">3</div>
<div class="has-background-primary">4</div>
</div>
</body>
</html>
|
Output:
Bulma Justify Content
Example 4: Following example covers the is-justify-content-space-between class applied to the element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Justify content</title>
<link rel='stylesheet' href=
<style>
#main div {
margin-top: 10px;
width: 110px;
height: 120px;
border: 1px solid black;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="title is-1 has-text-success-dark">
GeeksforGeeks
</h1>
<h2 class="title is-3">Bulma Justify content</h2>
<h3 class="title is-5">is-justify-content-space-between</h3>
<div id="main" class="is-flex
is-justify-content-space-between is-flex-direction-row">
<div class="has-background-success-dark">1</div>
<div class="has-background-success">2</div>
<div class="has-background-primary-dark">3</div>
<div class="has-background-primary">4</div>
</div>
</body>
</html>
|
Output:
Bulma Justify Content
Reference: https://bulma.io/documentation/helpers/flexbox-helpers/#justify-content
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...