Bulma Container Overview
Bulma is an open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.
The container is the element that is used to center the content horizontally on the bigger screen sizes. Mostly, it is used as the child of the following navbar, hero, section, footer.
When we have larger viewports then we need to center the elements then we can use the container classes to do this. There are some container classes available as shown below.
Bulma Container classes:
- .container : It has full width in screens with size less than 1024px.
- .container.is-widescreen: It has full width in screen with size less than 1215px.
- .container.is-fullhd: It has full width in screen below 1407px.
- .container.is-max-desktop: It has full width only in screen less than 1024px and after that width will be 960px
- .container.is-max-widescreen: It has full width in screen below 1024px and 960px when screen type is desktop and after that 1152px.
Screen sizes⇢ Classes ⇣ |
Below 1024px |
Desktop Between 1024px and 1215 px |
Widescreens Between 1216 px and 1407 px |
Full HD screen greater than 1408 px |
---|---|---|---|---|
Classes | maximum-width | maximum-width | maximum-width | maximum-width |
.container | Full-width | 960px | 1152px | 1344px |
.container.is-widescreen | Full-width | Full-width | 1152px | 1344px |
.container.is-fullhd | Full-width | Full-width | Full-width | 1344px |
.container.is-max-desktop | Full-width | 960px | 960px | 960px |
.container.is-max-widescreen | Full-width | 960px | 1152px | 1152px |
Syntax:
<div class="container Container-Class"> .... </div>
Example 1: The following code demonstrates the container class. The container width will be full below the screen size of 1024px as shown below.
HTML
<!DOCTYPE html> < html > < head > < title >Bulma Container</ title > < link rel = 'stylesheet' href = 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css' > </ head > < body > < h1 class = "is-size-2 has-text-success" > w3wiki </ h1 > < b class = "is-size-4" > Bulma Container overview </ b > < div class = "container" > < div style="background-color:black; height:200px;"> < p style = "color:white; size:30;" > The container width will be full below screen size of 1024px </ p > < h3 style = "color:white; size:30;" > w3wiki </ h3 > </ div > </ div > </ body > </ html > |
Output:
Example 2: The following code uses is-fullhd modifier class. The container width will be full below the screen size of 1407px.
HTML
<!DOCTYPE html> < html > < head > < title >Bulma Container</ title > < link rel = 'stylesheet' href = 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css' > </ head > < body > < h1 class = "is-size-2 has-text-success" > w3wiki </ h1 > < b class = "is-size-4" > Bulma Container overview </ b > < div class = "container is-fullhd" > < div class = "" style="background-color:black; height:200px;"> < p style = "color:white; size:30;" > Using is-fullhd class </ p > < p style = "color:white; size:30;" > The container width will be full below screen size of 1407px </ p > < h3 style = "color:white; size:30;" > w3wiki </ h3 > </ div > </ div > </ body > </ html > |
Output:
Reference: https://bulma.io/documentation/layout/container/#overview