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 align-content is used to specify the alignment between the lines inside a flexible container. It defines how each flex line is aligned within a flexbox and is only applicable if flex-wrap: wrap is applied i.e. if there are multiple lines of flexbox items present.
Bulma Align content classes:
- is-align-content-flex-start: It is used to display the lines at the start of the flex container.
- is-align-content-flex-end: It acts in the opposite manner of is-align-content-flex-start. It is used to align the flex lines at the end of the flex container
- is-align-content-center: Lines are placed on the center of the flex container.
- is-align-content-space-between: It aligns the flex lines with equal space between them.
- is-align-content-space-around: Space will be distributed equally around the flex lines.
- is-align-content-space-evenly: This is used to position the items evenly spaced around the items.
- is-align-content-start: It aligns the items at the start of the container.
- is-align-content-end: It aligns the items at the end of the container.
- is-align-content-stretch: This is used to stretch the items to fit the container
- is-align-content-baseline: This is used to align the items to the baseline of the container
Syntax:
<div class="is-align-content-flex-start"> ... </div>
Example 1: The following code demonstrates the is-align-content-flex-start class.
<!DOCTYPE html>
<html>
<head>
<title>Bulma align content</title>
<link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main {
height: 200px;
}
#main div {
width: 50px;
margin: 10px;
font-size: 30px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="title is-1 has-text-success-dark">
GeeksforGeeks
</h1>
<h2 class="title is-3">Bulma align content</h2>
<h3 class="title is-5">is-align-content-flex-start</h3>
<div id="main" class="is-flex is-align-content-flex-start is-flex-wrap-wrap
has-background-success">
<div class="has-background-light">1</div>
<div class="has-background-light">2</div>
<div class="has-background-light">3</div>
<div class="has-background-light">4</div>
</div>
</body>
</html>
Output:
Example 2: The following code demonstrates the is-align-content-flex-end class.
<!DOCTYPE html>
<html>
<head>
<title>Bulma align content</title>
<link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main {
height: 200px;
}
#main div {
width: 50px;
margin: 10px;
font-size: 30px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="title is-1 has-text-success-dark">
GeeksforGeeks
</h1>
<h2 class="title is-3">Bulma align content</h2>
<h3 class="title is-5">is-align-content-flex-end</h3>
<div id="main" class="is-flex is-align-content-flex-end
is-flex-wrap-wrap has-background-success">
<div class="has-background-light">1</div>
<div class="has-background-light">2</div>
<div class="has-background-light">3</div>
<div class="has-background-light">4</div>
</div>
</body>
</html>
Output:
Example 3: The following code demonstrates the is-align-content-center class.
<!DOCTYPE html>
<html>
<head>
<title>Bulma align content</title>
<link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main {
height: 200px;
}
#main div {
width: 50px;
margin: 10px;
font-size: 30px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="title is-1 has-text-success-dark">
GeeksforGeeks
</h1>
<h2 class="title is-3">Bulma align content</h2>
<h3 class="title is-5">is-align-content-center</h3>
<div id="main" class="is-flex is-align-content-center is-flex-wrap-wrap
has-background-success">
<div class="has-background-light">1</div>
<div class="has-background-light">2</div>
<div class="has-background-light">3</div>
<div class="has-background-light">4</div>
</div>
</body>
</html>
Output:
Example 4: The following code demonstrates the is-align-content-space-between class.
<!DOCTYPE html>
<html>
<head>
<title>Bulma align content</title>
<link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main {
height: 200px;
}
#main div {
width: 50px;
margin: 10px;
font-size: 30px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="title is-1 has-text-success-dark">
GeeksforGeeks
</h1>
<h2 class="title is-3">Bulma align content</h2>
<h3 class="title is-5">is-align-content-space-between</h3>
<div id="main" class="is-flex is-align-content-space-between
is-flex-wrap-wrap has-background-success">
<div class="has-background-light">1</div>
<div class="has-background-light">2</div>
<div class="has-background-light">3</div>
<div class="has-background-light">4</div>
<div class="has-background-light">5</div>
<div class="has-background-light">6</div>
<div class="has-background-light">7</div>
<div class="has-background-light">8</div>
</div>
</body>
</html>
Output:
Example 5: The following code demonstrates the is-align-content-space-around class.
<!DOCTYPE html>
<html>
<head>
<title>Bulma align content</title>
<link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main {
height: 200px;
}
#main div {
width: 50px;
margin: 10px;
font-size: 30px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="title is-1 has-text-success-dark">
GeeksforGeeks
</h1>
<h2 class="title is-3">Bulma align content</h2>
<h3 class="title is-5">is-align-content-space-around</h3>
<div id="main" class="is-flex is-align-content-space-around
is-flex-wrap-wrap has-background-success">
<div class="has-background-light">1</div>
<div class="has-background-light">2</div>
<div class="has-background-light">3</div>
<div class="has-background-light">4</div>
<div class="has-background-light">5</div>
<div class="has-background-light">6</div>
<div class="has-background-light">7</div>
<div class="has-background-light">8</div>
</div>
</body>
</html>
Output:
Reference Link: https://bulma.io/documentation/helpers/flexbox-helpers/#align-content
