Powered by NeGD | MeitY Government of India® 2025 UX4G
Quickly and easily clear floated content within a container by adding a clearfix utility.
Set a background color with contrasting foreground color.
Colored links with hover states
Use these helpers for quickly configuring the position of an element.
Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.
Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
Add .stretched-link to a link to make its containing block clickable via a : relative; that contains a link with the .stretched-link class is clickable. Please note given how CSS position works, .stretched-link cannot be mixed with most table elements.
For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display block.
Use the custom vertical rule helper to create vertical dividers like the element.
Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with .visually-hidden. Use .visually-hidden-focusable to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). .visually-hidden-focusable can also be applied to a container–thanks to :focus-within, the container will be displayed when any child element of the container receives focus.
Government of
India
