Bootstrap grid: Preventing horizontal scrolling when all columns cannot fit in a single row

Why is it that when the column does not fit in one row, instead of showing a horizontal scrollbar, it goes to the bottom?

<div class="container-fluid main-container" style="overflow-x: auto; width:600px">
    <div class="row mx-5">
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...content for column 1
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...content for column 2
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...content for column 3
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...content for column 4
        </div>
    </div>
</div>

Expected Outcome:

If the 4 div columns do not fit in one row, a horizontal scrollbar should appear.

Current Result:

The fourth column moves to the bottom below column 1, column 2, and column 3

The visual representation of this outcome can be seen here :

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

htmlcssbootstrap-4flexbox

Answer №1

To achieve your goal, you can utilize the flex-nowrap class.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid main-container" style="overflow-x: auto; width:600px">
    <div class="row mx-5 flex-nowrap">
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...content for column 1
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...content for column 2
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...content for column 3
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...content for column 4
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc8c938c8c998ed2968fbccdd2cdcad2cc">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer №2

why are you utilizing a grid for this?

Have you considered using a carousel instead?

Bootstrap uses a percentage-based grid, but you can also manually achieve it like this:

.container {
  width: 100%;
  max-width: 600px;
  background: red;
  overflow-x: scroll;
}

.container .content {
  width: 820px;
}

.container .box {
  display: inline-block;
  width: 200px;
  height: 200px;
}

.container .box:nth-child(1) {
  background: blue;
}

.container .box:nth-child(2) {
  background: cyan;
}

.container .box:nth-child(3) {
  background: purple;
}

.container .box:nth-child(4) {
  background: gray;
}
<div class="container">
  <div class="content">
    <div class="box">
      1
    </div>
    <div class="box">
      2
    </div>
    <div class="box">
      3
    </div>
    <div class="box">
      4
    </div>
  </div>
</div>

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 is the best way to ensure that each box remains separate and does not overlap with the box next to it?

Just an FYI - styling in React using CSS is quite similar to regular CSS. Each individual box has its own code snippet: export const CardWrapper = styled.div` display: flex; flex-direction: column; align-items: center; border-radius: 4px; backg ...

cssreactjsflexbox

Using JQuery to Load a CSHTML File into a Modal in C#

I am attempting to have the content of one specific page loaded into a modal on a different page when a button is clicked. Unfortunately, I am encountering an issue where not only the desired content from the specified page is loading, but also content fro ...

javascriptc#htmljqueryasp.net-mvc

What are the steps to vertically aligning rows in bootstrap?

I've been exploring different solutions to vertically center my rows within the container. Adding d-flex and align-items-center did work for centering them vertically but caused the rows to appear side by side. I'm curious if there's an alte ...

cssreactjsflexboxbootstrap-5

Is the appearance of the Select Box altered when using Opera browser?

Here is the outcome I am hoping for. It displays correctly in Chrome, IE and FF: However, this is what I see when using Opera: Check out the demo site: Can anyone offer assistance? ...

htmlcsscross-browseropera

Breaking or wrapping lines in Visual Studio Code

While working in Visual Studio Code, I often encounter the issue of long lines extending beyond the screen edge instead of breaking and wrapping to the next line. This lack of text wrapping can be quite bothersome. I utilize a split-screen setup on my co ...

javascripthtmlvisual-studio-codeline

Tips on enlarging a webpage without showing the scroll bar on the main component

My goal is to create a webpage that resembles a window application. However, I've encountered an issue where zooming in on the page results in a scroll bar appearing on the main page. The parameters for the main page (the parent) are set as follows: w ...

cssreactjsflexboxmaterial-uiscrollbar

The end of the page is not displayed fully in Safari

I've been scratching my head trying to understand why this Safari browser issue is happening on this page: . It seems to be working perfectly fine on all other browsers that I've tested so far! The code includes some jquery and css to adjust the ...

jqueryhtmlcssheight

Demonstrate the utilization of JQuery to unveil a secondary menu

I need assistance in implementing a sub-menu that automatically appears within 2 seconds after the page loads, instead of requiring user interaction. I am currently utilizing JQuery, which serves as the core framework for my website. It is crucial for this ...

javascriptjqueryhtml

jQuery Animated List - Nested items are unresponsive to clicks

Looking to create a dynamic nested list using jQuery for animations, but unsure of the best approach. Currently, I'm adjusting the length of the parent list item and revealing the nested items. The issue is that the parent item's length covers ...

javascriptjqueryhtmlcss

The inner panel height does not extend to 100% when there is overflow

When pressing the submit button on a panel containing components, an overlay appears but does not cover the entire parent panel if scrolled to the bottom. Additionally, I want the spinner to always be centered, whether scrolling or not. I've tried usi ...

htmlcssangular

Ways to sum up the values within a JSON object

Currently, I am using an AJAX call to fetch JSON data from an API. My goal now is to add up all the visits. This is what I have implemented so far. Any suggestions on how I can achieve that? $(document).ready(function() { var X = []; var Y = []; var d ...

javascriptjqueryhtmljsonajax

JavaScript code to dynamically change the minimum value of an input field when the page

How can I use JavaScript to change the minimum value onload? I tried the following code but it didn't work: <script type="text/javascript">$(document).ready(function(){ $("#quantity_5c27c535d66fc").min('10'); });</script> ...

javascripthtmlinput

Create an element that spans the entire width of the page

Having trouble adjusting the width of the .navbar? It seems to only grow to one side and setting it to 100% width doesn't expand it to fill the whole page. Can anyone provide some guidance or assistance? Here's the code: return ( <div cla ...

htmlcssreactjs

Display the form-control field only when a selection has been made in the previous form-control using HTML and PHP

I'm in the process of developing a webpage with form controls (2 in this example). Here's my code: <body> <div class="option_choice_global"> Select your options <div class="col-xs-2"> <lab ...

phphtmlform-control

Effective ways to replace an image using JavaScript

I am currently working on implementing a show/hide function, but I am encountering an issue with swapping the image (bootstrap class). The show-hide function is functioning properly; however, I am struggling to determine which class is currently displayed. ...

javascriptjqueryhtmltwitter-bootstrap

Bootstrap 5 NavBar Toggle hamburger Menu not displaying menu items

I attempted to create a navigation bar using the navbar instructions in Bootstrap 5. I included a Toggle hamburger Menu and linked it to the list that should be displayed. However, when I decrease the screen size, the Toggle feature does not function as ex ...

htmlcssnavbarbootstrap-5

Feeling trapped during the process of setting up a intricate jQuery Image Slider

I've hit a roadblock while trying to make changes to the slider located at THIS URL. In the current setup, each thumbnail corresponds to one main display image. Clicking on a thumbnail displays a single image and then proceeds to slide to the next th ...

javascriptjquerycsshtml

Troubleshooting problems with TranslateZ performance on mobile devices

While attempting to incorporate the code found at http://codepen.io/keithclark/pen/JycFw, I encountered significant flickering and delays in Chrome when using mobile devices. #slide1:before { background-image: url("http://lorempixel.com/output/abstract ...

htmlcssmobile

How can you hide specific elements in HTML/CSS based on window size without relying on media queries?

How can I create an HTML/CSS toolbar where specific elements disappear completely when the browser size is decreased, similar to how the favorites bar functions in most browsers? The toolbar should be able to display a varying number of items. In this cas ...

htmlcssfrontend

position blocks next to each other within a container

Thank you for all the hard work! I've been struggling to figure out how to align blocks next to each other within a div. It may not be that difficult, but I just can't seem to find an elegant solution... Here is the HTML code snippet: <div ...

javascripthtmlcss