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 the alignment between the lines inside a flexible container. It defines how each flex line is aligned within a flexbox and is only applicable if flex-wrap: wrap is applied i.e. if there are multiple lines of flexbox items present.
Bulma Align content classes:
- is-align-content-flex-start: It is used to display the lines at the start of the flex container.
- is-align-content-flex-end: It acts in the opposite manner of is-align-content-flex-start. It is used to align the flex lines at the end of the flex container
- is-align-content-center: Lines are placed on the center of the flex container.
- is-align-content-space-between: It aligns the flex lines with equal space between them.
- is-align-content-space-around: Space will be distributed equally around the flex lines.
- is-align-content-space-evenly: This is used to position the items evenly spaced around the items.
- is-align-content-start: It aligns the items at the start of the container.
- is-align-content-end: It aligns the items at the end of the container.
- is-align-content-stretch: This is used to stretch the items to fit the container
- is-align-content-baseline: This is used to align the items to the baseline of the container
Syntax:
<div class="is-align-content-flex-start">
...
</div>
Example 1: The following code demonstrates the is-align-content-flex-start class.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bulma align content</ title >
< link rel = 'stylesheet' href =
< style >
#main {
height: 200px;
}
#main div {
width: 50px;
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 content</ h2 >
< h3 class = "title is-5" >is-align-content-flex-start</ h3 >
< div id = "main" class="is-flex is-align-content-flex-start is-flex-wrap-wrap
has-background-success">
< div class = "has-background-light" >1</ div >
< div class = "has-background-light" >2</ div >
< div class = "has-background-light" >3</ div >
< div class = "has-background-light" >4</ div >
</ div >
</ body >
</ html >
|
Output:
Bulma Align content
Example 2: The following code demonstrates the is-align-content-flex-end class.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bulma align content</ title >
< link rel = 'stylesheet' href =
< style >
#main {
height: 200px;
}
#main div {
width: 50px;
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 content</ h2 >
< h3 class = "title is-5" >is-align-content-flex-end</ h3 >
< div id = "main" class="is-flex is-align-content-flex-end
is-flex-wrap-wrap has-background-success">
< div class = "has-background-light" >1</ div >
< div class = "has-background-light" >2</ div >
< div class = "has-background-light" >3</ div >
< div class = "has-background-light" >4</ div >
</ div >
</ body >
</ html >
|
Output:
Bulma Align content
Example 3: The following code demonstrates the is-align-content-center class.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bulma align content</ title >
< link rel = 'stylesheet' href =
< style >
#main {
height: 200px;
}
#main div {
width: 50px;
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 content</ h2 >
< h3 class = "title is-5" >is-align-content-center</ h3 >
< div id = "main" class="is-flex is-align-content-center is-flex-wrap-wrap
has-background-success">
< div class = "has-background-light" >1</ div >
< div class = "has-background-light" >2</ div >
< div class = "has-background-light" >3</ div >
< div class = "has-background-light" >4</ div >
</ div >
</ body >
</ html >
|
Output:
Bulma Align content
Example 4: The following code demonstrates the is-align-content-space-between class.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bulma align content</ title >
< link rel = 'stylesheet' href =
< style >
#main {
height: 200px;
}
#main div {
width: 50px;
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 content</ h2 >
< h3 class = "title is-5" >is-align-content-space-between</ h3 >
< div id = "main" class="is-flex is-align-content-space-between
is-flex-wrap-wrap has-background-success">
< div class = "has-background-light" >1</ div >
< div class = "has-background-light" >2</ div >
< div class = "has-background-light" >3</ div >
< div class = "has-background-light" >4</ div >
< div class = "has-background-light" >5</ div >
< div class = "has-background-light" >6</ div >
< div class = "has-background-light" >7</ div >
< div class = "has-background-light" >8</ div >
</ div >
</ body >
</ html >
|
Output:
Bulma Align content
Example 5: The following code demonstrates the is-align-content-space-around class.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bulma align content</ title >
< link rel = 'stylesheet' href =
< style >
#main {
height: 200px;
}
#main div {
width: 50px;
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 content</ h2 >
< h3 class = "title is-5" >is-align-content-space-around</ h3 >
< div id = "main" class="is-flex is-align-content-space-around
is-flex-wrap-wrap has-background-success">
< div class = "has-background-light" >1</ div >
< div class = "has-background-light" >2</ div >
< div class = "has-background-light" >3</ div >
< div class = "has-background-light" >4</ div >
< div class = "has-background-light" >5</ div >
< div class = "has-background-light" >6</ div >
< div class = "has-background-light" >7</ div >
< div class = "has-background-light" >8</ div >
</ div >
</ body >
</ html >
|
Output:
Bulma Align content
Reference Link: https://bulma.io/documentation/helpers/flexbox-helpers/#align-content
Last Updated :
07 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...