Bootstrap grid : No horizontal scroll when all column does not fit in one row

Question

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


    
        
            ...column 1 content
        
        
            ...column 2 content
        
        
            ...column 3 content
        
        
            ...column 4 content

Expected Behaviour:

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

Current Outcome:

The 4th column goes to the bottom of column 1, column 2, and column 3

An image of the outcome :

user_8798220 · Answer

You can use flex-nowrap class to achieve your goal.




    
        
            ...column 1 content
        
        
            ...column 2 content
        
        
            ...column 3 content
        
        
            ...column 4 content

user_1278790 · Answer

why you using grid to do this?

try using some carousel. https://flickity.metafizzy.co/options.html#freescroll

bootstrap use percentual grid, you can do it manual like:

.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;
}

Bootstrap grid : No horizontal scroll when all column does not fit in one row

2 Answers