Standard
Layout
General
Form
Helpers
Responsiveness
Overview
Use responsive classes to define how the grid behaves at different screen sizes.
Breakpoints
Under the grid system, each column's width can be defined for a specific viewport size: mobile, tablet, desktop, widescreen and fullhd.
Class (x can take values between 1 and 12) | Breakpoint |
is-x-mobile |
Up to 768px |
is-x-tablet |
Between 768px to 1023px |
is-x-desktop |
Between 1024px to 1215px |
is-x-widescreen |
Between 1216px to 1407px |
is-x-fullhd |
1408px and above |
Resize the browser to see how the columns respond to different screen sizes
Learn more about the grid system
Learn more about the grid system
is-11-mobile
is-7-tablet
is-5-desktop
is-3-widescreen
is-1-fullhd
Col
<div class="sgds-container">
<div class="row is-mobile">
<div class="col is-11-mobile is-7-tablet is-5-desktop is-3-widescreen is-1-fullhd">
<br />
<code>is-11-mobile</code><br>
<code>is-7-tablet</code><br>
<code>is-5-desktop</code><br>
<code>is-3-widescreen</code><br>
<code>is-1-fullhd</code>
</div>
<div class="col">Col</div>
</div>
</div>
Mobile Columns
By default, columns col
are stacked on top of each other on mobile.
To have columns displayed in a row on mobile, add the is-mobile
class to the row
container:
1
1
1
1
<div class="sgds-container">
<div class="row is-mobile">
<div class="col">1</div>
<div class="col">1</div>
<div class="col">1</div>
<div class="col">1</div>
</div>
</div>
To display columns only on desktop (1024px) and above, add the
is-desktop
class on the row
container:
1
1
1
1
<div class="sgds-container">
<div class="row is-desktop">
<div class="col">1</div>
<div class="col">1</div>
<div class="col">1</div>
<div class="col">1</div>
</div>
</div>
Feedback
Having troubles with the guide? Please give us more details and we'll get back to you soon.
Chat with the team