Bootstrap panels side by side

Question

Someone knows why my panels are not in one row? I want them side by side not like:

PANEL
PANEL
PANEL

I need this:

PANEL | PANEL | PANEL

I'm creating offer panels from mysql.

And i need all offer in one row.

my code:

http://hastebin.com/inukiyumob.xml

I tried many options from google, any doesnt work or im really idiot. ofc i'm...

I did too many options, any doesnt work..

score 2 · Accepted Answer · answered May 25 '14 at 07:32

2

I think you should endure your div with class .row beyond cycle 'while'. And leave only div with class col-lg-5 col-md-5 col-sm-5 inside cycle. And for each iteration you will get new panel in one row.

answered May 25 '14 at 07:32

user3127896

6,323
15
39
65

ah it works but watch that awful distance between panels: http://scr.hu/9a5/7eknx – user3650308 May 25 '14 at 07:35
I can't see any of bootstrap's class, and i see it's just image http://screenshu.com/static/uploads/temporary/sc/96/ou/mv0e5o.jpg – user3127896 May 25 '14 at 07:38
screen what i send shows how its look after adding your code. – user3650308 May 25 '14 at 07:41
i think problem is your panel width less than widht of .col-lg-5, try to change to .col-lg-2 or .col-lg-3, something like this. – user3127896 May 25 '14 at 07:47
how can i make to all panels be in 2 rows? i have that bug: http://scr.hu/9a5/mcznb code: http://hastebin.com/ihasotabat.xml – user3650308 May 25 '14 at 08:00
i dont want that empty field – user3650308 May 25 '14 at 08:01
It's hard to say just looking at the picture, I would like to see rendering html through firebug. – user3127896 May 25 '14 at 08:09
I found out, just add div with class col-lg-12 under div with class .row, but not in the cycle 'while'. – user3127896 May 25 '14 at 08:14
can you send me an example? – user3650308 May 25 '14 at 08:20
edit my code and send me please, im doing something bad – user3650308 May 25 '14 at 08:26
try like this: http://hastebin.com/kahodobugu.xml, i think it should work. Take a look at bootstrap grid system http://getbootstrap.com/css/, take a look how it works, it's easy. – user3127896 May 25 '14 at 08:32

score 1 · Answer 2 · answered Jan 02 '15 at 12:38

I just had the exact same problem, but didn't want to fix the width of my panels to a specific percentage. I wanted them to flow based on their content width.

I already had a container div wrapped around my column divs. All it took was to apply a little CSS ...

.admin > div {
  display: inline-block;
  vertical-align: top;
  margin-right: 1em;
}

Here is the HTML ..

<div class="admin">
  <div class="panel panel-default">
    <div class="panel-heading">Panel 1</div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">Panel 2</div>
  </div>
</div>

This is working nicely for me, with each panel only being as wide as it needs to be.

Bootstrap panels side by side

2 Answers2