Hello,

 

I am trying to create a website using Bootstrap for the first time. The columns within Bootstrap have paddings around.

Any one able to help me make the gap between the smaller orange boxs smaller (15px in between). Here is a link to the coding

 

http://www.codeply.com/go/S1cKa5NHaq

 

Also if you have any comments about how i have started coding the website please let me know. The framework has been rather complicated to get my head around when changing colours of sizes of certain areas.

Do you understand CSS in any depth? If you do this would be trivial to solve. If not I highly suggest you spend time to learn how to do responsive layouts in CSS before you use something like Bootstrap. Bootstrap is supposed to speed up development/prototyping. Not cover over gaps in a developers knowledge.

 

If you do know then you need to create a new row class. Call it row--sm then do this

$column-gap: 10px;

.row--sm {
  margin-left: -$column-gap;
  margin-right: -$column-gap;
  >[class*="col-"] {
    padding-left: $column-gap;
    padding-right: $column-gap;
  }
}

Edited September 19, 201510 yr by rbrtsmith

Gosh not sure hat all of that css means....

I know a bit of responsive. Just never quite sure what units to use where for example %, px, em, rem, vw etc.