CODEWITHSUNDEEP
layouttwitter-bootstrap-3
Amin Saqi
Amin Saqi

Reputation: 18977

How to make only one column fluid in bootstrap

The following is the structure of my layout in Bootstrap 3.2:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">
            <!-- I want this column to be fixed. -->
        </div>
        <div class="col-xs-6">
            <!-- I want only this column to be fluid. -->
        </div>
        <div class="col-xs-3">
            <!-- I want this column to be fixed. -->
        </div>
    </div>
</div>

As you can see in psuedo-code comments, I want only the middle column to be fluid according to the screen size.

Is it possible in container-fluid fashion of Bootstrap? Or I should go through other ways?

Upvotes: 8

Views: 10451

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25954

There is no "Bootstrap way" to have columns a fixed width. So, we can use CSS to do what you want in a few ways

  1. Use flexbox (the best way) - Demo. 

.row {
  display: flex;
}
.fixed-side-column {
  width: 250px;
}
.fluid-middle-column {
  flex-grow: 1;
}
  1. Use calc() (or the JavaScript equivalent) keeping in mind browser support - Demo

.row > div {
  float:left; /* Could also use display: inline-block. */
}
.fixed-side-column {
  width:250px;
}
.fluid-middle-column {
  width:calc(100% - 500px);
}
  1. Use absolute positioning and padding on the middle element to remove the need for any calculations - Demo

You'd have to change the markup some

<div class="container-fluid">
 <div class="row">
    <div class="fluid-middle-column">
      <!-- I want only this column to be fluid. -->
    </div>
    <div class="fixed-side-column">
      <!-- I want this column to be fixed. -->
    </div>    
    <div class="fixed-side-column right">
      <!-- I want this column to be fixed. -->
    </div>
  </div>
</div>

/* CSS */
.fixed-side-column {
  width:250px;
  float:left;
}
.right {
  float:right;
}
.fluid-middle-column {
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  width:100%;
  padding: 0 250px 0 250px;
}

You'll need to add custom media queries to handle what happens when the screen is getting small.

Upvotes: 10

Related Questions