Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Chapter 7: Bootstrap - Responsive utilities

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 442
    Comment on it

    Bootstrap gives some modest bunch helper classes, for quicker mobile-friendly development. These can be utilized for appearing and hiding content by device by means of the media query, consolidated with extensive, little, and medium gadgets.

     

    Responsive utilities are currently only available for block and table toggling.

    Classes Devices
    .visible-xs Extra small (less than 768px) visible
    .visible-sm Small (up to 768 px) visible
    .visible-md Medium (768 px to 991 px) visible
    .visible-lg Larger (992 px and above) visible
    .hidden-xs Extra small (less than 768px) hidden
    .hidden-sm Small (up to 768 px) hidden
    .hidden-md Medium (768 px to 991 px) hidden
    .hidden-lg Larger (992 px and above) hidden

     

    Here is the example that explains the use of above-listed Helper Class :-

    <div class = "contafromer">
    <div class = "row visible-on">
       <div class = "col-xs-6 col-sm-3">
          <span class = "hidden-xs">Extra small</span> <!-- This will hide from xs screen -->
          <span class = "visible-xs"> Visible on x-small</span>  <!-- This will display from xs screen -->
       </div>
    
       <div class = "col-xs-6 col-sm-3">
          <span class = "hidden-sm">Small</span> <!-- This will hide from sm (small) screen -->
          <span class = "visible-sm"> Visible on small</span> <!-- This will display from xs screen -->
       </div>
    
       <div class = "clearfix visible-xs"></div>
       <div class = "col-xs-6 col-sm-3">
          <span class = "hidden-md">Medium</span> <!-- This will hide from md (medium) screen -->
          <span class = "visible-md"> Visible on medium</span> <!-- This will be visible from md (medium) screen -->
       </div>
    
       <div class = "col-xs-6 col-sm-3">
          <span class = "hidden-lg">Large</span>  <!-- This will hide from md (large) screen -->
          <span class = "visible-lg"> Visible on large</span>  <!-- This will be visible from md (large) screen -->
       </div>
    </div>  
    </div>
    

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: