Bootstrap row class contains margin-left and margin-right which creates problems

Question

I am using Bootstrap  row  class to align divs one on top of another  which works fine but    row      margin-left  -15px     margin-right  -15px       What I noticed is that it specifies margin-left and margin-right attributes to be -13px because of which my contents get shifted towards left  so what I have done is added another class as follows     row-no-margin      margin-left  0px     margin-right  0px       This solves the purpose  but I would still like to know if there is any specific reason for  margin-left  -15px    And what is the best approach to solve my problem

User · Answer

You can use row-fluid instead of row  then you won t have this problem   for previous versions of bootstrap   I am not sure of recent versions 3  any way    The issue is that the first column should not have half a gutter on the left  and the last should not have half a gutter on the right  Rather than use some sort of  first or  last class on those columns as some grid systems do  they instead set the  row class to have negative margins that match the padding of the columns  This  pulls  the gutters off of the first and last columns  while at the same time making it wider   For more information on this Why does the bootstrap  row has a default margin-left of -30px

User · Answer

The  row is meant to be used inside a container   Since the container has padding to adjust the negative margin in the  row  grid columns used inside the  row can then adjust to the full width of the container  See the Bootstrap docs  http   getbootstrap com css  grid  Here s an example to illustrate  http   bootply com 131054  So  a better solution may for you to place your  row inside a  container or  container-fluid

User · Answer

To remove the margins on all rows   row       margin  0px  important

User · Answer

Old topic  but I think I found another descent solution  Adding class  row  to a div will result in this CSS configuration    row       display  -webkit-box      display  flex      flex-wrap  wrap      margin-right  -15px      margin-left  -15px      We want to keep the first 3 rules and we can do this with class  d-flex flex-wrap   see https   getbootstrap com docs 4 1 utilities flex      flex-wrap       flex-wrap  wrap  important     d-flex       display  -webkit-box  important      display  flex  important      It adds  important rules though but it shouldn t be a problem in most cases

User · Answer

I used      div class  form-control  instead of      div class  row   That fixed for me

User · Answer

Old topic  but I was recently affected by this    Using a class  row-fluid  instead of  row  worked fine for me but I m not sure if it s fully supported going forward    So after reading Why does the bootstrap  row has a default margin-left of -30px I just used the  lt div gt   without any row class  and it behaved exactly like  lt div class  row-fluid  gt

User · Answer

Are you using Bootstrap 3  My version of the css has -15px  not -13px  In any case  I ve simply done what you ve down  and overwritten the style  I believe it s because the  container class has a 15px padding on the left and right  and this negative margin on the rows will pull that content back out to the edge of the container

User · Answer

I was facing this same issue and initially  I removed the row s right and left -ve margin and it removed the horizontal scroll  but it wasn t good  Then after 45 minutes of inspecting and searching  I found out that I was using container-fluid and was removing the padding and its inner row had left and right negative margins  So I gave container-fluid it s padding back and everything went back to normal   If you do need to remove container-fluid padding  don t just remove every row s left and right negative margin in your project instead introduce a class and use that on your desired container

User · Answer

Here is your simple and easy answer Go to your class where you want to give a negative margin then copy and paste this inside the class  Example for negative margin top mt-n3  Example for negative margin bottom mb-n2

[html] Bootstrap row class contains margin-left and margin-right which creates problems

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3