Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma Align Self

Improve Article
Save Article
  • Last Updated : 17 Feb, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!