Open In App

Responsive utility classes in Bootstrap

Last Updated : 22 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

The responsive utility classes help to build responsive web designs easily. You can hide or display the content of your choice on the web page. You have to define the size of the screen for which you are hiding or displaying the content. 

Responsive utility classes are defined for five different types of sizes:

  • xs: It denotes the extra small-sized screen, whose width will be less than 576px.
  • sm: The small size screen with a width greater than or equal to 576px.
  • md: It denotes a medium-sized screen with a width greater than or equal to 768px.
  • lg: Large devices of width greater than or equal to 992px.
  • xl: The Extra large devices with a width greater than or equal to 1200px.

Here’s the list of responsive utility classes:

  • .d-none: This class is used to hide the content on all the different screen-sized devices.
  • .d-none .d-sm-block: This class is used to hide the content only on Extra small devices.
  • .d-sm-none .d-md-block: This class is used to hide the content only on small devices.
  • .d-md-none .d-lg-block: This class is used to hide the content only on medium-sized devices.
  • .d-lg-none .d-xl-block: This class is used to hide the content only on large devices.
  • .d-xl-none .d-xxl-block: This class is used to hide the content only on extra-large devices.
  • .d-block: This class is used to display the content on all the different screen-sized devices.
  • .d-block .d-sm-none: This class is used to display the content only on Extra small devices.
  • .d-none .d-sm-block .d-md-none: This class is used to display the content only on small devices.
  • .d-none .d-md-block .d-lg-none: This class is used to display the content only on medium-sized devices.
  • .d-none .d-lg-block .d-xl-none: This class is used to display the content only on large devices.
  • .d-none .d-xl-block .d-xxl-none: This class is used to display the content only on extra-large devices.
// Visible only for small size devices
<div class=".d-none .d-sm-block .d-md-none">

    // Hidden only for medium size devices
    <div class=".d-md-none .d-lg-block">
        <!---content of div tag--->
    </div>
</div>

The examples below demonstrate the use of responsive utility classes:

Example 1:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
  
    <!-- Bootstrap cdn to link the bootstrap
        with HTML document -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
        crossorigin="anonymous" />
  
    <style>
        .green {
            background-color: green;
            color: white;
            border: 2px solid black;
        }
    </style>
  
    <title>Responsive utility classes in Bootstrap</title>
</head>
  
<body>
    <div class="container">
        <div class="row">
            <span class="col d-md-block green"> 
                Text 1 of first container 
            </span>
            <span class="col d-md-none"> 
                Text 2 of first container 
            </span>
            <span class="col d-md-block green"> 
                Text 3 of first container 
            </span>
        </div>
  
        <div class="row">
            <span class="col d-md-none"> 
                Text 1 of second container 
            </span>
            <span class="col d-md-block green"> 
                Text 2 of second container 
            </span>
            <span class="col d-md-none"> 
                Text 3 of second container 
            </span>
        </div>
    </div>
  
    <!-- Bootstrap jQuery link -->
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
        integrity=
"sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
        crossorigin="anonymous">
    </script>
      
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity=
"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous">
    </script>
</body>
  
</html>
 






                        










Output:




Example 2:




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <meta charset="UTF-8" /> 


    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 


    <meta name="viewport" content= 


        "width=device-width, initial-scale=1.0" /> 


  


    <!-- Bootstrap cdn to link the bootstrap  


            with HTML document -->


    <link href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"


         rel="stylesheet" integrity= 


"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 


        crossorigin="anonymous" /> 


  


    <style> 


        .green { 


            background-color: green; 


            color: white; 


            border: 2px solid black; 


        } 


    </style> 


  


    <title>Responsive utility classes in Bootstrap</title> 


</head> 


  


<body> 


    <div class="container"> 


        <div class="row"> 


            <span class="col d-sm-none green">  


                Text 1 of first container  


            </span> 


            <span class="col d-sm-block">  


                Text 2 of first container  


            </span> 


            <span class="col d-sm-none green">  


                Text 3 of first container  


            </span> 


        </div> 


  


        <div class="row"> 


            <span class="col d-sm-block">  


                Text 1 of second container  


            </span> 


            <span class="col d-sm-none green">  


                Text 2 of second container  


            </span> 


            <span class="col d-sm-block">  


                Text 3 of second container  


            </span> 


        </div> 


    </div> 


  


    <!-- Bootstrap jQuery link -->


    <script src= 


"https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"


        integrity= 


"sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"


        crossorigin="anonymous"> 


    </script> 


      


    <script src= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"


        integrity= 


"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"


        crossorigin="anonymous"> 


    </script> 


</body> 


  


</html>



















                        







                        










Output:




                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        BootStrap5 Grid system Responsive classes
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Streamlining Utility Classes with Updated Naming Convention and Sass API
            

        
    
        
            

                Can I Create Masonry Layout using Tailwind CSS Utility Classes ?
            

        
    
        
            

                What are the different utility classes in Materialize CSS ?
            

        
    
        
            

                What are the Spacing Utility Classes in Tailwind CSS ?
            

        
    
        
            

                Creating Custom Utility Classes in Tailwind CSS and React JS
            

        
    
        
            

                What are the classes to create responsive image & video in Materialize ?
            

        
    
        
            

                BootStrap5 Grid system Responsive classes
            

        
    
        
            

                Bootstrap 5 Utility Reference
            

        
    
        
            

                Tailwind CSS 3 Classes doesn't Override Previous Classes
            

        
    
        
            

                Bootstrap DropDowns and Responsive Tabs
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
A

        

            
        

        

                                    


                                    

                                        abhisheksainiaggarwal                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox