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 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
Please Login to comment...