59

I'm trying the make a horizontal scrollable bootstrap row. The row contains customer reviews wrapped in div's. The width of each testimonial div is 33.333%.

white-space: nowrap and display: inline-block doesn't work.

What am I doing wrong? 

<div class="row">
    <div class="col-lg-12 text-center">
        <div class="section-title">
           <div class="testimonial_group">
               <div class="testimonial">...</div>
               <div class="testimonial">...</div>
               <div class="testimonial">...</div>
               <div class="testimonial">...</div>
               ...
           </div>
        </div>
    </div>
</div>
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
Codehan25
  • 2,704
  • 10
  • 47
  • 94

8 Answers8

140

Please check. Is it what you want to achieve?

horizontal scrolling

Bootstrap 3 with inline-blocks

CodePen  •  JSFiddle

/* The heart of the matter */
.testimonial-group > .row {
  overflow-x: auto;
  white-space: nowrap;
}
.testimonial-group > .row > .col-xs-4 {
  display: inline-block;
  float: none;
}

/* Decorations */
.col-xs-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; text-align: center; }
.col-xs-4:nth-child(3n+1) { background: #c69; }
.col-xs-4:nth-child(3n+2) { background: #9c6; }
.col-xs-4:nth-child(3n+3) { background: #69c; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

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

Bootstrap 4 with flexbox

As commented by Hector, the inline-boxes solution works for Bootstrap 4 too, but requires to add display: block; for .testimonial-group > .row.

But Bartimaeus rightly notes that for Bootstrap 4 this result is more appropriate to achieve with the help of flexbox, adding the style classes provided for this: flex-nowrap and overflow-auto.

https://codepen.io/glebkema/pen/xxOgaMm

/* Decorations */
.col-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; text-align: center; }
.col-4:nth-child(3n+1) { background: #c69; }
.col-4:nth-child(3n+2) { background: #9c6; }
.col-4:nth-child(3n+3) { background: #69c; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css">

<div class="container">
  <div class="row flex-nowrap overflow-auto">
    <div class="col-4">1</div>
    <div class="col-4">2</div>
    <div class="col-4">3</div>
    <div class="col-4">4</div>
    <div class="col-4">5</div>
    <div class="col-4">6</div>
    <div class="col-4">7</div>
    <div class="col-4">8</div>
    <div class="col-4">9</div>
  </div>
</div>
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
  • ..great! It's working now but I can't scroll the list with the trackpad or a mouse. I can only scroll it with the keyboard. Is there any solution for this?... – Codehan25 Aug 11 '16 at 17:50
  • @Codehan25 I guess the row becomes scrollable after the first click into the row. – Gleb Kemarsky Aug 11 '16 at 18:00
  • your code is fine but in my case it doesn't work, hmm – Codehan25 Aug 11 '16 at 20:58
  • @Codehan25 1) I succeed to scroll both on the laptop and on the iPhone. I've increased the height of the columns, and now it is easier to get into them. It is necessary to click into the row to make it respond to the scrolling. 2) I've added comments to remove spaces between columns. It's because they are inline-blocks now. – Gleb Kemarsky Aug 12 '16 at 03:36
  • 13
    If you are using Bootstrap 4, You need to add ```display: block;``` to ```.testimonial-group > .row```. – Hector Jun 01 '18 at 10:06
  • @GlebKemarsky what if there are multiple rows and one wants them to scroll together. I modified your fiddle https://jsfiddle.net/1nj3fq5m/ but the rows scroll independently of each other. I need something that keeps all the columns aligned, sort of like what table responsive does except there is no actual
    – Lance Dec 05 '18 at 03:17
  • @Lance I guess you need to wrap both rows in an extra block that will scroll instead of rows. But I think it would be better to ask a new question. In this case, you will get help faster, and the SO community will discuss your problem in more comfortable environment. – Gleb Kemarsky Dec 05 '18 at 08:49
  • 1
    Simply use the classes `d-flex overflow-auto` in Bootstrap 4 and `d-flex overflow-scroll` in Bootstrap 5 – Bartimaeus Apr 23 '23 at 22:03
  • 1
    @Bartimaeus Thank you for your comment! I agree, for Bootstrap 4 or 5 it is more appropriate to use the flexbox properties with the help of the provided style classes. The `d-flex` class is not required since the `row` class already has the `display:flex;` property, but `flex-nowrap` is required. I have updated the answer. – Gleb Kemarsky Apr 29 '23 at 14:56
36

In Bootstrap 4 you will need to add 

flex-wrap: nowrap;

to

.testimonial-group > .row

in addition to Gleb's answer

Martin K.
  • 361
  • 3
  • 4
11

The Flexbox Method

/* The heart of the matter */
.testimonial-group > .row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.testimonial-group > .row > .col-xs-4 {
  flex: 0 0 auto;
}

/* Decorations */
.col-xs-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
.col-xs-4:nth-child(3n+1) { background: #c69; }
.col-xs-4:nth-child(3n+2) { background: #9c6; }
.col-xs-4:nth-child(3n+3) { background: #69c; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container testimonial-group">
  <div class="row text-center">
    <div class="col-xs-4">1</div><!--
 --><div class="col-xs-4">2</div><!--
 --><div class="col-xs-4">3</div><!--
 --><div class="col-xs-4">4</div><!--
 --><div class="col-xs-4">5</div><!--
 --><div class="col-xs-4">6</div><!--
 --><div class="col-xs-4">7</div><!--
 --><div class="col-xs-4">8</div><!--
 --><div class="col-xs-4">9</div>
  </div>
</div>
Nandeep Barochiya
  • 366
  • 3
  • 6
6

You can use:

class="text-nowrap overflow-auto"

Consider this example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="list-group list-group-horizontal text-nowrap overflow-auto">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

To accomplish the desired result without any css or all the unneeded divs: getbootstrap.com/list-group.

johnmweisz
  • 81
  • 1
  • 4
5

Try this:

section-title {
  width: 100%; 
  overflow-x: scroll(or auto);
}

Look at the spec here.

Alex M
  • 2,756
  • 7
  • 29
  • 35
Vally Pepyako
  • 141
  • 3
3

put these lines in your CSS file 

.section-title {
  overflow: scroll;
  overflow-x: scroll;
  overflow-y:hidden
}

the x is for horizontal and y is for vertical, apply class code in parent div in which many div's are nested.

Alex M
  • 2,756
  • 7
  • 29
  • 35
Abhinash Majhi
  • 499
  • 1
  • 4
  • 16
1

I don't understand why so much struggling with all these no-wrap and flex attributes which actually only work on child elements with no text. In case there is text inside the child elements, the 

white-space: nowrap;

attribute makes the whole text expand in one line having as a result text to overlap everything else and break the whole layout.

The solution is much simpler. Simply, give to the parent element the following

display: flex;
overflow-x: auto;

and then to the child elements the following

min-width: 25%;

Note: 25% for col size 3, 33.33333% for col size 4, 50% for col size 6 and so on. And there you have it. A horizontally scrollable div based on bootstrap cols for the layout.

Here is a clean sample. Fiddle

Smolikas
  • 326
  • 1
  • 6
  • 19
0

I'm using Bootstrap 4,

<div class="row overflow-auto flex-nowrap">
      <div class="col-auto"></div>
</div>

I just have to add overflow-auto and flex-nowrap classes to the div with class row. This will prevent the div from wrapping to a new line and overflowing. With this modification, the div with class col-auto will remain visible within the div with class row, and the horizontal scrollbar will appear to allow the user to scroll through the overflow content.

Nong Tinh
  • 1
  • 1