As I ventured into creating a business theme with stripes, akin to the one developed by W3Schools and accessible here, I encountered a particular challenge. The layout consisted of horizontal sections with varying background colors.
My main concern was that the columns in Services, Portfolio, and Pricing extended across the entire width of the page, which didn't seem visually appealing. Specifically, the three pricing boxes felt too wide and should have been more centered. Let's focus on these pricing boxes for the following questions.
To address this issue, I set out to narrow down and center these pricing boxes while preserving the alternating full-width background color scheme. Here are three approaches I considered:
1) Nesting a Container within a Fluid-Container:
<div id="pricing" class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
BlaBlaBla
</div>
...
</div>
</div>
</div>
2) Implementing CSS and HTML Adjustments:
.fixed-width {
display: inline-block;
float: none;
width: 300px;
}
.row-centered {
text-align: center;
}
-
<div id="pricing" class="container-fluid">
<div class="row row-centered">
<div class="col-sm-4 col-xs-12 fixed-width">
BlaBlaBla
</div>
...
</div>
</div>
3) Using 3x col-sm-2 with Empty Columns:
Maintaining the fluid-container layout, I substituted three col-sm-4 with an empty col-sm-3, three col-sm-2, and concluded with another empty col-sm-3 (totaling 12 columns).
4) Utilizing 3x col-sm-2 with offset-3 for Centering:
In place of three col-sm-4, I opted for one col-sm-2 col-sm-offset-3, followed by two col-sm-2 (though not adding up to 12, the centering is achieved with offset).**
However, both options (3) and (4) presented issues whereby shrinking the browser window led to the boxes becoming too small before wrapping onto the next line (resulting in text spillover). Additionally, when utilizing container instead of container-fluid in (4), the boxes appeared excessively narrow even in fullscreen mode.
What would be the most effective approach to tackle this? It seems like a common obstacle faced by many crafting business websites, yet after hours of online research, I couldn't locate a satisfactory solution.
Appreciate your insight,
Magnus