Bootstrap

Pixel UI Kit

Open-source starter designed on top of Bootstrap 5 UI Kit (No jQuery)

Explore components Components
Themesberg Logo © Themesberg - coded by AppSeed.
Pixel Free Mockup

80

Bootstrap 5 elements

5

Example Pages

Workflow

Sass & Gulp

Vanilla

Javascript

Bootstrap 5

Latest version of Bootstrap without jQuery

Pixel is built using the latest version of Bootstrap 5 and we only used Vanilla Javascript for everything including the plugins

Product Docs
Front pages overview

Modular sections Pro

More than 50 website sections

Using the sections in Pixel Pro you can easily build new pages by adding them together

See Premium Version
MapBox Leaflet.js Custom Integration Mockup

User Dashboard Pro

9 dashboard pages

Quickly set up a user settings panel with the advanced dashboard pages including billing, settings, messaging

Explore dashboard
Dashboard Preview

Accordions

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Alerts

Badges

Primary Secondary Tertiary Gray Success Danger Warning Info

Cards

Themesberg office
Awards

We partnered up with Google

Some quick example text to build on the card title and make up the bulk of the card's content.

Learn More
Neil Portrait

Neil D. Sims

New York, USA

Neil drives the technical strategy of the platform and brand.

Basic

$19 / month
  • 1 free domain
  • Storage space: 5GB
  • 100k monthly visitors
  • One-click staging site
  • Search engine wizard
  • Community support
Purchase now

Get in touch

If you need any help with our products or services, choose one of the following ways to contact us.

Contact Us

Carousels

Breadcrumbs

Buttons

Main Buttons

Outline Buttons

Sizes

Choose your color

Main

Outline

Social Buttons







Round Social Buttons

Dropdowns

Button dropdowns
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Choose your size
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Dropdown button directions
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Forms

Default Forms

We'll never share your email with anyone else.
Looks good!
Please choose a username.
Square Checkboxes
Radios
Switches

Modals

Navs

Round Pill

Pills with Icons

Pagination

Pagination with icon-nav

Pagination with text-nav

Disabled and active states

Choose your size

Popovers

Progress bars

Primary Color
50%
Secondary Color
60%
Tertiary Color
60%
Dark Color
60%
Success Bar
60%
Info Bar
60%
Danger Bar
60%

Tabs

Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.

Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.

Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.

Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.

Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.

Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.

Toasts

Tooltips

Typography

h1. Themesberg heading

h2. Themesberg heading

h3. Themesberg heading

h4. Themesberg heading

h5. Themesberg heading
h6. Themesberg heading
Customizing headings

Fancy display heading With faded secondary text

Fancy display heading With faded secondary text

Fancy display heading With faded secondary text

Fancy display heading With faded secondary text

Fancy display heading With faded secondary text
Fancy display heading With faded secondary text
Display headings

Display 1

Display 2

Display 3

Display 4

Paragraphs
Simple paragraph

Start your development with a Pixel Design System for Themesberg 4.Themesberg makes beautiful products to help people with creative ideas succeed.Our company empowers millions of people.

Lead paragraph

Start your development with a Pixel Design System for Themesberg 4.Themesberg makes beautiful products to help people with creative ideas succeed.Our company empowers millions of people.

Dark text

Design is not just what it looks like and feels like. Design is how it works.

Primary text

Design is not just what it looks like and feels like. Design is how it works.

Secondary text

Design is not just what it looks like and feels like. Design is how it works.

Tertiary text

Design is not just what it looks like and feels like. Design is how it works.

Info text

Design is not just what it looks like and feels like. Design is how it works.

Danger text

Design is not just what it looks like and feels like. Design is how it works.

Success text

Design is not just what it looks like and feels like. Design is how it works.

Blockquote
Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people.
Zoltan Szőgyényi
Lists
Unordered
  • Minutes of the last meeting
  • Do we need yet more meetings?
  • Any other business
    • Programming
    • Web Design
    • Database
  • Something funny
Ordered
  1. Minutes of the last meeting
  2. Do we need yet more meetings?
  3. Any other business
    1. Programming
    2. Web Design
    3. Database
  4. Something funny

