Size and re-size

How do I make the whole website resize depending on the screen or can it only be done based on the certain parts of it?

What do you mean by “the whole website resize”? Can you provide an example? Are you talking about shrinking or enlarging the entire site like you were pinch-zooming on a phone?

I mean, if the site is on a smaller screen, it’ll slightly adjust to that screen. I tried doing the column thing in the Options but it ends up all wrong

It’s called Responsive Design and it’s there by default. All you need to do is make sure you have at least one container for all the site or a separate container for each section. Then add your Rows with Columns to them and it will resize for you.

You may need to make a few little adjustments, but you will need to do that in the CSS.

Yeah, I did that, they’re all in columns but when I change the screen in Studio it doesn’t re-size

Do you have the columns inside a “container” component? Actually it should be similar to this:

Container:
… Row
… … Column
… … Column
etc.

There’s a lot of variations that will work for things, but the containers and rows are what give you the main start of responsiveness.

This will give you responsiveness. Also make sure your images are also set to responsive in the Option panel.

Have you tried starting out by using one of the pre-made websites available in Bootstrap Studio? These sites are all properly designed and fully responsive, so you can open one and look to see how the various components are assembled on the page, and then follow that format?

Also, I would recommend you read through the program documentation thoroughly before you start trying to build a site from scratch. And you should also take some time and watch all the videos available on the Bootstrap Studio YouTube channel.

When I first started using Bootstrap Studio I knew nothing about responsive design. The first thing I did was watch their video on building the Tesla website. I played the video while I had Bootstrap Studio open and built the site alongside the video step-by-step. This made understanding the how the program and the Bootstrap framework worked a LOT easier.

3 Likes

K thanks, I’ll check both of those out