Jul 212015

A grid system divides the screen into multiple rows and columns that can be used to create various types of layouts. With Bootstrap, to set the maximum width of the page content according to the screen width, you have to use a container. All the rows and columns should be placed inside a container to ensure proper alignment and padding.

There are two types of container classes in Bootstrap: container and container-fluid. The container class is for a responsive fixed width container and is styled to appear at the center of the screen, whereas for a full width container spanning the entire width of the viewport, we use the container-fluid class, which ommits extra space on both sides. The viewport is a meta tag used to make mobile devices display the page responsively instead of trying to display them at desktop sizes. We usually write the meta tag viewport inside head section. For example:

The different widths for container class depending on devices are:

  1. Phone screens (less than 768 px resolution): The width of the container is the same width as the width of the screen. The suffix used by other Bootstrap classes for this container is -xs: extra small screens
  2. Tablet screens (between 768 px and 992 px resolution): The maximum width of the container is 750 px. The suffix used by other Bootstrap classes for this container is -sm: small screens.
  3. Small desktop screens (between 992 px and 1200 px resolution): The maximum width of the container is 970 px. The suffix used by other Bootstrap classes for this container is -md: medium screens.
  4. Large desktop screens (more than 1200 px resolution): The maximum width of the container is 1170 px. The suffix used by other Bootstrap classes for this container is -lg: large screens.

Rows and columns
Its good practice to wrap all the contents within a container and the create a row inside the container. Once the row is defined, we can start creating the columns. Bootstrap has a class row for creating rows. You have to use rows to create a horizontal group of columns, and only columns can
be immediate children of rows.

Bootstrap’s grid system divides the screen into columns -up to 12 in each row, although this value can be changed using LESS-. The columns resize themselves dynamically when the size of browser window changes. The classes for columns are col-xs-*, col-sm-*, col-md-* and col-lg-* depending on width of devices (where * is the grid unit width -number of columns- that the block element should have). The value of * is between 1 and 12.

For example, when we specify the class col-xs-12, it means the element should span all 12 of the available Bootstrap columns on extra small screens. If we do not specify the behaviour on larger screens, Bootstrap will span 12 columns in all types of displays.

We have to take into account that if we use classes spanning more than 12 columns in a row, the extra columns will get wrapped as a unit on the next line. Playing with this property and the different column classes for the different screen sizes, we can create a dynamic layout that adjusts to the size of device it is viewed in.

Take a look at the following code:

The output of the code on the desktop and large screens will be as follows:

On small screen such as a tablet, the output will be as follows:

And on extra small screen such as a mobile, the output will be:

If you observe the output of the code on an extra small screen, you can see that all the columns were assigned the col-xs-12, and, as a result of that, all of them ocuppy the entire screen width. The code for small screen, the first two columns were assigned the col-sm-6 class, each of them occupies half the screen width. The third column, which was assigned the col-sm-12 class, occupies the entire screen width below the first two columns. And finally, on desktop and large screens, due to the class col-md-4, you can see that each column occupies the third part of the screen.

Offsetting, pulling and pushing columns
Offsetting is used to increase the left margin of a column, and, hence, to move columns to the right. Classes that are available for offsetting are:

  1. col-xs-offset-*
  2. col-sm-offset-*
  3. col-md-offset-*
  4. col-lg-offset-*

When you want to display columns on the screen in a different order than the way in which they are defined in the HTML code, you will use the following classes:

  1. col-xs-pull-* and col-xs-push-*
  2. col-sm-pull-* and col-sm-push-*
  3. col-md-pull-* and col-md-push-*
  4. col-lg-pull-* and col-lg-push-*

Push moves columns towards the right and pull move columns towards the left. Perhaps, the difference between push and offset is hard to undertand, but you have to know that offset uses margin-left, and push uses left. As a consequence of that:

  1. offset will force other columns to move
  2. push (and pull) will overlap other columns

Here is an example:

You can also use offset for centering columns. For example:

Using push and pull you can swap columns as it is shown in the following code and image:

Nesting columns
To nest colums you have to put rows and columns within an existing columns. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Less mixins and variables
Bootstrap includes Less variables and mixins to build semantic layouts.

Bootstrap Grid contains the following three LESS variables:

  1. @grid-columns: This variable defines the maximum number of columns displayed on desktops and large screens. The default value is 12.
  2. @grid-gutter-width: It defines the width of the gutter. The gutter is the vertical space between the grid columns, which default value is 30 px.
  3. @grid-float-breakpoint: This variable is the minimum width with which the elements with the col-lg-x class start getting displayed in the columns. The default value 768 px, that is, the minimum tablet screen width.

Mixins in Bootstrap used more commonly to build semantic layouts are:

  1. .make-row(): This mixin is used to create rows in our layouts. It clears all the CSS float declarations added to the columns wrapped in the row.
  2. .make-prefix-width-screen-xs-column(): It is used to create columns in our layouts. It adds CSS float declarations to the columns, creates the gutters, and sets the column widths.
  3. .container-fixed(): Used to create a container element centered on the page.

Other mixins are those related with pull, push and offset. You can get more information at http://getbootstrap.com/css/#grid-less

Bootstrap allows you to edit and select the features you want that should be present inside your own custom Bootstrap package. You can get more information at http://getbootstrap.com/customize/ and at http://bootstrap-live-customizer.com/.

You can get more information about Bootstrap css at http://getbootstrap.com/css/

Related Posts
Bootstrap: Hello World!

Sorry, the comment form is closed at this time.