Screen Reader utilities in bootstrap with Examples Last Updated : 15 Jul, 2021 Comments Improve Suggest changes Like Article Like Report The screen reader utility in Bootstrap helps to restrict an element to the screen readers only. That is by using the screen reader utility we can hide an element in all other devices except for screen readers. The Screen Reader utility also provide an option to display the hidden elements again when focused. For example, when navigated with a key board.Classes Available in Screen Reader Utility: .sr-only: This class hides an element in all devices except for the Screen Readers..sr-only-focusable: If this class is used on an hidden element with .sr-only class, then the element will be visible when focused by any thing like keyboard. Below examples explains the Screen Reader utilities in Bootstrap: Let us create a Heading element with .sr-only class: html <!DOCTYPE html> <html> <head> <title>screen reader</title> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> </head> <body> <h1 class="sr-only">Geeks for geek</h1> </body> </html> Output: So as we can see it's not visible in the browser, but if we look in the inspector we can see that it's still there however not taking up any space on the screen now.Let's now create a link which will act as a skip link that will become visible when gained focus by navigating with a keyboard. To do this we use both of the classes .sr-only and .sr-only-focusable as shown below: class="sr-only sr-only-focusable" html <!DOCTYPE html> <html> <head> <title>screen reader</title> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> </head> <body> <a class="sr-only sr-only-focusable" href="#content"> Skip to main content </a> </body> </html> As we can see in the inspector it's right beneath the heading element and both of them are hidden now. On pressing the tab key once the Skip link will become highlighted. Supported Browser: Google ChromeInternet ExplorerFirefoxOperaSafari Comment More infoAdvertise with us R RahulDhingra Follow Improve Article Tags : Bootstrap Similar Reads Bootstrap | Badges and Breadcrumbs Badges: Badges are numbers associated with the link to indicate the number of items associated with the link. The notification number is seen when logged in to a particular website and tells the numbers of news or notifications to see by clicking it. Example: HTML <!DOCTYPE html> <html> 4 min read Clearfix in Bootstrap One of the major problems with the structure of HTML is that if you have a child div inside parent div, the child div automatically flows around the parent div. The solution to this problem is using clear property of CSS. Bootstrap allows us to use a class named clearfix which is used to clear the f 2 min read Image Replacement in Bootstrap using text-hide Class Bootstrap allows us to replace the text with background image for any text element like paragraph element, heading element etc. With the use of .text-hide class, we can replace an element’s content with a background image. Syntax: <element class = "text-hide" style = "background-image: url('Speci 1 min read Typography in Bootstrap Bootstrap Typography provides a standardized and flexible approach to text styling, offering various classes for headings, paragraphs, and inline text elements. It ensures consistent typography across different devices and screen sizes, enhancing readability and aesthetics. Typography can be used to 2 min read Popovers in bootstrap with examples A Bootstrap Popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed with a click of a mouse pointer over that element. In the popover, if you click on any element th 3 min read Bootstrap | Spinners Set-2 Bootstrap provides us with various classes for creating different styles of the spinner to indicate the loading state. We can also modify the appearance, size, and placement of the spinners with the classes provided by Bootstrap. Buttons with border spinner: We can place the border spinner within th 4 min read Bootstrap | Spinners Set-1 Bootstrap provides us with various classes for creating different styles of the spinner to indicate the loading state. We can also modify the appearance, size, and placement of the spinners with the classes provided by Bootstrap. Types of Spinners: Border spinner: We can create a lightweight bordere 4 min read Differences between Bootstrap and JQuery UI Bootstrap: Bootstrap is a framework for front-end web development.it makes web development faster and easier. It contains HTML and CSS based design templates for various responsive front-end designing, as well as optional JavaScript plugins. JQuery UI: JQuery UI is a collection of GUI widgets and th 3 min read Flexbox utilities in bootstrap with examples The Flexible Box Layout Module in bootstrap is used for designing the flexible and responsive layout structure. It is used in Bootstrap 4. The d-flex class is used to create a simple flexbox container Syntax: <div class="d-flex p-2"></div>The d-inline-flex class is used to create an inli 11 min read Spacing in Bootstrap with Examples Spacing in Bootstrap refers to the system of predefined margin and padding utility classes that enable developers to add space around elements easily. These classes facilitate layout control and improve visual presentation in web applications.The following Syntax are used in the Various Classes for 3 min read Like