Bootstrap panels fill available width

Question

I am using bootstrap 3 and PHP to display a page where either 1, 2 or 3 panels are displayed side by side depending on the permissions the user has to see those panels (they always have permission to see at least one).

If the user can see all 3 I want them to appear side by side, using 4 grid columns each. If they can see two, I want them to fill the available width, ie 6 columns each. Finally one 12 column panel if the user can only see the one panel.

I thought putting the panels inside container fluid and inside the same div with class 'row', and not specifying how many columns wide they were, might do the trick, but that makes them all appear one on top of the other and taking up the full width of the page.

How can I achieve the above with bootstrap rather than having to use PHP code to change the number of columns depending on how many panels are being displayed (which I think would be more cumbersome).

Answer 1

I think that is not possible. Panels are designed in order to fill their container (like blocks elements). Maybe you could apply a display inline-block css property to the panels, but you would need to calculate css widths to apply them to fill entire row...

Answer 2

try this function. it makes block flexible http://www.w3schools.com/cssref/css3_pr_flex.asp

Answer 3

While I would have liked a simpler CSS approach that required less logic, I found myself agreeing with @Axel and doing it in PHP.

Since there are 3 possible permissions and 3 variables with values 0 or 1 to determine those permissions, I did something like this;

$number_of_panels = $permission1 + $permission2 + $permission3;

switch ($number_of_panels) {
    case 1:
        $panel_width = 12;
        break;
    case 2:
        $panel_width = 6;
        break;
    case 3:
        $panel_width = 4;
        break;
}

And further down;

<div class="row">
    <?php if ($permission1 == 1) { ?>
    <div class="col-md-<?php echo $panel_width; ?>">

etc...