Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Hiding div elements in a responsive layout using bootstrap classes

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 482
    Comment on it

    Hiding div elements in a responsive layout using bootstrap classes:

    We can easily hide a div block on a particular layout like for extra small devices(mobile) or for tablets or for desktop using bootstrap classes.

    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

    Example:

    <div class="container s1">
        <div class="row ">
                <div class="col-lg-6  col-md-2 col-sm-4 col-xs-6 bg ">
                    <p>James<p>
                    <img src="img/team-1.png">
                </div>
                <div class="col-lg-6   col-md-2 col-sm-4 col-xs-6 bg ">
                    <p>Mickey<p>
                    <img src="img/team-2.png">
                </div>
                <div class="col-lg-6   col-md-2 col-sm-4 col-xs-6 bg hidden-xs">
                    <p>Randy<p>
                    <img src="img/team-3.png">
                </div>
                <div class="col-md-2  bg hidden-sm  hidden-lg hidden-xs">
                    <p>John<p>
                    <img src="img/team-4.png">
                </div>
                <div class="col-md-2  bg hidden-sm  hidden-lg hidden-xs">
                    <p>Smith<p>
                    <img src="img/team-2.png">
                </div>
                <div class="col-md-2  bg hidden-sm  hidden-lg hidden-xs">
                    <p>Michael<p>
                    <img src="img/team-1.png">
                </div>
                
        </div>
                
          
    </div>
    

    In the above example we are hiding some blocks for small, large and extra small devices and some for only mobile devices(< 768).

 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: