121

I'd like my content to be fluid, but when using .container-fluid with Bootstrap's grid, I'm still seeing padding.

How can I get rid of the padding?

I see that I don't get the padding with .row, but I want to add columns, and as soon as I do, the padding is back.

I want to be able to use the columns at full width.

An example:

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
</div>

Solution I've got:

Override bootstrap.css, linke 1427 & 1428 (v3.2.0)

padding-right: 15px;
padding-left: 15px;

to

padding-right: 0px;
padding-left: 0px;
Just Shadow
  • 10,860
  • 6
  • 57
  • 75
Tim
  • 1,263
  • 2
  • 10
  • 7

15 Answers15

138

You should also add a "row" to each container which will "fix" this issue!

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

See http://jsfiddle.net/3px20h6t/

PArt
  • 1,762
  • 1
  • 9
  • 14
  • 3
    Thank you. What I'm trying to do is remove the padding when I'm using columns. Any idea on how I can do this? – Tim Aug 22 '14 at 13:20
  • 1
    That's only possible via an extra class... I've defined a class named remove-padding which just has a .remove-padding {padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0} As far as I know, there is no predefined class to remove the default 15px padding – PArt Aug 24 '14 at 11:41
  • 35
    I can't realise how this answer has so many upvotes, while it **does not** follow the Bootstrap Grid System guidelines. The third rule in the [Introduction section](http://getbootstrap.com/css/#grid-intro) states that *"Content should be placed within columns, and only columns may be immediate children of rows."* Lucas Nelson's answer provides a fair approach to achieve the desired effect without breaking the syntax rule. – Siavas Jan 05 '17 at 11:20
  • You can also use `row` class directly with `col-**-*` classes if your layout suits. – Anwar Jan 12 '17 at 17:44
  • 4
    How can this be voted for 87 times (and counting) when it doesn't answer the question? The question states that it works when just a `row` is used ... but **not** when columns are used (for which that fact is ignored in this answer)? Anyway, I'm getting the same exact erroneous 15px padding as the question outlines and it's very frustrating. – Jeach Mar 09 '18 at 07:08
  • What if I want a normal `.container` for desktop and get rid of this silly gap for mobile? – Greg Wozniak Jul 13 '19 at 11:34
  • This doesn't work for Bootstrap 4 and using `.col`. Check out http://jsfiddle.net/cabpz865/ ... For bootstrap 4 use `.no-gutters` class on `.row` – Sunny Patel Oct 16 '19 at 03:31
64

5+ years passed, and it's quite strange that there are so many answers there which don't follow (or are against) bootstrap rules or don't actually answer the question...
(For the details on those mistakes check the last section of this answer)

Short Answer:
Simply use Bootstrap's no-gutters class for (Bootstrap 4) OR g-0 for (Bootstrap 5) in your row to remove padding:

  <div class="container-fluid">
    <!-- For Boostrap 4, use this instead:
    <div class="row no-gutters">-->
    <div class="row g-0">
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
    </div>
  </div>

(Also you've forgotten to add </div> to the end of your file. It's fixed in the code above as well)

Note:

There are cases when you want to remove the padding of the container itself as well. In this case consider dropping .container or .container-fluid classes as recommended by the documentation.

<!--<div class="container-fluid">-->
<div class="row no-gutters">
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
</div>
<!--</div>-->

Long Answer:

The paddings you get are actually documented in Bootstrap's documentation:

Rows are wrappers for columns. Each column 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.

And about the solution, which was documented as well:

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.

Regarding dropping the container:

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

Bonus: About the mistakes found on the other answers

  • Avoid hacking bootstrap's container classes instead of making sure that you've put all the content in col-s and wrapped them with row-s as documentation says:

In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

  • If you still have to do hack (just in case someone already messed up things and you need to quickly fix your issue) consider using Bootstrap's px-0 for removing horizontal paddings instead pl-0 pr-0 or reinventing your styles.
Just Shadow
  • 10,860
  • 6
  • 57
  • 75
  • 6
    `.container-fluid` still contains `padding-right: 15px` and `padding-left: 15px`, which means you will still not be able to get flush with the window using your method. You would still need to do something like `container-fluid px-0`. – lightyrs Feb 05 '19 at 15:08
  • 4
    In that case the documentation recommends to simply ["Drop the parent .container or .container-fluid."](https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters). I've included that as well to the answer. – Just Shadow Feb 10 '20 at 12:15
  • 4
    Dropping the container in turn makes rows overflow slightly. Removing the negative right margin on the rows fixes the overflow, but messes up the layout. In the end I didn't find any other way but to set `padding: 0; overflow-x: hidden` on the container. – vctls Dec 18 '20 at 12:10
  • 1
    no-gutters has no effect on my container-fluid layout. Bootstrap 5 seems to have no instructions about how to use container-fluid. I want to have divs (cards) with fixed maximum width that are spread out (justified) to fill the viewport width AND that squeeze together when there isn't enough horizontal space. I have to spend hours adding CSS and still don't get what I want. – David Spector May 05 '21 at 17:50
  • I'm getting some success using container-fluid by using rows with classes "d-flex justify-content-evenly" and cards with fixed width. No "col" divs. The cards space out beautifully a md width and larger, but compress nicely at cell phone widths. – David Spector May 05 '21 at 18:48
  • Update for bootstrap5 simply use `g-0` for 0 gutter, – Krish Yadav Nov 07 '21 at 19:24
  • to address @vctls 's concern about overflow when dropping the container entirely, this answer (and, honestly, Bootstrap's docs) should probably recommend slapping an mx-0 (Bootstrap 5) class on the row. – Ethan C Dec 01 '21 at 06:23
