BS5Theme

User guide for the web app for visual Bootstrap 5 theme design.

BS5Theme is a web application for visually designing a theme for Bootstrap 5.3.3. You adjust colors, fonts, spacing, shapes and components and see the result right away in a live preview. You download the finished theme as a ZIP with compiled Bootstrap.

The app runs at bs5theme.4asuite.com and is intended for use on a computer (desktop).

Terms

  • Theme – your settings (colors, fonts, spacing…). It has a name and is saved to your account.
  • Preset – a ready-made theme you can start from. You find presets on the welcome screen and in the Preset gallery.
  • Preview – the area on the right where you see the theme applied to components, sample pages or your own HTML.
  • Panel – a side window with settings, opened with the buttons in the left rail.

Quick Start – your first theme in 5 minutes

What you will need

  • A computer with a modern browser (the app is designed for desktop).
  • An account in the app if you want to save a theme (registration is described in the Account chapter). Exporting to a ZIP works without signing in.

Step 1 – Open the app

  1. Open bs5theme.4asuite.com.
  2. The welcome screen Start a Theme appears, with the buttons Create new theme and User guide; below are Recent themes and Presets.

Step 2 – Start a theme

You have two options:

A) From scratch

  1. Click Create new theme.
  2. In the New theme dialog enter the Theme name and confirm with the Create theme button.

B) From a preset

  1. On the welcome screen, in the Presets section, click a preset card (you can sort them by Popular / Newest). Open all presets with the Show all presets button.
  2. On the card use Use preset.
  3. The preset loads as your work-in-progress theme and you can edit it.

Step 3 – Adjust the colors

  1. In the left rail click the Colors icon (shortcut Alt+C).
  2. At the bottom of the panel you will see the colors primary, secondary, light, dark, info, success, warning, danger and also the surface colors (background, text, link).
  3. Click a color – it becomes the active one.
  4. At the top of the panel choose a shade in the picker or adjust the H / S / L slider (hue, saturation, lightness).
  5. The change shows up in the preview immediately.

You can also get colors from an image – see Getting colors from an image.

Step 4 – Choose a font

  1. Click the Typography icon (Alt+T).
  2. Choose a font group (Sans, Serif, Mono) and a specific font from the Google Fonts menu.
  3. Expand sections such as Body or Headings and set the size, line height or weight.

Step 5 – Check the result

  1. Click the Components, examples, presets icon in the left rail.
  2. In the components card choose All components or switch to the Examples tab (sample pages such as Admin dashboard, Pricing, Sign-up…).
  3. You can switch the preview to light or dark mode and change its width by dragging its edge.

Step 6 – Save or export

  • Save: File → Save theme (Ctrl+S). If you are not signed in, the app asks you to sign in.
  • Export: File → Export ZIP (Ctrl+E). The browser downloads a ZIP with CSS, JS and the Sass source files. Details: Import / Export.

If you make a mistake

  • Edit → Undo (Ctrl+Z) and Edit → Redo (Ctrl+Y) undo or repeat a change.
  • Edit → Reset theme returns the theme to its default values.

Features – the application's functions step by step

1. The app interface

The screen has these parts:

  • Top bar – the logo (back to the welcome screen), the menu File / Edit / View / Help, the light/dark mode switch of the app, the language switch and the Account button.
  • Left rail – buttons that open panels: Settings, Colors, Typography, Layout & Spacing, Shape, Components and Components/examples/presets.
  • Panel – clicking an icon in the rail opens a side panel with settings. Close it with the cross in its header.
  • Preview area (stage) – the live preview of the theme.

How to open a panel: click an icon in the left rail or use its shortcut (see Keyboard shortcuts).

Numeric settings in panels all work the same way: the − and + buttons for fine changes, a slider, the displayed value and the Default button, which returns the value to its default. Most panels also have a Reset … button that returns the whole panel (or its section) to default values.

2. The welcome screen

It appears when you first open the app, after clicking the logo and after Ctrl+Alt+H.

PartWhat it does
Create new themeOpens the dialog for creating a new theme
User guideOpens the guide
Recent themesA list of your saved or in-progress themes; click a theme to open it
PresetsCards of ready-made themes; sort by Popular / Newest, arrows to page through, and the Show all presets button
HelpQuick links New theme, Edit colors, Guide

