Spacing

Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

Spacing on Bootstrap
Example

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm,md,lg,xl and xxl.

Whereproperty is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Wheresides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • s - for classes that set margin-left or padding-left
  • e - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Wheresize is one of: 0,1,2,3,4,5,6,7,8,9,10,11 & auto

Gap

When using display: grid, you can make use of gap utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a display: grid container). Gap utilities are responsive by default, and are generated via our utilities API, based on the $spacers Sass map.

Grid item 1
Grid item 2
Grid item 3
<p>When using <code>display: grid</code>, you can make use of <code>gap </code>utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a display: grid container). Gap utilities are responsive by default, and are generated via our utilities API, based on the <code>$spacers </code>Sass map.</p>
<div class="d-grid gap-3">
  <div class="p-2 bg-body-tertiary border">Grid item 1</div>
  <div class="p-2 bg-body-tertiary border">Grid item 2</div>
  <div class="p-2 bg-body-tertiary border">Grid item 3</div>
</div>

Thank you for creating with Falcon |
2023 © Themewagon

v3.19.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.


RTL Mode

Switch your language direction

RTL Documentation

Fluid Layout

Toggle container layout system

Fluid Documentation

Navigation Position

Select a suitable navigation system for your web application


Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize