Where to Discuss?

Local Group

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.

Bootstrap OC: Horizontal Gap Column

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;
  }
}

Bootstrap OC: Vertical Gap Column

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;
  }
}

Bootstrap OC: Row Edge Margin on Desktop Screen

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;
  }
}

Bootstrap OC: Row Edge Margin on Wide Screen

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>

Bootstrap OC: Responsive Gap: Double Column Test


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>

Bootstrap OC: Responsive Gap: Single Column Test

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.

Bootstrap SASS: Compiled CSS


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.