Need a very basic template for layout for newbie

Bootstrap Studio Help
1

Hi,
I am new to bootstrap studio (and bootstrap).
I have read the docs here and am re-reading them to try and learn as much as I can.

As a newbie it is overwhelming but I am excited to learn.

I have seen the free templates that come with the program and they are nice but I am after something alot more basic and not sure where I can find this?

I have a very basic layout that I need- header with logo/name and phone number/contact form. Then a simple static banner with a button that takes me to a contact form. After that just a section with content, then another section with a contact form and then the footer.

I tried making the layout from scratch and my knowledge is so lacking, it is taking longer than I thought!

For example, I drag and drop (Banner - Heading Image) in the Overview panel after in Body. After that I want a section that just contains content. Then a section with a contact form, and then a section with the footer.

How do I create the section for the content? Do I select container? Or is it a div tag i use?

It would be good if there were templated available with basic layouts. If you know of any, let me know. Thanks!

2

Bootstrap Studio is a unique type of program. While it is based on a “drag-and-drop” approach, it actually kind of requires that the user have a basic understanding of website structure (and Bootstrap website structure in particular.) The documentation isn’t bad, but it doesn’t really provide a step-by-step walk-through for putting together even a basic website (like you’re describing.)

Although it is marketed as website builder for beginners, it really is geared more towards someone who has a basic understanding of how websites are built, and has some familiarity with the the DOM (page structure, style and content), as well as HTML, and CSS. It’s not as intuitive or (and please forgive the phrase) “idiot-proof” as platforms like Wix, Weebly, Squarespace or GoDaddy Website Builder. Those programs constrain the user so that it’s difficult to do things wrong, but it’s also difficult to customize things how you like. In comparison, Bootstrap Studio allows you much more freedom to design things your way, but the downside is that it’s also easy to build websites… incorrectly.

When I first started using this program, I already had some experience building websites using a static (non-responsive) website builder, and had taught myself the basics of HTML and CSS, so the program made more sense to me than to a total beginner who has never written a line of code.

Nevertheless, there was still a learning curve, and what I found helped me the most was watching their instructional videos and actually building one of the sample websites in one of the videos (I think it was the Tesla website) in real-time, as I watched. I’d just stop and start the video, and follow along with the program. Doing this just one time instantly gave me a much better understanding of how to use the program, and construct a website from scratch.

You can find all their videos here. The older videos were made using older versions of the program, so the user interface looks different, but the fundamentals of the program are all still the same. I would watch all the “how to” videos, and try building one of the sample websites. This should give you a lot more insight into how to use the program.

Additionally, it may help to read the actual Bootstrap documentation so you can understand the Bootstrap layout/grid system, which is basically something like… section > container > row > column > (content). So you start with a Section, drag it into the Body, then drag a container into the section, a row into the container, and then add columns to the row as needed, and place your content (text, images, etc) inside the columns.

Lastly, take a look at the various Bootstrap Tutorials and examples on W3 Schools. They will show you different examples of how components are combined to create page layouts.

2 Likes
3

Thankyou for replying. It seems overwhelming but I am enjoying learning something new.

I have started watching the videos and they are incredibly helpful!

I am watching beginners bootstrap videos on youtube to learn the framework. But I would love to see me more videos on building a website from scratch using bootstrap studio or how to edit the templates that come with the program.

The documentation is OK, but I learn best by watching and being guided. I really hope to see more videos on website creation.

4

Unfortunately, the BSS (Bootstrap Studio) developers don’t release many “how-to” videos, so I wouldn’t hold my breath waiting for more. At this point, they basically release videos to demonstrate new features. BSS’s one weak point is in its documentation and videos. Compared to a builder like Webflow (or even Wix) there is a ton more professional how-to vids on those latter programs. Webflow has videos explaining just about every feature of the program. Bootstrap Studio is geared more towards developers who have a basic understanding of how websites are built and styled (meaning HTML and CSS.)

Bootstrap is not a complicated framework, and you can do an awful lot with BSS just using the pre-made drag and drop components and the built-in utility classes. Utility classes are basically pre-made CSS rules that are abbreviated with short names. This is a nice little cheat-sheet of all the classes. They really make BSS a lot easier to use. For example, let’s say you wanted to add rounded corners to a photo. You can simply select it, go to the Attributes panel and type rounded-3 in the Class Names field, and you’ll instantly have a .5 rem border radius on all four corners of the photo. Want a bigger curve. Type rounded-4 or rounded-5. Without the utility class, you’d have to add an inline style via the Appearance panel, then extract the file to a custom CSS stylesheet, or write a custom CSS rule yourself and add the class via the Attributes panel.

If you really want to get the most out of this program, it pays to learn CSS and also learn as many of the Bootstrap utility classes as you can. Either watch videos on YouTube, do the lessons on W3 Schools, or take a paid course on Udemy or similar. Learning CSS will go a LONG way toward improving your ability to build website with BSS. And in general it’s just a good idea to understand the underlying technologies that make websites work (HTML and CSS.) Rarely will you need to write any HTML with BSS, but I write a ton of CSS whenever I build a Bootstrap website, because I like to make my sites look less “Bootstrappy.” I also use a ton of utility classes, which give you a lot of power, and save a lot of time.

As far as the templates go, they often use custom version of the main Bootstrap CSS file, as well as custom JavaScript. Modifying them can often be more difficult that building what you want from scratch. They are kind of meant to be used “as is.”

The best thing to do is to keep using the program, watch the videos, build the example sites, and study all the various resources available. Just dive in and try things. As long as you use the backup feature, you can’t really break anything, and you can always undo and redo things (CTRL+Z and CTRL+SHIFT+Z) And if you get stuck, post here in the forum. We’re a tight community, and people will be quick to help you with simple problems.

3 Likes
5

Thankyou, your reply is very helpful!

I am learning CSS and the Bootstrap Utility classes. When it comes to styling, I am a little unclear as to when to use the Appearance versus Options tab, as there appears to be some overlap with some functions.

Also, with the templates that come with the program, for example, Creative, where would you include your own custom CSS, would you create it in a new css sheet, or use the one that comes with the template… I have been trying to work out if there is a default css file for the template, i think it is baguetteBox.min.css, would you add your changes to that or create a custom.css?

6

Yes, there is some overlap. The simple explanation is this…

Styling done via the Option panel ALWAYS uses Bootstrap Utility classes. These will appear with a lock icon in the Attributes Panel > Class Names field. In general, if you have a choice of styling via the Options Panel or the Appearance Panel, the Options Panel is the preferable choice as it does not generate inline CSS.

Styling done via the Appearance panel ALWAYS adds inline CSS. This will appear in the Attrubutes Panel under the Class Names field, and you will see the word style in the key field (indicating it’s an inline CSS style.) Inline styling should generally be extracted to a custom style sheet, unless its just somerthing being added temporarily, or experimentally.

This image should help clarify…

image

I used the Options Panel to center the text and change the color (text-center text-warning). I used a manually typed in utility class to add the margin on top (mt-4), and I used the Appearance Panel > Text Shadow to add the text shadow (text-shadow: 1px 1px 2px var(--bs-black);)

2 Likes
7

I understand it now! Options panel is preferred way.

8

Not if you click on the style attribue dropdown in the Appearance Panel then you can add it to a css file.

image

9

I was trying to explain the most basic functionality, but yes, you are correct.

10

I am currently following this youtube course which looks very good for beginners :

1 Like
11

Hi everyone, here’s a link to an old article you might find useful.

1 Like