36

Please find the actual css from Bootstrap

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

When you add a .container-fluid class, it adds a horizontal padding of 15px, and the same will be removed when you add a .row class as a child element by the negative margin set on row.

Kishore Kumar
  • 12,675
  • 27
  • 97
  • 154
  • 3
    Thanks a bunch. I'd like to remove it when I'm using a column, though. I really don't want to mess with the core bootstrap css. I suspect there must be a sanctioned way to do this. Any thoughts? – Tim Aug 22 '14 at 13:22
  • 1
    If you want to use column in fullwidth, you can apply col-md-12 col-sm-12 css within row – Kishore Kumar Aug 22 '14 at 13:27
  • 2
    Thanks. I tried that, but I still get padding. Also, I need two columns. Am I missing something? – Tim Aug 22 '14 at 13:39
  • 1
    The padding that you are seeing is default from Bootstrap, if you want to get rid of it, how having to add your own class.When you add a new class and want to override bootstrap you can add !important after the style. – Kishore Kumar Aug 22 '14 at 13:45
  • 1
    If two columns you can add this class to you column col-md-6 – Kishore Kumar Aug 22 '14 at 13:46
  • But what you are saying basically contradicts the Bootstrap documentation in the "Grid System Rules". Which talks about `col` adding left and right padding of 15px for a total of 30px. And it also states that the `row` will correct this by setting a -15px left/right margin. But the documentation states nothing about `container-fluid` adding its own padding? If true, then it makes the whole `row` correction pretty much useless, and thus giving offset result like the question states above and like I'm getting. – Jeach Mar 09 '18 at 07:13
  • @KishoreKumar your answers and replies are misleading and just plain wrong. The answer from Just Shadow above is correct. He/she pointed to the recommendations in the documentation. – user938883 Apr 06 '22 at 17:57
20

So here is the brief summary for Bootstrap 4:

<div class="container-fluid px-0">
  <div class="row no-gutters">
    <div class="col-12">          //any cols you need
        ...
    </div>
  </div>
</div>

It works for me.

Dm Mh
  • 820
  • 7
  • 9
  • For Bootstrap 4, this is the correct answer and the best practice. – Syafiq Freman Jan 24 '20 at 14:55
  • 4
    @SyafiqZainal, and also it's a **duplicate** of my original answer below (posted much earlier) :D So, now I'm wondering, whether it's ok to post the same answer in StackOverflow. – Just Shadow Feb 06 '20 at 16:18
  • This is also the correct answer. px-0 removes padding from the container-fluid. Regarding removing gutters from the columns, it is also the correct answer. – Max Nov 30 '20 at 05:11
  • 1
    It's the `px-0` that worked for me, and this should be the correct answer IMO. – one-hand-octopus Apr 15 '21 at 21:18
  • 1
    This was a holy grail for me in BS4, but it doesn't work in BS5 anymore :( – DARKGuy Oct 11 '21 at 07:48
14

I think I had the same requirement as Tim, but none of the answers provide for a 'viewport edge-to-edge columns with normal internal gutters' solution. Or another way to put it: how can I get my first and last columns to break into the container padding and flow to the edge of the viewport, while still maintaining normal gutters between the columns.

full width rows

