Open In App

Bulma Align items

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-items classes are used to set the alignment of items inside the flexible container or in the given window. It aligns the Flex Items across the axis.

Bulma Align items classes:

  • is-align-items-flex-start: It is used to position items to the beginning of the container.
  • is-align-items-flex-end: It is used to position items to the end of the container.
  • is-align-items-center: It is used to position the items at the center of the container vertically.
  • is-align-items-self-start: It aligns the flex lines with equal space between them.
  • is-align-items-self-end: Space will be distributed equally around the flex lines.
  • is-align-items-start: It aligns the items at the start of the container.
  • is-align-items-end: It aligns the items at the end of the container.
  • is-align-items-stretch: This is used to stretch the items to fit the container and it is the default value
  • is-align-items-baseline: This is used to align the items to the baseline of the container

Syntax:

<div class="is-align-items-flex-start">
   ...
</div>

Example 1: The following code demonstrates the is-align-items-flex-start class.

HTML




<!DOCTYPE html>
<html>
<head>
   <title>Bulma align items</title>
   <link rel='stylesheet'
         href=
   <style>
        #main {
            height: 200px;
            border: 2px solid black;
        }
            
        #main div {
            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 items</h2>
   <h3 class="title is-5">is-align-items-flex-start</h3>
   <div id="main" 
        class="is-flex 
               is-align-items-flex-start 
               is-flex-wrap-wrap
               has-background-success">
       <div class="has-background-warning-dark">Warning</div>
       <div class="has-background-danger-dark">Danger</div>
   </div>
</body>
</html>


Output:

Bulma Align items

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

HTML




<!DOCTYPE html>
<html>
<head>
   <title>Bulma align items</title>
   <link rel='stylesheet' href=
   <style>
        #main {
            height: 200px;
            border: 2px solid black;
        }
            
        #main div {
            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 items</h2>
   <h3 class="title is-5">is-align-items-flex-end</h3>
   <div id="main" 
        class="is-flex 
               is-align-items-flex-end 
               is-flex-wrap-wrap
               has-background-success">
       <div class="has-background-warning-dark">Warning</div>
       <div class="has-background-danger-dark">Danger</div>
   </div>
</body>
</html>


Output:

Bulma Align items

Bulma Align items

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

HTML




<!DOCTYPE html>
<html>
<head>
   <title>Bulma align items</title>
   <link rel='stylesheet'
         href=
   <style>
        #main {
            height: 200px;
            border: 2px solid black;
        }
            
        #main div {
            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 items</h2>
   <h3 class="title is-5">is-align-items-center</h3>
   <div id="main" 
        class="is-flex 
               is-align-items-center
               is-flex-wrap-wrap
               has-background-success">
       <div class="has-background-warning-dark">Warning</div>
       <div class="has-background-danger-dark">Danger</div>
   </div>
</body>
</html>


Output:

Bulma Align items

Bulma Align items

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



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