Open In App

Bulma Align content

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



Last Updated : 07 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads