CODEWITHSUNDEEP
htmlcssbootstrap-4
Rev Tech
Rev Tech

Reputation: 63

i want horizontal Scroll in bootstrap 4

i want to make horizontal scroll in bootstrap 4 in my below code but i unable to do it

<div class="scroll-horz">
  <div class="row">
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>     
  </div>
<div class="row">
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>     
  </div>
</div>

Upvotes: 0

Views: 113

Answers (1)

Chandan Y S
Chandan Y S

Reputation: 1078

Just try as shown below,

HTML:

<div class="scroll-horz">
  <div class="row">
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>     
  </div>
  <div class="row">
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>     
  </div>
</div>

CSS:

.scroll-horz > .row {
  overflow-x: auto;
  white-space: nowrap;
}
.scroll-horz > .row > .col-md-4 {
  display: inline-block;
  float: none;
}

Upvotes: 1

Related Questions