مشروب لذيذ
x2
طبق الافطار
x3
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق.
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق.
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق.
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:
$desktop it will have a maximum width of
960px.$widescreen it will have a maximum width of
1152px.$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.
<div class="container">
<div class="notification">
This container is <strong>centered</strong> on desktop.
</div>
</div>
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:
<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>
With the two modifiers .is-widescreen and .is-fullhd, you can have a
fullwidth container
until those specific breakpoints.
$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>
$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>
