Having fun with Bootstrap 4

Documentationhttps://getbootstrap.com/docs/4.0/layout/grid/

Here’s a cheatsheet that I likehttps://hackerthemes.com/bootstrap-cheatsheet/

You can find my code + result here (hit RUN)

https://repl.it/@RockyKev/nucamp-1-bootstrap-challenge

screenshot

Some other useful methods that I like: 

1) Centering content. 

<div class="container">
    <div class="row">
      <div class="col-md-8 offset-md-2 text-center">
        <h2> using "col-md-8 offset-md-2" </h2>
        <p>
          <a href="https://static.md/bd0685fa3d2695803ba8e61c9e74a30c.png">Screenshot</a> <br />
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Auctor elit sed vulputate mi sit amet mauris commodo quis. Suspendisse sed nisi lacus sed. Tortor vitae purus faucibus ornare suspendisse sed nisi. Auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam sem et tortor consequat id porta nibh. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Risus in hendrerit gravida rutrum quisque non tellus. Et malesuada fames ac turpis egestas maecenas pharetra convallis posuere.</p> 
      </div>

I do this a lot with long websites. 


2) Gutter/no Gutter

<div class="container my-5">
    <h2 class="text-center"> Gutter Tests </h2>
    <div class="row text-justify">
      <div class="col-md-4 color-red">
        <h5> with default gutters </h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. </p> 
      </div>

      <div class="col-md-4 color-green">
        <h5> with default gutters </h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. </p> 
      </div>

      <div class="col-md-4 color-red">
        <h5> with default gutters </h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. </p> 
      </div>
    </div> <!-- row -->

 </div> <!-- container -->

<div class="container my-5">
    <h2 class="text-center"> Gutter Tests - NO GUTTER <a href="https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters"> source </a></h2>
    <div class="row text-justify no-gutters">
      <div class="col-md-4 color-red">
        <h5> with default gutters </h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. </p> 
      </div>

      <div class="col-md-4 color-green">
        <h5> with default gutters </h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. </p> 
      </div>

      <div class="col-md-4 color-red">
        <h5> with default gutters </h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. </p> 
      </div>
    </div> <!-- row -->

 </div> <!-- container -->

This is great if you’re doing a collage. For example wakeupcoffee.biz (screenshot) has their images right next to each other/above each other, no gutter.


3) Edge-to-edge

<div class="edge-to-edge">
  <h2 class="text-center"> Edge-to-Edge <a href="https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters"> source</a></h2>
  <div class="row text-justify">
    <div class="col-md-4 color-red">
      <h5> with default gutters </h5>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. </p> 
    </div>

    <div class="col-md-4 color-green">
      <h5> with default gutters </h5>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. </p> 
    </div>

    <div class="col-md-4 color-red">
      <h5> with default gutters </h5>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. </p> 
    </div>
  </div> <!-- row --> 
</div>

I loved this style in 2017 – dunno why. Now, I prefer content within a container… with padding on the side. Maybe because I was a ‘edgy’ web developer. 


4) Standard Blog Template

<div class="container my-5">
    <h2 class="text-center"> Standard Blog site </h2>
  
    <div class="jumbotron">
      <h1>BLOG NAME </h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Auctor elit sed vulputate mi sit amet mauris commodo quis. </p> 
    </div>  
  
    <div class="row text-justify">
      <div class="col-md-9 color-red">
        <h5> CONTENT </h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Auctor elit sed vulputate mi sit amet mauris commodo quis. Suspendisse sed nisi lacus sed. Tortor vitae purus faucibus ornare suspendisse sed nisi. Auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam sem et tortor consequat id porta nibh. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Risus in hendrerit gravida rutrum quisque non tellus. Et malesuada fames ac turpis egestas maecenas pharetra convallis posuere.</p>

        <p>Id donec ultrices tincidunt arcu non sodales neque sodales ut. Posuere ac ut consequat semper viverra nam libero justo laoreet. Scelerisque in dictum non consectetur. Turpis egestas integer eget aliquet nibh. Nunc mattis enim ut tellus elementum sagittis vitae et leo. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Adipiscing enim eu turpis egestas pretium aenean pharetra. Maecenas accumsan lacus vel facilisis. At volutpat diam ut venenatis tellus in. Volutpat maecenas volutpat blandit aliquam etiam erat. Id velit ut tortor pretium viverra suspendisse potenti nullam. Integer eget aliquet nibh praesent tristique. Et molestie ac feugiat sed lectus vestibulum mattis. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Ac tincidunt vitae semper quis lectus. Ultrices sagittis orci a scelerisque purus semper. </p> 
      </div>

      <div class="col-md-3 color-green">
        <h5> SIDEBAR </h5>
        <ul>
          <li>stuff</li>
          <li>stuff</li>
          <li>stuff</li>
          <li>stuff</li>
          <li>stuff</li>
          <li>stuff</li>
        </ul>
      </div>

   
    </div> <!-- row -->

 </div> <!-- container -->

This contains a jumbotron + col-md-9 & col-md-3. 

So giant splash, with a 70% content and 30% sidebar.

I actually made this for myself for template reasons.


5) Hide p content on breakpoints

<div class="container my-5">
    <h2 class="text-center"> Hide p content on breakpoints <a href="https://getbootstrap.com/docs/4.0/utilities/display/"> source </a> </h2>
    <div class="row text-justify">
      <div class="col-md-3 color-red">
        <h5> Hide IF size > sm </h5>
        <p class="d-none d-sm-block">
          <b>You won't see this if you're on mobile. (min-width 556px)</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. </p> 
      </div>

      <div class="col-md-3 color-green">
        <h5 > Hide IF size > md </h5>
        <p class="d-none d-md-block">
          <b>You won't see this if on tablet/mobile. (min-width 768px)</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. </p> 
      </div>

      <div class="col-md-3 color-red">
        <h5 > hide IF size > lg </h5>
        <p class="d-none d-lg-block">
          <b>You won't see this on small desktop (min-width 992px)</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. </p> 
      </div>

      <div class="col-md-3 color-green">
        <h5 > Hide IF size > xl </h5>
        <p class="d-none d-xl-block">
          <b>You won't see this unless you're on large desktop (min-width 1200px)</b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit dignissim sodales ut eu sem integer vitae. </p> 
      </div>

    </div> <!-- row -->

 </div> <!-- container -->
    

This is how to hide content based on screen-size. In mobile-first responsive design, you might want to hide a image on mobile, but show it on desktop.

Example: 

On mobile –> show google map link.

On desktop –> show google map embed. 

Leave a Comment