How to edit css of bootstrap code

[random_1]

Hello, (i don't really know any specific bootstrap forum which might be better for asking about it but i like daniweb anyway), I am trying to modify a bootstrap snippet to what i need but I am having a little trouble. If you look at the attached images, what i have is the first pic but what i want is the second pic where the images are side by side. The link to the bootsnip

i tried to check the specific css file for this but nothing, unless i somehow messed up the whole code along the way. heavy sigh maybe its got something to do with the size of the border? but even that i am not sure what to change. i even changed the dimensions of the images to 365x365 coz it was bigger than that but no change. i tried to use "inspect" to see whats bordering the width of the image but it doesn't show any areas only the areas in which the image is in and also the entire area from the tabs till the bottom, so no luck there.

my code:

<div class="container">
    <div class="row">
        <div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h1 class="gallery-title">Category of Products</h1>
        </div>

        <div align="center">
            <button class="btn btn-default filter-button" data-filter="all">All</button>
            <button class="btn btn-default filter-button" data-filter="bf">Bowls and Feeders</button>
            <button class="btn btn-default filter-button" data-filter="bfur">Beds and Furnitures</button>
            <button class="btn btn-default filter-button" data-filter="cats">Adopt a Cat</button>
            <button class="btn btn-default filter-button" data-filter="food">Cat Food</button>
            <button class="btn btn-default filter-button" data-filter="groom">Grooming Supplies</button>
            <button class="btn btn-default filter-button" data-filter="litter">Litter Boxes</button>
            <button class="btn btn-default filter-button" data-filter="toys">Toys</button>
        </div>
        <br/>

        <div class="gallery_product col-sm-4 filter bf">
        <?php 
        foreach($result as $row ) {
            if ($row['img'] == "" ) { ?>
                    <img src="products/noimage.png" class="img-responsive">
                <?php }
                else { ?>
                    <img src="products/<?php echo $row['img'] ?>" class="img-responsive">
            <?php } 
        }?>
        </div>
    </div>
</div>

the html is the only thing i touched, css and js is still the same as the bootsnip. If anyone can help with this or know of a bootstrap specific forum that would be great. thanks in advance.

[random_1]

Okay nvm! It was my looping coding/html. sorry for that. i did:

 <?php 
        foreach($result as $row ) {
            if ($row['img'] == "" ) { ?>
                    <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
                        <img src="products/noimage.png" class="img-responsive">
                <?php }
                else { ?>
                    </div>
                    <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
                        <img src="products/<?php echo $row['img'] ?>" class="img-responsive">
            <?php } 
        }?>
                    </div>