Open In App

Bulma Align Self

Last Updated : 17 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 self is used to align the selected items in the flexible container in many different manners such as flex-end, center, flex-start, etc.

Bulma Align self classes:

  • is-align-self-auto: It is used to inherit its parent container align-items property or stretched if it has no parent container. It is a default value.
  • is-align-self-flex-start: It is used to align the selected item at the beginning of the flexible container.
  • is-align-self-flex-end: It is used to position the selected item at the end of the flexible container.
  • is-align-self-center: It is used to place the item at the center of the flexible container.
  • is-align-self-baseline: Using this class, the item is placed at the baseline of the flexible container.
  • is-align-self-stretch: It is used to position the elements to fit the container.

Syntax:

<div class="Align-self-classest">
 ....
</div>

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

HTML




<!DOCTYPE html>
<html>
<head>
   <title>Bulma Align Self</title>
   <link rel='stylesheet' href=
   <style>
        #main {
            height: 200px;
            border: 4px solid black;
        }
              
        #main div {
            width: 100px;
            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 Self</h2>
   <h3 class="title is-5">is-align-self-flex-start</h3>
   <div id="main" class="is-flex is-flex-direction-row">
       <div class="has-background-success 
            is-align-self-flex-start">Geeks</div>
       <div class="has-background-success-dark">For</div>
       <div class="has-background-primary-dark">Geeks</div>
       <div class="has-background-primary">GPL</div>
   </div>
</body>
</html>


Output:

Bulma Align self

Bulma Align self

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

HTML




<!DOCTYPE html>
<html>
<head>
   <title>Bulma Align Self</title>
   <link rel='stylesheet' href=
   <style>
        #main {
            height: 200px;
            border: 4px solid black;
        }
              
        #main div {
            width: 100px;
            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 Self</h2>
   <h3 class="title is-5">is-align-self-flex-end</h3>
   <div id="main" class="is-flex is-flex-direction-row">
       <div class="has-background-success 
            is-align-self-flex-end">Geeks</div>
       <div class="has-background-success-dark">For</div>
       <div class="has-background-primary-dark">Geeks</div>
       <div class="has-background-primary">GPL</div>
   </div>
</body>
</html>


Output:

Bulma Align self

Bulma Align self

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

HTML




<!DOCTYPE html>
<html>
<head>
   <title>Bulma Align Self</title>
   <link rel='stylesheet' href=
   <style>
        #main {
            height: 200px;
            border: 4px solid black;
        }
              
        #main div {
            width: 100px;
            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 Self</h2>
   <h3 class="title is-5">is-align-self-center</h3>
   <div id="main" class="is-flex is-flex-direction-row">
       <div class="has-background-success 
            is-align-self-center">Geeks</div>
       <div class="has-background-success-dark">For</div>
       <div class="has-background-primary-dark">Geeks</div>
       <div class="has-background-primary">GPL</div>
   </div>
</body>
</html>


Output:

Bulma Align self

Bulma Align self

Example 4: The following code demonstrates the is-align-self-auto class.

HTML




<!DOCTYPE html>
<html>
<head>
   <title>Bulma Align Self</title>
   <link rel='stylesheet' href=
   <style>
        #main {
            height: 200px;
            border: 4px solid black;
        }
              
        #main div {
            width: 100px;
            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 Self</h2>
   <h3 class="title is-5">is-align-self-auto</h3>
   <div id="main" class="is-flex is-flex-direction-row">
       <div class="has-background-success 
            is-align-self-auto">Geeks</div>
       <div class="has-background-success-dark">For</div>
       <div class="has-background-primary-dark">Geeks</div>
       <div class="has-background-primary">GPL</div>
   </div>
</body>
</html>


Output:

Bulma Align self

Bulma Align self

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



Similar Reads

CSS align-self Property
The align-self property in CSS is used to align the selected items in the flexible container in many different manners such as flex-end, center, flex-start, etc. Syntax: align-self: auto|normal|self-start|self-end|stretch|center |baseline, first baseline, last baseline|flex-start |flex-end|baseline|safe|unsafe;Property values: auto: This property i
5 min read
Bootstrap 5 Flex Align Self
Bootstrap5 Flex Align Self property is used to change each item's alignment individually on the cross-axis. By default, it starts from the y-axis, if we want to change the alignment on the x-axis change the value of the class flex-direction to the column. There are some classes that can be used to set the alignment. Flex Align Self class: align-sel
3 min read
Tailwind CSS Align Self
This class accepts lots of values in tailwind CSS. It is the alternative to the CSS Align Self property. This class is used to control how an individual flex or grid item is positioned along its container's cross axis. Align Self Classes: self-auto self-start self-end self-center self-stretch self-auto: This class is used to inherit its parent cont
3 min read
How to align-self element positioned at the baseline of the container ?
In this article, we will learn how to self-align an element at the baseline of the container. This can be achieved using the CSS align-self property. This property is a sub-part of the Flexbox module and helps to override the alignment of the specific flex item. To align an element positioned at the baseline of the container, you can use the CSS pr
1 min read
How to set align-self property to its default value in CSS ?
In this article, we will learn how to set the align-self property to its default value. The align-self property is used to specify the alignment for the chosen item within the parent element. Approach: The auto value in the align-self property is used to set the default value in CSS. This value makes this property directly inherit its behavior of t
2 min read
Primer CSS Flexbox Align Self
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 Self classes are used to adjust the alignment of an individual
3 min read
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 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
New self vs. new static in PHP
New self: The self is keyword in PHP. It refers to the same class in which the new keyword is actually written. It refers to the class members, but not for any particular object. This is because the static members(variables or functions) are class members shared by all the objects of the class. The function called self::theFunction() behaves like "
4 min read