Spacing & Layout

Grid System

The KMG Design System uses Bootstrap 5's 12-column grid system with Argon Dashboard's sidebar layout.

Standard Page Layout

<body class="g-sidenav-show bg-gray-100">
  <aside class="sidenav"><!-- Sidebar --></aside>
  <main class="main-content">
    <div class="container-fluid py-4">
      <div class="row">
        <div class="col-lg-8"><!-- Main content --></div>
        <div class="col-lg-4"><!-- Sidebar content --></div>
      </div>
    </div>
  </main>
</body>

Breakpoints

Breakpoint Min Width Container Max Width
xs 0 auto
sm 576px 540px
md 768px 720px
lg 992px 960px
xl 1200px 1140px
xxl 1400px 1320px

Spacing Scale

Bootstrap's spacing utilities use a scale from 0-5:

Class Suffix Value
0 0
1 0.25rem (4px)
2 0.5rem (8px)
3 1rem (16px)
4 1.5rem (24px)
5 3rem (48px)
mt-3 mb-4 — Top margin 1rem, bottom margin 1.5rem
mx-auto — Horizontally centered
p-4 — All padding 1.5rem
py-3 px-4 — Vertical 1rem, horizontal 1.5rem
<!-- Margin -->
<div class="mt-3 mb-4">Top margin 1rem, bottom margin 1.5rem</div>
<div class="mx-auto">Horizontally centered</div>

<!-- Padding -->
<div class="p-4">All padding 1.5rem</div>
<div class="py-3 px-4">Vertical 1rem, horizontal 1.5rem</div>

Card Spacing

  • Cards should have mb-4 (margin-bottom: 1.5rem) between them
  • Card body padding: p-4 (1.5rem)
  • Card header: pb-0 with content starting at pt-2

Best Practices

  • Use container-fluid inside the main content area (the sidebar already provides side margins)
  • Maintain consistent vertical rhythm with mb-4 between major sections
  • Use py-4 on the main container for top/bottom page padding
  • Cards are the primary content container; avoid bare text outside cards
On this page