Build beautiful websites with 404 Brotherhood CSS

A utility-first CSS framework for rapidly building custom user interfaces without relying on pre-built components.

Get Started Try it out
Example
404 Brotherhood

A lightweight, flexible CSS framework built for modern web applications.

<div class="b4-card">
  <div class="b4-card-body">
    <h5 class="b4-card-title">404 Brotherhood</h5>
    <p class="b4-card-text">A lightweight, flexible CSS framework 
    built for modern web applications.</p>
    <button class="b4-btn b4-btn-primary">Learn More</button>
  </div>
</div>
Scroll to explore

Get Started

Use the 404 Brotherhood CSS Framework in your project by including the following CDN links in your HTML file:

<link rel="stylesheet" href="https://adityapandey-dev.github.io/404_brotherhood_css_framework/Main.css">
<script src="https://adityapandey-dev.github.io/404_brotherhood_css_framework/Main.js"></script>

Simply copy and paste the above links into the `` and `` sections of your HTML file to start using the framework.

12-Column Grid System

Our responsive 12-column grid system helps you create flexible layouts for any screen size. Built with Flexbox, it allows for complex grid layouts with ease.

Basic Grid Example

Code Example
Col 4
Col 4
Col 4
<div class="b4-row">
  <div class="b4-col-12 b4-col-md-6 b4-col-lg-4">
    <div class="grid-demo-box">Col 4</div>
  </div>
  <div class="b4-col-12 b4-col-md-6 b4-col-lg-4">
    <div class="grid-demo-box">Col 4</div>
  </div>
  <div class="b4-col-12 b4-col-md-12 b4-col-lg-4">
    <div class="grid-demo-box">Col 4</div>
  </div>
</div>

Mixed Column Sizes

Code Example
Col 8
Col 4
Col 4
Col 4
Col 4
Col 6
Col 6
<div class="b4-row">
  <div class="b4-col-12 b4-col-md-8">
    <div class="grid-demo-box">Col 8</div>
  </div>
  <div class="b4-col-12 b4-col-md-4">
    <div class="grid-demo-box">Col 4</div>
  </div>
</div>

<div class="b4-row b4-mt-3">
  <div class="b4-col-12 b4-col-md-4">
    <div class="grid-demo-box">Col 4</div>
  </div>
  <div class="b4-col-12 b4-col-md-4">
    <div class="grid-demo-box">Col 4</div>
  </div>
  <div class="b4-col-12 b4-col-md-4">
    <div class="grid-demo-box">Col 4</div>
  </div>
</div>

<div class="b4-row b4-mt-3">
  <div class="b4-col-12 b4-col-md-6">
    <div class="grid-demo-box">Col 6</div>
  </div>
  <div class="b4-col-12 b4-col-md-6">
    <div class="grid-demo-box">Col 6</div>
  </div>
</div>

Interactive Grid Demo

Drag and drop the elements to create your own layout:

Column 1
Column 2
Column 3

Utility Classes

404 Brotherhood provides a comprehensive set of utility classes for spacing, typography, flexbox, colors, and more to help you build interfaces quickly without writing custom CSS.

Typography

Typography Scale

Text Extra Small (.b4-text-xs)

Text Small (.b4-text-sm)

Text Base (.b4-text-base)

Text Large (.b4-text-lg)

Text Extra Large (.b4-text-xl)

Text 2XL (.b4-text-2xl)

Text 3XL (.b4-text-3xl)

<p class="b4-text-xs">Text Extra Small</p>
<p class="b4-text-sm">Text Small</p>
<p class="b4-text-base">Text Base</p>
<p class="b4-text-lg">Text Large</p>
<p class="b4-text-xl">Text Extra Large</p>
<p class="b4-text-2xl">Text 2XL</p>
<p class="b4-text-3xl">Text 3XL</p>
Font Weights

Light Text (.b4-font-light)

Normal Text (.b4-font-normal)

Medium Text (.b4-font-medium)

Semibold Text (.b4-font-semibold)

Bold Text (.b4-font-bold)

<p class="b4-font-light">Light Text</p>
<p class="b4-font-normal">Normal Text</p>
<p class="b4-font-medium">Medium Text</p>
<p class="b4-font-semibold">Semibold Text</p>
<p class="b4-font-bold">Bold Text</p>

Spacing

