BRUTALSKI

Bold, raw, geometric brutalism for Bootstrap 5.

Get Started Github

Navbar example

Buttons example

Button groups

Typography example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Display 1

Display 6

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

This line of text is meant to be treated as fine print.

The following is rendered as bold text.

The following is rendered as italicized text.

This is a lead paragraph. It stands out from regular paragraphs.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

Emphasis classes

Muted text sample.

Primary text sample.

Secondary text sample.

Success text sample.

Info text sample.

Warning text sample.

Danger text sample.

Light text sample on dark bg.

Dark text sample on light bg.

Tables example

Type Column heading Column heading
Active Column content Column content
Default Column content Column content
Primary Column content Column content
Secondary Column content Column content
Success Column content Column content
Danger Column content Column content
Warning Column content Column content
Info Column content Column content

Forms example

We'll never share your email with anyone else.
@
Looks good!
Please provide a valid name.

Navs, Tabs & Pagination

Breadcrumbs

Pagination

Alerts example

Badges example

Primary Secondary Success Danger Warning Info Light Dark
Pill Pill

Progress & Spinners

25%
50%
Striped 75%
Animated 100%

List groups

  • An active item
  • A second item
  • A third item
  • A disabled item
The current link item A second link item A third link item
  • Flush item 1
  • Flush item 2
  • Flush item 3

Cards example

Header
...
Card title

Some quick example text to build on the card title.

Go somewhere
Footer
Header
Primary card title

Some quick example text to build on the card title.

Header
Success card title

Some quick example text to build on the card title.

Card with list group
  • An item
  • A second item
Card link Another link

Accordions example

This is the first item's accordion body. It is shown by default.

This is the second item's accordion body. It is hidden by default.

Placeholder content for this accordion.

Carousel example

Modals example

Offcanvas example

Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas top
...

Popovers & Tooltips example

Toasts example

Placeholders example

Misc example