Bootstrap 3 and 4.container fluid with mesh adding unwanted additions

Question

I would like my content to be smooth, but when using .container-fluid with the Bootstrap grid, I still see the fill. How can I get rid of indentation?

I see that I am not getting the fill using .row, but I want to add columns, and as soon as I do this, the filling returns: O.

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

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> 

I have a solution:

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

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

at

 padding-right: 0px; padding-left: 0px; 

Answer 1

You should also add a “string” to each container that will “fix” this problem!

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

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

Answer 2

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 the .container-fluid class, it adds the 15px horizontal padding, and the same will be removed if you add the .row class as a child of the negative field set in the line.

Answer 3

I think I had the same requirement as Tim, but none of the answers provided for "horizontal columns of the viewport with the usual internal solution for gutters." Or another way to express it: how can I get my first and last columns to split into container filling and flow to the edge of the viewport while maintaining normal gutters between the columns.

From what I can say, there is no clear and clean solution. This is what works for me, but it is good outside of what Bootstrap would support. But now it works (Bootstrap 3.3.5 and 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

HTML example:

 <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 insert a div between row and columns to create an extra -15px limit to insert into the container's fill. An additional negative margin creates horizontal scrolling (in spaces) on small viewports. To suppress it, add overflow-x: hidden to .row .

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

Answer 4

5 years have passed, and it is rather strange that there are so many answers that do not follow (or against) the rules of self-loading or do not actually answer the question ...

Short answer
Just use the Bootstrap no-gutters on your line to remove the 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> 

(You also forgot to add </div> at the end of your file. This is also fixed in the code above)

Long answer
The indentation you get is documented in the Bootstrap documentation :

Rows are column wraps. Each column has a horizontal fill (called a gutter) to control the space between them. This indentation is then countered by lines with negative fields. Thus, all the content in your columns is visually aligned on the left side.

And about the solution, which was also documented:

Columns have horizontal indents for creating gutters between separate columns, however you can remove fields from rows and indents for columns from .no- gutters to .row.

Bonus: about bugs found on other answers

• Avoid hacking bootstrap container classes instead of making sure you put all the content in col and enclose it in row as indicated in the documentation :

In a grid layout, content should be placed in columns, and only columns can be immediate children of rows.

• If you still need to hack (in case someone has messed things up and you need to fix the problem quickly), consider using Bootstrap px-0 to remove horizontal indents instead of pl-0 pr-0 or reinventing your styles .

Answer 5

You only need these CSS properties in the .container Bootstrap class, and you can set a normal grid inside it without any contents of the container from it (without scrolling -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; } 

Answer 6

In the new alpha versions, they introduced service interval classes . The structure can be changed if you use them in a smart way.

Spatial 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 remove leading and trailing margins from columns. One problem remained - inline column rows, as they still have a 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 that the service space classes have been changed from version 4.0.0-alpha.4 . Before they were separated by 2 dashes, for example, => px-0 and pl-0 and so on ...

To stay in topic for version 3: this is what I use in Bootstrap 3 projects and enable compass settings for this particular spacing utility in bootstrap-sass (version 3) or bootstrap (version 4.0.0-alpha.3) with double traits or bootstrap loading (version 4.0.0-alpha.4 and higher) with single traits.

In addition, recent versions increase 5 times (e.g. pt-5 padding-top 5) instead of 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

Of course, you can always copy / paste padding classes only from the 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; } 

Answer 7

Why not undo the filling added by the fluid container by marking the indentation on the left and right as 0?

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

even better? at the container level there is no filling at all (cleaner)

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

Answer 8

I think that no one gave the correct answer to the question. My working solution: 1. Just declare a different class along with an example container-liquid class (.maxx):

  <div class="container-fluid maxx"> <div class="row"> <div class="col-sm-12"> <p>Hello</p> </div> </div> </div> 

2. Then, using the specificity in the CSS part, do this:

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

This will work 100% and remove the left and right margins. Hope this helps.

Answer 9

If you work with configuratior, you can set @grid-gutter-width from 30px to 0

Answer 10

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

Answer 11

I myself struggled with this and finally believed that I understood this. Incredible how many no answers to this question

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

I did this in my own project a little carelessly 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 different col sizes to account for all the different col sizes that I use. I'm sure there is a cleaner way to write CSS, but this illustrates the end result.

Answer 12

So here is a brief summary of 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.