Mockup: Mobile Applications Isometric 3D Mock-up (PSD)
UI: Vinta Dark Ui Kit (PSD)

Elements Design: Bootstrap Grid System (PSD)


In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure content. It is widely used to design layout and content structure in print design. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS. - Wikipedia

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. - Bootstrap

Here's how the Bootstrap grid system works: - Grid system

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

There are now 4 column size class variants: - Understanding the Bootstrap 3 Grid System
  • .col-xs-$: Extra Small - Phones Less than 768px
  • .col-sm-$: Small Devices - Tablets 768px and Up
  • .col-md-$: Medium Devices - Desktops 992px and Up
  • .col-lg-$: Large Devices - Large Desktops 1200px and Up

This Bootstrap Grid System contains various grid systems for web projects and mobile projects.


Bootstrap Grid System - XS

Elements Design: Bootstrap Grid System (PSD)

Bootstrap Grid System

Created by Epeo.

Enjoy this freebie and want to show support? Spread the word.

Enjoy Downloading this freebie!

Tags: bootstrap, grid system, reponsive, desktop, mobile, tablet, layout, interface, graphic design, fluid grid system, viewport, gutters

Leave a Comment

No Comment

© Creative3x Ltd.