Css-Bootstrap panels display inline with overflow

Question

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.

Try reading about css floats or flex layouts. – Sean Feb 09 '17 at 15:44 — Sean, Feb 09 '17 at 15:44

Carol Skelly · Accepted Answer · 2017-02-09T15:55:24.610

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;
}

This wont work because when i add more panels the scroll feature still wont be utilised, try adding 3 more panels to the example you sent me — Yasmin French, Feb 09 '17 at 15:46
Your question didn't say more than 3. See my answer here: http://stackoverflow.com/a/41963196/171456 — Carol Skelly, Feb 09 '17 at 15:48
Thanks this is exactly what i was looking for update your question and i will accept — Yasmin French, Feb 09 '17 at 15:51

Css-Bootstrap panels display inline with overflow

1 Answers1