css Question posted in
Some basic documentation can be found here.

Css – how to set a fixed minimal width for container and ignore small breakpoints on bootstrap 5

I’m trying set a fixed minimal width for container and ignoring small sizes (sm,xs). In short when the screen size is smaller than 960px width, must be fixed and just display scroll.

Code in my case:

<div class="container" style="min-width: 960px">
    <div class="row">
        <div class="col-md-6 col-lg-3 bg-primary">1</div>
        <div class="col-md-6 col-lg-3 bg-secondary">2</div>
        <div class="col-md-6 col-lg-3 bg-info">3</div>
        <div class="col-md-6 col-lg-3 bg-warning">4</div>
    </div>
</div>

result:
when lg:

enter image description here

when md
enter image description here

And when the screen width is smaller then 960px sm & xs breakpoints are not ignored even though scrolling is displayed.

enter image description here

I would like fixed width whenever screen size smaller then 960px

rough image:

enter image description here

How to solve this question?

#Edit

I don’t know why negative rating? I want to explain why I need it solution: in my project two views: desktop views and mobile views. Every time when a client makes a request detected a client device type. If desktop returning data by desktop views or by mobile view when mobile device also. So I just want to fixed minimal width on desktop devices and ignoring all small breakpoints and vice versa on mobile device use only small breakpoints and ignoring all large sizes. I choose bootstrap 5 for my task. I don’t know the answer to that yet.

codesandbox

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solid by scss and react-bootstrap. First set maximal width for any container in scss config:

    $container-max-widths: (
  sm: 960px,
  md: 960px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
);

    set minimal width for body:

    body {
    min-width: 960px;
}

    and by react-bootstrap:

    <Container>
      <Row>
        <Col xs="6" lg="3" className="bg-primary">
          1
        </Col>
        <Col xs="6" lg="3" className="bg-secondary">
          2
        </Col>
        <Col xs="6" lg="3" className="bg-info">
          3
        </Col>
        <Col xs="6" lg="3" className="bg-warning">
          4
        </Col>
      </Row>
    </Container>

    it's working just fine.


  2. 0

    Instead of using min-width, try to use max-width, so it restrict with not to more than 960px.

    then add col-sm-12 inside of col div’s.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search