If you wish to share your creations in the Online Library, you need to create a user component first. You may now use it in your designs just like any other component. Once it's installed, the component can be found in the Studio tab under the Downloaded group. If you like it, you can add it to your library by clicking the Install button. To try any online component, click on its thumbnail and it will open in a new design. Hovering on a component will show a preview of what it looks like, how many upvotes it has and any comments other people have left. There are thousands of packages available here that you can browse and use in your designs. The Online tab of the Components panel holds an ever-growing library of components, all of which are created by the amazing Bootstrap Studio community. Later, when you drag and drop this component into a design, the styles and assets you've chosen will be added automatically if needed. The component is now saved locally in the Component panel's User group and can be dragged and dropped into any design. In the dialog window that is shown, enter a name and choose the styles, JS code, images and fonts (if any) you would like to include together with the component.

To create a custom component, right click an element on your page and choose the 'Add to Library' option. This is great for things which you use often like headers and footers, which can be included in any page via drag and drop. This will display your components in a special Favorites group near the top of the Component panel.īootstrap Studio gives you the ability to save and reuse pieces of HTML, CSS and JS in the form of User Components. To make it easier to find the components you use most often, you can right click them and choose 'Add to Favorites'. These special components are great for quickly building common user interface sections like headers, footers, galleries, and more. Some groups, such as the UI group, contain more complex components that have built-in styles, images, placeholder content, and sometimes JavaScript code. The quickest way to find a component is to use the Search components bar at the top.

Online bootstrap studio