Preface
Goal: Wrapper class to solve bootstrap horizontal gap issue.
As we have seen in previous responsive chapter,
bootstrap can’t have gap between column directly.
Bootstrap use gutter by putting element class inside column class.
We can also make our own custom wrapper class inside column.
We require to leave bootstrap behind for our new component class.
1: Responsive Gap
How does it Works?
You can use div element inside div element,
or for html5 you can utilize section inside main.
HTML Skeleton
For bootstrap reason,
we need to reset the horizontal padding px for column.
<!-- responsive main -->
<div class="row layout-base maxwidth">
<main class="col-md-8 px-0">
<section class="main-wrapper p-4">
<article>
Page Content
</article>
</section>
</main>
<aside class="col-md-4 px-0">
<section class="aside-wrapper p-4">
Side Menu
</section>
</aside>
</div>Stylesheet
It is basically just, adding margin-left and margin-right.
// responsive - mobile
.main-wrapper {
margin-right: 0px;
}
.aside-wrapper {
margin-left: 0px;
}
@include media-breakpoint-up(md) {
.main-wrapper {
margin-right: 10px;
}
.aside-wrapper {
margin-left: 10px;
}
}We can omit default margin for mobile, since bootstrap has zero margin anyway.
For both horizontal gap and vertical gap, the style sheet is shown as below:
// responsive - mobile
.main-wrapper {
margin-bottom: 20px;
}
@include media-breakpoint-up(md) {
.main-wrapper {
margin-bottom: 0px;
}
.main-wrapper {
margin-right: 10px;
}
.aside-wrapper {
margin-left: 10px;
}
}
Notice that now we are accessing bootstrap breakpoint variable.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;2: Dual Column
I would like to give an aesthetic accent.
Row Edge: Desktop
For desktop screen, the double columns should not touch the edge of the screen.
@include media-breakpoint-up(md) {
.main-wrapper {
margin-right: 10px;
margin-left: 10px;
}
.aside-wrapper {
margin-left: 10px;
margin-right: 10px;
}
}
Row Edge: Wide
But for wide screen, this should be the same size, as both navbar header and footer.
@include media-breakpoint-up(xl) {
.main-wrapper {
margin-left: 0px;
}
.aside-wrapper {
margin-right: 0px;
}
}
HTML Content
Now consider give it a content, and see how it looks.
<!-- responsive main -->
<div class="row layout-base maxwidth">
<main class="col-md-8 px-0">
<section class="main-wrapper p-4 oc-white z-depth-3 hoverable">
<article>
<ul class="list-group">
<li class="list-group-item oc-blue-9 text-light">
<h4>Your Mission</h4></li>
<li class="list-group-item oc-blue-7">
To have, to hold, to love,
cherish, honor, and protect?</li>
<li class="list-group-item oc-blue-5">
To shield from terrors known and unknown?
To lie, to deceive?</li>
<li class="list-group-item oc-blue-3">
To live a double life,
to fail to prevent her abduction,
erase her identity,
force her into hiding,
take away all she has known.</li>
<li class="list-group-item oc-blue-1">
<blockquote class="bq bq-blue-dark">
As always, should you be caught or killed,
any knowledge of your actions will be disavowed.
</blockquote>
</li>
</ul>
</article>
</section>
</main>
<aside class="col-md-4 px-0">
<section class="aside-wrapper p-4 oc-white z-depth-3 hoverable">
Side Menu
</section>
</aside>
</div>
3: Single Column
Test with Landing Page
We are not finished yet.
We have to test for single column,
such as main content without aside sidebar.
Feature is likely to fail,
if we do not have enough test in the first place.
Stylesheet
For single column, we need to add this one single class,
to fix margin-right for wide screen.
@include media-breakpoint-up(xl) {
.main-wrapper {
margin-left: 0px;
}
.aside-wrapper {
margin-right: 0px;
}
.main-wrapper.single {
margin-right: 0px;
}
}HTML Content
My favorite single column is, landing page.
<!-- responsive main -->
<div class="row layout-base maxwidth">
<main class="col px-0">
<section class="main-wrapper single text-center p-4
oc-white z-depth-3 hoverable">
<article>
<p>
<a href="#"
class="btn btn-primary my-2"
>Articles Sorted by Month</a>
<a href="#"
class="btn btn-secondary my-2"
>Articles Sorted by Tag</a>
</p>
<p class="text-muted">
As always,
should you be caught or killed,
any knowledge of your actions will be disavowed.</p>
</article>
</section>
</main>
</div>
You should try the gap yourself between screen: mobile, desktop, and wide.
Summary
As a conclusion, here below is the complete responsive gap class for bootstrap.
// responsive - mobile
.main-wrapper {
margin-bottom: 20px;
}
@include media-breakpoint-up(md) {
.main-wrapper {
margin-bottom: 0px;
}
.main-wrapper {
margin-right: 10px;
margin-left: 10px;
}
.aside-wrapper {
margin-left: 10px;
margin-right: 10px;
}
}
@include media-breakpoint-up(xl) {
.main-wrapper {
margin-left: 0px;
}
.aside-wrapper {
margin-right: 0px;
}
.main-wrapper.single {
margin-right: 0px;
}
}The result of compiled CSS can be seen in left pane in figure below,
while in the right pane is the SASS source.
What is Next ?
While we design the layout skeleton in this article, now we need to fill of each layout such as blog post and side widget.
Consider continue reading [ Bootstrap OC - Sass - Widget ].
Thank you for reading.