Grid do not have margins in bootstrap

Question

I have a simple page with bootstrap, and I want to create a grid which is one-line or two-line on smaller screend, but I always get something incorrect: with show-grid

Answer 1

At the moment, there are several things wrong with your structure so it seems like going over some basics of Bootstrap will help you move toward a nicer looking design. You should have columns that add up to 12 within each row. For example:

If you want elements that divide those columns further, you will need new rows, and the children of those rows should also add up to 12 (or less than 12 if you want empty space to the right). That might look something like this:

    

        


            
            

                

                    7/12 of the left side
                
                

                    5/12 of the left side
                
            

        
        

            
        
    

Here's a final example with background colors and a screenshot to visualize it:

    


        

            
Left Column
            

                

                    This is 7/12 of the left side
                
                

                    This is 5/12 of the left side
                
            
        

        

            
Right Column
            

                

                    This is 4/12 of the right side
                
                

                    This is 8/12 of the right side
                
            
        

    

Hopefully this will help you understand how to have structure your elements. Also, as you pointed out, rows don't have any space between them by default so you can add space between rows with some simple css such as

.row { 
  margin-top: 10px;
  margin-bottom: 20px;
}

One last tip: when using inputs, checkboxes, selects, etc., I always look at the classes and structure being used in the Bootstrap docs here. Without using the correct classes and DOM element structure, things won't look quite right. Bootstrap takes practice so good luck!