Container

Container components are used to wrap content and provide a consistent layout. They are used to contain and center content, and to provide padding and margins.

size:screen, column:false

size:screen, column:true

size:page, column:false

size:page, column:true

size:main, column:false

size:main, column:true

<Container size="screen" column={false}>
    <Block caption="size:screen, column:false"></Block>
</Container>
<hr class="my-4">
<Container size="screen" column={true}>
  <Block caption="size:screen, column:true"></Block>
</Container>
<hr class="my-4">
<Container size="page" column={false}>
  <Block caption="size:page, column:false"></Block>
</Container>
<hr class="my-4">
<Container size="page" column={true}>
  <Block caption="size:page, column:true"></Block>
</Container>
<hr class="my-4">
<Container size="main" column={false}>
  <Block caption="size:main, column:false"></Block>
</Container>
<hr class="my-4">
<Container size="main" column={true}>
  <Block caption="size:main, column:true"></Block>
</Container>