# Container Containers are the most basic layout element in UX4G and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. **Category:** Layout **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-layout-container--introduction ## Variants documented in Storybook - Showcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-layout-container--showcase ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Container. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Layout

Container System

Containers are the building blocks of layout in UX4G, providing a way to contain, pad, and center content.

How it works

Containers are the most basic layout element in UX4G and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s always 100% wide).

Responsive Breakpoints

Breakdown of container widths across different breakpoints.

Class <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
.ux4g-container 100% 540px 720px 960px 1140px 1320px
.ux4g-container-sm 100% 540px 720px 960px 1140px 1320px
.ux4g-container-md 100% 100% 720px 960px 1140px 1320px
.ux4g-container-lg 100% 100% 100% 960px 1140px 1320px
.ux4g-container-xl 100% 100% 100% 100% 1140px 1320px
.ux4g-container-2xl 100% 100% 100% 100% 100% 1320px
.ux4g-container-fluid 100% 100% 100% 100% 100% 100%

Comprehensive Class Reference

All container-related utility classes.

Container Classes

CONTAINER ux4g-container
CONTAINER FLUID ux4g-container-fluid
CONTAINER SM ux4g-container-sm
CONTAINER MD ux4g-container-md
CONTAINER LG ux4g-container-lg
CONTAINER XL ux4g-container-xl
CONTAINER 2XL ux4g-container-2xl
``` React: ```jsx import React from 'react'; const ContainerExample1Demo = () => ( <>
Layout

Container System

Containers are the building blocks of layout in UX4G, providing a way to contain, pad, and center content.

How it works

Containers are the most basic layout element in UX4G and are required when using our default grid system . Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s always 100% wide).

Responsive Breakpoints

Breakdown of container widths across different breakpoints.

Class <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
.ux4g-container 100% 540px 720px 960px 1140px 1320px
.ux4g-container-sm 100% 540px 720px 960px 1140px 1320px
.ux4g-container-md 100% 100% 720px 960px 1140px 1320px
.ux4g-container-lg 100% 100% 100% 960px 1140px 1320px
.ux4g-container-xl 100% 100% 100% 100% 1140px 1320px
.ux4g-container-2xl 100% 100% 100% 100% 100% 1320px
.ux4g-container-fluid 100% 100% 100% 100% 100% 100%
{/* All Container Classes */}

Comprehensive Class Reference

All container-related utility classes.

Container Classes

CONTAINER ux4g-container
CONTAINER FLUID ux4g-container-fluid
CONTAINER SM ux4g-container-sm
CONTAINER MD ux4g-container-md
CONTAINER LG ux4g-container-lg
CONTAINER XL ux4g-container-xl
CONTAINER 2XL ux4g-container-2xl
); export default ContainerExample1Demo; ``` Angular: ```html
Layout

Container System

Containers are the building blocks of layout in UX4G, providing a way to contain, pad, and center content.

How it works

Containers are the most basic layout element in UX4G and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s always 100% wide).

Responsive Breakpoints

Breakdown of container widths across different breakpoints.

Class <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
.ux4g-container 100% 540px 720px 960px 1140px 1320px
.ux4g-container-sm 100% 540px 720px 960px 1140px 1320px
.ux4g-container-md 100% 100% 720px 960px 1140px 1320px
.ux4g-container-lg 100% 100% 100% 960px 1140px 1320px
.ux4g-container-xl 100% 100% 100% 100% 1140px 1320px
.ux4g-container-2xl 100% 100% 100% 100% 100% 1320px
.ux4g-container-fluid 100% 100% 100% 100% 100% 100%

Comprehensive Class Reference

All container-related utility classes.

Container Classes

CONTAINER ux4g-container
CONTAINER FLUID ux4g-container-fluid
CONTAINER SM ux4g-container-sm
CONTAINER MD ux4g-container-md
CONTAINER LG ux4g-container-lg
CONTAINER XL ux4g-container-xl
CONTAINER 2XL ux4g-container-2xl
``` ### 2. Showcase — Container Variants HTML: ```html
Default Container
Fluid Container
``` React: ```jsx import React from 'react'; const ContainerExample2Demo = () => ( <> {/* Fixed Container */}
Default Container
{/* Fluid Container */}
Fluid Container
); export default ContainerExample2Demo; ``` Angular: ```html
Default Container
Fluid Container
``` ### 3. Showcase — Responsive Containers HTML: ```html
Container sm
Container md
Container lg
Container xl
Container 2xl
``` React: ```jsx import React from 'react'; const ContainerExample3Demo = () => ( <>
Container sm
Container md
Container lg
Container xl
Container 2xl
); export default ContainerExample3Demo; ``` Angular: ```html
Container sm
Container md
Container lg
Container xl
Container 2xl
``` ### 4. Showcase — Container Centering HTML: ```html
Centered Layout
``` React: ```jsx import React from 'react'; const ContainerExample4Demo = () => ( <>
Centered Layout
); export default ContainerExample4Demo; ``` Angular: ```html
Centered Layout
``` ### 5. Showcase — Margin Auto Centering HTML: ```html
Centered with Width
``` React: ```jsx import React from 'react'; const ContainerExample5Demo = () => ( <>
Centered with Width
); export default ContainerExample5Demo; ``` Angular: ```html
Centered with Width
``` ### 6. Showcase — Flexbox Centering HTML: ```html
Centered Content (Flexbox)
``` React: ```jsx import React from 'react'; const ContainerExample6Demo = () => ( <>
Centered Content (Flexbox)
); export default ContainerExample6Demo; ``` Angular: ```html
Centered Content (Flexbox)
``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.