How to open a recent theme

  1. On the welcome screen find the card in the Recent themes section.
  2. Click it. If the current theme has unsaved changes, the app asks whether you want to discard them.
  3. The theme loads into the editor.

3. The Settings panel

Open it with the Settings icon in the left rail or Alt+S.

Naming the theme

  1. Open the Settings panel.
  2. Type a name in the theme name field.
  3. The status line under the field shows whether it is an unsaved work-in-progress theme.

Sharing a theme as a preset (signed-in users only)

After you sign in, the panel shows the Preset name field and the Share as preset button:

  1. Enter a preset name (the field is pre-filled with the theme name).
  2. Click Share as preset.
  3. The status under the button says the preset was shared, or shows an error. You then manage shared presets in Account → My presets.

4. Colors

Open them with the Colors icon or Alt+C.

At the top the panel has an area for picking a color and at the bottom the 8 Bootstrap colors (primary, secondary, light, dark, info, success, warning, danger) and three surface colors: background, text and link.

4.1 Changing a color

  1. Click a color square – it becomes active (its border is highlighted).
  2. In the picker choose a color or change a channel with the slider. Below the slider you switch between the channels H (hue), S (saturation) and L (lightness); you can also type the value or change it with the − / + buttons.
  3. The change shows up in the preview right away.
  4. You deselect the active color by right-clicking anywhere in the app.

4.2 Tools above the colors

ToolWhat it does
Lock color / Unlock colorA locked color cannot be overwritten (e.g. by a palette taken from an image)
Toggle contrastSwitches the contrast for the active color
Harmonize status colorsFine-tunes the status colors (success, warning, danger, info) to match the others; locked colors do not change
Toggle light/dark modeSwitches the mode of your theme (light/dark)
View switchSwitches between the picker and getting colors from an image

4.3 Getting colors from an image

  1. In the Colors panel use the view switch to change to the image extractor.
  2. Drag an image onto the area, click it and choose a file, or use the buttons below the image:
    • Add image from PC,
    • Paste screenshot (from the clipboard; Ctrl+V works too),
    • Refresh image,
    • Delete image.
  3. The app suggests a palette from the image and applies it to the theme colors (status “Extracted palette applied”). Locked colors do not change.
  4. You can also pick an exact color by hand: first click a color square (it becomes active), then click the point you want in the image. The color is transferred to the active square.

4.4 Swapping and copying colors

  • Swap by dragging: drag one color square onto another – the colors swap.
  • Swap by double-click: keep one square active and double-click another – the colors swap.
  • Copy / paste: a middle click (mouse wheel) on a square pastes the HEX color from the clipboard if there is one; if there is not, it copies the square's color to the clipboard.

5. Typography

Open it with the Typography icon or Alt+T.

5.1 Choosing a font

  1. At the top choose a font group: Sans, Serif or Mono (the font list is filtered by your choice).
  2. In the font dropdown choose a specific font (e.g. Inter, Poppins, Lora, JetBrains Mono).
  3. The font is loaded and used in the preview.
  4. The Reset fonts button returns you to the default Bootstrap font.

5.2 Settings sections

Click a section name to expand it.

SectionSettings
BodyFont size, line height, font weight
HeadingsHeading scale, line height, font weight
DisplayScale of display headings
ParagraphParagraph bottom margin
Lead/SmallFont size of lead and small text
BlockquoteQuote font size

You return each section to its original values with its Reset … button.

6. Layout and spacing

The Layout & Spacing panel (Alt+G) contains:

  • Container – the maximum container width for each breakpoint and the container's horizontal padding; the Reset Container button.
  • Grid – the number of columns and the gutter width; the Reset Grid button.
  • Spacing – the base spacer, the spacing density (Compact / Default / Airy), card padding, section padding and the padding of buttons and forms; the Reset spacing button.

Procedure: open the panel → change the value with the slider or the − / + buttons → watch the preview.

7. Shape

The Shape panel contains:

SectionSettings
CornersRounded corners (on/off), corner radius, small and large radius
BorderBorder width and color
ShadowsComponent shadows (on/off) and the shadow preset (None / Small / Default / Large)
Focus ringWidth and opacity of the focus ring
Component cornersSeparate corners for buttons, form fields, cards, alerts, badges, progress bars, lists, dropdowns, pagination, toasts, modals, tooltips, popovers and thumbnails

