How to make horizontal scrollable in a Bootstrap row?

In Bootstrap, we can make any row horizontally scrollable by changing some CSS properties of the element:

To change the display property of all div elements to inline:

To add a scroll bar in a horizontal direction using the overflow-x property:

To align all div elements in a single line by using the white-space property:

Let's see the example of the above approaches:

Example 1:

Output:

Explanation

In the above code, we have included the CSS file for the Bootstrap to use the inbuilt classes. In the body section, we have taken a center tag and put all the code in this tag to align all the elements to the center of the page. In the div section of the row, we have created the ten div elements using CSS, and we have changed the display of these divs to inline-block. We have also designed the color and size of the text in these elements. The div element of the row is set to overflow-x at auto. So, it will add the scroll bar in the horizontal direction.

Note: We can also add the scroll bar in the vertical direction by changing the property of overflow-y to auto.

Example 2:

Output:

Explanation

In the above code, we have included the CSS file for the Bootstrap to use the inbuilt classes. In the body section, we have taken a center tag and put all the code in this tag to align all the elements to the center of the page. In the div section of the row, we have created the fourteen div elements using CSS, and we have changed the display of these divs to block. We have also designed the color and size of the text in these elements. The div element of the row is set to overflow-y at scroll. So, it will add the scroll bar in the vertical direction.