Grid issue with bootstrap3...need space between grids

Question

I am working on formatting for a better user experience using bootstrap3. I have decided to implement the row-fluid(grid) layout. However the issue is that both grids are stick on each other instead of having some space between them. It is like the second grid cannot tell where the float ends. I have tried clear, search online but up to now no luck. I appreciate any help I can get. Here is my code

        <div class="row-fluid">
        <!--First grid-->
            <div class="col-lg-4 col-md-5 col-xs-14" style="border:1px solid black; border-radius:5px;">
                <div class="thumbnail pull-left"> 
                    <?php echo '<img class="profilePic" class="img-responsive" src="../' . $imageProfile . '" height="160" width="160" style="border-radius:10px;" />';?>
                    <p class="updateProfilePic">
                        Update profile picture
                        <br/>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../webImage/cameraIcon.png" height="20" width="20"/>
                    </p>
                </div>
                <div>
                    <h3><?php echo $name?></h3>
                    <h4><?php echo $type?></h4> 
                </div>
                <div style="clear:both" class="row-fluid">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="panel-title">About Me</div>
                        </div>
                        <div class="panel-body">
                            <span><?php echo $about?></span>
                        </div>
                        <div class="panel-heading">
                            <div class="panel-title">Email</div>
                        </div>
                        <div class="panel-body">
                            <span><?php echo $email?></span>
                        </div>
                        <div class="panel-heading">
                            <div class="panel-title">Phone</div>
                        </div>
                        <div class="panel-body">
                            <span><?php echo $phone?></span>
                        </div>
                        <div class="panel-heading">
                            <div class="panel-title">Website</div>
                        </div>
                        <div class="panel-body">
                            <span><?php echo $website?></span>
                        </div>
                        <div class="panel-heading">
                            <div class="panel-title">Experience</div>
                        </div>
                        <div class="panel-body">
                            <span><?php echo $experience?></span>
                        </div>
                        <div class="panel-heading">
                            <div class="panel-title">City</div>
                        </div>
                        <div class="panel-body">
                            <span><?php echo $city?></span>
                        </div>
                    </div>
                </div>
            </div>
            <!--Second grid-->
            <div class="clearfix col-lg-7 col-md-5 col-xs-14" style="border:1px solid black; border-radius:5px;">
                <div class="thumbnail"  >
                    <?php echo '<img src="../' . $imageCover . '" height="180" width="350"/>';?>
                </div>
                <p class="updateCoverPic">
                    Update cover picture
                    <br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../webImage/cameraIcon.png" height="20" width="20"/>
                </p>
                <div class="panel panel-default">
                    <div class="panel-heading active" style="color:white">
                        <div class="panel-title">Nearby Events</div>
                    </div>
                    <div class="panel-heading">
                        <div class="panel-title">
                            <div class="loadContent"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

A good way to add spacing between the grids is to just add another div inside your columns. This way, you dont have to set any margins on the grid itself. Here's an example:

<div class="container-fluid">
 <div class="row">
   <div class="col-md-4">
    <div class="your-custom-div">
       <p>Putting this custom div will allow you to have natural
       spacing betweem the grid. </p>
    </div>
   </div>
 </div>
</div>

Your columns obviously have to add to 12. I've only used 4/12 above. Feel free to message if you're confused.

Cheers,

Answer 2

You can set a margin to all grid-cols in a row

.class{ margin:0 20px; }

So the grid-cols are more in mid

Answer 3

I just solved it. I added margin-left to the second grid. However I am up for any other solutions that you guys might have.