Margin Examples
Base Element
Margin Top 1 (.b4-mt-1)
Margin Top 2 (.b4-mt-2)
Margin Top 3 (.b4-mt-3)
Margin Top 4 (.b4-mt-4)
Margin Top 5 (.b4-mt-5)
<div class="b4-bg-primary b4-p-2 b4-text-center b4-text-light">
  Base Element
</div>
<div class="b4-mt-1">Margin Top 1</div>
<div class="b4-mt-2">Margin Top 2</div>
<div class="b4-mt-3">Margin Top 3</div>
<div class="b4-mt-4">Margin Top 4</div>
<div class="b4-mt-5">Margin Top 5</div>
Padding Examples
Padding 1 (.b4-p-1)
Padding 2 (.b4-p-2)
Padding 3 (.b4-p-3)
Padding 4 (.b4-p-4)
Padding 5 (.b4-p-5)
<div class="b4-bg-primary b4-text-center b4-text-light b4-p-1">
  Padding 1
</div>
<div class="b4-bg-primary b4-text-center b4-text-light b4-p-2 b4-mt-3">
  Padding 2
</div>
<div class="b4-bg-primary b4-text-center b4-text-light b4-p-3 b4-mt-3">
  Padding 3
</div>
<div class="b4-bg-primary b4-text-center b4-text-light b4-p-4 b4-mt-3">
  Padding 4
</div>
<div class="b4-bg-primary b4-text-center b4-text-light b4-p-5 b4-mt-3">
  Padding 5
</div>

Flexbox & Alignment

Flex Direction
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<!-- Flex Row -->
<div class="b4-flex b4-flex-row b4-mb-3">
  <div class="b4-p-2 b4-bg-primary b4-text-light b4-mr-2">Item 1</div>
  <div class="b4-p-2 b4-bg-primary b4-text-light b4-mr-2">Item 2</div>
  <div class="b4-p-2 b4-bg-primary b4-text-light">Item 3</div>
</div>

<!-- Flex Column -->
<div class="b4-flex b4-flex-col">
  <div class="b4-p-2 b4-bg-primary b4-text-light b4-mb-2">Item 1</div>
  <div class="b4-p-2 b4-bg-primary b4-text-light b4-mb-2">Item 2</div>
  <div class="b4-p-2 b4-bg-primary b4-text-light">Item 3</div>
</div>
Alignment
Start
Start
Center
Center
End
End
Between
Between
<!-- Justify Content: Start -->
<div class="b4-flex b4-justify-start b4-mb-3 b4-p-2 b4-border">
  <div class="b4-p-2 b4-bg-primary b4-text-light b4-mr-2">Start</div>
  <div class="b4-p-2 b4-bg-primary b4-text-light b4-mr-2">Start</div>
</div>

<!-- Justify Content: Center -->
<div class="b4-flex b4-justify-center b4-mb-3 b4-p-2 b4-border">
  <div class="b4-p-2 b4-bg-primary b4-text-light b4-mr-2">Center</div>
  <div class="b4-p-2 b4-bg-primary b4-text-light b4-mr-2">Center</div>
</div>

<!-- Justify Content: End -->
<div class="b4-flex b4-justify-end b4-mb-3 b4-p-2 b4-border">
  <div class="b4-p-2 b4-bg-primary b4-text-light b4-mr-2">End</div>
  <div class="b4-p-2 b4-bg-primary b4-text-light b4-mr-2">End</div>
</div>

<!-- Justify Content: Space Between -->
<div class="b4-flex b4-justify-between b4-mb-3 b4-p-2 b4-border">
  <div class="b4-p-2 b4-bg-primary b4-text-light">Between</div>
  <div class="b4-p-2 b4-bg-primary b4-text-light">Between</div>
</div>

Color System

Our color system provides consistent, accessible colors with light and dark mode support.

Primary
.b4-bg-primary
Secondary
.b4-bg-secondary
Success
.b4-bg-success
Danger
.b4-bg-danger
Warning
.b4-bg-warning
Info
.b4-bg-info
Dark
.b4-bg-dark
Light
.b4-bg-light
Text Colors

Primary Text (.b4-text-primary)

Secondary Text (.b4-text-secondary)

Success Text (.b4-text-success)

Danger Text (.b4-text-danger)

Warning Text (.b4-text-warning)

Info Text (.b4-text-info)

