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!

Excommunication

Don't be setting them as columns if you need them to be a fixed width! – Enquire

Does adding style="width:300px;" to the second <div> solve your issue? – Frustrated

I've seen a lot of other solutions to this, the problem is none of them account for the want to stack the columns. By keeping them as bootstrap cols it keeps me from having to write out everything across the media queries as far as the stacking functionality. – Excommunication

@PhilipTheobald, hopefully my answer will help with that--though it does involve ditching Bootstrap for this particular part! – Boustrophedon

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.

Boustrophedon

While I don't disagree that flex would solve this... I am stuck using bootstrap as the entire remainder of the platform relies on it. Any suggestions that keep Bootstrap in the equation? – Excommunication

You can happily keep Bootstrap in the equation, and use it for everything else you need to, but just use this technique for this particular requirement. If you were writing this in LESS (I presume) you could inherit Bootstrap variables/media queries too. This technique can definitely work within Bootstrap columns etc – Boustrophedon

Further to that, there is nothing within Bootstrap (as far I'm aware, and I've trawled through the source LESS a fair bit) which will handle the filling of an unknown amount of space. There are only two other options I can think of: tables or custom JS. – Boustrophedon

Answer 2

You should avoid using bootstrap's built in columns for this task.

You can (and should!) define your own media size rules for your own classes using @media when they don't conform to bootstrap's default behavior. For example, @media (min-width: 768px) { .my-class: { width: 300px; } }. You can read up on @media at Mozilla Dev.

Animality