Boostrap 3 rows with inline, horizontally scrolling columns.
Latest commit 8b6d31a Oct 9, 2016 @Zertz 1.0.1
Permalink
Failed to load latest commit information.
screenshots GIF! Dec 24, 2014
src Create minified build Oct 9, 2016
.gitignore Create minified build Oct 9, 2016
bower.json Bump bower to 1.0.0 Oct 9, 2016
changelog.md Add changelog.md Oct 9, 2016
license Rename LICENSE to license Aug 10, 2016
package.json 1.0.1 Oct 9, 2016
readme.md Create minified build Oct 9, 2016

readme.md

bootstrap-horizon bower package npm version

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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/bootstrap-horizon/dist/bootstrap-horizon.min.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