Dark Text (.b4-text-dark)

Muted Text (.b4-text-muted)

<p class="b4-text-primary">Primary Text</p>
<p class="b4-text-secondary">Secondary Text</p>
<p class="b4-text-success">Success Text</p>
<p class="b4-text-danger">Danger Text</p>
<p class="b4-text-warning">Warning Text</p>
<p class="b4-text-info">Info Text</p>
<p class="b4-text-dark">Dark Text</p>
<p class="b4-text-muted">Muted Text</p>

Components

404 Brotherhood provides a set of reusable components built using our utility classes. These components are simple, customizable, and easy to integrate into your projects.

Buttons

Button Styles 
<button class="b4-btn b4-btn-primary">Primary Button</button>
<button class="b4-btn b4-btn-secondary">Secondary Button</button>
<button class="b4-btn b4-btn-outline-primary">Outline Primary</button>
<button class="b4-btn b4-btn-outline-secondary">Outline Secondary</button>
Button Sizes 
<button class="b4-btn b4-btn-primary b4-btn-sm">Small Button</button>
<button class="b4-btn b4-btn-primary">Default Button</button>
<button class="b4-btn b4-btn-primary b4-btn-lg">Large Button</button>

Cards

Basic Card

This is a basic card component with a title and text content.

Feature Card

Cards can be used to highlight features or services.

Last updated 3 mins ago
Product Card

Cards work great for product displays or pricing tables.

$29.99
Card Component 
<div class="b4-card">
  <div class="b4-card-body">
    <h5 class="b4-card-title">Card Title</h5>
    <p class="b4-card-text">This is a basic card component with a title and text content.</p>
    <button class="b4-btn b4-btn-primary">Action</button>
  </div>
</div>

<!-- Card with footer -->
<div class="b4-card">
  <div class="b4-card-body">
    <h5 class="b4-card-title">Card with Footer</h5>
    <p class="b4-card-text">This card has a footer section for additional information.</p>
    <button class="b4-btn b4-btn-outline-primary">Learn More</button>
  </div>
  <div class="b4-card-footer">
    <small class="b4-text-muted">Last updated 3 mins ago</small>
  </div>
</div>

Alerts

Info! This is an informational alert.
Success! Your action was completed successfully.
Warning! Be careful with this action.
Danger! Something went wrong.
Alert Components 
<div class="b4-alert b4-alert-info">
  <strong>Info!</strong> This is an informational alert.
</div>

<div class="b4-alert b4-alert-success">
  <strong>Success!</strong> Your action was completed successfully.
</div>

<div class="b4-alert b4-alert-warning">
  <strong>Warning!</strong> Be careful with this action.
</div>

<div class="b4-alert b4-alert-danger">
  <strong>Danger!</strong> Something went wrong.
</div>

Modal

Modal Title

This is a modal dialog built with 404 Brotherhood CSS. You can use it to display important information or to gather user input.

Modal Component 
<!-- Button to open modal -->
<button class="b4-btn b4-btn-primary" id="openModalBtn">Open Modal</button>

<!-- Modal Component -->
<div class="b4-modal" id="demoModal">
  <div class="b4-modal-dialog">
    <div class="b4-modal-content">
      <div class="b4-modal-header">
        <h5 class="b4-modal-title">Modal Title</h5>
        <button type="button" class="b4-btn-close" id="closeModalBtn">×</button>
      </div>
      <div class="b4-modal-body">
        <p>This is a modal dialog built with 404 Brotherhood CSS.</p>
      </div>
      <div class="b4-modal-footer">
        <button type="button" class="b4-btn b4-btn-secondary" id="cancelModalBtn">Close</button>
        <button type="button" class="b4-btn b4-btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script>
  // JavaScript to open/close the modal
  document.getElementById('openModalBtn').addEventListener('click', function() {
    document.getElementById('demoModal').classList.add('show');
  });
  
  document.getElementById('closeModalBtn').addEventListener('click', function() {
    document.getElementById('demoModal').classList.remove('show');
  });
  
  document.getElementById('cancelModalBtn').addEventListener('click', function() {
    document.getElementById('demoModal').classList.remove('show');
  });
</script>

Code Editor

Try out 404 Brotherhood CSS by writing your own HTML code. See the changes in real-time as you type.

HTML Editor

Live Preview

Template Examples