Tables

Default table
Class Teacher Males Females
First Year D. Bolter 5 4
A. Cheetham 7 9
Second Year M. Lam 3 9
S. Crossy 4 3
A. Forsyth 6 9
Dark table
Year Teacher Males Females
First Year D. Bolter 5 4
A. Cheetham 7 9
Second Year M. Lam 3 9
S. Crossy 4 3
A. Forsyth 6 9
Hoverable rows
Class Teacher Males Females
First Year D. Bolter 5 4
A. Cheetham 7 9
Second Year M. Lam 3 9
S. Crossy 4 3
A. Forsyth 6 9
Responsive Table
Class Teacher Males Females
First Year D. Bolter 5 4
A. Cheetham 7 9
Second Year M. Lam 3 9
S. Crossy 4 3
A. Forsyth 6 9

5 hand-crafted example pages

About company page preview

About company
Contact page preview

Contact
Freelancer page preview

Freelancer
Sign in page preview

Sign in
Sign up page preview

Sign up

Notable features

You get all Bootstrap components fully customized. Besides, you receive numerous plugins out of the box and ready to use

Bootstrap 5

A responsive and mobile-first theme built with the world's most popular CSS framework

Build with Sass

Change one variable and the theme adapts. Colors, fonts, sizes, buttons... you name it

Responsive Design

Did you know 53% of the world web traffic is mobile? Pixel is fully responsive and mobile first

Modular approach

Nicely customized components that can be reused anytime and anywhere in your project

Gulp & BrowserSync

With our custom Gulp commands & BrowserSync we offer a seemless and fast workflow for your project

Well documented

Our kit is delivered with very detailed documentation, describing all components, styles and usages

Google PageSpeed

Pixel has 80+ scores on Google PageSpeed Insights to offer you and your clients a fast website

SVG illustrations

Photography and Illustration SVGs are included in the download package and are free to use

Pixel logo

Every pixel matters

We crafted each component with great care so that no rouge pixel is left behind

What's inside?

We have carefully crafted the perfect folder structure to ensure that finding the files you're looking for are easily reachable and well organized.

You need only HTML, CSS and Javascript?

Don't worry, we got you covered. We have a folder called html&css which includes only the basic HTML5, CSS3 and Javascript technologies.

Docs v5.3
  • src
    • assets
    • html
    • partials
    • scss
    • index.html
  • html&css
  • .temp
  • dist
  • node_modules
  • gulpfile.js
  • package.json
  • README.md
  • .gitignore

You need only HTML, CSS and Javascript?

Don't worry, we got you covered. We have a folder called html&css which includes only the basic HTML5, CSS3 and Javascript technologies.

WCAG 2.1 accessible color scheme

We've enhanced Bootstrap’s color settings
to comply with the latest accessibility standards

Primary:

#174F84

Secondary:

#10AB7C

Tertiary:

#FF7F66

Info:

#1E90FF

Warning:

#F5B759

Success:

#00BF9A

Danger:

#FA5252

Dark:

#2A354F

Light:

#DDE1ED

Soft:

#EFF2F5

Less work, more flow.

Boost productivity with BrowserSync. SCSS changes are reflected instantly and pages scroll and refresh on devices as you work.

> $ npm install
Everything’s installed!
> $ gulp
SCSS watching
LiveReload started
Opening localhost:3000
> $ that's it?
It's that simple!
Looks unfamiliar? Don’t worry! Our documentation has got you covered.

Open source project

Pixel is an open source Bootstrap 5 UI Kit that is licensed under the very permissive MIT License. Consider giving us a star on the official Github repository to spread the news!

View on GitHub
Free Demo
  • 80 Components
  • 6 Example Pages
  • Uncoventional cards
  • Timelines
  • E-commerce
  • Charts
  • Premium Support
See Product
Pro Version
  • 1000+ Components
  • 35 Example Pages
  • Dashboard included
  • Uncoventional cards
  • Timelines
  • E-commerce
  • Premium charts
  • Premium Support
Live demo