What is the best way to create a horizontal scrolling feature for a two-row layout using Bootstrap?

When using one row, the script works successfully. Here is an example of the code:

html :

<div class="testimonial-group">
  <div class="row">
    <div class="col-md-4">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4">3</div>
    <div class="col-md-4">4</div>
    <div class="col-md-4">5</div>
    <div class="col-md-4">6</div>
    <div class="col-md-4">7</div>
    <div class="col-md-4">8</div>
    <div class="col-md-4">9</div>
  </div>
</div>

css :

.testimonial-group > .row {
  overflow-x: auto;
  flex-wrap: nowrap;
}

The resulting display is shown in the image: https://i.sstatic.net/nnsRp.png

However, when using two rows, the script does not work as expected and two scrollbars appear. Here is an example of the code:

html :

<div class="row">
    <div class="col-md-4">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4">3</div>
    <div class="col-md-4">4</div>
    <div class="col-md-4">5</div>
    <div class="col-md-4">6</div>
    <div class="col-md-4">7</div>
    <div class="col-md-4">8</div>
    <div class="col-md-4">9</div>
  </div>
  <div class="row">
    <div class="col-md-4">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4">3</div>
    <div class="col-md-4">4</div>
    <div class="col-md-4">5</div>
    <div class="col-md-4">6</div>
    <div class="col-md-4">7</div>
    <div class="col-md-4">8</div>
    <div class="col-md-4">9</div>
  </div>
</div>

css : 

.testimonial-group > .row {
  overflow-x: auto;
  flex-wrap: nowrap;
}

The resulting display is shown in the image: https://i.sstatic.net/lkkXX.png

To resolve the issue of having two scrollbars and maintain only one scrollbar, you can try adjusting the CSS settings. How can I do it?

htmlcssscrollbootstrap-4row

Answer №1

To avoid overflow issues, it is recommended to apply the overflow property to the parent element instead of the rows within.

.testimonial-group {
  overflow-x: auto;
}

.testimonial-group > .row {
  flex-wrap: nowrap;
}

Alternatively, you can utilize the Bootstrap classes overflow-auto and flex-nowrap for a simpler solution:

Answer №2

Here's another way to attempt it...

HTML Code:

<div class="main_container"> 
  <div class="section"></div>
  <div class="section"></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

Issue with Angular / SCSS where animation is not being executed on the specified element

I have created a post component with a comment section. However, when I click on the comments, I want them to display smoothly with a nice animation effect. Even though I have added the necessary code for animations, it doesn't seem to work as expecte ...

cssangularanimationsass

Aligning a element at the center is not functioning properly when using margin: 0 auto;

I'm having trouble aligning elements to the center when applying margin: 0 auto. You can view the code here: https://jsfiddle.net/helloworld123/vhhx1o7n/ The goal is to align the elements in the center of the page (.entry-wrap should be centered) and ...

css

The vertical-align property fails to properly align the list-style-image with the text

My HTML list is structured like this: <ul id="remove"> <li id="rm_txt_1" onClick="remove_1();">Remove </li> </ul> <ul id="move"> <li id="mv_txt_1" onClick="position();">Move Down</li> </ul> It is styled u ...

htmlcss

Page rotates on hover effect with RotateY

