twitter/bootstrap — Issue #697: adding sidbar width variable
Author: jackieshaffer
Created: 2011-11-26 05:02:39+00:00
State: open

Suggestion to add variable for sidebar width.

## variable.less add to GRIDS section:

```css

@sidebarWidth: 240px;

```

## in scaffolding.less UPDATE

```css
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.fluid-container {
position: relative;
min-width: 940px;
padding-left: 20px;
padding-right: 20px;
.clearfix();
}
// Sidebars (left and right options)
.fluid-sidebar-left,
.fluid-sidebar-right {
width: 220px;
}
.fluid-sidebar-left { float: left; }
.fluid-sidebar-right { float: right; }
// The main content area
.fluid-content {
margin-left: 240px;
}
// Reverse layout for sidebar on right
.fluid-container.reverse .fluid-content {
margin-left: 0;
margin-right: 240px;
}

```

## TO

```css

// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.fluid-container {
position: relative;
min-width: 940px;
padding-left: @gridGutterWidth;
padding-right: @gridGutterWidth;
.clearfix();
}
// Sidebars (left and right options)
.fluid-sidebar-left,
.fluid-sidebar-right {
width: (@sidebarWidth - @gridGutterWidth);
}
.fluid-sidebar-left { float: left; }
.fluid-sidebar-right { float: right; }
// The main content area
.fluid-content {
margin-left: @sidebarWidth;
}
// Reverse layout for sidebar on right
.fluid-container.reverse .fluid-content {
margin-left: 0;
margin-right: @sidebarWidth;
}

```