The Container component is an essential building block for creating layouts. Its ability to center content, provide fluid and fixed widths, and adapt responsively to different screen sizes makes it an invaluable tool for developers. By using the Container effectively, you can ensure that your application maintains a clean and organized appearance while enhancing the user experience.

Fluid Container Example

By default, the Container is fluid, meaning it adjusts its width based on the viewport size. You can control its maximum width by utilizing the maxWidth prop.

maxWidth Prop Values

The maxWidth prop accepts several predefined values, each corresponding to specific breakpoints. Here are the available options:

  • "xs": This sets the maximum width to the extra-small breakpoint (0px to 600px). The container will not exceed this width, providing a compact layout suitable for mobile devices.
  • "sm": The small breakpoint (600px to 960px) ensures that the container expands up to a width of 600px, making it a good choice for tablets and smaller desktops.
  • "md": This option sets the maximum width to the medium breakpoint (960px to 1280px). It is useful for standard desktop views while still accommodating smaller devices.
  • "lg": The large breakpoint (1280px to 1920px) allows the container to grow larger, up to 1280px, ideal for wide-screen displays and detailed layouts.
  • "xl": This sets the maximum width to the extra-large breakpoint (1920px and above). It's particularly beneficial for high-resolution screens where more content can be displayed without feeling cramped.
  • false: If set to false, the container will have no maximum width constraint, allowing it to stretch the full width of its parent element.

Another Example with maxWith = "md"

Fixed Container Example

If you prefer a fixed width, you can use the fixed prop. This aligns the container's max-width with the minimum width of the current breakpoint, ensuring that your layout remains consistent across different screen sizes

Nested Container Example

A small section on nesting containers, emphasizing best practices.