How to create this layout in bootstrapstudio

I am working on one website and I stuck at this layout. Is it possible to create this layout using bootstrap studio ?

Please advice.


Is that a responsive design? A fluid one, what happens on different screen size? I don't know exactly what kind of effect on resize you want to obtain, you probably need to use the z-index CSS2 functionality. So a good start could be googling for "z-index image overlapping" or something like that.

and yes, when you know what you want to do and how that gets done, you will be able to implement in in BSS

I have completed this using hand coding and no need to use z-index as I have used left image as background. See Video:

I have brought this software thinking it will help me complete these tasks, but seems it's not achievable using the software.<br /> Is this only for doing basic tasks? Please advice if I am wrong.


Bootstrap Studio is software to help you use Bootstrap Framework. Most everything in it will pertain to the main structures of a site as well as Bootstrap's Framework system. What you're asking about is a Component which is not a Bootstrap Component and will therefore not be "default" in the app. Many people build components and share them in the Online tab (top left) which you can download and use. This app makes putting your site together very easy for many things, but you will still need to adjust things manually at times in the CSS or creating special components that are not Bootstrap built components.

Having said that mouthful, I've been using BSS to make websites (production sites for clients) for over 2 years now and can say, barring the need for PHP, this app can build full websites of many different types and variations. There are times when it will only be able to be a framework tool, but those are few and far between and usually mean that someone needs to include PHP in their site which the app cannot do.

Hope that answers your question(s).

Hello Jo,

Thanks for your reply.

  1. What I am asking is very basic stuff we usually do, and if this is not supported by the software then it's not useful.
  2. The person Marrco mentioned me to find z-index on google, which I know anyone can do, but I was expecting any solid solution/direction on how can you solve your issue using these steps in BSS, which didn't happen.
  3. I would love to see the live websites you have built using BSS.
  4. Regarding the your comment "include PHP in their site" , I never mentioned I need to do PHP using BSS, it's completely off topic and I understand BSS do not support PHP and I also do not expect it should.
  5. In fact if BSS would have build a library of websites "Built by BSS" was a great idea, but again I think it's basic product and not capable to do much than basic stuff, that's why the author didn't have created that forum section.


Hello and welcome to the forums!

You can make any type of design in Bootstrap Studio. The app itself is optimized for the Bootstrap framework, but you can ignore the Bootstrap components and insert divs, spans, sections etc, and tie it all together with custom CSS.

You can watch some of our tutorials on our YouTube channel.

I think you're over thinking things here jin. The program can do pretty much anything you need it to do, you just have to learn how it's done in the program as not all programs are created alike as we all know. I don't know of any apps that can do what you're asking to do as a default function actually. The suggestion to use one of the images as the background image is probably the most useful way of doing what you're after doing.

P.S. My mention of PHP is just an example of a reason you would need to edit the files of the site permanently after export, wasn't to bring up PHP as a feature at all.

Do you have a link to the site you saw that component setup on? If so maybe there's a few here that would be willing to help you put it together, there's some pretty talented imaginations and minds on this forum which are pretty helpful when it comes to things like this. Up to you if you want to throw it away, but since you paid for it you may as well see if it's really useful or if you are just copping an attitude at it because it's not doing what you want it to the way you want it too :P Give it a little more time and play with it some. We've all gone through the growing panes of learning the app so feel free to ask what you need and when you need specifics it's always good if you have links to either the site you see it on, or your own site uploaded if you need help fixing something. Good luck whatever you decide to do. :)

Hi Jin,

What I am asking is very basic stuff we usually do, and if this is not supported by the software then it’s not useful.

You can do that in many different ways. It depends on what you exactly want to achieve. Today I coded a fixed navbar with a .svg navbar-brand using position: absolute and different width based on @media. All that done inside BSS. But that was my special need for a specific website, to have an image (logo) partially overlap another image (carousel slide).

There was no specific component to do everything. But knowing BSS and bootrsap4 capabilities and classes it was a quick job. Added standard navigation bar component, set it to fixed, dropped the logo in position and removed the default text. Created a .navbar-brand img style with position absolute and gave a width, clicked on 'duplicate' style, then clicked on Add Media Query to set the larger width for larger screens. Can I tell that navigation bar with a logo overlapping was fully supported by the software? Well, yes. I did all inside the software. Even if there was not a premade component that exactly fit my need for that specific design. And it still is even if I decide that even on a large screen after a few lines of scrolling my fixed navbar will shrink to use less space. I will have to manually add a javascript library to trigger that. BSS is not supposed to do everything for me, but it's a tool to help create websites. Maybe there's already a user created component that does that, but if you studied bootstrap (as I suppose ALL pro that bought BSS to build websites for their customers) it's often better and faster to create the specific layout manually than to mess with tons of pre-made snippets.

That's why I asked you to exactly specify what you want to obtain and how that design behaves at different screen sizes. You can use flexbox, the grid system, many different solutions can overlap 2 images. Included the one that fit your need. now that you hand coded it, I'm sure you can recreate that specific layout (background + float right, I suppose) inside BSS and use it for your website.

I think it’s basic product and not capable to do much than basic stuff,

Why did you spend your good money on it? There's a complete demo on the homepage, so I suppose that before paying for it you run the demo and probably watched the tutorials too. That's what I do before open my pockets to buy a professional tool. And then I try to study the docs and learn all the features. After a few years use with a legit bought and renewed license I do think that BSS can help you create advanced and professional made websites, not just 'basic stuff'. Especially if you invest your time studying bottstrap4 specs, html and css, and of course spend your time to understand how this tool can be an important part of your workflow.