Bootstrap: Fixed Gutter Width in Fluid Layout

Bootstrap: Fixed gutter width in fluid layout?

Answered a question like this before, what it basically came down too was creating a set of classes to offset the main container depending on how many sidebars you have, like so:

CSS

.fixed-fluid {
    margin-left: 240px;
}
.fluid-fixed {
    margin-right: 240px;
    margin-left:auto !important;
}
.fixed-fixed {
    margin: 0 240px;
}

Demo, edit here.

How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

The easiest way is probably to use the Customizable download that Twitter Bootstrap provides. Change the @fluidGridGutterWidth variable to suit your needs in the form. Download the less files from here. You can access the variable.less file from the github bootstrap project and then change this piece of code:

    // Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth); // <= this one

I thought you had access to less files at first, then I realized you are using the customized gui on the website. Just download the less files, and make your changes. Then compile the less files to give you a css file or use less for development. You can use css or min.css for deployment.

How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

- Another Update -

Since Twitter Bootstrap version 2.0 - which saw the removal of the .container-fluid class - it has not been possible to implement a two column fixed-fluid layout using just the bootstrap classes - however I have updated my answer to include some small CSS changes that can be made in your own CSS code that will make this possible

It is possible to implement a fixed-fluid structure using the CSS found below and slightly modified HTML code taken from the Twitter Bootstrap Scaffolding : layouts documentation page:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">  <!-- we want this div to be fixed width -->
            ...
        </div>
        <div class="hero-unit filler">  <!-- we have removed spanX class -->
            ...
        </div>
    </div>
</div>

CSS

/* CSS for fixed-fluid layout */

.fixed {
    width: 150px;  /* the fixed width required */
    float: left;
}

.fixed + div {
     margin-left: 150px;  /* must match the fixed width in the .fixed class */
     overflow: hidden;
}

/* CSS to ensure sidebar and content are same height (optional) */

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    position: relative;
}

.filler:after{
    background-color:inherit;
    bottom: 0;
    content: "";
    height: auto;
    min-height: 100%;
    left: 0;
    margin:inherit;
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

I have kept the answer below - even though the edit to support 2.0 made it a fluid-fluid solution - as it explains the concepts behind making the sidebar and content the same height (a significant part of the askers question as identified in the comments)

---

Important

Answer below is fluid-fluid

Update
As pointed out by @JasonCapriotti in the comments, the original answer to this question (created for v1.0) did not work in Bootstrap 2.0. For this reason, I have updated the answer to support Bootstrap 2.0

To ensure that the main content fills at least 100% of the screen height, we need to set the height of the html and body to 100% and create a new css class called .fill which has a minimum-height of 100%:

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

We can then add the .fill class to any element that we need to take up 100% of the sceen height. In this case we add it to the first div:

<div class="container-fluid fill">
    ...
</div>

To ensure that the Sidebar and the Content columns have the same height is very difficult and unnecessary. Instead we can use the ::after pseudo selector to add a filler element that will give the illusion that the two columns have the same height:

.filler::after {
    background-color: inherit;
    bottom: 0;
    content: "";
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

To make sure that the .filler element is positioned relatively to the .fill element we need to add position: relative to .fill:

.fill { 
    min-height: 100%;
    position: relative;
}

And finally add the .filler style to the HTML:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="span3">
            ...
        </div>
        <div class="span9 hero-unit filler">
            ...
        </div>
    </div>
</div>

Notes

• If you need the element on the left of the page to be the filler then you need to change right: 0 to left: 0.

How to add consistent grid-gutter-width across multiple breakpoints in bootstrap 3.1.1

In BS3, the "gutter" is created using padding, instead of margins so easiest way to create the look of a gutter is by using a container inside the col-*..

http://bootply.com/113815

See this article to understand the Bootstrap 3 gutter:

http://blog.codeply.com/2016/04/06/how-the-bootstrap-grid-really-works/

In Bootstrap 4, how to change inner $grid-gutter-width depending to breakpoints?

This looks like a mistake in the docs. There used to be a map, but it was removed before 4.0.0 was released. However, it would be fairly easy to add this for just xs with SASS. For example 5px on mobile...

@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)){
    .row > .col,
    .row > [class*="col-"] {
      padding-right: 5px;
      padding-left: 5px;
    }
}

https://www.codeply.com/go/XgynFzTmGv

Remove gutter from Bootstrap 4 grid

The narrow effects for container and gutter from Susy can be achieved easily in Bootstrap using three key changes:

1. Omit using container or container-fluid class, as stated in the documentation.

   Edit: If you need to restrict the container to 1280px, check the edit below.

2. Set default padding of columns to 25px on each side (so 50px total), instead of the initial 30px total

3. Adjust the negative margin on the row to reflect the gutter change by modifying the default to -25px margin on each side

So essentially your CSS would be:

.row {
  margin-left: -25px;
  margin-right: -25px;
}

.col,
[class*="col-"] {
  padding-right: 25px;
  padding-left: 25px;
}

One advantage of this approach is its responsiveness – it is not locked to any screen size such as 1280px. This can be seen in action in this jsfiddle snippet or below. Have added some responsive width output for debugging and testing in the former, omitted in the snippet below for brevity.

Edit: If you need to have the container size restricted to 1280px, you could do:

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
        padding-left: 0;
        padding-right: 0;
    }
}

The above will ensure that the container stays at maximum 1280px when the screen is 1280px in width or more, or stick to the default Bootstrap responsiveness when it is less. If you do prefer to have it always at 1280px, remove the media breakpoint and set both width and max-width to 1280px.

#example-row {  background: #0074D9;  margin-top: 20px;}
.example-content {  display: flex;  height: 80px;  background-color: #FFDC00;  text-align: center;  align-items: center;  justify-content: center;}
.row {  margin-left: -25px;  margin-right: -25px;}
.col,[class*="col-"] {  padding-right: 25px;  padding-left: 25px;}
@media (min-width: 1280px) {  .container {    max-width: 1280px;    padding-left: 0;    padding-right: 0;  }}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container" id="example-container">  <div class="row" id="example-row">    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>    <div class="col-1">      <div class="example-content">Grid Item</div>    </div>  </div></div>

---

Related Topics