Using Custom Components

Forums Tutorials Using Custom Components

This topic contains 0 replies, has 1 voice, and was last updated by  Danny Markov 3 days, 10 hours ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #3285
    Danny Markov
    Bootstrap Studio Developer

    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.


    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.

    Action Menu

    Add to Library Dialog

    User Group

    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 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.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.