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>
1
  • Please share your code with jsfiddle Aug 11, 2016 at 16:03

8 Answers 8

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>

9
  • ..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, 2016 at 17:50
  • @Codehan25 I guess the row becomes scrollable after the first click into the row. Aug 11, 2016 at 18:00
  • 14
    If you are using Bootstrap 4, You need to add display: block; to .testimonial-group > .row.
    – Hector
    Jun 1, 2018 at 10:06
  • 1
    Simply use the classes d-flex overflow-auto in Bootstrap 4 and d-flex overflow-scroll in Bootstrap 5
    – Bartimaeus
    Apr 23, 2023 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. Apr 29, 2023 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

1
  • 7
    I just had to add overflow-x: auto to this, the remaining of Gleb's answer is irrelevant.
    – OverCoder
    Sep 2, 2018 at 4:19
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>

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.

5

Try this:

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

Look at the spec here.

1
  • Exactly what I needed: overflow-x: auto Dec 8, 2021 at 4:27
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.

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.