bootstrap-horizon

    1.0.1 • Public • Published

    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

    Install

    npm i bootstrap-horizon

    DownloadsWeekly Downloads

    69

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • zertz