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!

Banners

Banners help to divide content within a section in a bold way.

Tip

Banners will always expand to the full width of their parent.

Banner Header

Title

Subheader

Banner Footer
<div class="banner">
    <div class="banner-header">
        <h5>Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header">Title</h1>
            <h2 class="subheader">Subheader</h2>
        </div>
    </div>

    <div class="banner-footer">
        <h5>Banner Footer</h5>
    </div>
</div>

Sizes

Banners can be resized.
Banner Header

Large Banner

Subheader

Banner Footer
<div class="banner large">
    <div class="banner-header">
        <h5>Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header">Large Banner</h1>
            <h2 class="subheader">Subheader</h2>
        </div>
    </div>

    <div class="banner-footer">
        <h5>Banner Footer</h5>
    </div>
</div>
Banner Header

Medium Banner

Subheader

Banner Footer
<div class="banner medium">
    <div class="banner-header">
        <h5>Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header">Medium Banner</h1>
            <h2 class="subheader">Subheader</h2>
        </div>
    </div>

    <div class="banner-footer">
        <h5>Banner Footer</h5>
    </div>
</div>
Banner Header

Default Banner

Subheader

Banner Footer
<div class="banner">
    <div class="banner-header">
        <h5>Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header">Default Banner</h1>
            <h2 class="subheader">Subheader</h2>
        </div>
    </div>

    <div class="banner-footer">
        <h5>Banner Footer</h5>
    </div>
</div>
Banner Header

Small Banner

Subheader

Banner Footer
<div class="banner small">
    <div class="banner-header">
        <h5>Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header">Small Banner</h1>
            <h2 class="subheader">Subheader</h2>
        </div>
    </div>

    <div class="banner-footer">
        <h5>Banner Footer</h5>
    </div>
</div>
Banner Header

Fullscreen Banner

Subheader

Banner Footer
<div class="banner fullscreen">
    <div class="banner-header">
        <h5>Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header">Fullscreen Banner</h1>
            <h2 class="subheader">Subheader</h2>
        </div>
    </div>

    <div class="banner-footer">
        <h5>Banner Footer</h5>
    </div>
</div>

Alignment

Align banner text using the .text-left, .text-right, and .text-center classes.
Text-Right

Text-Center

Text-Left
<div class="banner">
    <div class="banner-header text-right">
        <h5>Text-Right</h5>
    </div>

    <div class="banner-body text-center">
        <div class="container">
            <h1 class="header">Text-Center</h1>
        </div>
    </div>

    <div class="banner-footer text-left">
        <h5>Text-Left</h5>
    </div>
</div>

Colors

Change the background color of your banner using boba's refreshing color palette.
Banner Header

bg-red

Banner Footer
<div class="banner bg-red">
    <div class="banner-header">
        <h5 class="text-white">Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header text-white">bg-red</h1>
        </div>
    </div>

    <div class="banner-footer">
        <h5 class="text-white">Banner Footer</h5>
    </div>
</div>
Banner Header

bg-green

Banner Footer
<div class="banner bg-green">
    <div class="banner-header">
        <h5 class="text-white">Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header text-white">bg-green</h1>
        </div>
    </div>

    <div class="banner-footer">
        <h5>Banner Footer</h5>
    </div>
</div>
Banner Header

bg-blue

Banner Footer
<div class="banner bg-blue">
    <div class="banner-header">
        <h5 class="text-white">Banner Header</h5>
    </div>

  <div class="banner-body">
        <div class="container">
            <h1 class="header text-white">bg-blue</h1>
        </div>
  </div>

    <div class="banner-footer">
        <h5 class="text-white">Banner Footer</h5>
    </div>
</div>