Storybook

How it works

MDBSvelte grid system uses a series of components: Rows, Containers and Columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

New to or unfamiliar with flexbox? Read our CSS flexbox guide.

One of three columns

<script>
  import {MDBContainer, MDBRow, MDBCol} from "mdbsvelte";
</script>

<MDBContainer>
  <MDBRow>
    <MDBCol>One of three columns</MDBCol>
    <MDBCol>One of three columns</MDBCol>
    <MDBCol>One of three columns</MDBCol>
  </MDBRow>
</MDBContainer>

The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent Containercomponent.

Breaking it down, here’s how it works:

Containers provide a means to center your site’s contents. Use <MDBContainer> component for fixed width or <MDBContainer fluid > for width: 100% across all viewport and device sizes.
Rows are wrappers for columns. Each MDBCol has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
In a grid layout, content must be placed within MDBCol and only MDBCol may be immediate children of MDBRow.
Thanks to flexbox, Columns without a specified width will automatically layout as equal width Columns. For example, four instances of will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples.
Column props indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns, you can use .
MDBCol widths are set in percentages, so they’re always fluid and sized relative to their parent element.
MDBCol have horizontal padding to create the gutters between individual columns, however, you can remove the margin from MDBRow and padding from MDBCol with .no-gutters className on the MDBRow.
To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., applies to small, medium, large, and extra large devices, but not the first xs breakpoint).
You can use predefined grid classes (like ).

Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.

Grid options

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	540px	720px	960px	1140px
prop	`xs`	`sm`	`md`	`lg`	`xl`
# of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

Auto-layout columns

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of and every column will be the same width.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

<script>
  import {MDBContainer, MDBRow, MDBCol} from "mdbsvelte";
</script>

<MDBContainer>
  <MDBRow>
    <MDBCol>1 of 2</MDBCol>
    <MDBCol>2 of 2</MDBCol>
  </MDBRow>
  <MDBRow>
    <MDBCol>1 of 3</MDBCol>
    <MDBCol>2 of 3</MDBCol>
    <MDBCol>3 of 3</MDBCol>
  </MDBRow>
</MDBContainer>

Equal-width <MDBCol>can be broken into multiple lines.

Column

<script>
  import {MDBContainer, MDBRow, MDBCol} from "mdbsvelte";
</script>

<MDBContainer>
  <MDBRow>
    <MDBCol>Column</MDBCol>
    <MDBCol>Column</MDBCol>
    <div class="w-100"/>
    <MDBCol>Column</MDBCol>
    <MDBCol>Column</MDBCol>
  </MDBRow>
</MDBContainer>

Horizontal alignment

One of two columns

<script>
  import {MDBContainer, MDBRow, MDBCol} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBRow start>
    <MDBCol size="4">One of two columns</MDBCol>
    <MDBCol size="4">One of two columns</MDBCol>
  </MDBRow>
  <MDBRow center>
    <MDBCol size="4">One of two columns</MDBCol>
    <MDBCol size="4">One of two columns</MDBCol>
  </MDBRow>
  <MDBRow end>
    <MDBCol size="4">One of two columns</MDBCol>
    <MDBCol size="4">One of two columns</MDBCol>
  </MDBRow>
  <MDBRow around>
    <MDBCol size="4">One of two columns</MDBCol>
    <MDBCol size="4">One of two columns</MDBCol>
  </MDBRow>
  <MDBRow between>
    <MDBCol size="4">One of two columns</MDBCol>
    <MDBCol size="4">One of two columns</MDBCol>
  </MDBRow>
</MDBContainer>

No gutters

The gutters between columns in our predefined grid classes can be removed with <MDBRow noGutters > . This removes the negative margins from <MDBRow> and the horizontal padding from all immediate children <MDBCol>.

Need an edge-to-edge design? Remove the parent <MDBContainer> or <MDBContainer fluid> component.

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

.col-9

.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6
Subsequent columns continue along the new line.

<script>
  import {MDBContainer, MDBRow, MDBCol} from "mdbsvelte";
</script>

<MDBContainer>
  <MDBRow>
    <MDBCol size="9">
      .col-9
    </MDBCol>
    <MDBCol size="4">
      .col-4
      <br/>
      Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
    </MDBCol>
    <MDBCol size="6">
      .col-6
      <br/>
      Subsequent columns continue along the new line.
    </MDBCol>
  </MDBRow>
