Is it possible to edit the HTML/CSS directly?

I bought BS to help make things a little easier when creating my web pages, but, instead, I have found it to be VERY difficult to use. While it is probably great for anyone who wants to use simple drag-and-drop, WYSIWYG capabilities, for someone with HTML knowledge, I find it nearly impossible to use. I have been programming web sites for a few years now, but usually get stuck with the different media queries used with Bootstrap. This is the main reason I bought Bootstrap Studio, but without the ability to manually edit the HTML on my own, this program is useless for me. Does anyone know of a way in which I can edit the HTML content directly instead of using drag-and-drop?


Like myself, I think you're overthinking things here. It's extremely easy to use once you get the hang of how it actually works which it doesn't sound like you have done yet. Have you read the tutorials and the other posts here? If not I would start there. It may be a drag and drop system, but it's highly editable and actually needs to be quite often. If you're wanting to just plop in your content there are numerous different container types to use to do this and there's also the Custom Code box which you can put anything you want into.

The main thing is to figure out just what it is you're trying to accomplish for the element you're working on and construct it accordingly. One of the things I've had to do is get used to the way the new system works with developing the small media first and then the large. I still don't do it that way, but at least I've learned (thanks to this program) how the new grid system works which I couldn't get my mind around before this. I've only been using this app for about a month and I've already come so far with it it's amazing. There are parts and pieces all in the Components area which are highly editable and the main thing you really have to get used to where the drag and drop is concerned is that we cannot just edit the text of the HTML and must use the Editor built in. Slow process for me, but it works and that's still a time saver when put together with all the rest of the things this app does to save time.

If you still insist that you want to do the HTML all your own way, by all means just place any component and right click over it in the Overview DOM area on the left side and you'll get a context menu that allows you to convert to HTML. You can then edit it to your hearts content. Just remember that you cannot go backwards and return it back to it's original state which does limit you to the CSS click sensitive not always being as helpful as it is when it's not converted to HTML.

For editing the CSS which starts off pretty much all locked Bootstrap until you edit it, just go over to the right side under the Design area and right click over the Styles tab. Now choose Create CSS and create your custom CSS file. From here there is a set of vertical dots to the right side of the CSS window for each class and ID. Click that (not right click) and you'll get a context menu which allows you to copy a class to your custom CSS. This will usually show up right there above or below the one you were copying. Now you should be able to click within that CSS class's attributes and edit them as needed. The locked status of the Bootstrap assures we don't accidentally change the original Bootstrap files. Once you get the hang of this it goes quite quickly.

If you get stuck just ask and there's usually someone here to help out. Give it a chance, it's fairly new and the developers have been very open to suggestions or explanations if the suggestion is not planned for. Many changes are in the works yet from what I've seen in the forums so don't give up on it so easily. I would say this is probably one of the best builders I've ever seen that combines both the Visual and Manual aspects of coding websites with very very few bugs and quirks!

Hi Chris! I'm a newbie too. Just go to Component > Convert to HTML and it will change it to "custom code". It's straightforward!