Material UI Container

Namachila October 13, 2025

0 1 1 minute read

Material-UI is a user interface framework that provides pre-defined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Typography component in the Material-UI library.

Container:

It is the basic Material-UI component that centers the content horizontally. It manages the layout of its children.

There are two types of styling and adjusting properties that can be used with the container.

Fluid: The Fluid container wraps the content in it with maxWidth value which is provided as a prop, and this value will be the default value of the container.

maxWidth value defines the width of the screen that we are targeting.

xl: 1920px(extra large)
lg: 1280px(large)
md: 960px(medium)
sm: 600px(small)
xs: 0px(extra small)

Fixed: If you prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport, you can set the fixed property. The max-width matches the min-width of the current breakpoint.

Syntax:

<Container maxwidth="lg">
   <h1>This is Container</h1>
</Container>

Installing React App:

Step1: Create a React app using the following command.

npx create-react-app container-example

Step 2: Get into the project directory.

cd container-example

Installing Material-UI:

npm install @material-ui/core
// OR
yarn add @material-ui/core

Import Container:

import Container from '@material-ui/core/Container';

Example:

App.js

import Container from '@material-ui/core/Container'; 
import React, { Component }  from 'react'; 
  
  
export default function SimpleContainer() { 
  return ( 
    <> 
      <Container maxWidth="lg"> 
        <h1  style={{ backgroundColor: '#cfe8fc'}}> 
          Container Of maxWidth = lg  
         </h1> 
      </Container> 
      <Container maxWidth="md"> 
        <h1  style={{ backgroundColor: '#cfe8fc'}}> 
          Container Of maxWidth = md  
         </h1> 
      </Container> 
      <Container maxWidth="sm"> 
        <h1  style={{ backgroundColor: '#cfe8fc'}}> 
          Container Of maxWidth = sm 
        </h1> 
      </Container> 
      <Container maxWidth="xs"> 
        <h1  style={{ backgroundColor: '#cfe8fc'}}> 
          Container Of maxWidth = xs  
        </h1> 
      </Container> 
      <Container fixed> 
        <h1  style={{ backgroundColor: '#cfe8fc'}}> 
          Container with fixed prop 
         </h1> 
      </Container> 
    </> 
  ); 
}

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!