Writing CSS in Bootstrap Studio

There are two ways to edit CSS in Bootstrap Studio. The first is to use the Styles tab and edit the styles of the selected component. The other is to create separate CSS files in the Design panel and edit them.

The Styles Tab

The Styles area shows you the applied CSS styles for the HTML elements that you select. This is a quick way to check what styles are active at any given moment, and to easily override default Bootstrap styling.

The Styles tab pulls CSS definitions from Bootstrap's CSS file, as well as all other CSS files that you create. Note that Bootstrap's styles are locked - you can't edit them directly. To change them, you need to Copy them to your own stylesheets.

Creating CSS Files

To do any real CSS editing, you need to create a stylesheet in the Design panel. By default, every new design comes with a styles.css file, but you can create as many files as you wish. Just right click the "Styles" label and choose the create option.

Editing CSS

Now that you have a stylesheet file, we can start editing CSS! Double click the file and our CSS editor will pop up. 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 in between rules to create new ones and in between css blocks to create new blocks with css code (this is not available in the Styles tab).

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

CSS Block Menu

When you click the three dots on the top right of each CSS block, you will see the menu that is shown above. You can duplicate, toggle media queries and delete entire blocks of CSS from the menu.

CSS 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. Check out our Tips & Tricks article for more.

Writing custom CSS goes hand in hand with the ability to add ids, classes and attributes to elements, so be sure to check our attributes tutorial as well.