wovoui

Containers

Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.

Default container


<Container>
    <!-- Content here -->
</Container>
1
2
3
4

This produces following output


<div class="container">
    <!-- Content here -->
</div>
1
2
3
4

Responsive containers

Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply max-widths for each of the higher breakpoints. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will scale up with md, lg, xl, and xxl. This values can be set using size prop.

Supported values

type responsiveSizes = "sm" | "md" | "lg" | "xl" | "xxl";
1

Example

Inspect Me 

<Container size="sm">
    <!-- Content here -->
</Container>
1
2
3
4

This will produce following output


<div class="container-sm">
    <!-- Content here -->
</div>
1
2
3
4

Fluid containers

Containers can be fluid be setting prop fluid


<Container fluid>
    <!-- Content here -->
</Container>
1
2
3
4