layout

The structure of your webpage

container



The .container class can be used in any context, but mostly as a direct child of either:

  • .navbar
  • .hero
  • .section
  • .footer

The containers width for each breakpoint is the result of: $device - (2 * $gap). The $gap variable has a default value of 32px but can be modified.

This is how the container will behave:

  • on $desktop it will have a maximum width of 960px.
  • on $widescreen it will have a maximum width of 1152px.
  • on $fullhd it will have a maximum width of 1344px.

The values 960, 1152 and 1344 have been chosen because they are divisible by both 12 and 16.

This container is centered on desktop.
                    

                        
                        <div class="container">
                          <div class="notification">
                            This container is <strong>centered</strong> on desktop.
                          </div>
                        </div>
                        

                    
                

Fluid container

If you don't want to have a maximum width but want to keep the 32px margin on the left and right sides, add the is-fluid modifier:

This container is fluid: it will have a 32px gap on either side, on any viewport size.
                    

                        
                        <div class="container is-fluid">
                          <div class="notification">
                            This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
                            viewport size.
                          </div>
                        </div>
                        

                    
                

Breakpoint containers

With the two modifiers .is-widescreen and .is-fullhd, you can have a fullwidth container until those specific breakpoints.

This container is fullwidth until the $widescreen breakpoint.
                    

                        
                        <div class="container is-widescreen">
                          <div class="notification">
                            This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
                          </div>
                        </div>
                        

                    
                
This container is fullwidth until the $fullhd breakpoint.
                    

                        
                        <div class="container is-fullhd">
                          <div class="notification">
                            This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
                          </div>
                        </div>
                        

                    
                


القوالب المتاحة

Joo - Niche Multi-Purpose HTML Template
إبداعى 01
View more
Joo - Niche Multi-Purpose HTML Template active
شركات 01
Joo - Niche Multi-Purpose HTML Template
مطعم برجر
View more
Joo - Niche Multi-Purpose HTML Template
حفل زفاف
View more
Joo - Niche Multi-Purpose HTML Template
شركات 02
View more
Joo - Niche Multi-Purpose HTML Template
صالون حلاقة
View more
Joo - Niche Multi-Purpose HTML Template
شركة شحن
View more
Joo - Niche Multi-Purpose HTML Template
مطعم 01
View more
Joo - Niche Multi-Purpose HTML Template
منظم حفلات
View more
Joo - Niche Multi-Purpose HTML Template
شركة شحن 02
View more
Joo - Niche Multi-Purpose HTML Template
إبداعى 02
View more
Joo - Niche Multi-Purpose HTML Template
فساتين الزفاف
View more
Joo - Niche Multi-Purpose HTML Template
تحت الإنشاء
View more
Joo - Niche Multi-Purpose HTML Template
إبداعى 03
View more