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

Components

Learn how to build your website with boba!

Tabs

Tabs come in all of boba's colors.
  • Default
  • Tab 2
  • Tab 3
  • Tab 4
  • Red
  • Tab 2
  • Tab 3
  • Tab 4
  • Orange
  • Tab 2
  • Tab 3
  • Tab 4
  • Yellow
  • Tab 2
  • Tab 3
  • Tab 4
  • Green
  • Tab 2
  • Tab 3
  • Tab 4
  • Teal
  • Tab 2
  • Tab 3
  • Tab 4
  • Blue
  • Tab 2
  • Tab 3
  • Tab 4
  • Indigo
  • Tab 2
  • Tab 3
  • Tab 4
  • Purple
  • Tab 2
  • Tab 3
  • Tab 4
  • Pink
  • Tab 2
  • Tab 3
  • Tab 4
<div class="tabs green">
    <ul>
        <li class="active"><a href="#">Green</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>
</div>

Sizes

Tabs can be resized.
  • Small
  • Tab 2
  • Tab 3
  • Tab 4
  • Default
  • Tab 2
  • Tab 3
  • Tab 4
  • Medium
  • Tab 2
  • Tab 3
  • Tab 4
  • Large
  • Tab 2
  • Tab 3
  • Tab 4
<div class="tabs small">
    <ul>
        <li class="active"><a href="#">Large</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>
</div>

<div class="tabs">
    ...
</div>

<div class="tabs medium">
    ...
</div>

<div class="tabs large">
    ...
</div>

Styles

Change the look of your tabs with ease.

Boxed

Active tabs will have have a border around them when using the .boxed class.
  • Purple
  • Tab 2
  • Tab 3
  • Tab 4
  • Orange
  • Tab 2
  • Tab 3
  • Tab 4
<div class="tabs boxed green">
    <ul>
        <li class="active"><a href="#">Green</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>
</div>