Bulma Align Self
Last Updated :
17 Feb, 2022
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
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
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
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
Reference: https://bulma.io/documentation/helpers/flexbox-helpers/#align-self
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...