Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !21211

Add .no-gutters option to remove gutters from rows

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Mark Otto requested to merge no-gutters into v4-dev 8 years ago
  • Overview 0
  • Commits 1
  • Pipelines 0
  • Changes 2

This branch adds .no-gutters to the predefined grid classes (meaning it can be removed if you disable the grid classes). It includes docs for how it's built in the source Sass and how to use it with a quick demo. This was one of the biggest feature requests for v4, so getting it in there with relatively few lines of code added was a no brainer.

Fixes #19107 (closed).

screen shot 2016-11-26 at 11 08 51 am
Compare
  • v4-dev (base)

and
  • latest version
    5e20c372
    1 commit, 2 years ago

2 files
+ 42
- 1

    Preferences

    File browser
    Compare changes
docs/‎layout‎
gri‎d.md‎ +30 -1
sc‎ss‎
_grid‎.scss‎ +12 -0
docs/layout/grid.md
+ 30
- 1
  • View file @ 5e20c372

  • Edit in single-file editor

  • Open in Web IDE


@@ -22,7 +22,7 @@ At a high level, here's how the grid system works:
- Content should be placed within columns, and only columns may be immediate children of rows.
- Column classes 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'd use `.col-sm-4`.
- Column `width`s are set in percentages, so they're always fluid and sized relative to their parent element.
- Columns have horizontal `padding` to create the gutters between individual columns.
- Columns have horizontal `padding` to create the gutters between individual columns, however, you can remove the `margin` from rows and `padding` from columns with `.no-gutters` on the `.row`.
- There are five grid tiers, one for each [responsive breakpoint]({{ site.baseurl }}/layout/overview/#responsive-breakpoints): extra small, small, medium, large, and extra large.
- Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., `.col-sm-4` applies to small, medium, large, and extra large devices).
- You can use predefined grid classes or Sass mixins for more semantic markup.
@@ -374,6 +374,35 @@ Build on the previous example by creating even more dynamic and powerful layouts
{% endexample %}
</div>
### Example: Remove gutters
The gutters between columns in our default, predefined grid classes can be removed with `.no-gutters`. This removes the negative `margin`s from `.row` and the horizontal `padding` from all immediate children columns.
Here's the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). While this generates a more specific selector, column padding can still be further customized with [spacing utilities]({{ site.baseurl }}/utilities/spacing/).
{% highlight sass %}
.no-gutters {
margin-right: 0;
margin-left: 0;
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
{% endhighlight %}
In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
<div class="bd-example-row">
{% example html %}
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
{% endexample %}
</div>
### Example: 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.
scss/_grid.scss
+ 12
- 0
  • View file @ 5e20c372

  • Edit in single-file editor

  • Open in Web IDE


@@ -28,6 +28,18 @@
.row {
@include make-row();
}
// Remove the negative margin from default .row, then the horizontal padding
// from all immediate children columns (to prevent runaway style inheritance).
.no-gutters {
margin-right: 0;
margin-left: 0;
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
}
// Columns
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
3
docs no-backport-to-v4 v5
3
docs no-backport-to-v4 v5
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
0
0 participants
Reference: twbs/bootstrap!29326
Source branch: no-gutters

Menu

Explore Projects Groups Snippets