How can I get an image to rotate on the Y axis when hovered over? My code works in -moz- but not in -webkit- or -o-. What am I missing? .spin-logo { height: 450px; margin: 0 auto; -moz-transition: transform 2000ms ease 0s; -o-animation: transfor ...

htmlcsstransform

Eliminate the dimming background on a discussion thread in Discourse

Working on customizing a theme for my blog using the Discourse engine has been quite interesting. I have noticed that every post, or "topic," loads with a blue background that quickly transitions to the main background color. You can take a look at an exam ...

csssassdiscourse

Ensure images are correctly aligned

Could really use some help with this issue I'm having. It's probably a simple fix for all you experts out there, but I can't seem to align my images properly so they are even and not one higher than the other. Please take a look at the scree ...

htmlcssimage

What about nested elements with percentages, set positions, and fixed placements?

Picture: https://i.sstatic.net/KFNR1.png I am working on a design with a yellow container div that I want to keep at 50% width of the window. Inside this container is a purple image div that stretches to 100% of the parent container's width, and ther ...

javascripthtmlcssfrontend

Align the content to the center of the middle column using HTML

Is it possible to replicate Amazon's email structure using only HTML in the feedbackwhiz template editor? I want my content to be left-justified in the center column with white space on either side, similar to the Amazon email example provided. Amazo ...

html

Utilize CSS to position an image in four various locations on a web page

Expressing this may be a challenge, but I'll give it a shot. Within a div, there is text that can vary in length based on user input. My goal is to have the ability to insert an image in one of several positions, determined by the selection made in a ...

htmlcss

AngularJS enhanced dropdown navigation bar built using Bootstrap styling

I'm currently learning how to implement Bootstrap, but I've run into an issue. I created a dropdown in the navigation bar, but when I clicked on it, the dropdown didn't collapse as expected. The class="dropdown" didn't change to class= ...

javascripthtmlcssangularjsbootstrap-4

BS4 Dynamic Countdown Clock

I have successfully integrated a countdown timer into my website, utilizing the following HTML code: <div id="clockdiv"> <div> <span class="days"></span> <div class="smalltext">Days</ ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Chrome not handling text wrapping within table cells properly

I'm facing an issue with a table I created using the bootstrap stylesheet. For some reason, the cells are not wrapping correctly in Chrome, although they display perfectly fine in IE and Firefox. You can check it out here: <form action="todos" m ...

htmlcsstwitter-bootstraphtml-table

Tips for creating a side by side layout in Bootstrap modal content

I recently ventured into using Bootstrap and decided to create a simple modal based on the Bootstrap 4 documentation. You can check out the Bootstrap 4 modal for reference. The modal I created consists of two parts - Part 1 and Part 2, with a <hr> t ...

htmlcssbootstrap-4modal-dialogbootstrap-modal

Creating a dynamic mouse trail effect using CSS and JavaScript without compromising element clickability

I'm looking to create a mouse trail that follows the cursor as it moves, made up of small icons or images that gradually fade out over time. I attempted to achieve this by overlaying a grid on top of all other elements on the page. The grid consists o ...

javascriptcss

How come the previous sibling element appears on top when the initial sibling is set to a position of absolute?

I have encountered an issue with two sibling sections. I applied position:absolute to the first section, but the second section is overlapping it. Even after trying to use position:relative on the second section, the problem persists. https://i.stack.imgur ...

htmlcss

Creating an HTML dynamic table with fixed height to prevent expanding when adding text

I have a dynamic table with fixed width and height. By using a random function, I determine the number of cells (ranging from 3x3 to 7x7) in the table. The table renders correctly, but when clicking on a cell to write a letter, the row expands in height. H ...

htmlcss

Tips on anchoring a footer to the bottom of a webpage following a loop in PHP

After running a PHP file with some HTML, I noticed that the footer is not staying at the bottom of the page as intended. It seems to be overlapping with the products or leaving empty space after them due to changes in the DOM. If anyone has insight on how ...

phphtmlcsswhile-loopfooter

Looking to set up a layout with two columns in the first row and one column in the second row, then combine the two columns using HTML and CSS

My goal is to set up a layout with two columns in the first row, one at 70% width and the other at 30%, and a single column in the second row. However, when I add text and images, the content doesn't position as expected: body { background-image: ...

htmlcss

What is the best way to style HTML content with MathJax following its retrieval with jQuery.load?

I recently encountered an issue while using jQuery.load to load a new page. The content on the original page is being treated strangely in some way. Specifically, I have code on the original page that formats LaTeX commands with MathJax: <script type=" ...

javascriptjqueryhtmlmathjax

Is the Packery image grid only functional when the background image is specified in CSS and not in JavaScript? Perhaps we need to look into using Await/Sem

I've successfully implemented a packery image grid that is responsive and functional when the background image in the .item-content section is defined in the CSS file: http://codepen.io/anon/pen/eJdapq .item-content { width: 100%; height: 100%; ...

javascriptjqueryhtmlcsspackery