Open In App

Bulma Align content

Last Updated : 07 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html>
<head>
   <title>Bulma align content</title>
   <link rel='stylesheet' href=
   <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:

Bulma Align content

Bulma Align content

Example 2: The following code demonstrates the is-align-content-flex-end class.

HTML




<!DOCTYPE html>
<html>
<head>
   <title>Bulma align content</title>
   <link rel='stylesheet'  href=
   <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:

Bulma Align content

Bulma Align content

Example 3:  The following code demonstrates the is-align-content-center class.

HTML




<!DOCTYPE html>
<html>
<head>
   <title>Bulma align content</title>
   <link rel='stylesheet' href=
   <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:

Bulma Align content

Bulma Align content

Example 4: The following code demonstrates the is-align-content-space-between class.

HTML




<!DOCTYPE html>
<html>
<head>
   <title>Bulma align content</title>
   <link rel='stylesheet' href=
   <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:

Bulma Align content

Bulma Align content

Example 5: The following code demonstrates the is-align-content-space-around class.

HTML




<!DOCTYPE html>
<html>
<head>
   <title>Bulma align content</title>
   <link rel='stylesheet' href=
   <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:

Bulma Align content

Bulma Align content

Reference Link: https://bulma.io/documentation/helpers/flexbox-helpers/#align-content



Similar Reads

Difference between align-content and align-items
Both align-content and align-items function on the cross-axis.Cross-axis in flexbox is dependent on the flex-direction and runs perpendicular to the main-axis, if flex-direction is either row or row-reverse then the cross-axis is vertical, if flex-direction is either column or column-reverse then the cross-axis is horizontal. align-content align-it
4 min read
Bulma Align items
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-items classes are used to
3 min read
Bulma Align Self
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 self is used to align the
3 min read
CSS align-content property
The align-content property changes the behavior of the flex-wrap property. It aligns flex lines. It is used to specify the alignment between the lines inside a flexible container. This property 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 item
4 min read
How to align content of a div to the bottom using CSS ?
Basic property of CSS: position: The position property specifies the type of positioning method used for an elements. For example static, relative, absolute and fixed.bottom: The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.left: The left property affects the horizonta
2 min read
How to use Bootstrap to align labels with content into 4 columns ?
The motive of this article is to align the content into four columns where the first two columns denote the labels and its content and the last two columns denote the labels and its content. The class "row" and "col" are used to create a grid which can be represented by a number of rows and columns. The class "row" creates a row into which the cont
2 min read
How to horizontal align text content into center in HTML ?
In this article, we will align the text content into center using HTML. We use align="center" attribute to set the text content into center. Syntax: &lt;element_name align="center"&gt; Contents... &lt;element_name&gt; The align="center" attribute is used to set the text content into center. Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt;
1 min read
Tailwind CSS Align Content
This class accepts lots of values in Tailwind CSS. It is the alternative to the CSS Align Content property. This class is used for changing the behavior of the flex-wrap property. It aligns flex lines. It is used to specify the alignment between the lines inside a flexible container. This property defines how each flex line is aligned within a flex
4 min read
How to set default value to align content in CSS ?
In this article, we will learn how to set the default value to align content to its default value in CSS. The align-content property is used to align content within a specified container. Approach: The normal value of the align-content property is used to set the default value in CSS. It sets its default value to initial which is stretch for align-
2 min read
Primer CSS Flexbox Align Content
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Primer CSS Flexbox Align Content is used to create multiple main axis lines and adds ex
4 min read
Article Tags :