</MDBContainer>

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple <MDBRow>s, but not every implementation method can account for this.

.col-6 .col-sm-4

<script>
  import {MDBContainer, MDBRow, MDBCol} from "mdbsvelte";
</script>

<MDBContainer>
  <MDBRow>
    <MDBCol size="6" sm="4">
      .col-6 .col-sm-4
    </MDBCol>
    <MDBCol size="6" sm="4">
      .col-6 .col-sm-4
    </MDBCol>
    <div class="w-100"></div>
    <MDBCol size="6" sm="4">
      .col-6 .col-sm-4
    </MDBCol>
    <MDBCol size="6" sm="4">
      .col-6 .col-sm-4
    </MDBCol>
  </MDBRow>
</MDBContainer>

Reordering

Order classes

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

First, but unordered

Second, but last

Third, but second

<script>
  import {MDBContainer, MDBRow, MDBCol} from "mdbsvelte";
</script>

<MDBContainer>
  <MDBRow>
    <MDBCol>First, but unordered</MDBCol>
    <MDBCol class="order-12">Second, but last</MDBCol>
    <MDBCol class="order-1">Third, but second</MDBCol>
  </MDBRow>
</MDBContainer>

Offsetting columns

You can offset <MDBCol> in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<script>
  import {MDBContainer, MDBRow, MDBCol} from "mdbsvelte";
</script>

<MDBContainer>
  <MDBRow>
    <MDBCol md="4">.col-md-4</MDBCol>
    <MDBCol md="4" class="offset-md-4">
      .col-md-4 .offset-md-4
    </MDBCol>
  </MDBRow>
  <MDBRow>
    <MDBCol md="3" class="offset-md-3">
      .col-md-3 .offset-md-3
    </MDBCol>
    <MDBCol md="3" class="offset-md-3">
      .col-md-3 .offset-md-3
    </MDBCol>
  </MDBRow>
  <MDBRow>
    <MDBCol md="6" class="offset-md-3">.col-md-6 .offset-md-3</MDBCol>
  </MDBRow>
</MDBContainer>

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action:

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<script>
  import {MDBContainer, MDBRow, MDBCol} from "mdbsvelte";
</script>

<MDBContainer>
  <MDBRow>
    <MDBCol sm="5" md="6">
      .col-sm-5 .col-md-6
    </MDBCol>
    <MDBCol sm="5" md="6" class="offset-sm-2 offset-md-0">
      .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
    </MDBCol>
  </MDBRow>

  <MDBRow>
    <MDBCol sm="6" md="5" lg="6">
      .col-sm-6 .col-md-5 .col-lg-6
    </MDBCol>
    <MDBCol sm="6" md="5" lg="6" class="offset-md-2 offset-lg-0">
      .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
    </MDBCol>
  </MDBRow>
</MDBContainer>

Margin utilities

You can use margin utilities like .mr-auto to force sibling <MDBCol> away from one another.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<script>
  import {MDBContainer, MDBRow, MDBCol} from "mdbsvelte";
</script>

<MDBContainer>
  <MDBRow>
    <MDBCol md="4">.col-md-4</MDBCol>
    <MDBCol md="4" class="ml-auto">
      .col-md-4 .ml-auto
    </MDBCol>
  </MDBRow>
  <MDBRow>
    <MDBCol md="3" class="ml-md-auto">
      .col-md-3 .ml-md-auto
    </MDBCol>
    <MDBCol md="3" class="ml-md-auto">
      .col-md-3 .ml-md-auto
    </MDBCol>
  </MDBRow>
  <MDBRow>
    <MDBCol size="auto" class="mr-auto">
      .col-auto .mr-auto
    </MDBCol>
    <MDBCol size="auto">.col-auto</MDBCol>
  </MDBRow>
</MDBContainer>

Nesting

To nest your content with the default grid, add a new <MDBRow> and set of <MDBCol> columns within an existing <MDBCol> column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

<script>
  import {MDBContainer, MDBRow, MDBCol} from "mdbsvelte";
</script>

<MDBContainer>
  <MDBRow>
    <MDBCol sm="9">
      Level 1: .col-sm-9
      <MDBRow>
        <MDBCol size="8" sm="6">Level 2: .col-8 .col-sm-6</MDBCol>
        <MDBCol size="4" sm="6">Level 2: .col-4 .col-sm-6</MDBCol>
      </MDBRow>
    </MDBCol>
  </MDBRow>
</MDBContainer>

No Preview