Bootstrap: Add completely flush containers (with no padding)

[James1345]

Bootstrap has container and container-fluid classes for content. While container-fluid is full-width, it comes with some padding, which is undesirable in certain scenarios (e.g. sidebars that are not floating).

I recommend a container-flush class (or a different name if you prefer) that mimics fluid, but has 0 padding on all sides.

[James1345]

For bootstrap 4. I forgot to put that in the issue title and I can't add labels/change the title now

[Skwai]

I'd also recommend adding a .row-p-0 or similar that creates a grid with 0 padding

[cvrebert]

@Skwai If you mean no padding between the columns, there's apparently no interest in that: https://github.com/twbs/bootstrap/issues/15530#issuecomment-70190097

[Skwai]

That's interesting. On many projects I often use the following:

.row-compact {
  margin-left: 0;
  margin-right: 0;
  > [class^="col"] {
    padding-left: 0;
    padding-right: 0;
  }
}

[JefMari]

I'd also recommend it on container for non-grid html usage

[mdo]

Nuking the padding on the container means nuking the margin on the rows with likely means nuking the padding on the columns. Rather than nuke all those styles, maybe just roll something custom?

[mdo]

Punting.

[hassanasad]

There should be a way to remove container padding (left right) for mobile device. The grid system works great but in certain scenarios there is no left/right padding required on the main container level.

I am trying to find a neat hack for this but so far no go.

[mdo]

.p-xs-0 and other margin utilities will do the trick.

[Starsam80]

.p-xs-0 and other margin utilities will do the trick.

I think you mean .p-0, as we removed -xs from all the utilities

[hassanasad]

sorry - my fault, i am actually on bootstrap 3. This discussion is probably related to v4. (sorry)

[mdo]

Hah, assumptions abound on my part. I figured this was v4 so I was pointing out what's documented there today and not what's in v4-dev. If you do update to v4, as @starsam80 mentions, the syntax has changed :).

[jawadafghanistany]

hi
i have a question from bootstrap developers.
why container-fluid have 30px padding:
.container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
please explain it to me.