# HTML Editing
Bootstrap Studio is a visual editor, and as such HTML can't be edited directly. The application generates HTML code from the components that you add to your page and the options that you choose for them.
You can do nearly everything from the visual tools which Bootstrap Studio gives you, but for the rare cases where you need HTML editing, you can achieve it with the Custom Code component.
# HTML Tab
This is one of the two non-closable tabs in the Editor panel. It gives you an overview of the generated page's HTML. Although code in this window can't be edited, you can set class names and attributes to elements.
Left clicking an HTML element will select it (updating the Styles tab in the process). Double clicking will open the Attributes panel. Right clicking will show a context menu with useful options, like changing the type of element, copying it as HTML and copying the element's attributes so they can be pasted to another.
# Searching
You can search in your page's HTML by text or CSS selector. Thanks to the power of CSS selectors, some pretty advanced searches are possible:
p.someclass- paragraphs with a specific class namea[href=""]- links with empty hrefsimg:not([alt])- images without alt attributesh2 + p- select only paragraphs that are preceded by h2 tagsh1:first-child- h1 tags that are the first element in their parent
# Editing Attributes
Beneath the HTML preview you can see the Attributes panel. Click to expand it if it isn't visible in its entirety. This panel lets you add an ID, class names and other attributes to the selected HTML element.
To navigate the Attributes form use Tab, Shift+Tab and Enter. The attributes are applied automatically to the element, and full Undo/Redo history is retained.
Note
You can add any CSS class that you wish, but some, like in figure-img above, are locked. To change locked classes in Bootstrap Studio, you need to modify the component's options.
# Head Content
Sometimes you need to place specific code in the <head> of your pages. This can be done from the Head Content section in the Settings dialog.
The HTML you write here will be added without modification to the <head> sections of all pages of your design when you export and preview. This is the recommended way to include snippets like Google Analytics or other services which need to be present on all pages of your website.
You have two tabs which control where your content will be inserted:
- Before Content - This includes your HTML content just after the opening
<head>tag. This is before Bootstrap's CSS file and your design's stylesheets and meta tags. - After Content - This includes your HTML content just before the closing
</head>tag, after Bootstrap's CSS file and your design's stylesheets and meta tags.
# Head Content for a Single Page
If you need to include head content only on a specific page, you can do this by right clicking the page in the Design panel and choosing Properties. This will bring a screen much like the one above, but it will apply only for the selected page.
# Meta Tags
As a more structured alternative to Head Content, you can add specific meta tags to your pages, from the Settings dialog.
As with Head content, this will apply to all pages of your design. If you wish to add meta tags to a specific page, you can do so by right clicking the page in the Design panel and choose Properties.
# Writing HTML
If you need to write unrestricted HTML in Bootstrap Studio, you can do so with the help of the Custom Code component. It's a powerful tool, which lets you freely edit its content as HTML. The app doesn't attempt to parse or validate the code in any way, which opens the door to things like embedding server-side languages or tags which the application doesn't natively support.
# Converting Components to HTML
You can convert any component on the page to Custom Code and unlock it for editing by right clicking it and choosing Convert to HTML. After this you can convert it back to components by right clicking and choosing Convert to Components.
# Importing HTML
You can import externally created websites by dropping one or more HTML files onto the application window. The app will present you with the Page Import dialog.
Here, you can select to parse the page into components, and to scan for assets like CSS, JS and images. If you leave the latter option enabled, you will then see the asset import dialog:
With this tool, you can select which of the detected assets you wish to import. You also have the option of replacing your current Bootstrap theme with one of the CSS files in the design. This is useful in cases where the template uses a customized version of the Bootstrap framework.
Keep in mind that assets like bootstrap.min.js and aos.js are already included in your design by Bootstrap Studio, so you need to uncheck them to avoid duplication.
Finally, click Import and your template will be converted to a regular Bootstrap Studio design.