How to Position Without Normalize.css?

Grids are a must nowaydays for positioning elements in a nice tidy manner on a page. If you are struggling understanding how they work to keep order and position elements, then the best thing to do is pick one apart and then build your own (Even if you never use it, the process will help you understand how to work with them and position elements). I will try and give you some insight into how the Twitter Bootstrap grid works.

First we will look at the "Container Classes"

    .container {
      margin-right: auto;
      margin-left: auto;
      padding-left: 15px;
      padding-right: 15px;
    }
    @media (min-width: 768px) {
      .container {
        width: 750px;
      }
    }
    @media (min-width: 992px) {
      .container {
        width: 970px;
      }
    }
    @media (min-width: 1200px) {
      .container {
        width: 1170px;
      }
    }
    .container-fluid {
      margin-right: auto;
      margin-left: auto;
      padding-left: 15px;
      padding-right: 15px;
    }

So basically the first class is "container" and simply sets its margin left/right to auto (this centres it on the page) and adds 15px of padding to the left/right so the content is not too close to the edge if the container. Then come the media queries (for different screen widths) to determine the size of the grid (width). Finally is another class "container-fluid" that will be the width of the of the screen and again adds some padding either side to stop the content touching the sides, then centres the grid again.

Then we can look at the "Row Col Classes"

    .row {
      margin-left: -15px;
      margin-right: -15px;
    }
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, . col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md- 6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12,     .col-sm-12, .col-md-12, .col-lg-12 {
      position: relative;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;
  }

So the "row" class is used to keep things tidy and in well rows, it simply has a negative left/right margin of -15px. This is because each column has 15px of padding to separate the content inside each one, so this negative margin is to offset this on the ends of rows. It then sets the position relative (added so that when you use a pull or push it will add left/right to move the column a specified amount). Then the padding I mentioned above to separate the content.

The next set of classes determine the width of each col for each screen size for example

    .col-xs-12 {
      width: 100%;
    }
    .col-xs-11 {
      width: 91.66666667%;
    }
    .col-xs-10 {
      width: 83.33333333%;
    }

Now you have a basic understanding you can investigate the other classes like the clearfix which is used to well clear rows for new rows. Pull and push classes add left/right to them to move them.

Alpha/Omega classes aren't in Bootstrap 3 but I believe they were used to offset padding/margins on the outer spans in older versions. But as we have seen this is rectified with the .row class here.

I hope this helps you understand grids and you really do pick one apart change values see what happens. Break stuff and learn