You restore the values with the Reset Shape button.

8. Components

The Components panel sets the spacing and sizes of individual elements.

SectionWhat you can adjust
ButtonsVertical and horizontal padding, border width
FormsField padding, checkbox and radio size, switch width, radio button rounding
CardsCard padding and shadow
Lists and tablesPadding of list items, table cells and accordions, intensity of table stripes
Alerts and progressAlert padding, progress bar height, toast width, spinner size
NavigationDropdown width and padding, pagination padding, breadcrumb divider
OverlaysModal margin and widths (small, default, large, extra large), offcanvas width and duration, tooltip and popover width, close button opacity
MediaThumbnail padding, carousel control, indicator and caption widths
CodeMonospace font (system, Consolas, Courier)
AccessibilityMinimum text contrast, respecting reduced motion, validation icons

Procedure: open the panel → expand a section → change a value → the preview focuses on the relevant component. The Reset Components button restores all values.

9. Preview: components, examples, presets

The Components, examples, presets panel decides what is shown in the preview area. It has four tabs (icons):

TabContent
ComponentsThe All components item – demos of Bootstrap components
ExamplesSample pages in categories (App, E-commerce, Forms, Marketing, Data views, Content) – e.g. Admin dashboard, Product detail, Pricing, Tables, Profile, Sign-up form
PresetsReady-made looks and the Open preset gallery button
Custom HTMLShows your own HTML (see chapter 10)

Procedure: open the panel → choose a tab → click an item → the preview switches.

More preview controls

  • Light/dark preview: you can switch the preview to dark or light mode.
  • Preview width: drag the edge of the area to change the width of the preview.
  • Show all components: if, when you change a setting, only the relevant part of the preview is shown, the Show all components button takes you back to the full preview.

10. Custom HTML

This feature lets you show your own page in the preview and see your theme on it.

  1. Open the dialog: in the preview panel the Custom HTML tab, or Ctrl+Shift+H.
  2. Paste HTML into the text field, or drag or choose an .html / .htm file in the file area.
  3. Optionally add links (URLs) to CSS files with the button for adding a row.
  4. Click the apply button (Apply preview). The preview changes only after this click.
  5. The Reset button returns you to the default preview.

Limitations

  • Only the HTML content is used. Scripts, styles and external resources (assets) are removed from the HTML.
  • A standalone HTML file (“bundle”) with its own JavaScript is not supported – it has to be unpacked into static HTML.
  • Custom HTML is saved together with the theme.

11. Preset gallery

Open it via View → Preset gallery, with the Show all presets button on the welcome screen or with the Open preset gallery button.

  1. In the Search presets field type the text you are looking for.
  2. In the Sort presets list choose Popular or Newest.
  3. Page through with the Previous page / Next page buttons.
  4. Use preset loads the preset into the editor (if the current theme has unsaved changes, the app asks whether to discard them).
  5. Like preset / Remove like marks the preset as a favorite. Only signed-in users can like.

12. Managing the theme

You find everything in the File and Edit menus.

New theme (Ctrl+N)

  1. File → New theme.
  2. If the current theme has unsaved changes, confirm discarding them.
  3. Enter a Theme name and click Create theme.

Save theme (Ctrl+S)

  1. File → Save theme.
  2. If the theme has no name, the app asks you to enter one.
  3. If you are not signed in, saving is not possible – the app opens the Settings panel with a prompt to sign in. Until then, the work in progress is kept locally in the browser.
  4. Theme names must be unique – saving is rejected when the name is already used.

Undo and Redo (Ctrl+Z, Ctrl+Y)

Edit → Undo reverts the last change to the theme, Edit → Redo repeats it.

Reset theme

Edit → Reset theme returns the theme to its initial state (or to the state in which it was loaded). The app first asks for confirmation with the Reset button.

Delete theme (Ctrl+D)

File → Delete theme – after confirmation it deletes the current theme.

Export ZIP (Ctrl+E)

See Import / Export.

13. Account

The Account button in the top right corner opens a side panel.

Registration

  1. Click Account and choose Create account.
  2. Fill in your e-mail, password and Confirm password.
  3. A verification code arrives by e-mail. Enter it in the Verification code field and click Verify.
  4. If the code does not arrive, use Send a new code (a countdown runs for a moment after sending).

Signing in

  1. Click Account and enter your e-mail and password.
  2. If required, enter the verification code from the e-mail (Verify your sign-in).

