Min-Width for Column in Bootstrap Grid System

min-width for column in Bootstrap grid system

Not sure if there is such a way to accomplish what you want.

The col-sm-x defines specific width percentages of your viewport, and if you provide custom values, then the accumulated width of all columns will either be more or less than 100%, which is not the desired behaviour.

Instead, you can provide multiple classes for the same div. Example:

<div class="row">
  <div class="col-sm-4 col-xs-1">Name</div>
  <div class="col-sm-1 col-xs-3">Instance name</div>
  <div class="col-sm-7 col-xs-2">Due date</div>
</div>

If this is solution does not suffice, then you will most likely come up with a javascript solution of some sort that manually sets the width of the other divs.

There seems to be another, similar question previously posted here on stackoverflow. Have a look here.

Bootstrap Grid on W3Schools

Bootstrap 4: Min-width only for one column

Simplest way is to use an auto-layout column (.col) on the right...

<section class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-5 min-width-460-md border">
            <table class="table table-striped">
                ..
            </table>
        </div>
        <div class="col bg-dark text-white">
            Second column (it contains more resizable data, so no min-width required here).
        </div>
    </div>
</section>

Demo: https://www.codeply.com/go/IB5xTytQAq

A div with min-width in a column, Bootstrap 3.2

Firstly use media queries, what reason is there not to?

They will give you complete control of how things look at any given size.

To prevent the overlapping div causing problems you could use.

.col-md-6 {
    overflow: hidden;
}

It would be better to use a different class though, .col-md-6.no-overflow for example.

It's difficult to give a conclusive answer without knowing the content and purpose of the .my div.

How to force a fixed column width with a Bootstrap grid and keep the other ones fluid

Bootstrap's grid were meant to be fluid so they're supposed to change as the screen changes size.

For your desired layout, you can make it happen using display: flex or display:table instead. I'm going to go with display:table for my example since there's more support for it than the flexbox.

You will need to change your HTML to something like:

<div class="page">
  <div class="page-content">
    <div class="row">
      <div class="col-md-2">
        <div class="blue">test</div>
      </div>
      <div class="col-md-10">
        <div class="green">test</div>
      </div>
    </div>
  </div>
  <div class="sidebar">
    <div class="gold">test</div>
  </div>
</div>

And here's the CSS I used:

.page {
  display: table;
  width: 100%;
}
.page-content,
.sidebar {
  display: table-cell;
}
.sidebar {
  width: 330px;
}
.blue,
.green,
.gold {
  height: 50px;
}

.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
.gold {
  background-color: gold;
}

You can checkout the fiddle here: https://jsfiddle.net/m0nk3y/qjutpze4/

How to Customize Bootstrap Column Widths?

To expand on @isherwood's answer, here is the complete code for creating custom -sm- widths in Bootstrap 3.3

In general you want to search for an existing column width (say col-sm-3) and copy over all the styles that apply to it, including generic ones, over to your custom stylesheet where you define new column widths.

.col-sm-3half, .col-sm-8half {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-sm-3half, .col-sm-8half {
        float: left;
    }
    .col-sm-3half {
        width: 29.16666667%;
    }
    .col-sm-8half {
        width: 70.83333333%;
    }
}

Bootstrap - set min and max width of div - not number of columns

this is your solution, you need the media query's for CSS

https://jsfiddle.net/Alan_van_Buuren/4w9wy73y/

.column {  width: 50px;  font-size: 20px;  float: left;}
@media screen and (min-width: 480px) {  .column {    width: 100px;  }}
@media screen and (max-width: 800px) and (min-width: 520px) {  .column {    width: 100px;    background-color: yellow;  }}
@media screen and (max-width: 519px) and (min-width: 100px) {  .column {    width: 150px;    background-color: red;  }}

<div class="column">One</div><div class="column">Two</div><div class="column">Three</div><div class="column">Four</div><div class="column">Five</div><div class="column">Six</div><div class="column">Seven</div><div class="column">Eight</div><div class="column">Nine</div><div class="column">Ten</div><div class="column">Eleven</div><div class="column">Tweelve</div>

---

Related Topics