Get boba!
boba Version 1.7.2
  • Introduction
  • Installation
  • Customize
  • Compatibility
  • Changelog
  • Breakpoints
  • Colors
  • Typography
  • Containers
  • Grid
  • Navbar
  • Sections
  • Sidebar
  • Banners
  • Breadcrumbs
  • Cards
  • Collapsible
  • Messages
  • Notifications
  • Pagination
  • Tabs
  • Tables
  • Blockquotes
  • Buttons
  • Code
  • Counters
  • Descriptions
  • Dividers
  • Labels
  • Lists
  • Progress
  • Checkboxes
  • Inputs
  • Radios
  • Selects
  • Switches
  • Textareas
  • Animations
  • Background
  • Borders
  • Display
  • Flex
  • Images
  • Shadows
  • Shapes
  • Sizing
  • Spacing
  • Text

Layout

Learn how to build your website with boba!

Containers

Responsive containers to horizontally center your content.

Clarification

Containers are used to wrap related blocks of content and horizontally center the content group within its parent.

To ensure high readability on large displays, containers limit the max-width of its content to 1280px.

Use sections to group related containers. Place rows within containers to ensure optimal positioning and sizing of your grid.

Section 1

Container 1
Container 2
Container 3

Section 2

Container 4
Container 5
Container 6
<div class="section">
    <div class="container">
        <!-- Content here -->
    </div>

    <div class="container">
        <!-- Content here -->
    </div>

    <div class="container">
        <!-- Content here -->
    </div>
</div>