# Layout & Grid System Shards Vue provides support for all native Bootstrap 4 layout elements including **containers**, **rows**, **columns** and **form rows** so you can use its full power while building your project's responsive layout powered by flexbox. :::demo ```html

1 / 12

2 / 12

3 / 12

4 / 12

5 / 12

6 / 12

7 / 12

8 / 12

9 / 12

10 / 12

11 / 12

12 / 12

1 / 6

2 / 6

3 / 6

4 / 6

5 / 6

6 / 6

1 / 3

2 / 3

3 / 3

1 / 2

2 / 2

1 / 1

``` ::: ## Containers Containers are the most **fundamental and required layout element** for your application or website's layout. You can use the `` component for a fixed container, or `` for a fluid container. ## Rows The `` component must be placed inside a `` component and it is used to define a row of columns. You can also use the `` component for building form layouts that help you create a layout with more compact margins. ## Columns The `` component is used to represent a column and must be placed inside a `` component. You can also use the `` component without a breakpoint-specific prop (`sm`, `md`, `lg`, `xl`) for easy column sizing that have an equal width (as seen in the examples above). ## Mixing Breakpoints You can use a combination of different props for each tier as needed. :::demo ```html

cols="12" md="6" lg="8"

cols="12" md="4" lg="3"

cols="12" md="4" lg="6"

cols="12" md="4" lg="3"

cols="12" md="6" lg="4"

cols="12" md="6" lg="8"

``` :::