CODEWITHSUNDEEP
htmlcsstwitter-bootstrapangular
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

bootstrap hidden-xs not working

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>

Upvotes: 6

Views: 28245

Answers (4)

daGo
daGo

Reputation: 2968

Since bootstrap v.4.0 (stable)

All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

Upvotes: 0

Anushka Panagar
Anushka Panagar

Reputation: 41

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

Upvotes: 4

Christoph Muth
Christoph Muth

Reputation: 86

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/

Upvotes: 7

Johannes
Johannes

Reputation: 67768

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.

Upvotes: 2

Related Questions