help with bootstrap grid system

0 jamie y · September 25, 2015
I am working on a responsive design. Trying to learn more about it for the first time. I am working with a site and doing good but I ran into this issue where I have 6 images. 3 on top 1 in each column and 3 on the bottom one in each column. This makes a great gutter between the images on the side but there is no gutter below the top set of images so the top images are touching the bottom images. How do I get a gutter between them? Do I have to hack it with css?

my code


                                                               

<div class="row">
            <div class="col-lg-12">
                <h2>Featured Projects</h2>
            </div>
            
            <div class="col-lg-4">
                <img src="images/puters.png" class="img-responsive" height="189" width="327" alt="computers">
            </div>
            
            <div class="col-lg-4">
                <img src="images/teacher.png" class="img-responsive" height="189" width="327" alt="teacher">
            </div>
            
            <div class="col-lg-4">
                <img src="images/student.png" class="img-responsive" height="189" width="327" alt="students">
            </div>
        
            <div class="col-lg-4">
                <img src="images/test.png" class="img-responsive" height="189" width="327" alt="students">
            </div>
            
            <div class="col-lg-4">
                <img src="images/puters.png" class="img-responsive" height="189" width="327" alt="computers">
            </div>
            
            <div class="col-lg-4">
                <img src="images/teacher.png" class="img-responsive" height="189" width="327" alt="teacher">
            </div>
        </div><!--END row-->



           
           
                
           
            
           
                
           
        
           
                
           
            
           
                
           
            
           
                
           
       





Post a Reply

Replies

Oldest  Newest  Rating
0 emmanuel yorex · September 27, 2015
hi, this is my first post (hope i dont break any rules:D)
well. i'm also learning web design and from what you said, the images are spaced out horizontally but not vertically, adding a little bit of padding on the column divs should do the trick, u could create an id for the bottom 3 and make a css rule for top padding, this might not be the best approach, buh its a simple one
  • 1

HTML / CSS / Web Design

107,027 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators