How to make a Responsive (Row Fluid) Mixin for Bootstrap

Question

I can replace this code with

 <div class="row">
      <div class="span10">...</div>
      <div class="span2">...</div>
    </div>

With this, to make it more semantic

<div class="article">
  <div class="main-section">...</div>
  <div class="aside">...</div>
</div>

<!-- Less stylesheet -->
.article {
  .makeRow(); 
  .main-section {
    .makeColumn(10);
  }
  .aside {
    .makeColumn(2);
  }
}

How can I do this with the fluid grid though:

 <div class="row-fluid">
      <div class="span10">...</div>
      <div class="span2">...</div>
    </div>

<!-- Less stylesheet -->
.article {
  ???
  .main-section {
    .makeColumn(10);
  }
  .aside {
    .makeColumn(2);
  }
}

I have tried:

.article { #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);}

and some variations on it from some related stackoverflow posts but its not getting responsive.

score 3 · Accepted Answer · answered Jul 03 '13 at 16:31

This worked for me.. posting in case it helps anyone else.

Mixins for semantic fluid grid:

.makeFluidRow(){
    width: 100%;
    .clearfix();
}

.makeFluidCol(@span:1,@offset:0){
    float: left;
    #grid > .fluid .span(@span);
    #grid > .fluid .offset(@offset);
    &:first-child {
        margin-left: 0;
        .offsetFirstChild(@offset);
    }
}

Use them just like the non-fluid mixins:

.article {
    .makeFluidRow();
    .main-section {
        .makeFluidCol(10); //Spans 10 cols
    }
    .aside {
        .makeFluidCol(1,1); //offset by one, spans 1
    }
}

score 1 · Answer 2 · answered Feb 04 '13 at 21:37

1

Ok, I think I have got it. I am updating the question to add offsets with the fluid layout as this is where I ran into the most trouble.

<div class="article">
  <div class="main-section">...</div>
  <div class="aside">...</div>
</div>

<!-- Less stylesheet -->
.article {

  .main-section {
     #grid > .fluid > .offset(2);
     #grid > .fluid > .span(8);
  }
  .aside {
    #grid > .fluid > .span(2);
  }
}

answered Feb 04 '13 at 21:37

Adam Gordon Bell

3,083
2
26
53

and what happened to makeRow ? that has negative margin so the leftmost column doesn't have a gutter – Simon_Weaver May 04 '13 at 02:26
@Simon_Weaver I ended up abandoning the semantic approach I suggested here. With bootstrap 3 being fluid by default, there may be a better way. – Adam Gordon Bell May 06 '13 at 18:07

score 1 · Answer 3 · answered Sep 06 '13 at 17:32

I found your question looking for a way to use .makeColumn() for responsive grids (1200px, 768px, etc). The .makeColumn() mixin that is including with Bootstrap 2 accounts for only the 940px grid.

To fix it, I just extended the .makeColumn() mixin in a LESS file that loads after the Boostrap files.

// Improve .makeColumn to work with 1200px responsive grid
.makeColumn(@columns: 1, @offset: 0) {
  @media (min-width: 1200px) {
    margin-left: (@gridColumnWidth1200 * @offset) + (@gridGutterWidth1200 * (@offset - 1)) + (@gridGutterWidth1200 * 2);
    width: (@gridColumnWidth1200 * @columns) + (@gridGutterWidth1200 * (@columns - 1));
  }
}

How to make a Responsive (Row Fluid) Mixin for Bootstrap

3 Answers3

Linked