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;
This question is related to
twitter-bootstrap
bootstrap-4
twitter-bootstrap-3
bootstrap-5
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.
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;
}
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.
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">
I have used <div class="container-fluid" style="padding: 0px !important">
and it seems to be working.
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>
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 in your row to remove padding:
<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>
(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
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.
px-0
for removing horizontal paddings instead pl-0 pr-0
or reinventing your styles.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">_x000D_
<div class="row">_x000D_
<div class="col-sm-12">_x000D_
<p>Hello</p>_x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
.container-fluid.maxx {_x000D_
padding-left: 0px;_x000D_
padding-right: 0px; }
_x000D_
This will work 100% and will remove the padding from left and right. I hope this helps.
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;
}
_x000D_
<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>
_x000D_
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
.
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; }
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.
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
.
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.
If you are working with the configuratior you can set the @grid-gutter-width
from 30px
to 0
Source: Stackoverflow.com