From what I can tell, there is no neat and clean solution. This is what works for me, but it is well outside anything that would be supported by Bootstrap. But it works for now (Bootstrap 3.3.5 & 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

Sample HTML:

<div class="container">
  <div class="row full-width-row">
    <div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
    </div>
  </div>
</div>

CSS:

.full-width-row {
  overflow-x: hidden;
}

.full-width-row > div {
  margin-left: -15px;
  margin-right: -15px;
}

The trick is to nest a div in between the row and the columns to generate the extra -15px margin to push into the container padding. The extra negative margin creates horizontal scroll (into whitespace) on small viewports. Adding overflow-x: hidden to the .row is required to suppress it.

This works the same for .container-fluid as .container.

Lucas Nelson
  • 2,511
  • 1
  • 17
  • 14
  • why not just `.full-width-row > div { padding: 0; }` – Bamieh Nov 27 '16 at 14:31
  • It does not work, you still get a gutter at the start and end of the row: http://www.bootply.com/eM8y3kkfbi – Lucas Nelson Dec 04 '16 at 04:43
  • This is silly, but using `overflow: hidden` is indeed the only way I found to remove only container padding without adding horizontal scroll or messing up the layout. – vctls Dec 18 '20 at 12:07
7

Why not negate the padding added by container-fluid by marking left and right padding as 0?

<div class="container-fluid pl-0 pr-0">

even better way? no padding at all at the container level (cleaner)

<div class="container-fluid pl-0 pr-0">

iCrus
  • 1,210
  • 16
  • 30
4

You only need these CSS properties in .container class of Bootstrap and you can put inside him the normal grid system without someone content of the container will be out of him (without scroll-x in the viewport).

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Your content here!
            ...    
        </div>
    </div>
    ... more rows
</div>

CSS:

/* Bootstrap custom */
.container{
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}
Aaron Nuñez
  • 91
  • 1
  • 1
3

In the new alpha versions they've introduced utility spacing classes. The structure can then be tweaked if you use them in a clever way.

Spacing utility classes

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-3 pl-0">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3 pr-0">…</div>
    </div>
</div>

pl-0 and pr-0 will remove leading and trailing padding from the columns. One issue left is the embedded rows of a column, as they still have negative margin. In this case:

<div class="col-sm-12 col-md-6 pl-0">
    <div class="row ml-0">
</div>

Version differences

Also note the utility spacing classes were changed since version 4.0.0-alpha.4. Before they were separated by 2 dashes e.g. => p-x-0 and p-l-0 and so on ...

To stay on topic for the version 3: This is what I use on Bootstrap 3 projects and include the compass setup, for this particular spacing utility, into bootstrap-sass (version 3) or bootstrap (version 4.0.0-alpha.3) with double dashes or bootstrap (version 4.0.0-alpha.4 and up) with single dashes.

Also, latest version(s) go up 'till 5 times a ratio (ex: pt-5 padding-top 5) instead of only 3.

Compass

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

@import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix
@import "../scss/utilities/_spacing.scss";

CSS output

You can ofcourse always copy/paste the padding spacing classes only from a generated css file.

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
Tim Vermaelen
  • 6,869
  • 1
  • 25
  • 39
3

Use px-0 on the container and no-gutters on the row to remove the paddings.

Quoting from Bootstrap 4 - Grid system:

Rows are wrappers for columns. Each column 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.

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.

Following is a live demo:

h1 {
  background-color: tomato;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container-fluid" id="div1">
  <div class="row">
    <div class="col">
        <h1>With padding : (</h1>
    </div>
  </div>
</div>

<div class="container-fluid px-0" id="div1">
  <div class="row no-gutters">
    <div class="col">
        <h1>No padding : > </h1>
    </div>
  </div>
</div>

The reason this works is that container-fluid and col both have following padding:

padding-right: 15px;
padding-left: 15px;

px-0 can remove the horizontal padding from container-fluid and no-gutters can remove the padding from col.

fishstick
  • 2,144
  • 1
  • 19
  • 14
2

I think no one has given the correct answer to the question. My working solution is : 1. Just declare another class along with container-fluid class example(.maxx):

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>
  1. Then using specificity in the css part do this:

.container-fluid.maxx {
  padding-left: 0px;
  padding-right: 0px; }

This will work 100% and will remove the padding from left and right. I hope this helps.

Sahil Kumar Singh
  • 21
  • 1
1

If you are working with the configuratior you can set the @grid-gutter-width from 30px to 0

Stefan
  • 14,826
  • 17
  • 80
  • 143
1

I have used <div class="container-fluid" style="padding: 0px !important"> and it seems to be working.

Dave
  • 179
  • 1
  • 7
1

I struggled with this and realized in my scenario the solution was to simply remove the <div class="container-fluid"> ... </div> envelope. Now I just have:

<main role="main" class="flex-shrink-0">
    <?= $content ?>
</main>

To clarify, the div was enveloping $content (and not main).

Senthil
  • 426
  • 5
  • 11
0

I've been struggling with this myself and I finally believe I have it figured out. It's incredible how many failed answers there are on this question

All you have to do is remove the padding from all your .col elements, and remove the padding also from the .container-fluid.

I did this in my own project a little sloppily by adding the following to my css file:

.col, col-10, col-12, col-2, col-6 {
    padding: 0!important;
}

.container-fluid {
    padding: 0!important;
}

I just have the different col sizes there to account for all the different col sizes I'm using. I'm confident there is a cleaner way to write the css but this illustrates the end result.

qozle
  • 140
  • 10
0

use g-0(no-gutter) class for bootstrap 5

Vibhu kumar
  • 386
  • 3
  • 8