How to structure a website?

After designing a website for awhile, I am lost and confused. What I have so far is:

HTML > Body > Block/header blue > Div/header > Navbar > Container > Row.

I want to add more elements to the page, but they seem to go inside the Row, which is inside the Navbar.

That doesn't seem right: body text and footer inside a navbar? Really?

Also, I don't understand why I'm being forced into rows and columns if BStudio uses flexbox, not tables to adapt to browser width.

Does all this terminology come from Bootstrap, so I'm expected to understand Bootstrap internals to use it? I get confused by nested elements.

Am I missing something basic in how to use BStudio?

Added: how do I limit the height of an element? I have a navbar that extends below the bottom of the browser page.

I think maybe you need to go brush up on some HTML and CSS tutorials as well as the Bootstrap tutorials. Many can be found around the internet, some free, some not. Udemy has some pretty good classes on it as well as tutorials can be found on w3schools and the BSS site itself a bit.

The help here is basically for using the app, not teaching how to structure a website so once you have that information more intact you'll find that BSS is much easier to work with. Good luck!

In the Overview pane on the left, drag and drop the container that has the row in it and drop it on the Body element. Then things should seem more normal. It is a general rule for me to do things that way.


Thanks. This kind of makes sense. I have to remember that dropping a component on Body means placing it at the end.

Bootstrap and Bootstrap Studio are not the same thing. Bootstrap was developed by Twitter ( Bootstrap Studio is developed by an individual entity/company/organization etc... Bootstrap Studio is an app designed as a Drag/Drop GUI for web developers to leverage Bootstrap to build Bootstrap semantic websites. I think that's how you would describe it all.


Saj, I knew all of this. Thanks, I guess.

I was expecting BStudio to treat every Bootstrap component as a black box, but instead it shows all the internal details. I find this very confusing. I'll take time out to work through some examples.