Revolutionize Your Bootstrap 5 Development with 30 CSS Themes

A Rainbow of Inspirations for Your Websites

  • Theme Blue-classic in Light mode
  • Theme Blue-classic en mode Dark
  • Theme Indigo-classic in Light mode
  • Theme Indigo-classic en mode Dark
  • Theme Purple-classic in Light mode
  • Theme Purple-classic en mode Dark
  • Theme Pink-classic in Light mode
  • Theme Pink-classic en mode Dark
  • Theme Red-classic in Light mode
  • Theme Red-classic en mode Dark
  • Theme Orange-classic in Light mode
  • Theme Orange-classic en mode Dark
  • Theme Yellow-classic in Light mode
  • Theme Yellow-classic en mode Dark
  • Theme Green-classic in Light mode
  • Theme Green-classic en mode Dark
  • Theme Turquoise-classic in Light mode
  • Theme Turquoise-classic en mode Dark
  • Theme Cyan-classic in Light mode
  • Theme Cyan-classic en mode Dark

Bootstrap 5 or Bootstrap Studio, Our CSS Themes Are Compatible

Customize an entire site by changing the theme without modifying the HTML code.

Are You Ready to Propel Your Web Projects to New Heights?

Discover our exclusive collection of CSS themes for Bootstrap 5, designed to boost your productivity and creativity.
Imagine being able to switch between 30 different color themes without writing a single line of code.

Our innovative solution makes it possible:

  • Dramatically speed up your design process.
  • Save valuable time on every project.
  • Take advantage of a choice of 30 ready-to-use CSS themes.

Our Collection Includes 10 Main Colors, Each Available in 3 Distinct Shades

Palette of 30 CSS themes
  1. CLASSIC, bright colors in the center.
  2. MEDIUM, intermediate colors.
  3. FLATY, pastel design with less saturated colors.

Primary, Secondary and other colors are chosen from the color wheel to create a harmonious palette for each theme.

The coherence of Bootstrap's designs rests largely on the importance of the Primary color in color harmony.
It is used in particular by accordions, drop-down lists, links, focus and hover states of interactive elements, and so on.

Our themes also apply the default Primary-emphasis color to titles and color of bullets or numbers in lists.
In Light or Dark modes, color contrast is adjusted for enhanced legibility.

Each SiteBoostEdit CSS Theme Contains Light and Dark Modes

The data‑bs‑theme HTML attribute is used to modify the mode.

The example below gives an overview of the Green‑classic theme in each mode.

Green-classic theme in Light mode
Green-classic theme in Dark mode
Green theme overview

Discover Bootstrap Enriched With Innovative Features

Each theme features its own unique color palette.
All themes feature the same enhancements to ensure total compatibility.

Text Size in Your Websites

Standard Bootstrap

In Bootstrap, RFS (responsive font size) technology is only considered for text sizes greater than 20 pixels.

* Text for all objects smaller than 21 pixels remains hopelessly fixed.

Improving the Reading Comfort of Your Sites

For the LG breakpoint, text size is increased to optimize readability on large screens.

With our themes, the body text size becomes responsive, ranging from 16 to 18 pixels.

The text size of many objects is based on that of the body.
These include tables, buttons, and form elements.

All the text on your sites becomes 100% responsive.

Comparison of Text Sizes

Objects Bootstrap 5 SiteBoostEdit themes
Comparison in pixels XS LG XS LG
<h1> 27px 40px 28px 42px
<h2> 24px 32px 25px 34px
<h3> 23px 28px 24px 30px
<h4> 21px 24px 22px 26px
<h5> * fixed size 20px 20px 22px
<h6> * fixed size 16px 18px 20px
<body> * fixed size 16px 16px 18px
.lead * fixed size 20px 21px 23px

Adding Utility Classes

A Little-Known Bootstrap Option

In the Bootstrap source files SCSS, there is an option to add negative margins.

By default, this option is disabled. he system generates numerous classes, the majority of which will remain unused.

Adding the Most Useful Negative Margins

Negative margins dependent on a breakpoint are ignored by our themes. Only basic vertical margins are included.

This choice gives you access to the main negative margins, which is 15 convenient additional utility classes to use.

Summary of Negative Vertical Margins

Position Syntaxe * n1 * n2 * n3 * n4 * n5
Top and bottom .my-* -4px -8px -16px -24px -48px
Top .mt-*
Bottom .mb-*

The syntax is similar to that used by positive margins.
The n is added to indicate that the value obtained is negative.

To simplify comparison, in this table margins are indicated in pixels.

Simple and effective, negative margins make page layouts a breeze.

Improving Standard Cards

The Card Footer is Streamlined

For the .card-footerclass, the top border and background color have been removed.
The footer is still used to align buttons and links at the bottom of cards.
The simplification of this style modernizes the overall look of the cards.

Customizing the Footer of Cards

You can choose to restore or customize the card footer with a background color and top border.
This can easily be achieved with additional CSS code, such as:

/* This code restores the default values */
.card-footer.my-footer {
  background-color: var(--bs-card-cap-bg);
  border-top: 1px solid var(--bs-card-border-color);
}

The .my-footer class is optional, so you can easily define several styles.

Make Over Your Bootstrap Sites By Choosing Your Pack:

Pack 3 THEMES

  • 1 pack to choose from the collection
  • 1 set of colors in three shades
  • Personal license
  • Multisite personal use
  • Commercial use prohibited

6,50 €

Packs 3 THEMES

Pack PERSONAL

Set of 10 packs of 3 themes.

  • Complete collection of 30 themes
  • 10 color sets in three shades
  • Personal license
  • Multisite personal use
  • Commercial use prohibited

 16,00 €

Pack PERSONAL

Pack COMMERCIAL

Maximum time savings,
minimum investment.

  • Complete collection of 30 themes
  • 10 color sets in three shades
  • Licence commerciale
  • Multisite personal use
  • Multi-site commercial use

Launch offer
59,00 29,00 €

Pack COMMERCIAL

VAT not applicable, Article 293B of the French CGI. All our rates are displayed in net prices.

Frequently Asked Questions

Yes, when ordering, you will be asked to accept the license based on the selected pack.
There are two types of licence:

Yes, our CSS themes designed with Bootstrap version 5.3.3 are compatible with the Bootstrap Studio application.
For your information, this site is built using Bootstrap Studio.

Yes, you can use another SiteBoostEdit theme. All our CSS themes are interchangeable.
When changing the theme in a project, only the colors will be changed.
Forms validation classes respect the Bootstrap standard in all our themes:

  • Green to approve.
  • The red to invalidate.

No, because the prices of our packs are optimized to make them accessible to all.

For your personal sites, choose the PERSONAL Pack and enjoy the choice of 30 themes.

If you're planning to sell websites, we advise you to opt for the COMMERCIAL Pack from the outset.

Yes, there is an upgrade to a commercial license.

Upgrade to Pack COMMERCIAL

Use your time efficiently, present a selection of colors and boost your sales.

6 good reasons to adopt your collection of CSS themes

  • Targeted selection: Discover themes for your websites that perfectly meet the expectations of your target audiences.
  • 100% responsive: Optimize the users experience with texts size that adapt to all screens.
  • Test and validation: Quickly test several colors palettes for each of your web projects to validate the best choice.
  • Simplicity without coding: Have all the features included in our themes without having to write a single line of code.
  • Save time: Speed up your projects with our stylesheets, because they are designed to be immediately ready for use.
  • Minimal investment: Select your collection for a price lower than one hour's worth of work.