Containers

Containers are a fundamental building block of boodoo that contain, pad, and (sometimes) center the content within them. Use them to avoid awkward full-width horizontal layouts.

How they work

Containers are the most basic layout element in boodoo and are required when using the default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it's 100% wide all the time). While containers can be nested, most layouts do not require a nested container.

Default container

boodoo's default .container class is a responsive, fixed-width container, meaning its max-width changes at each breakpoint.

Responsive .container centered with horizontal padding

<div class="container">
  <span>Responsive container content</span>
</div>

Fluid container

Use .container-fluid for a full-width container, spanning the entire width of the viewport.

Full-width .container-fluid spanning 100% of viewport

<div class="container-fluid">
  <span>Full-width fluid content</span>
</div>

Responsive containers

boodoo comes with responsive containers which change max-width at specific breakpoints.

100% wide until small (≥576px)

100% wide until medium (≥768px)

100% wide until large (≥992px)

<div class="container-sm"><span>100% wide until small breakpoint</span></div>
<div class="container-md"><span>100% wide until medium breakpoint</span></div>
<div class="container-lg"><span>100% wide until large breakpoint</span></div>
<div class="container-xl"><span>100% wide until extra-large breakpoint</span></div>
<div class="container-xxl"><span>100% wide until extra-extra-large breakpoint</span></div>

Container widths

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px

Application Shell Chrome

For modern web applications, SaaS consoles, and enterprise portals, Boodoo provides dedicated layout chrome helpers that integrate seamlessly with grid and flexbox architectures.

App Shell Header (.shell-header) Sticky Nav

Interactive Feature Card (.feature-card)

Includes elevation hover effects and responsive border transitions.

<!-- Shell header with sticky positioning -->
<header class="shell-header d-flex align-items-center justify-content-between p-3">
  <span>Enterprise Console</span>
</header>

<!-- Shell layout with sidebar and responsive padding -->
<div class="d-flex">
  <aside class="shell-sidebar">
    <!-- Sidebar nav -->
  </aside>
  <main class="shell-pad flex-grow-1">
    <div class="feature-card">
      <h4><span>Card Title</span></h4>
      <p><span>Card description.</span></p>
    </div>
  </main>
</div>