Password reset

  1. In the Account panel choose password reset (Reset password).
  2. Enter your e-mail. The app sends a password reset e-mail.

My themes and My presets

After you sign in, the Account panel has two tabs.

My themes – each theme has these buttons:

ButtonWhat it does
Load (or click / double-click the theme)Loads the theme into the editor
RenameChanges the theme name; then save the theme
ExportDownloads the theme as a ZIP
DeleteDeletes the theme

My presets – your shared presets. Each shows the status Published / Unpublished, statistics (Likes, Loads, Downloads) and the buttons Publish, Unpublish and delete.

Signing out

In the Account panel click the sign-out button.

14. App language and mode

  • Language: in the top bar click the button with the language code (SK / EN) and choose Slovak or English. The page switches.
  • Light/dark mode of the app: the sun/moon button in the top bar or View → Toggle light/dark mode. It changes the look of the app itself, not of your theme. The choice is remembered in the browser.

15. Keyboard shortcuts

ShortcutAction
Ctrl+NNew theme
Ctrl+SSave theme
Ctrl+EExport ZIP
Ctrl+DDelete theme
Ctrl+ZUndo
Ctrl+Y or Ctrl+Shift+ZRedo
Ctrl+Alt+HWelcome screen
Ctrl+Shift+HCustom HTML dialog
Alt+SSettings panel
Alt+CColors panel
Alt+TTypography panel
Alt+GLayout & Spacing panel
EscCloses an open menu or dialog

On macOS, Cmd is used instead of Ctrl.

Import / Export

Overview

WhatSupportedWhere
Export a theme to a ZIP (CSS, JS, Sass)YesFile → Export ZIP, Ctrl+E
Export a saved theme from your accountYesAccount → My themes → Export
Loading a saved theme back into the editorYesWelcome screen → Recent themes, or Account → My themes → Load
Loading a presetYesPreset gallery → Use preset
Inserting your own HTML into the previewYesCustom HTML (Ctrl+Shift+H)
Importing a ZIP or theme.json back into the appNo – the app has no such feature–

Exporting a theme to a ZIP

Procedure

  1. Finish editing the theme.
  2. Choose File → Export ZIP (or Ctrl+E).
  3. If the theme has unsaved changes, the Unsaved theme changes dialog appears (the current state does not match the saved data). Choose:
    • Save and export – first saves the theme (requires signing in) and then exports it,
    • Export without saving – exports the current state without saving.
  4. The app shows Preparing ZIP… and, when finished, ZIP is ready to download.
  5. The browser downloads the file <theme-name>.zip.

The first export may take a few seconds because the theme is compiled from Sass. Further exports are faster.

What the ZIP contains

File / folderDescription
css/bootstrap.cssBootstrap 5.3.3 compiled with your values
css/bootstrap.min.cssMinified version – use it in production
js/bootstrap.bundle.min.jsBootstrap JavaScript (including Popper)
scss/bootstrap-custom.scssThe Sass source of your theme: your variables, then Bootstrap, then a few additions
scss/bootstrap/Bootstrap's Sass source files and its license
theme.jsonA snapshot of the theme state (all settings)
README.txtTheme name, Bootstrap version, how it was built, the list of settings that did not make it into the export, and the steps for compiling it yourself

Using it in your project

Add this to your HTML page:

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>

Compiling it yourself

If you want to change the variables by hand, edit the values at the start of scss/bootstrap-custom.scss and compile it with any Sass compiler, for example:

sass scss/bootstrap-custom.scss css/bootstrap.css

Newer versions of Sass may report a deprecation warning about @import – Bootstrap 5.3 still uses it and the result is correct.

Warnings

  • If the theme cannot be compiled on the server, the ZIP contains plain Bootstrap 5.3.3 without your theme and README.txt states this with a warning. In that case compile scss/bootstrap-custom.scss yourself.
  • Settings that affect only the live preview (Bootstrap has no variable for them) are not included in the export. The list is in README.txt in the “Not in this export” section.

Export from your account

  1. Sign in and click Account.
  2. On the My themes tab find the theme.
  3. Click Export next to it.

“Import”: loading a theme and a preset

The app does not support uploading a ZIP or theme.json. You can load back only themes and presets saved in the app.

