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'
href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<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=
"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<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 ContentExample 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=
"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<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 ContentExample 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=
"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<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 ContentReference: https://bulma.io/documentation/helpers/flexbox-helpers/#justify-content
Similar Reads
Bulma Content Sizes Bulma Content size is an important component that has been use to define the size of the content. There are some predefined tags for the content based on that this class set the size of the content. Bulma Content Size Class: is-small: This class set the content size small.is-normal: This class set t
2 min read
Bulma Content Bulma Content is use to do the content task in the web, like if you can't use CSS or when you just want to use HTML tags directly, use content as container. It can handle almost any HTML tag like HTML <p>, <ul>, <ol>, <dl>, <h1> to <h6>, <blockquote>, <em
2 min read
Bulma Content Variables 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. Bulma Content is use to do the content task in the web, like if you can’t use CSS or when you just want t
4 min read
Bootstrap 5 Flex Justify Content Bootstrap 5 Flex Justify Content aligns items along the main axis, distributing space between or around them, facilitating flexible layouts and responsive design with various alignment options. iframe { width: 100%; height: 520px;} @media (max-width: 1146px) {.article--viewer .a-wrapper .content .te
3 min read
Bulma Fluid Container Bulma is a modern CSS framework that comes with its own library of pre-styled components that enables us to make beautiful and responsive websites easier and faster. In this article, we will be seeing the fluid container in Bulma. A fluid container is a special type of container that does not have a
2 min read
Bulma Align content 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
4 min read