Bootstrap 3 Gutter Size

Question

I ve only just started working with bootstrap and unsure about how to achieve my goal   I would like the gutters to all be even  like they are in this image     by default  they look like this  the vertical gutters in between columns  marked with blue  are double the horizontal and outside gutters     Any help on the best way to solve this probably would be appreciated

User · Answer

I don t think Bass s answer is correct  Why touch the row margins  They have a negative margin to offset the column padding for the columns on the edge of the row  Messing with this will break any nested rows   The answer is simple  just make the container padding equal to the gutter size   e g for default bootstrap    container       padding-left 30px      padding-right 30px      http   jsfiddle net 3wBE3 61

User · Answer

try    row       margin-left  0      margin-right  0      Every column have a padding of 15 px on both sides  Which makes a gutter between of 30 px  In the case of the sm-grid your container class will 970px    940px    grid-gutter-width     Every column get a width of 940 12  The resulting  grid-gutter-width 2 on both sides of the  grid will be hide with a negative margin of - 15px   Undoing this negative left-margin set a gutter of 30 px on both sides of the grid  This gutter is build with 15px padding of the column   15 px resting grid space   update   In response of the answer of  ElwoodP  consider the follow code    lt div class  container  style  background-color darkblue   gt     lt div class  row  style  background-color yellow   gt     lt div class  col-md-9  style  background-color green   gt       lt div style  background-color lightblue   gt div 1   col-md-9 lt  div gt       lt div class  row  style  background-color orange   gt         lt div class  col-md-6  style  background-color red   gt           lt div style  background-color lightblue   gt div 2   col-md-6 lt  div gt         lt  div gt         lt div class  col-md-6  style  background-color red   gt           lt div style  background-color lightblue   gt div 2   col-md-6 lt  div gt         lt  div gt       lt  div gt     lt  div gt       lt div class  col-md-3  style  background-color green   gt       lt div style  background-color lightblue   gt div 1   col-md-3 lt  div gt     lt  div gt         lt  div gt   lt  div gt    In the case of nesting  manipulation the  row class indeed influences the sub grid  Good or fault depends on your expectations   requirements for the subgrid  Changing the margin of the  row won t break the sub grid   default     margin of the  row class  with    row       margin-left  0      margin-right  0        padding of the  container class  with    container       padding-left 30px      padding-right 30px        Notice sub grids shouldn t wrapped inside a  container class

User · Answer

I tried several of the options here   For all that I tried  the spacing was uneven  or was even but when I shrank the window width enough for the subviews to stack  there was no space between stacked views     Here is what worked for me     col-sm-12      margin-bottom  2em       lt div class  container  gt       lt div class  row  gt           lt div class  col-sm-6  gt               lt div class  col-sm-12  gt                lt  div gt           lt  div gt           lt div class  col-sm-6  gt               lt div class  col-sm-12  gt                lt  div gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

You can keep the default behaviour  with gutter  and add a class to your CSS stylesheet for tasks like yours    no-gutter  gt   class   col-         padding-right 0      padding-left 0      And here   s how you can use it in your HTML    lt div class  row no-gutter  gt       lt div class  col-md-4  gt                   lt  div gt       lt div class  col-md-4  gt                   lt  div gt       lt div class  col-md-4  gt                   lt  div gt   lt  div gt

User · Answer

Add these helper classes to the stylesheet less  you can use http   less2css org  to compile them to CSS     row gutter-0       margin-left  0      margin-right  0       class   col-             padding-left  0          padding-right  0            row gutter-10       margin-left  -5px      margin-right  -5px       class   col-             padding-left  5px          padding-right  5px            row gutter-20       margin-left  -10px      margin-right  -10px       class   col-             padding-left  10px          padding-right  10px            And here   s how you can use it in your HTML    lt div class  row gutter-0  gt       lt div class  col-sm-3 col-md-3 col-lg-3  gt        lt  div gt       lt div class  col-sm-3 col-md-3 col-lg-3  gt        lt  div gt       lt div class  col-sm-3 col-md-3 col-lg-3  gt        lt  div gt       lt div class  col-sm-3 col-md-3 col-lg-3  gt        lt  div gt   lt  div gt    lt div class  row gutter-10  gt       lt div class  col-sm-3 col-md-3 col-lg-3  gt        lt  div gt       lt div class  col-sm-3 col-md-3 col-lg-3  gt        lt  div gt       lt div class  col-sm-3 col-md-3 col-lg-3  gt        lt  div gt       lt div class  col-sm-3 col-md-3 col-lg-3  gt        lt  div gt   lt  div gt    lt div class  row gutter-20  gt       lt div class  col-sm-3 col-md-3 col-lg-3  gt        lt  div gt       lt div class  col-sm-3 col-md-3 col-lg-3  gt        lt  div gt       lt div class  col-sm-3 col-md-3 col-lg-3  gt        lt  div gt       lt div class  col-sm-3 col-md-3 col-lg-3  gt        lt  div gt   lt  div gt

