Horizontal scroll in bootstrap 4

Question

I'm trying to get a horizontal scroll for some cards I have for mobile view @media only screen and (max-width : 480px). I have read other posts here, including this one, but none seem to work for me. I guess that one of my possible issues is that right now my cards are stacked one over the other.

This is what I have now:

And this is what I need to achieve:

.mobile-card-container {
  display: block;
}

.card-background {
  background-color: #ffffff;
  border-radius: 6px;
  margin-top: 16px;
  height: 100px;
  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="row">
  <!-- Mobile Card Container -->
  <div class="col-12 mobile-card-container">
    <div class="row">
      <!-- Card 48 cuotas -->
      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid red;">
        Card content
      </div>
      <!-- /Card 48 cuotas -->
      <!-- Card 36 cuotas-->
      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid blue;">
        Card Content
      </div>
      <!-- /Card 36 cuotas -->
      <!-- Card 24 cuotas -->
      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid green;">
        Card Content
      </div>
    </div>
  </div>
</div>

score 6 · Accepted Answer · answered Nov 19 '18 at 17:39

For an approach to this, you will have to change the default behaviours of the Bootstrap classes. We will have to use flex-nowrap on the cards container for the smallest media screen and change the overflow-x style to auto. In summary, we will use the nexts main changes:

CSS

@media only screen and (max-width : 576px)
{
  .mobile-card-container > .row {
    overflow-x: auto;
  }
}

Note that I used max-width: 576px for compatibility with the currents Bootstrap Breakpoints.

HTML structure

<!-- Mobile Card Container -->
<div class="container-fluid mobile-card-container">
  <div class="row text-center flex-nowrap flex-sm-wrap">
    <!-- Cards will be here -->
  </div>
</div>

So, for XS screen devices, the flex-nowrap class will apply in conjunction with the previous defined style, approaching what you where searching for. On the others type of screens (SM, MD, LG) the default behaviour of Bootstrap classes will be keeped (Note the usage of flex-sm-wrap class).

To finish, you can check the next working example (play with the windows resize on the full screen mode):

@media only screen and (max-width : 576px)
{
  .mobile-card-container > .row {
    overflow-x: auto;
  }
}

.card-background {
  background-color: #ffffff;
  border-radius: 6px;
  margin: 16px 5px;
  height: 100px;
  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<!-- Mobile Card Container -->
<div class="container-fluid mobile-card-container">
  <div class="row text-center flex-nowrap flex-sm-wrap">
    
    <!-- Card 48 cuotas -->
    <div class="col-10 card-background mx-sm-auto bg-danger">
      Card content
    </div>
    <!-- /Card 48 cuotas -->
      
    <!-- Card 36 cuotas-->
    <div class="col-10 card-background mx-sm-auto bg-primary">
      Card Content
    </div>
    <!-- /Card 36 cuotas -->
      
    <!-- Card 24 cuotas -->
    <div class="col-10 card-background mx-sm-auto bg-danger">
      Card Content
    </div>
    <!-- /Card 24 cuotas -->
      
  </div>
</div>

score 0 · Answer 2 · answered Nov 19 '18 at 15:48



    .mobile-card-container {
      display: block;
    }

    .card-background {
      background-color: #ffffff;
      border-radius: 6px;
      margin-top: 16px;
      height: 100px;
      -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
      -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
      box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
    }
 <div class="container">
    <div class="row">
      <!-- Mobile Card Container -->
      <div class="col-md-12 mobile-card-container">
        <div class="row">
          <!-- Card 48 cuotas -->
          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid red;">
            Card content
          </div>
          <!-- /Card 48 cuotas -->
          <!-- Card 36 cuotas-->
          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid blue;">
            Card Content
          </div>
          <!-- /Card 36 cuotas -->
          <!-- Card 24 cuotas -->
          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid green;">
            Card Content
          </div>
</div>

col-md-4 what are you trying to do ? – bob Nov 19 '18 at 15:55 — bob, Nov 19 '18 at 15:55
I don't understand the col-md-4 in this case. – Paula Nov 19 '18 at 17:01 — Paula, Nov 19 '18 at 17:01

Horizontal scroll in bootstrap 4

2 Answers2