JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <h1 class="page-header">Horizontal Scroll in bootstrap</h1>
    <div class="container-fluid" style="overflow-x:scroll;white-space: nowrap;">
        <div class="col-sm-3">
            <h3>Tree 1</h3>

        </div>
        <div class="col-sm-3">
            <h3>Tree 2</h3>

        </div>
        <div class="col-sm-3">
            <h3>Tree 3</h3>

        </div>
        <div class="col-sm-3">
            <h3>Tree 4</h3>

        </div>
        <div class="col-sm-3">
            <h3>Tree 5</h3>

        </div>
                <div class="col-sm-3">
            <h3>Tree 2</h3>

        </div>
        <div class="col-sm-3">
            <h3>Tree 3</h3>

        </div>
        <div class="col-sm-3">
            <h3>Tree 4</h3>

        </div>
        <div class="col-sm-3">
            <h3>Tree 5</h3>

        </div>

    </div>

CSS

.col-sm-3{display: inline-block;width:auto;}