0

Starting to learn Bootstrap 4 and its responsive grid system, the code below shows my basic container class. 

<div class="container">
  <div class="row">
      <div class="col-12 col-sm-8 col-md-12 col-lg-4 box1">1</div>
      <div class="col-12 col-sm-2 col-md-6 col-lg-4 box2">2</div>
      <div class="col-12 col-sm-2 col-md-6 col-lg-4 box3">3</div>
  </div>
  <div class="row">
    <div class="hidden-sm-up col-12 box4">4</div>
  </div>
</div>

The first row is working perfectly fine, however my second row I am trying to make just visible on xs screensizes. Tried looking on Bootstrap's webpage and can't see where my error is.

Bhuwan
  • 16,525
  • 5
  • 34
  • 57
Jack Cawthra
  • 7
  • 6

1 Answers1

0

Use d-block d-sm-none bootstrap4.beta class. It will display the element below sm breakpoint

Stack Snippet

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-8 col-md-12 col-lg-4 box1">1</div>
        <div class="col-12 col-sm-2 col-md-6 col-lg-4 box2">2</div>
        <div class="col-12 col-sm-2 col-md-6 col-lg-4 box3">3</div>
    </div>
    <div class="row">
        <div class="d-block d-sm-none col-12 box4">4</div>
    </div>
</div>

Reference Link

Bhuwan
  • 16,525
  • 5
  • 34
  • 57
  • Thanks, it works now. Is there any specific reason the hidden class doesn't work when it says on the Bootstrap website that it's the replacement of 'visible-*-*'? I also can't seem to find anything about 'd-block d-sm-none' online, do you know any useful links to help me better understand? Thanks again. – Jack Cawthra Feb 07 '18 at 11:47
  • @JackCawthra actually `hidden` classes are no longer in bootstrap4 beta version...if you are using bootstrap4 aplha version the hidden classes will work... – Bhuwan Feb 07 '18 at 12:00