Where does the cellphone image come from?

When I create a simple home page with html/Body/Block (header blue), it is shown in my desktop with a picture of a cell phone on the right. This picture is omitted when the width is narrow. My question is: where does this image come from? I don't see it in the overview at bottom left, or anywhere else.

I want to replace this image with my own image, but I can't see how to do this.

I made a screenshot, but I don't see a way to include it here.

Simply go to the Overview panel on the lower left and expand the Container component under the Navbar. You will see a Row with two columns. Expand the second column and you will see a Div which contains the Image of the iphone. You can double-click the word Image and it will open the image browser where you can see the actual iphone.svg image. This particular block uses a number of atypical techniques (background images, and divs) to create the final image of the phone with the diagonal highlight, and three different colored boxes indicative of Bootstrap Studio's logo.

The reason the phone "disappears" when the width is reduced is because the column that contains the image is set via the Responsive display settings in the options panel to be hidden below LG screen sizes.

You need to spend time familiarizing yourself with the BSS studio interface, the Overview panel, Bootstrap's responsive framework in general (how components can be displayed or hidden at different screen sizes) and CSS in general. Understanding all of these isl mandatory to be able to use this program effectively. I would recommend watching all the tutorial videos, and reading all the tutorial texts.

Printninja, Thanks. My time is limited so I was trying to make progress as quickly as possible, with the help of this forum, but I think you are right, I really have to go through all the tutorials for BStudio to really understand everything here. Although I am a retired professional software engineer and Web designer, I have never used Bootstrap and I haven't yet found the ideal tutorial for Bootstrap itself. Any links would be appreciated.

As I mentioned in a different thread for you, there are some good tutorials for all website design aspects including Bootstrap at Udemy.com and the w3schools also has a good setup for learning Bootstrap there too. I'm sure if you just google Bootstrap Tutorials or Bootstrap Online Classes you'll find plenty of them.


If you are an experienced web designer, then you must be familiar with HTML and CSS. Bootstrap is simply a framework of pre-made CSS classes combined with some jquery to make it easy to build responsive websites without having to manually do all the flexbox legwork. It uses a large number of "helper classes" to serve as shortcuts to having to create CSS from scratch. (ex. applying the class mx-auto would horizontally center fixed-width block level content.) To get the most out of BSS, you don't really need to be sharp with HTML, because the program creates 99% of the HTML you'll need, but you do need to know you CSS.

Here's a "cheat sheet" that I used to refer to quite often before I memorized most of the classes I use often. https://hackerthemes.com/bootstrap-cheatsheet/

In terms of learning the Bootstrap Studio program and UI, I suggest watching the three tutorial videos, and simultaneously building the exact sites in those videos in BSS in real time, pausing the videos as necessary. This was the first thing I did when I got this program, and it really helped me understand the "Bootstrap Studio ethos" quickly.

Most software tries to be ergonomic in its own way... appealing and easy to use by most humans, but software developers can't step outside themselves when they're creating software, and use the program as others would use it, so they tend to sometimes take things for granted that end up baffling users. For example, for the longest time, there was (not sure if this has been corrected) no explanation in any of the BSS documentation on how to add a new page to a website. I figured it out pretty easily because I've been using computers for almost 40 years, and I've learned to just keep clicking shit until I find what I'm looking for, but I can't tell you how many new people have come to the BSS Forums asking "how do I add a page in BSS?"

The regulars who "patrol" these forums... Jo, marcco, twinstream, myself and a few others, have answered certain questions dozens and dozens of times to the point of exasperation, where we beg the developers, "PLEASE add this info into the tutorials somewhere, we're tired of explaining the same thing over and over to newbies!"

BSS is a FANTASTIC piece of software with a mediocre "instruction manual." I'd love to actually create a fully comprehensive user manual, but I run two full time companies, and I'm certainly not going to do it for free. I believe Jo has offered to help the devs create a true user manual as well, but they don't seem to want help from outside their "family", so we're all stuck with what we've got.

Heck, we can't even get them to add a new section to the forum. But when it comes to fixing bugs and updating and improving this software, the devs get 10 stars in my book. Take the time to learn the software and the U.I., and it will pay you back tenfold.