csshtml5twitter-bootstrap-3

Bootstrap col Spacing


i have 3 col grid using bootstrap. I want to make 15px gap in between the col.. max width of the row is 1600px

each col should be w 522 h 476 at 1600px row size..

<div class="row">
  <div class="col-lg-4"></div>
  <div class="col-lg-4"></div>
  <div class="col-lg-4"></div>
</div>

Solution

  • you can edit these spaces in bootstrap less file and recompile it. Right in variables.less

    //== Grid system
    //
    //## Define your custom responsive grid.
    
    //** Number of columns in the grid.
    @grid-columns:              12;
    //** Padding between columns. Gets divided in half for the left and right.
    @grid-gutter-width:         30px;
    

    makes in css:

    .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 {
        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
    }