Branded Bootstrap5

Bootstrap 5 powers the responsive, mobile-first foundation of MOKO-CASSIOPEIA, delivering a robust grid system, prebuilt components, and utility classes for rapid development. This framework has been fully integrated with Moko Consulting’s brand-specific customizations—leveraging CSS variables, typography settings, and color palettes to create a consistent, distinctive visual identity. The result is a modern, accessible design system that adapts seamlessly to any device while maintaining both performance and brand integrity.

 

Brand + Bootstrap Showcase

Comprehensive components with toggleable code samples

 

<nav class='d-flex align-items-center gap-3 px-3 py-2' style='background: var(--nav-bg-color);'>
  <span class='fw-bold' style='color: var(--nav-text-color);'>Brand Nav</span>
  <a class='text-decoration-none' style='color: var(--mainmenu-nav-link-color);'>Home</a>
  <a class='text-decoration-none' style='color: var(--mainmenu-nav-link-color);'>About</a>
  <a class='text-decoration-none ms-auto fw-semibold' style='color: var(--accent-color-secondary);'>Contact</a>
</nav>

Typography

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Curabitur ullamcorper nec nisi a themed link. Nulla vitae <section> purus.

‘Design is intelligence made visible.’

Alina Wheeler

Display 1

Display 2

Display 3

Display 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<h1>H1 Heading</h1> … <h6>H6 Heading</h6>
<h1 class='display-4'>Display 4</h1>
<p class='lead'>Lorem ipsum…</p>
<blockquote class='blockquote border-start ps-3' style='border-left: var(--border) solid var(--accent-color-primary);'>…</blockquote>

Buttons & Button Groups

Demonstrates solid, outline, link, and brand-accent examples.

<button class='btn btn-primary'>Primary</button> …
<div class='btn-group' role='group'>…</div>

Badges & Alerts

Primary Secondary Success Warning Danger Info Dark Accent
<span class='badge text-bg-primary'>Primary</span> …
<div class='alert alert-warning' role='alert'>…</div>

Tables

Striped, bordered table with badges and actions.

#NameStatusNotesAction
1 Alpha Active Lorem ipsum dolor sit amet.
2 Beta Pending Integer posuere erat a ante venenatis.
3 Gamma Blocked Donec id elit non mi porta gravida. 
<table class='table table-striped table-bordered'>…</table>

Forms

@ 
<form class='row g-3'>…</form>

Cards & List Groups

Featured
Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Go somewhere
  • Active item
  • Second item
  • With badge 4
<div class='card'>…</div>
<ul class='list-group'>…</ul>

Navs, Tabs, Breadcrumb, Pagination

Lorem ipsum dolor sit amet, consectetur.
Integer posuere erat a ante venenatis.
Aenean lacinia bibendum nulla sed.
<ul class='nav nav-tabs'>…</ul>
<div class='tab-content'>…</div>
<ol class='breadcrumb'>…</ol>
<ul class='pagination'>…</ul>

Progress & Accordion

25%
65%

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
<div class='progress'><div class='progress-bar' style='width:25%'>25%</div></div>
<div class='accordion' id='demoAccordion'>…</div>

Tooltips, Popovers & Modal

<button data-bs-toggle='tooltip' data-bs-title='…'>…</button>
<button data-bs-toggle='popover' data-bs-title='…' data-bs-content='…'>…</button>
<div class='modal fade' id='demoModal'>…</div>

CSS Variable Swatches

Visual preview of key variables with their computed values.

 
--moko-cassiopeia-color-primary
 
--moko-cassiopeia-color-link
 
--moko-cassiopeia-color-hover
 
--accent-color-primary
 
--accent-color-secondary
 
--nav-bg-color
Nav Text
--nav-text-color on --nav-bg-color
 
--moko-cassiopeia-header-background-image
 
--border thickness

No comments