Layout

App

Start with the application shell when a route owns navigation and viewport behavior. App composes a Sidebar navigation surface with a Page surface; choose the Sidebar variant to set their spatial relationship.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35<div class="wrapper" data-layout="app" data-shell-mode="viewport"
  data-slot="sidebar-wrapper" data-sidebar-key="app-shell"
  data-sidebar-state="expanded">
  <aside id="app-sidebar" class="sidebar offcanvas-lg offcanvas-start"
      tabindex="-1" data-slot="sidebar" data-side="left"
      data-variant="floating" data-collapsible="icon"
      aria-label="Sidebar">
    <div class="sidebar-inner" data-slot="sidebar-inner">
      <div class="sidebar-header" data-slot="sidebar-header">Sidebar navigation</div>
      <div class="sidebar-content" data-slot="sidebar-content">
        <a class="sidebar-menu-button" href="#"
                  data-slot="sidebar-menu-button">
          Overview
        </a>
      </div>
    </div>
    <button class="sidebar-rail" type="button"
          data-sidebar-rail aria-label="Toggle sidebar" tabindex="-1">
    </button>
  </aside>
  <div data-slot="page">
    <header>
      <div class="container-fluid">
        <button class="sidebar-trigger" type="button"
                  data-sidebar-trigger data-bs-target="#app-sidebar"
                  aria-controls="app-sidebar" aria-expanded="true">
          Toggle sidebar
        </button>
      </div>
    </header>
    <main id="main-content" tabindex="-1">
      <div class="container-fluid">Page content</div>
    </main>
  </div>
</div>

Sidebar

Sidebar is the App's navigation surface. Its variant changes the surface geometry without changing the Sidebar's regions, controls, or Bootstrap behavior.

Page

Page is the content surface inside an App. It is the direct content sibling of Sidebar and owns the screen's content flow and scrolling. It can contain semantic header, main, and footer regions while keeping the screen content on one shared rail.

The Page wrapper uses data-slot="page" as a structural hook so App and Catalog can coordinate layout and scroll behavior; it is not a styling requirement.

The .page class is optional. Semantic regions and the Page's position as the App's content sibling define the contract; add a class only when a styling hook is useful.

Breakpoints

Breakpoints are the mobile-first width thresholds where a Moo UI layout can change its composition. Use the class infix to apply a grid, display, or spacing change from that minimum width upward.

Start with the smallest useful layout, then add a breakpoint only when the content needs a different arrangement.

Containers

Containers keep layout content on a readable rail and apply a responsive max-width at each breakpoint. Use the fluid variant when a surface should span the available viewport width.

Grid

The Bootstrap grid arranges content into responsive columns. It uses a twelve-column row, breakpoint-specific column classes, and gutters so a layout can stack on small screens and spread across wider ones.

1
2
3
4
5
6
7<div class="container py-4">
  <div class="row row-cols-1 row-cols-md-3 g-3">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

Grid options

The table summarizes the breakpoint widths, class prefixes, and column features available in the Bootstrap grid.

Columns

Columns divide a Bootstrap row into equal-width areas. Use .row for each line and .col to share the available width evenly.

1
2
3
4
5
6
7
8
9
10
11<div class="container text-center">
  <div class="row">
    <div class="col">1 of 2</div>
    <div class="col">2 of 2</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col">2 of 3</div>
    <div class="col">3 of 3</div>
  </div>
</div>

Gutters

Gutters are the space between columns and rows. Use gx-* for horizontal gutters, gy-* for vertical gutters, or g-0 to remove gutters altogether.

1
2
3
4
5
6
7
8
9
10<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

See the Bootstrap gutters documentation for responsive gutter variants and the complete utility API.

Utilities

Bootstrap utilities are small, composable helpers for display, flex, spacing, sizing, and positioning. Add a responsive infix such as d-md-flex or mt-lg-4 when a utility should change at a breakpoint.

Compose utilities directly on the element they affect and keep the smallest useful set of classes. Start with the base utility, then add a breakpoint variant only when the layout needs to change.

See the Bootstrap utilities documentation for the complete API.

Z-index

The z-index property controls the stacking order of overlapping surfaces. Moo UI follows Bootstrap's reserved scale: dropdowns start at 1000, fixed surfaces at 1030, offcanvas backdrops at 1040, offcanvas surfaces at 1045, modal backdrops at 1050, modals at 1055, popovers at 1070, tooltips at 1080, and toasts at 1090.

Use low local values such as 1, 2, or 3 for small sibling overlaps. Avoid arbitrary high values so shared overlays keep their predictable order.

See the Bootstrap z-index documentation for the complete API.

CSS Grid

Bootstrap's CSS Grid utilities use native CSS Grid through .grid and .g-col-* classes. Unlike the Flexbox-based .row/.col grid, CSS Grid places items on a two-dimensional track system and lets each item span an explicit number of columns.

Use .g-col-6 for half-width tracks, then add a responsive span such as .g-col-md-4 when the layout should change at a breakpoint.

1
2
3
4
5
6<div class="grid gap-3">
  <div class="g-col-6">g-col-6</div>
  <div class="g-col-6">g-col-6</div>
  <div class="g-col-6 g-col-md-4">g-col-6 g-col-md-4</div>
  <div class="g-col-6 g-col-md-8">g-col-6 g-col-md-8</div>
</div>

See the Bootstrap CSS Grid documentation for custom tracks, nesting, and the complete utility API.