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.
<!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:
Example 2: The following code demonstrates the is-align-items-flex-end class.
<!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
Example 3: The following code demonstrates the is-align-items-center class.
<!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
Reference: https://bulma.io/documentation/helpers/flexbox-helpers/#align-items