Custom Components

Bootstrap Studio gives you the ability to save and reuse pieces of HTML and CSS in the form of Custom Components. This is great for things which you use often like headers and footers, which can be included in any page via drag and drop.

Creating a Custom Component

Creating such a component is straightforward:

  1. Right click a component on your page and choose the Add to Library option.
  2. In the dialog window that is shown, enter a name and choose the styles, images and fonts (if any) you would like to include together with the component.
  3. The component is now saved locally in the Component panel's User group and can be dragged and dropped into any design.
The custom "Brand Header" component.

Later, when you drag and drop this component into a design, the styles and assets you've chosen will be added automatically.

By right clicking your custom component and choosing "Share online..", you can publish it to our online library. This way you can help out other Bootstrap Studio users. Shared components are also synced across your Bootstrap Studio installs, so when you share a component on one computer, it will be copied to the rest of your computers automatically.

Exporting and Importing

Components can be exported as files with the .bscomp extension, by right clicking them and selecting "Export". You can send them to colleagues, share them through dropbox and upload them to your portfolio. This is a great tool for you or your team to extract common design snippets that you can use in different projects.