User · Answer

If you use sass in your own project  you can override the default bootstrap gutter size by copy pasting the sass variables from bootstrap s  variables scss file into your own projects sass file somewhere  like      Grid columns       Set the number of columns and specify the width of the gutters   grid-gutter-width-base      50px  default   grid-gutter-widths            xs   grid-gutter-width-base          sm   grid-gutter-width-base          md   grid-gutter-width-base          lg   grid-gutter-width-base          xl   grid-gutter-width-base    default    Now your gutters will be 50px instead of 30px  I find this to be the cleanest method to adjust the gutter size

User · Answer

Facing this problem  I made the following addition to my css stylesheet    mainContent  container       padding-left 16px      padding-right 16px       mainContent  row       margin-left  -8px      margin-right  -8px        mainContent  col-xs-1   mainContent  col-sm-1   mainContent  col-md-1   mainContent  col-lg-1   mainContent  col-xs-2   mainContent  col-sm-2   mainContent  col-md-2   mainContent  col-lg-2   mainContent  col-xs-3   mainContent  col-sm-3   mainContent  col-md-3   mainContent  col-lg-3   mainContent  col-xs-4   mainContent  col-sm-4   mainContent  col-md-4   mainContent  col-lg-4   mainContent  col-xs-5   mainContent  col-sm-5   mainContent  col-md-5   mainContent  col-lg-5   mainContent  col-xs-6   mainContent  col-sm-6   mainContent  col-md-6   mainContent  col-lg-6   mainContent  col-xs-7   mainContent  col-sm-7   mainContent  col-md-7   mainContent  col-lg-7   mainContent  col-xs-8   mainContent  col-sm-8   mainContent  col-md-8   mainContent  col-lg-8   mainContent  col-xs-9   mainContent  col-sm-9   mainContent  col-md-9   mainContent  col-lg-9   mainContent  col-xs-10   mainContent  col-sm-10   mainContent  col-md-10   mainContent  col-lg-10   mainContent  col-xs-11   mainContent  col-sm-11   mainContent  col-md-11   mainContent  col-lg-11   mainContent  col-xs-12   mainContent  col-sm-12   mainContent  col-md-12   mainContent  col-lg-12        padding-left  8px      padding-right  8px      This overrides the default bootstrap styling and makes the left and right sides and the gutter equal width

User · Answer

I ve been stuck with this problem  my solution was creating a mixin which allows me to specify in SCSS  the actual gutter size I want      Solution  1      mixin add-gutter  size        margin-right  - size      margin-left  - size        gt   class   col-             padding-right   size          padding-left   size              that-special-row       include add-gutter 7px       And to use it      lt div class  row that-special-row  gt  lt  div gt    The actual solution came about from this issue mentionned on github  which I believe addresses the same problem    Solution  2     Another solution  would be simply to create your custom CSS class   small-gutters       margin-right  -10px      margin-left  -10px       gt   class   col-           padding-right  10px        padding-left  10px              Hope that helps

User · Answer

Bootstrap 3 introduced row-no-gutters in v3 4 0  https   getbootstrap com docs 3 4 css  grid-remove-gutters  You could make a row without gutters  and have a row with gutters inside it for the parts you do want to have a gutter

User · Answer

Bass Jobsen and  ElwoodP attempted to answer this question in reverse--giving the outer margins the same DOUBLE size as the gutters  The OP  and me  as well  was searching for a way to have a SINGLE size gutter in all places  Here are the correct CSS adjustments to do so    row       margin-left  -7px      margin-right  -7px     col-xs-1   col-sm-1   col-md-1   col-lg-1   col-xs-2   col-sm-2   col-md-2   col-lg-2   col-xs-3   col-sm-3   col-md-3   col-lg-3   col-xs-4   col-sm-4   col-md-4   col-lg-4   col-xs-5   col-sm-5   col-md-5   col-lg-5   col-xs-6   col-sm-6   col-md-6   col-lg-6   col-xs-7   col-sm-7   col-md-7   col-lg-7   col-xs-8   col-sm-8   col-md-8   col-lg-8   col-xs-9   col-sm-9   col-md-9   col-lg-9   col-xs-10   col-sm-10   col-md-10   col-lg-10   col-xs-11   col-sm-11   col-md-11   col-lg-11   col-xs-12   col-sm-12   col-md-12   col-lg-12       padding-left  7px      padding-right  7px     container       padding-left  14px      padding-right  14px      This leaves a 14px gutter and outside margin in all places

[twitter-bootstrap] Bootstrap 3 Gutter Size

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to gutter