Bootstrap Static Column Width

Question

This is more of a best practice question than anything. So, say I have two cols in Bootstrap and I want the right col to be set at 300px until it hits the 768px breakpoint then have it stack.

<div class="container">
  
  <div class="row">
    
    <!-- This column needs to fill the rest of the container fluidly -->
    <div class="col-sm-8"></div>
    
    <!-- This column needs to stay 300px -->
    <div class="col-sm-4"></div>
    
  </div>
  
</div>

My initial solution was to just add classes to each container and statically set the width of both containers for each media breakpoint then set width to auto on the stack breakpoint. However, I don't like this solution because it's extremely verbose and it seems too fragile to set the columns both up as static. I'd much prefer the left column use a dynamic mix-in OR be set with a percentage.

Any thoughts? Thanks!

Answer 1

For this particular scenario, my best suggestion would actually be to not use Bootstrap for the functionality you're after. You can achieve this rather trivially with another kind of solution. May I suggest an alternative?

Introducing display: flex

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

I've written a pen that demonstrates my idea of how to tackle this, which you can see here.

Let's take a look at the code, first up, new HTML:

<div class="flex-container">
  <div class="left-content content">

  </div>
  <div class="right-content content">

  </div>
</div>

We've got a similar structure to what you're already dealing with here, just we've changed the format a little (I've used class names which should help illustrate what's happening.)

And here's the accompanying CSS:

.flex-container {
  display: flex;
  flex-flow: row;
}

.content {
  min-height: 500px;
}

.left-content {
  background-color: rgba(0,0,0,0.2);
  flex: 1 1 auto;
}

.right-content {
  width: 300px;
  background-color: rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
  .flex-container {
    flex-flow:column;
  }
  .right-content {
    width: 100%;
  }
}

So initially, we want to use the flex-flow: row property to get our elements to display side-by-side (this means the container is arranging its children in a row essentially). We set a fixed width of 300px on the right-hand column, and then use the property flex: 1 1 auto; on the left-hand, which in a little more detail is...

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.

The property above tells the item to fill the remaining space of the container.

Stacking depending on viewport size

You can see I've used a basic media query with max-width: 768px, when the viewport is smaller than this, we simply stack the content areas by setting flex-flow: column on the parent container and width: 100% on its children, which tells the browser to treat the container as a column and thus stack its elements on top of one another.

If anything's unclear please let me know and I'll improve my answer.