Ways to establish a specific minimum width for a container and disregard small breakpoints in Bootstrap 5

I want to set a fixed minimum width for a container while ignoring small sizes like sm and xs. Basically, when the screen size is less than 960px, I want the width to be fixed and only display a scroll.

This is the code I have:

<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:

https://i.sstatic.net/8M3GtAgT.png

when md https://i.sstatic.net/xVFQ5PJi.png

However, when the screen width is smaller than 960px, the sm & xs breakpoints are not being ignored even though scrolling is displayed.

https://i.sstatic.net/WxYy8Xuw.png

I am looking for a solution to maintain a fixed width whenever the screen size is smaller than 960px

Here is a rough image:

https://i.sstatic.net/trazgVVy.png

Any ideas on how to tackle this issue?

#Edit

I'm not sure why the negative feedback? I just want to clarify why I need a solution: I have two different views in my project - desktop and mobile. I determine the client device type and serve the appropriate view accordingly. For desktop views, I want to set a fixed minimum width and ignore small breakpoints, while for mobile views, I want to use small breakpoints only and ignore larger sizes. I am using bootstrap 5 for this project but haven't found the answer yet.

codesandbox

cssbootstrap-5

Answer №1

Opt for using the max-width property instead of min-width, setting it to a maximum of 960px to control the size.

Next, include the class col-sm-12 within the columns divs.

Answer №2

Using scss and react-bootstrap to style the layout. To start, define the maximum width for any container in the scss configuration:

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

Next, specify the minimum width for the body:

body {
    min-width: 960px;
}

Further styling with 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>

Everything is functioning smoothly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What might be causing the jQuery UI Spinner arrow buttons to not appear?

Once I implemented a very basic version of the jQuery UI Spinner Widget, I encountered an issue where the up and down arrow buttons were not displaying. Clicking on the area where the buttons should be triggered the Spinner events and the number incremente ...

htmljquerycssjquery-uibootstrap-4

Steps for choosing an image and embedding it within a div element

Upon loading the site, an image is displayed with the following code: <img id="some_Image" src="some_source"> However, I am looking to avoid requesting this image again from "some_source". This is because calculating the image can be resource-inten ...

javascriptjqueryhtmlcss

Is there a way to align this button vertically to the bottom of its container with Bootstrap 5?

I'm currently working from this codepen snippet and facing an issue where I can't seem to align the button in the left box to the bottom of the box. Despite trying multiple approaches, I haven't been able to achieve the desired alignment. C ...

htmlcssbootstrap-5

What is the process for setting up both an open and closed status for my accordion?

After browsing through multiple threads on accordions, none seem to match my current structure which I believed was effective. In an attempt to learn and build elements from scratch, I created the following accordion with some help from Google and experi ...

javascriptjquerycss

Can a file be transferred to the server using only client-side scripting via HTML, CSS, and JavaScript?

Currently, I am looking for a way to upload a file onto my server for personal use. The downloading part is sorted out, but the challenge lies in figuring out how to upload without relying on server side scripting. I have been able to find a solution tha ...

javascripthtmljquerycss

Having difficulty with printing a particular div

I need help with printing a specific div containing checkboxes using jQuery. The checkboxes are initially checked based on data from a database, but when I try to print the div, the checkboxes remain unchecked in the print view. Below is the code snippet ...

javascripthtmlcsscheckboxprinting

Ways to make a div fill the whole screen and allow for scrolling as well

Issue I'm facing an issue with the login.php screen and the addphoto.php screen. I want these screens to cover the entire page, but despite using the following code: .login-screen, .form-screen { position: fixed; top: 0; left: 0; disp ...

htmlcss

Utilizing the map function in React to create a button reference

I am currently facing an issue that is relatively simplistic and doesn't have any real-world application. My goal is to locate a 'green' button and make it blink for a duration of 3 seconds. How can I achieve this using React? const btnLay ...

javascriptcssreactjs

HTML and CSS styled accordion with nested checkboxes: handling long items

I am currently working on creating a multi-level accordion for an aside navigation section on a webpage. However, I have encountered an issue where the background color extends too far when hovering over a specific element. This occurs on a folder-type ite ...

htmlcssnavigationaccordion

Modify the display of multiple divs within a main div

I am facing an issue with a parent div that contains multiple child divs. When there are many children, they all remain in a single row without adjusting into columns. Below is my current HTML: item1 item2 item3 ... <mat-card class="hove ...

htmlcssangularangular6position

"Text data will be automatically cut at the end of a page and continue

I encountered the following issue As depicted in the image The data is not being displayed properly In the next td, the last character 3 is also printed on the next line Is it possible to avoid page footer and header without adjusting the page margin? ...

jqueryhtmlcss

What is the best way to make the button cover the entire width?

I have a Vuetify card with a layout where I am rendering some dynamic Vuetify components inside the card based on checkbox selection. These components can be a divider, a spacer, toolbar, or a button. However, I'm struggling to make the buttons span t ...

javascriptcssvue.jsvuetify.js

Why does the <select> dropdown flash when I select it?

Currently utilizing Angular 1.3 and Bootstrap 3.3.x CSS without the JS functionality. There is also an interesting animated GIF embedded within. <div class="form-group"> <div class="col-lg-3"> <label clas ...

javascripthtmlcssangularjs

Having issues with referencing external JavaScript and CSS files in Angular 6

Dealing with an angular6 project and a bootstrap admin dashboard template, I'm facing issues importing the external js references into my Angular application. Looking for guidance on how to properly import and refer to external Js/CSS files in an angu ...

javascriptcssangularangular6

Achieve full height without scrolling in React

I am facing an issue where the height:100% property is not working to fill the remaining area on the screen. A red outlined area represents the border radius, while the highlighted yellow space should have been filled: https://i.stack.imgur.com/ZQNkw.png ...

javascriptcssreactjsmaterial-ui

Are your macOS devices not displaying the Scrollbar CSS buttons correctly?

I need help troubleshooting why my buttons are not appearing in the scrollbar on macOS. They function properly on Windows, so I suspect there may be a typo or error in my code. Can anyone take a look and provide some insight? ::-webkit-scrollbar { wid ...

css

Is there a way to remove this annoying double Google search bar?

Looking to replicate the Google home page for a project using HTML and CSS. I'm having trouble with incorporating the highlighted code (as shown in the second picture and identified by bold and italicized text) into my code. When I try to add it, I en ...

htmlcss

Problem with backstretch script (using DIV element as background)

For my website, I am utilizing a fullscreen background with the help of backstretch. The code below works perfectly on one of my websites: <script> $.backstretch([ "images/1.jpg" , "images/2.jpg" , "images/3.jpg" ], {duration: 6000, ...

jqueryhtmlcssjquery-backstretch

Creating HTML tabs using jQuery with input[type="radio"] tutorial for beginners

I'm having trouble creating a tab with input[type="radio"] using Jquery. The tab works fine on the first click, but it doesn't work on the second click. I can't figure out where the issue is in the Jquery code. Can someone assist m ...

javascripthtmljquerycss

Using Jquery to create a slideshow with a div that is set to absolute

<!DOCTYPE html> <html> <head> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); ...

jqueryhtmlcss