locked
How to hide DIV for tablet or mobile using bootstrap class RRS feed

  • Question

  • User264732274 posted

    is there any class or technique available in bootstrap by which i can hide DIV for tablet or mobile without using media query.

    please come with bootstrap class name which hide DIV for tablet or mobile. if possible add a small example. thanks

    Friday, August 19, 2016 12:31 PM

Answers

  • User-63706186 posted

    Hi

    Can you refer the below bootstrap classes

    hidden-xs (for phones)
    hidden-sm (for tablets)
    hidden-md (for desktops)
    hidden-lg (for larger desktops)

    Try the below code

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Hello World</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container-fluid hidden-xs hidden-sm">
      <h1>Hello World!</h1>  
    </div>
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 19, 2016 12:55 PM
  • User-63706186 posted

    I just gave example and it is not required

    <div class="hidden-xs hidden-sm">
      <h1 >Hello World!</h1>  
    </div>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 19, 2016 1:41 PM

All replies

  • User-63706186 posted

    Hi

    Can you refer the below bootstrap classes

    hidden-xs (for phones)
    hidden-sm (for tablets)
    hidden-md (for desktops)
    hidden-lg (for larger desktops)

    Try the below code

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Hello World</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container-fluid hidden-xs hidden-sm">
      <h1>Hello World!</h1>  
    </div>
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 19, 2016 12:55 PM
  • User264732274 posted

    is it mandatory that i need to use this class container-fluid along with hidden-xs hidden-sm for div ?

    can we write like this way without container-fluid class ?

    <div class="hidden-xs hidden-sm">
      <h1>Hello World!</h1>  
    </div>

    this link is also good https://github.com/twbs/bootstrap/issues/8883

    Friday, August 19, 2016 1:30 PM
  • User-63706186 posted

    I just gave example and it is not required

    <div class="hidden-xs hidden-sm">
      <h1 >Hello World!</h1>  
    </div>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 19, 2016 1:41 PM