indian flagGovernment of India
  • Design System 3.0 (opens in a new tab)
  • GitHub GitHub
GitHub
v3.0
  • v3.0 (Latest)
  • v2.0
  • v1.0.2
  • v1.0.1
  • v1.0.0
  • Getting started
    • Get started with UX4G
    • Download
    • Contents
  • Content
    • Figures
    • Images
    • Reboot
    • Tables
    • Typography
  • Layout
    • Breakpoints
    • Columns
    • Containers
    • CSS Grid
    • Grid
    • Gutters
    • Utilities
    • Z-Index
  • Forms
    • Form Control
    • Floating Labels
    • Checks & Radios
    • Input Group
    • Layout
    • Overview
    • Range
    • Select
    • Validation
  • Components
    • Accordion
    • Alerts
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Carousel
    • Close Button
    • Collapse
    • Dropdowns
    • List Groups
    • Modal
    • Navbar
    • Navs and Tabs
    • Offcanvas
    • Pagination
    • Placeholders
    • Popovers
    • Progress
    • Scrollspy
    • Spinners
    • Toasts
    • Tooltips
    • Stepper
    • Search
    • Chips
    • Date and Time
    • Feedback
  • Helpers
    • Clearfix
    • Color & Background
    • Coloured Links
    • Position
    • Ratio
    • Stacks
    • Stretched links
    • Text Truncation
    • Vertical Rule
    • Visually Hidden
  • utilities
    • API
    • Background
    • Borders
    • Colors
    • Display
    • Flex
    • Float
    • Interactions
    • Opacity
    • Overflow
    • Position
    • Shadows
    • Sizing
    • Spacing
    • Text
    • Vertical align
    • Visibility
    • Z-index
  • UX4G Chart
  • Getting started
    • Get started with UX4G
    • Download
    • Contents
  • Content
    • Figures
    • Images
    • Reboot
    • Tables
    • Typography
  • Layout
    • Breakpoints
    • Columns
    • Containers
    • CSS Grid
    • Grid
    • Gutters
    • Utilities
    • Z-Index
  • Forms
    • Form Control
    • Floating Labels
    • Checks & Radios
    • Input Group
    • Layout
    • Overview
    • Range
    • Select
    • Validation
  • Components
    • Accordion
    • Alerts
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Carousel
    • Close Button
    • Collapse
    • Dropdowns
    • List Groups
    • Modal
    • Navbar
    • Navs and Tabs
    • Offcanvas
    • Pagination
    • Placeholders
    • Popovers
    • Progress
    • Scrollspy
    • Spinners
    • Toasts
    • Tooltips
    • Stepper
    • Search
    • Chips
    • Date and Time
    • Feedback
  • Helpers
    • Clearfix
    • Color & Background
    • Coloured Links
    • Position
    • Ratio
    • Stacks
    • Stretched links
    • Text Truncation
    • Vertical Rule
    • Visually Hidden
  • Utilities
    • API
    • Background
    • Borders
    • Colors
    • Display
    • Flex
    • Float
    • Interactions
    • Opacity
    • Overflow
    • Position
    • Shadows
    • Sizing
    • Spacing
    • Text
    • Vertical align
    • Visibility
    • Z-index
  • UX4G Chart

Powered by NeGD | MeitY Government of India® UX4G

  1. Layout

Layout

Breakpoints

In UX4G, breakpoints are adjustable widths that control how the responsive layout functions on various devices or viewport sizes.

Columns

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.

Containers

Containers are a fundamental building block of UX4G that contain, pad, and align your content within a given device or viewport.

CSS Grid

UX4G's default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we're seeing in browsers like the new CSS Grid.

Grid

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Gutters

Gutters are the padding between your columns, used to responsively space and align content in the UX4G grid system.

Utilities

Changing display

Z-Index

Z-Index

    Previous « Typography Next Breakpoints »

Search docs