Grid System
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes.
| Small (sm) | Medium (md) | Large (lg) | Extra Large (xl) | Other | |
|---|---|---|---|---|---|
| Breakpoint width (px) |
≥576px | ≥768px | ≥992px | ≥1200px | Applies to all screen sizes |
| Container max-width |
540px | 720px | 960px | 1140px | - |
| Class | .sp-col-sm-* | .sp-col-md-* | .sp-col-lg-* | .sp-col-xl-* | .sp-col-* |
sp-col
sp-col
sp-col-12
sp-col-6
sp-col-3
sp-col-3
sp-col-lg-3
sp-col-sm-12
sp-col-sm-12
sp-col-lg-9
sp-col-sm-12
sp-col-sm-12
Copy Example
<div class="sp-row">
<div class="sp-col sp-bg-primary">sp-col</div>
<div class="sp-col sp-bg-secondary">sp-col</div>
</div>
<div class="sp-row">
<div class="sp-col-12 sp-bg-primary">sp-col-12</div>
</div>
<div class="sp-row">
<div class="sp-col-6 sp-bg-primary">sp-col-6</div>
<div class="sp-col-3 sp-bg-secondary">sp-col-3</div>
<div class="sp-col-3 sp-bg-primary">sp-col-3</div>
</div>
<div class="sp-row">
<div class="sp-col-lg-3 sp-col-sm-12 sp-bg-secondary">sp-col-lg-3 sp-col-sm-12</div>
<div class="sp-col-lg-9 sp-col-sm-12 sp-bg-primary">sp-col-lg-9 sp-col-sm-12</div>
</div>
Responsive Display
Quickly and responsively toggle the display value of components with our display utilities.
| Class | Small (sm) | Medium (md) | Large (lg) |
|---|---|---|---|
| .sp-hidden | .sp-sm-hidden | .sp-md-hidden | .sp-lg-hidden |
| .sp-block | .sp-sm-block | .sp-md-block | .sp-lg-block |
| .sp-flex | .sp-sm-flex | .sp-md-flex | .sp-lg-flex |
| .sp-inline | .sp-sm-inline | .sp-md-inline | .sp-lg-inline |
Block
Inline
Inline
Flex(center)
Copy Example
<div class="sp-hidden"></div>
<div class="sp-block"></div>
<div class="sp-flex"></div>
<div class="sp-inline"></div>
Responsive Margin & Padding
SP includes a wide range of shorthand responsive margin and padding classes to modify element’s appearance.
| Property | Base | Small (sm) | Medium (md) | Large (lg) |
|---|---|---|---|---|
| .sp-{size}-m-{value} | .sp-m-1 | .sp-sm-m-2 | .sp-md-m-3 | .sp-lg-m-4 |
| .sp-{size}-p-{value} | .sp-p-1 | .sp-sm-p-2 | .sp-md-p-3 | .sp-lg-p-4 |
| .sp-{size}-mt-{value} | .sp-mt-1 | .sp-sm-mt-2 | .sp-md-mt-3 | .sp-lg-mt-4 |
| .sp-{size}-mb-{value} | .sp-mb-1 | .sp-sm-mb-2 | .sp-md-mb-3 | .sp-lg-mb-4 |
| .sp-{size}-ms-{value} | .sp-ms-1 | .sp-sm-ms-2 | .sp-md-ms-3 | .sp-lg-ms-4 |
| .sp-{size}-me-{value} | .sp-me-1 | .sp-sm-me-2 | .sp-md-me-3 | .sp-lg-me-4 |
* {size} is an optional breakpoint, while {value} is either a numeric value (0 to 8), or "auto" for automatic margin.
sp-m-3
sp-mt-3
sp-mb-3
sp-p-3
Copy Example
<div class="sp-m-3"></div>
<div class="sp-mt-3"></div>
<div class="sp-mb-3"></div>
<div class="sp-p-3"></div>
Text Alignment
Quickly align text to components using text alignment classes.
Text Left
Text Right
Text Center
Text Justify
Copy Example
<div class="sp-text-left">Text Left</div>
<div class="sp-text-right">Text Right</div>
<div class="sp-text-justify">Text Center</div>
<div class="sp-text-center">Text Justify</div>
Flexbox Utilities
Efficiently manage the layout, alignment, and spacing of elements with a comprehensive set of responsive Flexbox Utilities, perfect for creating flexible and adaptive designs across various components and containers.
| Class | Base | Small (sm) | Medium (md) | Large (lg) |
|---|---|---|---|---|
| .sp-{size}-flex-{direction} | .sp-flex-row | .sp-sm-flex-row-reverse | .sp-md-flex-column | .sp-lg-flex-column-reverse |
| .sp-{size}-justify-content-{side} | .sp-justify-content-justify | .sp-sm-justify-content-left | .sp-md-justify-content-center | .sp-lg-justify-content-right |
| .sp-{size}-align-items-{position} | .sp-align-items-stretch | .sp-sm-align-items-top | .sp-md-align-items-center | .sp-lg-align-items-bottom |
sp-justify-content-justify &
sp-align-items-center
sp-align-items-top
sp-align-items-bottom
sp-justify-content-center
Copy Example
<div class="sp-flex sp-flex-row sp-justify-content-justify sp-align-items-center">
<div>sp-justify-content-justify &</div>
<div>sp-align-items-center</div>
</div>
<div class="sp-flex sp-flex-column sp-align-items-top">
<div>sp-align-items-top</div>
</div>
<div class="sp-flex sp-flex-column sp-align-items-bottom">
<div>sp-align-items-bottom</div>
</div>
<div class="sp-flex sp-justify-content-center">
<div>sp-justify-content-center</div>
</div>
Positions
Use these helpers for quickly configuring the position of an element.
Copy Example
<div class="position-shape sp-position-absolute sp-top-0 sp-start-5"></div>
<div class="position-shape sp-position-absolute sp-top-50 sp-start-45"></div>
<div class="position-shape sp-position-absolute sp-top-100 sp-start-85"></div>
Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Copy Example
<div class="sp-mb-3">
<label for="exampleInputEmail1" class="sp-form-label"></label>
<input type="email" class="sp-form-control" id="exampleInputEmail1">
</input>
<div id="emailHelp" class="sp-form-text"></div>
</div>
<div class="sp-mb-3">
<label for="exampleInputPassword1" class="sp-form-label"></label>
<input type="password" class="sp-form-control" id="exampleInputPassword1">
</input>
</div>
<div class="sp-mb-3 sp-form-check">
<input type="checkbox" class="sp-form-check-input" id="exampleCheck1"></input>
<label class="sp-form-check-label" for="exampleCheck1"></label>
</div>
<button type="submit" class="sp-btn sp-btn-secondary"></button>
Align Items
Use the align-items utilities on flexbox containers to adjust the alignment of flex items.
Align Items Start
Align Items Center
Align Items End
Align Items Stretch
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Copy Example
<div class="sp-align-items-top"></div>
<div class="sp-align-items-bottom"></div>
<div class="sp-align-items-center"></div>
<div class="sp-align-items-stretch"></div>