Here you can set a name and width/height in pixels of your device. To add more devices to this dropdown, click the last option - Add New Device or just open the Settings dialog and switch over to the Devices pane. There are a number of popular devices already defined but you can also add your own. Using the Device switcher, you can resize the stage to match the width and height of a specific device. This allows you to quickly test how your design looks on devices with various screen sizes, from mobile phones to desktop monitors. These buttons can be used to resize your stage to match the width of the bootstrap grid breakpoints. This extra space is only added in the app itself and not when the design is exported. Extra Whitespace - when on, will add extra padding to the bottom of the page so that it's easier to drag and drop components.Show Comments - will show/hide comments that you or your team mates have left.Show Box Model - will display margins and paddings of components when you hover them.Outline Grid - will display the borders of rows and columns.# Stage Menuīy using the dropdown menu on the top-left, you can control the overlays that the stage displays over the page. Clicking the latter will give you a list of device presets. Lastly, you have the current dimensions and zoom level. To increase icon sizes relative to their container, use the fa-xs, fa-sm, fa-lg (33 increase), fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x. They let you zoom in/out, flip the width and height, and switch on the Fit to Canvas option, which resizes the stage to fill the central part of the window. You can also control the stage from these buttons: Just grab one of the edges with your mouse and drag it: The stage can be resized to simulate any device size. It shows a live preview of the page you are designing, lets you move components and edit their text content. Just override the font-size and color properties.The stage is the middle section of the Bootstrap Studio window. The same applies when writing CSS in our CSS editor. To change the size and color of an icon, use the font-size and color options in the Appearance panel.
There are slight differences between the two types but generally both can be customized via simple CSS. # Customizing Iconsĭepending on the selected icon set, the icons may be SVG based ( Bootstrap Icons (opens new window), Tabler Icons (opens new window)) or web font based ( Font Awesome (opens new window), Material Icons (opens new window)). The Icon component will reflect the change. You can also use Bootstraps grid system in conjunction with the. Responsive images automatically adjust to fit the size of the screen.
Select one of the icons in the dialog and click the Save button (or just double click the icon). Learn HTML Learn CSS Learn RWD Learn Bootstrap Learn W3.CSS Learn Colors Learn Icons Learn Graphics Learn SVG Learn Canvas Learn How To Learn Sass. In this dialog, you can browse all available icon sets from the dropdown on the top left and search for icons by name. Double click it to open the Icon browser. # Basicsĭrag and drop an Icon component from the Component panel to the stage. They are fully customizable, work in all web browsers and are nice and sharp on high dpi screens. Bootstrap Studio comes with a rich library of free, ready to use icons.