Creating a horizontal scrollbar for multiple rows and columns in Bootstrap: A step-by-step guide

Question

Creating a horizontal scrollbar for multiple rows and columns in Bootstrap: A step-by-step guide

I need a solution where multiple rows and columns can be scrolled horizontally using just one scroll bar. I have already tried implementing the scrollbar for only one row with multiple columns, but it didn't work as expected. Here is the code that I attempted:

.page {
  width: auto;
  margin: auto;
}

.hs {
  list-style: none;
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
  padding: 0 10% 2rem 0%;
}

.hs .item {
  display: inline-block;
  width: auto;
  text-align: center;
  margin-right: 0.75rem;
  height: 100%;
  white-space: normal;
}

 ::-webkit-scrollbar {
  height: 15px;
}

 ::-webkit-scrollbar-track-piece {
  background-color: gray;
}

.li {
  text-decoration: none;
}

<div class="container page">
  <ul class="hs">
    <li class="item">
      <div class="col-lg-3 col-md-4 col-sm-6 ">
        <div class="card border-0" style="width: 15rem;">
          <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
        </div>
      </div>
    </li>

    <li class="item">
      <div class="col-lg-3 col-md-4 col-sm-6 ">
        <div class="card border-0" style="width: 15rem;">
          <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
        </div>
      </div>
    </li>

    <li class="item">
      <div class="col-lg-3 col-md-4 col-sm-6 ">
        <div class="card border-0" style="width: 15rem;">
          <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
        </div>
      </div>
    </li>
  
   <!-- Additional items shortened for brevity -->

  </ul>

</div>

html css bootstrap-4 grid frontend

Answer 1

Answer №1

To ensure proper display, make sure to specify the height and width of your <ul> tag. Adding these attributes will set the dimensions of your list. Additionally, you can style the ul element using overflow-y: scroll; to create a scrollbar effect. If this doesn't work as expected, try using overflow-y: auto; instead.

Here's an example:

ul{
  height: 200px;
  max-height: 200px;
  width: 200px;
  border: 2px solid blue;
  overflow-y: scroll;
}

li{
height: 50px;
border: 2px solid black;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width = device-width, initial-scale = 1.0">
        <meta http-equiv="X-UA-Compatible" content = "ie=edge">
        <title> Keat </title>
    </head>

    <body>
        <ul>
          <li>Li-1</li>
          <li>Li-2</li>
          <li>Li-3</li>
          <li>Li-4</li>
          <li>Li-5</li>
          <li>Li-6</li>
        </ul>
    </body>
</html>

Answer 2

To ensure proper display, make sure to specify the height and width of your <ul> tag. Adding these attributes will set the dimensions of your list. Additionally, you can style the ul element using overflow-y: scroll; to create a scrollbar effect. If this doesn't work as expected, try using overflow-y: auto; instead.

Here's an example:

ul{
  height: 200px;
  max-height: 200px;
  width: 200px;
  border: 2px solid blue;
  overflow-y: scroll;
}

li{
height: 50px;
border: 2px solid black;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width = device-width, initial-scale = 1.0">
        <meta http-equiv="X-UA-Compatible" content = "ie=edge">
        <title> Keat </title>
    </head>

    <body>
        <ul>
          <li>Li-1</li>
          <li>Li-2</li>
          <li>Li-3</li>
          <li>Li-4</li>
          <li>Li-5</li>
          <li>Li-6</li>
        </ul>
    </body>
</html>

Answer 3

Answer №2

To implement a custom scrollbar, follow these steps:

Within a div element, include the following classes:

<div class="custom-scrollbar custom-scrollbar-primary">

Next, in your style tag, add this CSS code:

{

.custom-scrollbar {
 position: relative;
 width: 800px;
 height: 400px;
 overflow: auto;
}

}

Answer 4

To implement a custom scrollbar, follow these steps:

Within a div element, include the following classes:

<div class="custom-scrollbar custom-scrollbar-primary">

Next, in your style tag, add this CSS code:

{

.custom-scrollbar {
 position: relative;
 width: 800px;
 height: 400px;
 overflow: auto;
}

}

Creating a horizontal scrollbar for multiple rows and columns in Bootstrap: A step-by-step guide

Answer №1

Answer №2

Similar questions

Require an additional button to dynamically load more content and shift all existing elements further down the page

Encountered an issue while attempting to run the npm run serve command on a

What is preventing the Navbar from aligning to the right side in Bootstrap 5?

Using functions like nl2br() for new line breaks, preg_replace for replacing patterns, htmlspecialchars() for encoding special

Enhancing button functionality using jQuery and JavaScript for toggling behavior

How can LDAP authentication be implemented in an Angular 8 frontend application?

.css files standing their ground against modifications

Execute HTML code when a button is clicked

Having trouble getting items to align properly in Bootstrap

What causes a space to appear at the bottom of the screen when elements exceed the height of the screen?

Using Javascript to replace elements with input fields and text areas

Position the vertical bar directly adjacent to the form input field

Encountered an error while attempting to load resource: the server returned a 404 (Not Found) status code when trying to load an image in an

Generating nested arrays using Vue.js

Creating responsive images with Bootstrap 5

Transforming a Java Array or Collection into a JSON array

Animation of CSS height when image/icon is hovered over

Issues with Angular's *ngIf directive not functioning correctly

Color scheme for navigation bar carousel item background color

Designing an accordion with the main content peeking out slightly before collapsing into place