Responsive Design

Stybber CSS is mobile-first and built with responsive design in mind. You can easily adjust your layout and elements based on screen size using responsive classes and breakpoints.

Breakpoints

Stybber supports the following screen size breakpoints:

Class Prefix	Min Width	Example
sm:	640px	sm:col-6
md:	768px	md:p-4
lg:	1024px	lg:text-left
xl:	1280px	xl:hide

Responsive Grid Example

<div class="row">
  <div class="col-12 sm:col-6 md:col-4">Responsive Column</div>
  <div class="col-12 sm:col-6 md:col-8">Responsive Column</div>
</div>

Responsive Text

<h1 class="text-center sm:text-left lg:text-right">Hello World</h1>

This will:

• Center text on mobile
• Align text left on tablets
• Align text right on desktops

Responsive Visibility Show or hide elements based on screen size:

• .hide — Hide on all
• sm:hide, md:hide, lg:hide — Hide on specific sizes
• .show, md:show — Show only at that size

<p class="hide md:show">Visible only on medium and up</p>

Responsive Padding & Margin

Use spacing utilities with breakpoints:

<div class="p-2 sm:p-4 md:p-6">Responsive Padding</div>

Responsive design in Stybber helps you build flexible UIs that work on all devices — mobile, tablet, and desktop. Would you like the next one on Buttons, Typography, or Forms?