Q:

Css-Bootstrap panels display inline with overflow

Scenario
Firstly here is my fiddle: --> https://jsfiddle.net/edxcbn4n/1/ <--
As you can see I have three panels on the first tab, but I need these panels to not display above and below but rather side by side, so I can use the scroll function to scroll across to the next one. I can't figure out how to do it. Everything I've done so far and tried so far is in the fiddle.
Question
How do you make the panels display side by side, so i can scroll across from one to the other.

A:

Use the Bootstrap grid inside the tab-pane..
   <div role="tabpanel" class="tab-pane active container-fluid" id="home">
            <div class="row">
                <div class="col-md-4"><div class="panel panel-default">
                <div class="panel-body">
                    Basic panel example
                </div>
            </div></div>
                <div class="col-md-4"><div class="panel panel-default">
                <div class="panel-body">
                    Basic panel example
                </div>
            </div></div>
                <div class="col-md-4"><div class="panel panel-default">
                <div class="panel-body">
                    Basic panel example
                </div>
            </div></div>
            </div>
   </div>

http://www.codeply.com/go/JMdfZvNGDF
EDIT: To exceed more than 3 panels in the row, use flexbox to override the default Bootstrap column wrapping. Just add flex-row to the row
.flex-row > .col-md-4 {
    display:flex;
    flex: 0 0 33%;
    max-width: 33%
}

.flex-row {
    -webkit-flex-wrap: nowrap!important;
    -ms-flex-wrap: nowrap!important;
    flex-wrap: nowrap!important;
    display:flex;
    -webkit-box-orient: horizontal!important;
    -webkit-box-direction: normal!important;
    -webkit-flex-direction: row!important;
    -ms-flex-direction: row!important;
    flex-direction: row!important;
}

