Layout

Basic Container

<c-bs-container>Content</c-bs-container>

Preview:

Content

Container Fluid

<c-bs-container c-fluid="True">Content</c-bs-container>

Preview:

Content

Container Fluid Breakpoint

<c-bs-container fluid="md">Content</c-bs-container>

Preview:

Content

Basic Row With Cols

<c-bs-container>
  <c-bs-row>
    <c-bs-col>Column</c-bs-col>
    <c-bs-col>Column</c-bs-col>
    <c-bs-col>Column</c-bs-col>
  </c-bs-row>
</c-bs-container>

Preview:

Column
Column
Column

Responsive Columns

<c-bs-container>
  <c-bs-row>
    <c-bs-col c-sm="8">col-sm-8</c-bs-col>
    <c-bs-col c-sm="4">col-sm-4</c-bs-col>
  </c-bs-row>
</c-bs-container>

Preview:

col-sm-8
col-sm-4

Mixed Responsive Columns

<c-bs-container>
  <c-bs-row>
    <c-bs-col c-md="8">.col-md-8</c-bs-col>
    <c-bs-col c-col="6" c-md="4">.col-6 .col-md-4</c-bs-col>
  </c-bs-row>
</c-bs-container>

Preview:

.col-md-8
.col-6 .col-md-4

Row With Gutters

<c-bs-container>
  <c-bs-row c-gutter="3">
    <c-bs-col>Column</c-bs-col>
    <c-bs-col>Column</c-bs-col>
  </c-bs-row>
</c-bs-container>

Preview:

Column
Column

Row Cols

<c-bs-container>
  <c-bs-row c-cols="2">
    <c-bs-col>Column</c-bs-col>
    <c-bs-col>Column</c-bs-col>
    <c-bs-col>Column</c-bs-col>
    <c-bs-col>Column</c-bs-col>
  </c-bs-row>
</c-bs-container>

Preview:

Column
Column
Column
Column

Col Auto

<c-bs-container>
  <c-bs-row>
    <c-bs-col>1 of 3</c-bs-col>
    <c-bs-col col="auto">Variable width content</c-bs-col>
    <c-bs-col>3 of 3</c-bs-col>
  </c-bs-row>
</c-bs-container>

Preview:

1 of 3
Variable width content
3 of 3