Open In App

Bulma Align items

Last Updated : 12 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-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



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 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 its design. Bulma align-content is used to specify
4 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
Primer CSS Flexbox Align Items
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 Items used to align items on the cross axis. The cross axis al
3 min read
CSS align-items Property
The align-items property is used to set the alignment of items inside the flexible container or in the given window. It aligns the Flex Items across the axis. The align-self property is used to override the align-items property. Syntax: align-items: normal|start|end|self-start|self-end |baseline, first baseline, last baseline|stretch |center|flex-s
3 min read
How to align navbar items to the right in Bootstrap 4 ?
The .ml-auto class in Bootstrap can be used to align navbar items to the right. The .ml-auto class automatically aligns elements to the right. In this article, we will align the navbar to the right in two different ways, below both the approaches are discussed with proper example. Example 1: In the first example, we use the .ml-auto class of Bootst
2 min read
How to Align Navbar Items to Center using Bootstrap 4 ?
In Bootstrap the items can be easily assigned to the left and right as it provides classes for the right and left. By default, left was set, but when it comes to aligning items to the center you have to align it by yourself as there are no in-built classes for doing this. There are basically two ways by which you can align items to the center which
2 min read
Tailwind CSS Align Items
This class accepts a lot of values in tailwind CSS. It is the alternative to the CSS Align Items property. This class is used to set the alignment of items inside the flexible container or in the given window. It aligns the flex Items across the axis. The align-self class is used to override the align-items class. Align Items Classes: items-start i
3 min read
How to align items in a flex container with JavaScript ?
In CSS, the align-items property is used to align elements in a flex container. This can be similarly implemented using JavaScript by selecting the specific element using a selector method and then using the alignItems property to set the alignment. This can be useful in situations where dynamically setting the alignment of items in the container i
2 min read
Bootstrap 5 Flex Auto margins with align-items
Bootstrap 5 Flex Auto margins with align-items are used to place the flex items vertically on top or bottom of the container using the Bootstrap classes. Flex Auto margins with align-items used classes: align-items: This class is used to set the alignment of the flex items.flex-direction: This class is used to set the direction of flex items in a c
2 min read
Article Tags :