Skip to content
Related Articles

Related Articles

How to Hide Button Text in Phone Mode ?

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Oct, 2021
View Discussion
Improve Article
Save Article

While building a website for small-screen devices like smartphones, it becomes important that we use every bit of screen space wisely, we could not afford to waste any area. To achieve this, we can hide some peripheral elements in phone mode.

Hiding button text in phone mode: 

Example: This example is implemented using CSS. We can use media queries in CSS to hide button text according to the screen size of the device. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
 
        /* Basic styling */
        #btn {
            width: auto;
        }
 
        /* It is triggered when screen
           size becomes <=768px */
        @media(max-width:768px) {
            #btn-text {
 
                /* It hides the button text
                when screen size <=768px */
                display: none;
            }
        }
    </style>
</head>
 
<body>
    <h2 style="color:green">
        GeeksforGeeks
    </h2>
     
    <b>
        Hiding button text
        in phone mode</b><br /><br />
    <button id="btn">
        <img src=
            id="icon">
        <span id="btn-text">Delete</span>
    </button>
</body>
 
</html>

  
 

Example 2: The following example is implemented using bootstrap.

 

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
 
    <!-- Including Bootstrap CSS file -->
    <link rel="stylesheet" href=
        crossorigin="anonymous">
 
    <style>
        #btn {
            width: auto;
        }
    </style>
</head>
 
<body>
    <h2 style="color:green">
        GeeksforGeeks
    </h2>
     
    <b>
        Hiding button text
        in phone mode
    </b>
    <br /><br />
     
    <button>
        <img src=
            id="icon">
 
        <!-- In Bootstrap, d-none class sets
            the display property of span to
            none in all screen sizes and
            d-md-inline-block sets the display
            property to inline-block when
            screen size >=768px (medium sized
            displays)   -->
        <span class="d-none d-md-inline-block">
            Delete
        </span>
    </button>
</body>
 
</html>

Output: 

Note: Both codes will give the same output, only the font style will change in the case of bootstrap due to the default bootstrap styling


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!