CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
lizart
lizart

Reputation: 137

Bootstrap same space below list item

Im trying to make a list-group with bootstrap but if the group has more than 4 coloumns then it places all the ongoing boxes very wierd as seen on this jsfiddle http://jsfiddle.net/e9he43cs/1/ (you might have to extend the jsfiddle window to get the full effect)

I want it to make even space below each list group

heres the php i use to generate it

while($row = $result->fetch_object()){     
    echo '<div class="list-group col-sm-3">';     

        echo '<a href="#" class="list-group-item">';
            echo '<h4 class="list-group-item-heading">'.$row->name.'</h4>';
            echo '<p class="list-group-item-text">'.$row->description.'</p>';
        echo '</a>';

        $itemResult = $con->query("SELECT * FROM categories_items WHERE categori='$row->id'")or die($con->error);
        while($itemRow = $itemResult->fetch_object()){
            echo '<a href="'.$itemRow->link.'" class="list-group-item">';
                echo $itemRow->name;
            echo '</a>';
        }                            

    echo '</div>';
}

Upvotes: 1

Views: 81

Answers (1)

Johannes Reuter
Johannes Reuter

Reputation: 3547

You have to group four items a time in a row to do this.

<div class="row">
   <div class="list-group col-sm-3">...</div>
   <div class="list-group col-sm-3">...</div>
   <div class="list-group col-sm-3">...</div>
   <div class="list-group col-sm-3">...</div>
</div>
<div class="row">
   <div class="list-group col-sm-3">...</div>
   <div class="list-group col-sm-3">...</div>
   <div class="list-group col-sm-3">...</div>
   <div class="list-group col-sm-3">...</div>
</div>

See your updated fiddle: http://jsfiddle.net/e9he43cs/2/

Shouldnt be too hard in PHP.

Upvotes: 1

Related Questions