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!

Sections

A semantic way to divide different sections of content.

Clarification

Use the semantic HTML section tag or the .section class to divide your pages into logical sections with sensible padding.

By default, sections will expand to occupy the entire width of its parent and do not have a fixed max-width.

Sections are best used as direct children of the main body tag and are often used to group together related containers.

Add content here.

<!-- Using the HTML section tag -->
<section>
    <!-- Content here -->
</section>

<!-- Using the .section class -->
<div class="section">
    <!-- Content here -->
</div>