bootstrap hidden-xs not working

Question

I just found out about hidden-xs, hidden-sm etc, so am trying it out for the first time..

How come this doesn't hide the review div on any screen size?

<div class="row hidden-sm">
   <div class="col-xs-12">
      <result-reviews [result]='selectedResult?.result.result'></result-reviews>
   </div>
</div>

Here is more of my code:

<div class="modal-body">
   <div class="container-fluid">
      <div class="row">
         <div class="col-lg-7">
            <div class="row">
               <div id="image-div" class="col-sm-5 col-lg-5">
                  <result-image [result]='selectedResult?.result.result'></result-image>
               </div>
               <div class="col-sm-7 col-lg-7">
                  <result-attributes [result]='selectedResult?.result.result'></result-attributes>
               </div>
            </div>
            <div class="row hidden-sm">
               <div class="col-xs-12">
                  <result-reviews [result]='selectedResult?.result.result'></result-reviews>
               </div>
            </div>
         </div>
         <div class="col-lg-5">
            <div id="shops-section">
               <div id="map" #map></div>
               <ul>
                  <li *ngFor="let shop of selectedResult?.result.result.nearbyShops">
                     <div class="shop-details">
                        {{ shop.name }}
                     </div>
                  </li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</div>

Solution 1

Which version of bootstrap are you using? In the bootstrap 4 alpha the hidden-xs classes (and sm, md, ...) have been replaced by hidden-xs-up or hidden-xs-down as explained here: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Solution 2

It works with d-none d-sm-block! Try this if you want to hide the division.

For reference, this is the link Getbootstrap Migration

Solution 3

How come this doesn't hide the review div on any screen size?

Read this part of the bootstrap documentation: http://getbootstrap.com/css/#responsive-utilities-classes

hidden-sm will only apply to sizes between 768 and 992px width.