Bootstrap minimum width grid

Bootstrap minimum width grid

Using twitter bootstrap using a fluid row setup I have

What I want is to give the first div (with class span4) a minimum width of 275px without upsetting the layout of the second. I’ve tried just adding min-width: 275px but that makes the second div move to the next line. Is there a way to do this properly?


Solution 1:

<div class="row-fluid">
    <div class="span4" style="min-width: 275px">...</div>
    <div class="span8">...</div>

Worked for me. It moves the second div to the new line only if the second div has less then ~66% of screen space. (get the code)

Solution 2:

I have similar issue, too. And I try solve this problem with css and bootstrap. But I can’t find a solution. So I solved this problem with jQuery.

My Situation

<div id="text" class="col-sm-3 col-sm-offset-2" style="min-width: 320px"></div>
<div id="image" class="col-sm-7" ></div>

When window width is narrow, then #image will move to next line. Because #text width can not be loosed anymore from 320px. So #image can not occupy its width, and have to move next line.

Related:  Is it possible to place Edit and Delete buttons in jQuery DataTables?

How I Solved It

Calculate #image width each window size. And CSS is not proper for this work. So I should use jQuery.

$(window).ready(function() {

$(document).ready(function() {
    $(window).resize(function() {

var resizeImageWidth = function() {
    var text_minwidth = parseInt($('#text').css('width'));
    var text_marginLeft = parseInt($('#text').css('margin-left'));
    var image_marginLeft = parseInt($('#image').css('margin-left'));

    if ($(window).width() > 768) {
        var image_width = $(window).width() - (text_marginLeft + text_minwidth + image_marginLeft + 32);
    } else {

resizeImageWidth function will get #text width, margin-left, #image margin-left and more thing. Of course it can not fit your code. I should subtract these things. Please check what I have subtracted.

After render div can still move to next line. Maybe some elements is missing. So I subtract 30px hardly. But this calculating still have error. So div can move next line in some window width. So I should subtract a further 2px to prevent it. Ideally I should make more exact calculations.

In small display, this calculating did not be needed. So if ($(window).width() > 768) is needed. And this function should load in $(window).ready. If you load in $(document).ready, then CSS property is not incomplete. So calculating error is bigger.

Related:  How to center align vertically the container in bootstrap

Solution 3:

Bootstrap columns are flex items. You have to decide on one column which should shrink when the others have reached their min-width. This prevents elements moving to the next line.

here is a pretty codepen i made:

In this case, we take the other span, reduce it to span1. Give it flex-grow and we have to overwrite bootstraps max-width property.

<div class="row-fluid">
    <div class="span4 style="min-width: 275px;">...</div>
    <div class="span1 style=" flex-grow: 1; max-width:100%; "">...</div>

to be on the safe side you can reduce the second span only as much as necessary. i.e span6 . Adjust the max-width to the amount the normal span had, we had span8 100/12*8 = 66.66%