Bootstrap Studio

# CSS Editing

Bootstrap Studio gives you an entirely visual way of building web pages, by using the Appearance panel and component options. But, if you require extra control and customizability, you can write CSS code directly in the Editor panel.

The CSS editor that's built into Bootstrap Studio will be familiar to anyone who's used their browser's developer tools. You can edit CSS code in the Styles tab, or in CSS files which you create in the Design panel.

# The Styles Tab

Styles is one of the two non-closable tabs in the Editor panel. It gives you a list of the CSS blocks in your design which match the currently selected component. This is a convenient way to discover which CSS blocks are affecting the component across all your files, and application-generated code.

Styles Tab

Note that the app-generated styles (labeled as "Bootstrap") are locked and are not user editable. You can override them by clicking the three dot menu of the block and copying it to your own stylesheet.

# CSS Files

Creating a new CSS file is easy. Just right click the "Styles" label and choose the New > CSS File menu.

Create Stylesheet

To import an existing CSS file, just drag and drop it onto the application window. It will be parsed and added in your design.

You can create/import as many files as you wish, and organize them into folders to make them easier to manage.

# CSS File Order

When working with multiple CSS files, you will sooner or later run into a situation where you need to control the precedence of files. To change the order in which CSS files are applied, right click the Styles group and select Include Order.

CSS Include Order

Here you can reorder the files as you need them and then click the Save button. These changes will be applied to all pages in your design.

Note

Although it isn't shown in the dialog, the Bootstrap framework css file is always included first in the page, before your stylesheets.

# Visibility

When right clicking a CSS file, you get a couple of options for controlling its visibility.

CSS Context Menu

  • Enable/Disable - with this option you can disable a stylesheet, so that it doesn't apply in any of your pages.
  • Visibility.. - this will open a dialog which lets you choose which pages of your design should the stylesheet be added to.

Asset Visibility

# Linking External CSS

You can link externally hosted stylesheets in Bootstrap Studio. Just right click the Styles group and choose Link External CSS. In the dialog you can paste a URL to an externally hosted stylesheet and it will be added to your design.

TIP

To make sure external CSS libraries are always available and loading quickly, link them from secure and reliable CDN services like cdnjs (opens new window) and jsdelivr (opens new window).

# Editing CSS

Double click a CSS file and it will be opened for editing in our CSS editor. Click on a selector, css property or a value to edit them. Hit Enter or Tab to move to the next rule, and Shift+Tab to the previous. You can click the space between rules to create new ones, and between css blocks to create new blocks or comments.

Images and fonts that you've added to the Design panel will be automatically picked up and shown as suggestions when appropriate. There is a full undo/redo history, so feel free to experiment!

# Option Menu

When you click the three dots on the top right of each CSS block, you will see a menu with options. You have the basic operations like copy, move and delete, but also the option to add a media query and enabling/disabling the block.

CSS Option Menu

# Multi Selection

Click CSS blocks while holding the Ctrl/Shift (Windows/Linux) or Cmd/Shift (Mac) keys to initiate a multi selection. This gives you quick actions to apply en masse.

# Working with Locked Blocks

The Bootstrap framework's CSS is locked In Bootstrap Studio. This is necessary so that we can upgrade the framework when new versions are released.

However, it is straightforward to modify one of these locked blocks if you need to. Just copy them to your stylesheet and override the styles.

If you need to make more comprehensive changes to Bootstrap, we recommend that you import a Custom Theme.

# Duplicating and Copying Blocks

If you want to duplicate your CSS block, you need to click the three dots on the top right of the block and select the Duplicate option. This will make an exact copy of the block in the same file.

If you want to make a copy of the CSS block or move it to another file, use the Copy To and Move To options.

# Rearranging Blocks

You can also rearrange your CSS blocks by dragging them. This allows you to organize your code better and control the order in which your rules are applied.

# Writing Media Queries

Media Queries are an important tool for creating responsive layouts. In Bootstrap Studio, media queries are assigned on a block by block basis. To do this, choose Add Media Query from the Option menu (the three dots on the top right of the block).

Add Media Query

The query will be prefilled with a min-width or max-width depending on the current width of the stage.

TIP

If you find our CSS editor too restrictive, you can always switch to writing SASS code.

# Writing Container Queries

Container Queries are a more advanced alternative of Media Queries and are fully supported by Bootstrap Studio. Learn more in our quick tip below.

# Writing Keyframe Animations

Keyframe animations are a powerful way to create smooth animations on the web. You can use them in addition to the regular animation functionality in Bootstrap Studio.

To add a keyframe animation block to your CSS file, just type @keyframes as the start of a new CSS selector.

After you've defined it, you can apply your animation to an element with an animation css rule: animation: 2s test123. You can learn more on the MDN animations page.

TIP

To delete a breakpoint, click the box with the percentage value (60% in the video above), delete the text so the box is empty, and press return. The entire block will be removed and focus will move to the next breakpoint (if any).

# CSS Variables

Bootstrap Studio has built-in support for CSS custom properties (opens new window) (also known as variables). They give you an easy way to reuse a specific color throughout your design and change it from a central location.

The Bootstrap framework makes use of custom properties primarily for color and font customization. Below you can see some of the available variables for Bootstrap 5, each starting with the bs- prefix.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  ... --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0)
  );
}

Defining your own custom properties, or overriding the built-in ones is straightforward. You can do it by writing code like the following in one of your css files:

body {
  --bs-blue: #007bff; /* Changes the blue color everywhere in the framework */
  --myWonderfulColor: #654321; /* This is a new property */
}

To make use of CSS variables, just include them in the places you need that value. This way if you choose to make a change in the future, it will automatically be applied everywhere.

CSS Variables

You can also find helpful references to the defined variables under all color-related options in the Appearance panel.

← SASS Editing →