The layout of the page is built on a simple two-column Bootstrap structure:
<div class="container">
<div class="row">
<div class="col-sm">
column 1
</div>
<div class="col-sm">
column 2
</div>
</div>
</div>
Using Bootstrap, both columns are displayed in the center of the window with equal margins on the left and right.
: | column 1 | column 2 | :
The task is to enhance the margins (the areas between the vertical bar and colon) based on the content within the rows. These enhancements are non-essential elements that may be hidden on smaller screens as part of the responsive design process. This particular aspect has proven to be quite challenging for me.
Initially, adding more columns or nesting containers seemed like viable solutions. However, doing so caused Bootstrap to treat these "decorative" columns as essential content, taking up valuable space on limited screen sizes.
Is there a way to inform Bootstrap that a column is purely decorative and non-essential, to be shown only when space permits?
EDIT
In response to Ahmad Dalao's request for a screenshot, I've put together an example to clarify my question. Please note that I am seeking guidance because I'm unsure how to implement this concept effectively. The image below illustrates two nested containers: the parent container holds the decorative left and right margins, while the child container contains the main content columns.
https://i.sstatic.net/FGLST.png
<div class="container-fluid" style="background:white;margin:0;padding:0;">
<div class="row" style="margin:0;padding:0;">
<div class="col-sm-2" style="text-align:right;border: 1px solid blue;margin:0;padding:0;">
<img src="decoration-left-margin.png">
</div>
<div class="col-sm-8" style="border: 1px solid blue;margin:0;padding:0;">
<div class="container" style="border: 1px solid green;margin:0;padding:0;">
<div class="row" style="margin:0;padding:0;">
<div class="col-sm-4" style="text-align:left;border: 1px solid orange;margin:0;padding:0;">
<img src="decoration-left-content.png">
</div>
<div class="col-sm-8" style="text-align:right;border: 1px solid orange;margin:0;padding:0;">
<img src="decoration-right-content.png">
</div>
</div>
</div>
</div>
<div class="col-sm-2" style="text-align:left;border: 1px solid blue;margin:0;padding:0;">
<img src="decoration-right-margin.png">
</div>
</div>
</div>