Container Component

Basic Container

The simplest way to use a container, content will be limited to a reasonable width and centered

Content will be limited to a reasonable width and centered

 <Container>
<p>Content will be limited to a reasonable width and centered</p>
</Container> 

Different Size Containers

Set the container width size using the size property, supporting xs, sm, md, lg, xl, and full

Small size container

 <Container size="sm">
<p>Small size container</p>
</Container> 

Custom Padding

Set the container’s padding size using the padding property, supporting none, sm, md, lg, and xl

Container with large padding

 <Container padding="lg">
<p>Container with large padding</p>
</Container> 

Non-centered Container

Set the centered property to false to make the container content not centered

Non-centered container, left-aligned

 <Container centered={false}>
<p>Non-centered container, left-aligned</p>
</Container> 

Full Width Container

Use size=“full” to create a container that takes up the entire available width

Full width container, no padding

 <Container size="full" padding="none">
<p>Full width container, no padding</p>
</Container> 

Combined Usage

Demonstrates multiple properties of the Container component used together

Large Size Container

Using extra large padding, centered content display, and custom class name

 <Container 
size="lg" 
padding="xl" 
centered={true}
class="my-custom-class"
>
<div class="bg-base-200 p-4 rounded-lg">
  <h3 class="text-lg font-bold">Large Size Container</h3>
  <p>Using extra large padding, centered content display, and custom class name</p>
</div>
</Container> 