Bootstrap grid system, column, row, and many more


Previous Post Link: How to install bootstrap and customize it

Grids help you achieve consistency in your designs by offering you a structure to put your design elements in that structure. Prior to Bootstrap 3, you had to add mobile styles explicitly. Bootstrap 3 has changed all that by adapting a mobile-first approach with mobile styles baked-in to the core. All the columns are stacked on small mobile phone screens, with the grid scaling up to 12 columns on the large screen. The Grid system in Bootstrap helps you add CSS classes to block elements such as <div> in your HTML documents.

The new Bootstrap Grid system adapts a mobile-first approach, and therefore, when you declare a specific grid size, it becomes the grid for that size and higher. In other words, if you define a size at sm (small-screen-sized devices), then it will be that grid size for sm, md (medium-screen-sized devices), and lg (large-screen sized devices).

Bootstrap Grid classes

You can create a page layout through a series of rows and columns that contain your content. To set the maximum width of the page content according to the screen width, you have to use the .container class. Containers help define the space to be used by the Grid system.

The container width is set as follows:

  • Phone screens (less than 768 px resolution): The width of the container is the same width as the width of the screen
  • Tablet screens (between 768 px and 992 px resolution): The maximum width of the container is 750 px
  • Small desktop screens (between 992 px and 1200 px resolution): The maximum width of the container is 970 px
  • Large desktop screens (more than 1200 px resolution): The maximum width of the container is 1170 px

The class prefixes used for small phone screens, tablets, small desktop screens, and large desktop screens are .col-xs-, .col-sm-, .col-md-, and .col-lg-, respectively. The default gutter(space between two column) width is 30 px. While the column width for small devices is automatic, the column widths for tablets, small desktops, and large screens are 62 px, 81 px, and 97 px, respectively.

Creating rows and columns

You can create rows and columns on the page using the row and column CSS classes. You have to use rows to create a horizontal group of columns, and only columns can be immediate children of rows. Usually, you can use the .col-md- Grid classes to develop a system that is displayed as stacked in small devices; they turn horizontal on the desktop and large screens. The col class should be used in conjunction with the .col-md-X class (where X is the grid unit width that the block element should have) to add a width of the columns. The total number of columns in a row should not be greater than 12, which is the default for the maximum number of columns in a single row on desktops and large screens.

Now the 3 column will be shown side by side in larger screen as they each takes 4 column width. And in smaller screen only 2 column will be side by side as they each take 6 columns of space. See the image bellow:

bootstrap column


Add offset to the column

In order to add a left margin to columns, you can use the col-offset-X class, where
X is the number of columns by which a block element should be moved to the right. Take a look at the following code to understand this better:

The output of the above code will be like this:

add column offset

Next Post Link: Bootstrap pulling and pushing columns to change the order of the element