Press "Enter" to skip to content

Illustrator Like Grid Guides & Breakpoint Indicator For Bootstrap

BS Grid Guides is an Illustrator-like grid guide and a Bootstrap breakpoint reference that displays interchangeable grid guides to help developers position and precisely align elements in the Bootstrap grid system.

bootstrap grid examples, bootstrap grid template, bootstrap stack columns vertically, 5 columns responsive grid system, bootstrap grid html template, bootstrap grid layout system

How to make use of it:

1. Load the main CSS bootstrap-guides.css into the Bootstrap project.

<!-- Bootstrap -->

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- Required For Bootstrap 4 -->

<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- Bootstrap Guides -->

<link rel="stylesheet" href="bootstrap-guides.css" />

2. Add the following HTML snippets to the page.

<div class="fixed-top h-100 w-100 bsgg-grid">

  <div class="container h-100">

    <div class="row bootstrap-grid-12 collapse h-100">

      <div class="col bsgg-grid-border"><div class="h-100 bsgg-grid-outline"></div></div>

      <div class="col bsgg-grid-border"><div class="h-100 bsgg-grid-outline"></div></div>

      <div class="col bsgg-grid-border"><div class="h-100 bsgg-grid-outline"></div></div>

      <div class="col bsgg-grid-border"><div class="h-100 bsgg-grid-outline"></div></div>

      <div class="col bsgg-grid-border"><div class="h-100 bsgg-grid-outline"></div></div>

      <div class="col bsgg-grid-border"><div class="h-100 bsgg-grid-outline"></div></div>

      <div class="col bsgg-grid-border"><div class="h-100 bsgg-grid-outline"></div></div>

      <div class="col bsgg-grid-border"><div class="h-100 bsgg-grid-outline"></div></div>

      <div class="col bsgg-grid-border"><div class="h-100 bsgg-grid-outline"></div></div>

      <div class="col bsgg-grid-border"><div class="h-100 bsgg-grid-outline"></div></div>

      <div class="col bsgg-grid-border"><div class="h-100 bsgg-grid-outline"></div></div>

      <div class="col bsgg-grid-border"><div class="h-100 bsgg-grid-outline"></div></div>

    </div>

  </div>

</div>

<div class="fixed-bottom pe-none">

  <div class="btn-group bsgg-btn-group pe-auto">

    <div class="bsgg-rl font-weight-bold px-3 py-2 btn btn-danger d-inline-block d-sm-none">XS</div>

    <div class="bsgg-rl font-weight-bold px-3 py-2 btn btn-warning d-none d-sm-inline-block d-md-none">SM</div>

    <div class="bsgg-rl font-weight-bold px-3 py-2 btn btn-success d-none d-md-inline-block d-lg-none">MD</div>

    <div class="bsgg-rl font-weight-bold px-3 py-2 btn btn-info d-none d-lg-inline-block d-xl-none">LG</div>

    <div class="bsgg-rl font-weight-bold px-3 py-2 btn btn-primary d-none d-xl-inline-block d-xxl-none">XL</div>

    <div class="bsgg-rl font-weight-bold px-3 py-2 btn btn-primary d-none d-xxl-inline-block">XXL</div>

    <button class="bsgg-rr font-weight-bold p-2 btn btn-secondary" data-bs-toggle="collapse" data-bs-target=".bootstrap-grid-12">GRID</button>

  </div>

</div>

Grid Guides & Breakpoint Indicator, Bootstrap Grid Guides Plugin/Github


See Demo And Download

Official Website(yepteam): Click Here

This superior jQuery/javascript plugin is developed by yepteam. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.