Custom Components in Bootstrap Studio

Bootstrap Studio gives you the ability to save and reuse pieces of HTML and CSS in the form of Custom Components.

You can use this feature to extract parts of your designs which you use often - like headers, footers, logos, and add them to the User group of the Components panel, so that they can be included in a page by dragging and dropping.

Keep reading to learn how this works!

Creating a Custom Component

Creating such a component is straightforward:

  1. Select a component from the stage.
  2. Choose the Add to Library option from the Action Menu, or from the context menu that shows when you right click your component.
  3. 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.
  4. The component is now saved locally in the Component panel's User group and can be dragged and dropped into any design.

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 who can install it with a single click. 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, by right clicking them and selecting 'Export', with the .bscomp extension. 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.