Bulma Align content
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 = "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" > < 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" > w3wiki </ 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:
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 = "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" > < 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" > w3wiki </ 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:
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 = "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" > < 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" > w3wiki </ 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:
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 = "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" > < 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" > w3wiki </ 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:
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 = "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" > < 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" > w3wiki </ 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:
Reference Link: https://bulma.io/documentation/helpers/flexbox-helpers/#align-content