How to hide element on small devices in Twitter Bootstrap ?

Twitter Bootstrap makes extensive use of specific classes to achieve all the various kinds of functionalities.

  • To hide elements on any arbitrary screen size, you can make use of a specific Bootstrap .d-none class.
  • For small screen sizes, you can modify it to use .d-sm-none class
  • For extra small screen sizes, you can modify it to use .d-none or .d-xs-none
  • For medium screen devices, you can modify it to use .d-md-none

Basic Approach: Let us say we want to hide a particular div. All we need to do is to apply that div to the specific classes that we need according to our requirements. The classNames were listed above.

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="d-sm-none">hide on small screens</div>
<div class="d-xs-none">hide on extra small screens</div>
<div class="d-md-none">hide on medium screens</div>

chevron_right


Efficient Approach: Let us say we want to hide a button “Click Here” on small device screens. 

  • Just target the desired element.
  • Apply the class “d-sm-none”
  • For visualization, it is depicted below the two instances – before applying the className and after applying the className.
  • Before we have applied the className, we can see that the button is visible clearly.
  • As soon as we apply the className, the button disappears from the small screen devices.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>
            Hide elements in Small devices
        </title>
        <!-- Include bootstrap CDN CSS file-->
        <link rel="stylesheet" 
              href=
              integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
              crossorigin="anonymous" />
        <!-- Style to create button -->
        <style>
            .GFG {
                background-color: white;
                border: 2px solid black;
                color: green;
                padding: 5px 10px;
                text-align: center;
                display: inline-block;
                font-size: 20px;
                margin: 10px 30px;
                cursor: pointer;
            }
        </style>
    </head>
  
    <body>
        <h1>GeeksforGeeks</h1>
  
        <!-- Adding link to the button on 
             the onclick event -->
        <!-- Notice the .d-sm-none class that 
             hides the button on small devices-->
        <button class="GFG d-sm-none"
                onclick=
 "window.location.href = 'https://ide.geeksforgeeks.org';">
            Click Here
        </button>
    </body>
</html>

chevron_right


Output (Mobile devices):

Before applying the .d-sm-none class:

After applying the .d-sm-none class:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.