Bootstrap 5 Display in Print Last Updated : 02 Aug, 2024 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 Display in print is used to display or hide some content when printing. This can be combined with viewports also. For example, some content can be made to show to all viewports except large screens and it is also made invisible when we print that page. Bootstrap 5 Display in print Classes:d-print-none: This class is used not to display the content when printing the webpage.d-none: This class is used not to display the content d-print-block: This class is used to display the block content when printing the webpage.d-print-inline: This class is used to display as inline when printing.d-print-inline-block: This class is used to display as inline-block when printing.d-print-grid: This class is used to display as a grid when printing.d-print-table: This class is used to display as a table when printing.d-print-table-row: This class is used to display as a table row when printing.d-print-table-cell: This class is used to display as a table cell when printing.d-print-flex: This class is used to display as flex when printing.d-print-inline-flex: This class is used to display as inline flex when printing.Syntax:<div class="d-print-*">...</div>Note: This * can be substituted with various print display utility classesExample 1: In this example, we will learn about Display in Print HTML <!DOCTYPE html> <html> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="container text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <h2> Bootstrap 5 Display in print </h2> <div class="d-print-none"> <p class="text-danger"> I won't be visible when u will print this webpage </p> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png" height="200px" width="200px"> </div> <div class="d-none d-print-block"> <p class="text-danger"> I will be visible only when u will print this webpage </p> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png" height="200px" width="200px"> </div> </div> </body> </html> Output:Example 2: In this example, we will learn about Display in Print along with display utility classes. We will see the usage of d-xl-block along d-print-none class. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="container text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <h2> Bootstrap 5 Display in print </h2> <div class="d-none d-xl-block d-print-none"> <p class="text-danger"> I won't be visible on smaller screens and when u will print this webpage </p> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png" height="200px" width="200px"> </div> <div class="d-none d-print-block"> <p class="text-danger"> I will be visible only when u will print this webpage </p> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png" height="200px" width="200px"> </div> </div> </body> </html> Output:Reference: https://getbootstrap.com/docs/5.0/utilities/display/#display-in-print Comment More infoAdvertise with us Next Article Bootstrap 5 Display A akshitsaxena2 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Similar Reads Bootstrap 5 Display Notation Bootstrap 5 provides display notation classes to control the visibility of elements. Classes like d-none hide elements, d-block shows them as block-level elements, d-inline as inline elements, and d-flex as flex containers. These classes can be combined with breakpoints (d-md-block, d-lg-inline, etc 4 min read Bootstrap 5 Display With Bootstrap 5 display tools, you can easily and quickly change the display value of components and more. With the help of Bootstrap responsive display utility classes, you may modify the value of the display property. For presentation purposes, we purposefully only support a portion of all potent 3 min read Bootstrap 5 Display Hiding Elements Bootstrap 5 Display Hiding elements is used to display or hide some content. This can be done based on screen size also.Bootstrap 5 Display Hiding Elements Classes:d-*-none: To hide the content based on the viewport. The * can be substituted with viewports like sm, md, lg, xl, xxl.d-*-block: To show 2 min read Bootstrap 5 Typography Display headings Bootstrap 5 Typography's Display headings feature classes from .display-1 to .display-6, offering larger font sizes and lighter weights, enhancing content hierarchy and readability, and making headings more visually appealing and structured. Typography Display headings Classes: display-*: This class 3 min read Bootstrap 5 Spacing The spacing utility is used to assign responsive-friendly margin or padding values to an element or a subgroup of its sides. Padding is the area inside of any div or container, as opposed to a margin, which is the area outside of it. Margin and Padding can be added by adding Bootstrap classes in an 3 min read BootStrap 5 Utilities Changing Display Bootstrap 5 provides a lot of utilities to make a stylish, mobile-friendly, and responsive front-end website without using any CSS code. The utility layout is used for showing, hiding, aligning, and spacing content. BootStrap 5 Utilities Changing Display provides some display properties for setting 2 min read Like