I purchased BSS last week and have been practicing and learning the tool. I was using Rapidweaver and Blocs before this for a long time and always felt restricted after some functionality, however unlike both of them BSS gives the user complete freedom to draw on a plain canvas whatever we want.
I really appreciate and commend the developer for making such an awesome app to help us design and develop websites with complete creativity and freedom.
My question today in this forum is that I cannot understand how to create overlapping columns in BSS. Is it not possible to do so in BSS or am I missing something.
There are no standard or “built-in” tools in Bootstrap Studio for creating overlapping elements. To do something like this would require writing custom CSS. This would be more applicable to the forum category for Webdesign Help than Bootstrap Studio Help.
There are a number of ways you can make elements overlap using CSS. You can use absolute positioning and margins, or put divs inside the columns and make them extend beyond the column using width values greater than 100%
The question is how do you want these overlapping elements to behave as you reduce the width of the display? That would determine how I’d go about creating such a layout.
I did something similar to this by placing a div inside a column and adding a class to it which sets the width to 130%-140% (depending on the breakpoint.)
Hello @printninja, thanks. a lot for your reply and detailed explanation. I read though the details, but unfortunately could not understand much as I am very new to web design using code. Like I mentioned earlier, I was using Rapidweaver and Blocs where next to nil code is required, however the overlapping effects can be easily achieved. I am also pretty sure that both Rapidweaver and Blocs use Bootstrap underneath their toolset, so I thought that I might be able top achieve this through BSS.
I am trying to create a simple blog using BSS and I was following the tutorial on blogtutorial.mdbgo.io and this is what I am trying to achieve…
This design is completely responsive, meaning the text column goes under the image column as soon as it reaches the medium screen space. I did a bit if digging in the tutorial as found out that there is a bootstrap variable ($enable-negative-margins) that is set to FALSE by default in Bootstrap 5 SASS Variables file it and needs to be set to TRUE to activate -ve margins. This can easily be done when using plain Bootstrap in some code editor like Visual Studio Code, but in BSS the file that needs to be edited is hidden and so it is not possible to edit that variable. BSS for some reason has decided to not allow to edit that variable, hence I thought maybe someone experienced might know some work around.
Here is an example of overlapping from the BSS templates itself.
The $enable-negative-margins variable being set to FALSE doesn’t prevent you from applying negative margin to components. It simply expands on Bootstrap’s margin utility classes, adding additional CSS rules to the generated bootstrap.min.css file, which then allows you to add margin utility classes with negative values (by default they are only positive.)
In the example website link you provided, by using Chrome Developer Tools, you can see that they are in fact using a negative margin Bootstrap utility class to create this overlap effect. The class is .ms-xl-n5, and the CSS rules in this class are as follows:
margin-left: -3rem !important;
The class also has a media query of 1200 pixels, so it is only applied to the column at XL and XXL screen sizes. They also have the g-0 class applied to the parent row.
You don’t have to enable the negative margin Bootstrap variable just to apply negative margins to your column. All you have to do is create the necessary CSS class in your custom style sheet, and add the appropriate media query. Then apply the class to your column via the Attributes panel. Here’s a quick mock up I did that took all of two minutes…
Thank you @printninja for your help. Sorry for the late reply. I just came back from holiday today and checked your response. I worked just as you advised and it worked perfect for me. Now I have overlapping columns starting from large screen (desktop screen) and onwards. It was a good learning for me.