Bootstrap 4 min width fluid container (change responsive behavior)

Question

I am building a fluid-container Bootstrap 4 SPA that will only be used on desktop.

I am trying to restrict the min body width to 1200px and have a horizontal scroll if the user reduces their browser width to less than 1200px, however, any size bigger than 1200px should be responsive.

I tried the following:

<meta name="viewport" content="width=device-width, initial-scale=1">

and

body { min-width: 1200px; }

But that didn't seem to work, I have also tried setting it on the fluid-container, but didn't work as well and all the elements were still responsive below 1200px.

The columns within the container are freezing but any setting that is affected by responsive behaviour is still changing when the size goes below 1200px, this needs to stop.

How do you achieve min width in Bootstrap 4 fluid-container and have all the elements acting non-responsive below that?

Can you share your actual code? (HTML and CSS), the fluid container is also affected by multiple breakpoints, so you have to make sure all of the are overriden — IvanS95, Dec 19 '18 at 18:15
The meta tag which you use is for responsive design, if only for desktop like 1200px you can simply use `` i guess — MJN, Dec 19 '18 at 18:55
@Manjunath: without specifying anything else? This haven't changed anything! — Adam, Dec 19 '18 at 19:03

score 3 · Answer 1 · edited Dec 19 '18 at 18:19

3

Try this:

.custom {
  min-width: 1200px;
  overflow: scroll;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid custom">
  <div class="row">
    <div class="col-6">
      Hello
    </div>
    <div class="col-6">
      Hello
    </div>
  </div>
</div>

edited Dec 19 '18 at 18:19

IvanS95

5,364
4
24
62

answered Dec 19 '18 at 18:16

Ivan Bacher

5,855
9
36
56

1

The columns within the container are freezing but any settings that is affected by responsive behaviour is still changing when the size goes below 1200px – Adam Dec 19 '18 at 18:36

Carol Skelly · Accepted Answer · 2018-12-20T14:35:23.197

"The columns within the container are freezing but any setting that is affected by responsive behaviour is still changing when the size goes below 1200px, this needs to stop."

As far as I can tell, your question is really how to make responsive behavior based on the container width, and not the viewport width. As answered before, this isn't really possible because Bootstrap's responsive behaviors use @media queries.

Your original question of setting a min container width has already been answered. It's simplest to use a custom container element like this:

.container-1200 {
  width: 100%;
  min-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
}

https://www.codeply.com/go/CUAh9pgRpu

However, this won't effect other responsive behaviors like column width, responsive alignment, flexbox, etc.. because you're not changing Bootstrap's responsive breakpoints.

AFAIK, the only way to get the desired result of responsive above 1200px would be to customize Bootstrap's breakpoints using SASS. You'd override all the breakpoints under xl to 1px min-width. This will make all the smaller breakpoints (xs,sm,md an lg) behave the same (non-responsive), and xl will still be responsive.

$grid-breakpoints: (
  xs: 0,
  sm: 1px,
  md: 1px,
  lg: 1px,
  xl: 1200px
);

Then set the container width...

$container-max-widths: (
  xs: 1200px,
  sm: 1200px,
  md: 1200px,
  lg: 1200px,
  xl: 100%
);

In the end, you have a single breakpoint of 1200px:

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

Note: as per your Codeplay, the variables in scss should be before including Bootstrap — Adam, Dec 20 '18 at 09:31

score 1 · Answer 3 · answered Dec 19 '18 at 18:25

1

Try adding a media query as follows:

@media (max-width:1201px) {
    body{
        min-width:1200px;
        overflow-x:scroll;
    }
}

Use 1201px on media query to avoid overrides.

answered Dec 19 '18 at 18:25

vitomadio

1,140
8
14

score 1 · Answer 4 · answered Dec 19 '18 at 19:12

So here is the thing, Whenever we design responsiveness we mostly use adaptive to fit the device and we hide the overflow. But particularly its overflow-x:hidden. So you can just keep overflow-x:auto on the body tag with min-width would fix it.

body {
  min-width: 1200px;
  overflow-x: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        Hello Bootstrap 4
      </div>
    </div>
  </div>

Bootstrap 4 min width fluid container (change responsive behavior)

4 Answers4

Linked