Loading a saved theme

  1. Welcome screen → Recent themes → click the theme, or Account → My themes → Load (or click or double-click the theme).
  2. If the current theme has unsaved changes, confirm discarding them.
  3. The theme loads into the editor.

Loading a preset

  1. Open the Preset gallery (View → Preset gallery) or a card in the Presets section on the welcome screen.
  2. Click Use preset.
  3. Confirm discarding any unsaved changes.

Inserting your own HTML (import into the preview)

Custom HTML is not an export or import of a theme, but a way to see the theme on your own page.

  1. Ctrl+Shift+H or the Custom HTML tab in the preview panel.
  2. Paste the code or drag in an .html / .htm file.
  3. Optionally add URLs of CSS files.
  4. Click the apply button.

Scripts, styles and external resources are removed from the HTML; a standalone HTML file with its own JavaScript is not supported. Details: Features – Custom HTML.

FAQ – frequently asked questions

Getting started

Do I need an account? Not to try the app and not to export a ZIP. You do for saving a theme and sharing a preset. Without signing in, the work in progress is kept only locally in the browser. See Account.

Does the app work on a phone? The app is designed for working on a computer. On small screens, working with the panels and the preview is not comfortable.

How do I change the language? Click the SK / EN button in the top bar and choose a language.

How do I switch dark mode? With the sun/moon button in the top bar. This changes the look of the app. If you want dark mode for your theme, use the light/dark mode switch in the Colors panel.

Saving

Why is my theme not saved?

  • You are not signed in – sign in via Account.
  • The theme has no name – enter one in the Settings panel.
  • You already have a theme with the same name – choose a different name.
  • The server is unavailable – the theme is saved locally in the browser and synchronization with the server fails. Try again later.

I lost a theme I was working on. Can it be recovered? You can undo the last change with Ctrl+Z. The work in progress is also kept in the browser, but the safest way is to save the theme (Ctrl+S).

I want to discard all my changes. Edit → Reset theme. The theme returns to its initial or loaded state.

Where are themes saved? In your account on the server. You find the list in the Account → My themes panel and on the welcome screen in the Recent themes section.

Colors

What does locking a color do? A locked color is overwritten neither by a palette extracted from an image nor by harmonizing the status colors.

How do I swap two colors? Drag one color square onto the other, or make one active and double-click the other.

What images can I use to extract colors? You choose an image from a file, drag it onto the area or paste a screenshot from the clipboard (Ctrl+V).

A color change did not show up. Check that the color is unlocked and that a preview that uses that color is open (e.g. All components).

Preview

I see only some of the components. When you change a setting, the preview focuses on the relevant component. The Show all components button takes you back to the full preview.

My own HTML does not look the way it should. Only the HTML content is inserted into the preview – scripts, styles and external resources are removed. Pages that need JavaScript will not behave like the original in the preview. The app does not support standalone HTML files with their own JavaScript.

My custom HTML did not change after pasting. The preview changes only after you click the apply button. Until then the HTML is only in the field.

Export

What do I get after exporting? A ZIP with the compiled bootstrap.css and bootstrap.min.css, bootstrap.bundle.min.js, the Sass source (scss/), the theme snapshot theme.json and README.txt. In detail: Import / Export.

The export takes long. The first export of a theme is compiled from Sass, which can take a few seconds. Further ones are faster.

The ZIP contains plain Bootstrap without my theme. The server could not compile the theme. README.txt in the ZIP states this. Compile scss/bootstrap-custom.scss yourself (sass scss/bootstrap-custom.scss css/bootstrap.css).

Some of my settings did not show up in the export. Some settings affect only the live preview because Bootstrap has no variable for them. The list is in README.txt in the ZIP.

Can a ZIP or theme.json be loaded back into the app? No. You can load back only themes saved in your account and presets. See Import / Export.

Which Bootstrap is in the export? Bootstrap 5.3.3.

Account

The verification code does not arrive. Check your spam folder and click Send a new code (a countdown runs for a moment after sending).

I forgot my password. In the Account panel choose password reset and enter your e-mail. The app sends you a reset e-mail.

Why can't I like a preset? Only signed-in users can like.

How do I share my theme as a preset? Sign in, open the Settings panel, enter a name and click Share as preset. You manage publishing in Account → My presets. See The Settings panel.

Shortcuts

What keyboard shortcuts are there? See Keyboard shortcuts.