CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3772369
user3772369

Reputation: 241

Make a horizontally scrollable bootsrap row

I am trying to make a scrolling Row in boostrap. This row encapsulates 5 or more columns, each of class "col-sm-3". Now I don't want the extra columns to collapse to next line, instead they should remain hidden until scrolled. Can someone please help on how to achieve this? Here is the code,please see the simi

<!-- listings -->
<div class="col-sm-10">

  <div class="row" style="overflow-x:visible; overflow-y:hidden; display:inline-block;">
    <div class="col-sm-3">
      <div class="affiliate-frame text-center" id="product1">
        <a href="#">
          <img alt="" class="square-frame" src="images/product1-market.jpg">
        </a>

        <div class="padd-top-10 font-size-14">Casual T Shirt Black</div>

        <div class="padd-top-10 "><a href="#" class="lnk-affiliates"> AED 225 </a>
        </div>
        <div class="padd-top-10 ">
          <a href="#" class="lnk-affiliates"> <strong> Dubai, UAE </strong>
          </a>
        </div>
      </div>
      <!-- affiliate frame -->
    </div>

    <div class="col-sm-3">
      <div class="affiliate-frame text-center" id="product1">
        <a href="#">
          <img alt="" class="square-frame" src="images/product1-market.jpg">
        </a>

        <div class="padd-top-10 font-size-14">Casual T Shirt Black</div>

        <div class="padd-top-10 "><a href="#" class="lnk-affiliates"> AED 225 </a>
        </div>
        <div class="padd-top-10 ">
          <a href="#" class="lnk-affiliates"> <strong> Dubai, UAE </strong>
          </a>
        </div>
      </div>
      <!-- affiliate frame -->
    </div>

    <div class="col-sm-3">
      <div class="affiliate-frame text-center" id="product1">
        <a href="#">
          <img alt="" class="square-frame" src="images/product1-market.jpg">
        </a>

        <div class="padd-top-10 font-size-14">Casual T Shirt Black</div>

        <div class="padd-top-10 "><a href="#" class="lnk-affiliates"> AED 225 </a>
        </div>
        <div class="padd-top-10 ">
          <a href="#" class="lnk-affiliates"> <strong> Dubai, UAE </strong>
          </a>
        </div>
      </div>
      <!-- affiliate frame -->
    </div>

    <div class="col-sm-3">
      <div class="affiliate-frame text-center" id="product1">
        <a href="#">
          <img alt="" class="square-frame" src="images/product1-market.jpg">
        </a>

        <div class="padd-top-10 font-size-14">Casual T Shirt Black</div>

        <div class="padd-top-10 "><a href="#" class="lnk-affiliates"> AED 225 </a>
        </div>
        <div class="padd-top-10 ">
          <a href="#" class="lnk-affiliates"> <strong> Dubai, UAE </strong>
          </a>
        </div>
      </div>
      <!-- affiliate frame -->
    </div>

    <div class="col-sm-3">
      <div class="affiliate-frame text-center" id="product1">
        <a href="#">
          <img alt="" class="square-frame" src="images/product1-market.jpg">
        </a>

        <div class="padd-top-10 font-size-14">Casual T Shirt Black</div>

        <div class="padd-top-10 "><a href="#" class="lnk-affiliates"> AED 225 </a>
        </div>
        <div class="padd-top-10 ">
          <a href="#" class="lnk-affiliates"> <strong> Dubai, UAE </strong>
          </a>
        </div>
      </div>
      <!-- affiliate frame -->
    </div>
  </div>

</div>
<!-- listings -->

Upvotes: 0

Views: 44

Answers (1)

Eric Guan
Eric Guan

Reputation: 15992

Need white-space:nowrap on container and float:none;display:inline-block on each column

https://jsfiddle.net/g8138wjo/2/

Upvotes: 1

Related Questions