Bootstrap 4 - not responsive (hidden

#1

Good afternoon all!
Having issues with bootstrap 4 where adding the commands Hidden, visible, push, pull and device responsive settings do not render in the browser… the code is below. no isses with grid layout.
Please help…
I use Bootstrap 4, Chrome 49 (my mac will not allow further upgrades)

Thank you!!
Olena

20%20AM
20%20AM1280×800 376 KB

#2

Check your Bootstrap version as there are many different versions. Based on your classes, I think you might be declaring wrong. Looking at the documentation, it looks like visibility or hidden classes aren’t declared the way you are declaring.

https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Capture
Capture1206×634 12.8 KB

#3

On closer look, it looks like you are putting rows inside rows. I think you shouldn’t put a row inside a row and just declare grid divs in this format:

<div class="container">
  <div class="row">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>
#4

Thank you J,
it looks like the training I was following on Youtube was for Bootstrap 3, while I have the Bootstrap 4 downloaded on my Mac. Therefore, everything above is wrong. This is so frustrating at times…

#5