pkworlz / bootstrap-horizon

Boostrap 3 rows with inline, horizontally scrolling columns.

bootstrap-horizon

Boostrap 3 rows with inline, horizontally scrolling columns. Inspired by Ravimallya @ StackOverflow

Live example

Installation

Bower

bower install bootstrap-horizon

npm

npm install bootstrap-horizon

Usage

Include bootstrap-horizon.css after bootstrap.css

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/bootstrap-horizon/bootstrap-horizon.css">

Add the .row-horizon class to rows that require horizontal scrolling. In order to improve the UX, bootstrap-horizon overrides bootstrap's .col-*-* classes to make the baseline width 90% instead of 100% which allows for a small portion of the last column to be displayed.

<div class="row row-horizon">
  <div class="col-xs-6">
    <p>This content is very, very, very, very, very, very, very wide!</p>
  </div>
  <div class="col-xs-6">
    <p>This content is very, very, very, very, very, very, very wide!</p>
  </div>
  <div class="col-xs-6">
    <p>This content is very, very, very, very, very, very, very wide!</p>
  </div>
</div>

License

MIT