title: How to make row scroll (overflow) on x axis when reach max width
body: <p>I want if more than max width it should be able to scroll. I tried setting the width to 100% and overflow-x:auto and white-space: nowrap as described in other stackoverflow posts but it doesnt work for bootstrap col. i also tried using flex and flex overflow and also tried by adding container-fluid but it still have same outcome although the scroll bar is showing but cannot scroll</p>
  
  <p>For my current output, if col is more than 18 it will break and go to new line which is not what i want, i want it to be able to scroll instead break line into new row</p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-12 col-md-9 col-lg-9"&gt;
     &lt;div class="container-fluid p-0"&gt;
        &lt;div  style="width:100%; overflow-x:auto; white-space: nowrap;"&gt;
           &lt;form id="TICKETSALE_ORDERTICKETSELECTSEATFORM" action="TICKETSALE_ORDERTICKETSELECTSEATFORM.php" method="POST"&gt;
              &lt;div class="row row-eq-height mb-4 px-2 py-2" style="background-color:purple; height:40px;"&gt;
                 &lt;div class="col-sm-12" align="center"&gt;
                    &lt;div class="row"&gt;
                       &lt;div class="col-sm-12" &gt;
                          &lt;label class="text-center " style="color:white; font-weight:900;"&gt;SCREEN&lt;/label&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
              &lt;?php
                  for($a=1; $a&lt;=$row_Q1[0]['ROW']; $a++){
                      //row
              ?&gt;
                 &lt;div class="row row-eq-height "&gt;
              &lt;?php
                 for($b=1; $b&lt;=$row_Q1[0]["COL"]; $b++){
                    //col
              ?&gt;
                 &lt;div class="col"&gt;
              &lt;?php
                 $RowKeyExist = checkIfKeyExist($row_Q2, $a, $b);
                    if($RowKeyExist!== false){
              ?&gt;
                       &lt;div id=&lt;?=$a.",".$b?&gt;&gt;
                          &lt;div class="form-check pl-0"&gt;
                             &lt;label class="fas fa-chair SEATIMAGE"&gt;
                             &lt;?php
                                if($row_Q2[$RowKeyExist]["TICKETCODE"]=='1'){ //"1" is booked
                                   echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:grey;'";
                                }elseif($row_Q2[$RowKeyExist]["TICKETCODE"]=='2'){ //"2" is bought
                                   echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:red;'";
                                }elseif($row_Q2[$RowKeyExist]["TICKETCODE"]=='0'){ //"0" is temp bought in db and not current user
                                   echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:grey;'";
                                }elseif($row_Q2[$RowKeyExist]["TICKETCODE"]==null){ //"null" is vacant
                                   echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:green;'";
                                }
                             ?&gt;
                             &lt;/label&gt;
                             &lt;div&gt;
                                &lt;label&gt;&lt;?=$row_Q2[$RowKeyExist]["SEATLABEL"];?&gt;&lt;/label&gt;
                             &lt;/div&gt;
                          &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;?php
                       }else{
                    ?&gt;
                       &lt;div class="d-none"&gt;
                          &lt;label class="fas fa-chair SEATIMAGE" style="font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:purple;"&gt;&lt;/label&gt;
                          &lt;div&gt;
                             &lt;label&gt;NONE&lt;/label&gt;
                          &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;?php
                       }
                    ?&gt;
                    &lt;/div&gt;
                 &lt;?php
                    }
                 ?&gt;
                 &lt;/div&gt;
              &lt;?php
                 }
              ?&gt;
           &lt;/form&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>