Skip to content

Commit

Permalink
Restore grid offset classes
Browse files Browse the repository at this point in the history
Fixes #23360 by restoring just the offset class generation to our grid
framework mixins. Also restores the `make-col-offset` mixin.

Docs have been restored to illustrate this behavior and merged with the
newer margin utilities examples.
  • Loading branch information
mdo committed Aug 20, 2017
1 parent d5db28d commit fd8c052
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 2 deletions.
47 changes: 45 additions & 2 deletions docs/4.0/layout/grid.md
Original file line number Diff line number Diff line change
Expand Up @@ -493,6 +493,22 @@ With the handful of grid tiers available, you're bound to run into issues where,
{% endexample %}
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{ site.baseurl }}/docs/{{ site.docs_version }}/examples/grid/).

<div class="bd-example-row">
{% example html %}
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 offset-lg-0</div>
</div>
{% endexample %}
</div>

## Reordering

### Flex order
Expand All @@ -519,7 +535,31 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes

### Offsetting columns

With the move to flexbox in v4, we no longer have v3's style of offset classes. Instead, use margin utilities like `.mr-auto` to force sibling columns away from one another.
You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). 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.

<div class="bd-example-row">
{% example html %}
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
{% endexample %}
</div>

#### Margin utilities

With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to force sibling columns away from one another.

<div class="bd-example-row">
{% example html %}
Expand Down Expand Up @@ -604,6 +644,9 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
{% endhighlight %}

### Example usage
Expand Down Expand Up @@ -684,4 +727,4 @@ $container-max-widths: (
);
{% endhighlight %}

When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints.
When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints.
9 changes: 9 additions & 0 deletions scss/mixins/_grid-framework.scss
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,15 @@
order: $i;
}
}

// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
.offset#{$infix}-#{$i} {
@include make-col-offset($i, $columns)
}
}
}
}
}
}
4 changes: 4 additions & 0 deletions scss/mixins/_grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,7 @@
// do not appear to require this.
max-width: percentage($size / $columns);
}

@mixin make-col-offset($size, $columns: $grid-columns) {
margin-left: percentage($size / $columns);
}

2 comments on commit fd8c052

@jrkd
Copy link

@jrkd jrkd commented on fd8c052 Aug 21, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These offset classes are missing from the downloadable files on https://getbootstrap.com/docs/4.0/getting-started/download/

Both the source and CDN files

@mdo
Copy link
Member Author

@mdo mdo commented on fd8c052 Aug 23, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you found this commit, you can see where it was added. The PR that restored these classes was merged after the first beta was release. We don’t update our hosted docs until another release.

Please sign in to comment.