Design
Guide

OXD Introduction Design Thinking UX Standards
UX Guidelines Form Design Patterns UX Rules & Laws Keyboard Accessibility
Visual Design
Colors Typograpy Images Icons Motion Animations
Grid & Layout
Main Layouts Grid System
Navigations
Sidebar Topbar
Components
Buttons Text-box Check-box Radio Radio Pils Switch Search-box Multi Select Dropdown Number Dropdown Upload Inputs Upload input box Date picker Time picker Color picker Labels Help Lable Status lable Group Input Group Overlay Scroll-bar Count Slider Text-area Comment-box Paginations Card loader Divider
Tables & List View Cards & Shapes Modals & Popups Advance Components Charts
QA Standards
Developer
Grid system
OXD Grid system is a very common technique used to create web layouts that recognize the size of the screen a visitor is using and adapt to it. This is extremely important nowadays when so many devices of various sizes can be easily connected to the Internet. Using Bootstrap grid systems eliminates the fear of having your website displayed incorrectly on mobile phones or tablets - even if you created it on a personal computer with a widescreen monitor. In this tutorial, we will explain how Bootstrap 4 columns and rows work and how to manipulate them to create a responsive layout for your modern website.
Grid Breakdown

The grid system of Bootstrap allows you to divide a row into 12 columns of equal width. However, these columns can also be combined to create columns that are wider and positioned differently. The grid can also be responsive and rearrange depending on the screen width or window size.

For example, you may want to display a three column layout on a computer screen. However, this can become difficult to view on a smaller screen, so you can make it to a single column grid with three columns stacked on top of one another. This can be done by assigning the appropriate responsive class to a column.

Classes

There are five classes in Bootstrap 4 which define the responsiveness of the grid element:

  • .col-* -for screens narrower than 576px.
  • .col-sm-* - for screens wider than 576px.
  • .col-md-* - for screens wider than 768px.
  • .col-lg-* - for screens wider than 992px.
  • .col-xl-* - for screens wider than 1200px.
    • Grid System Rules

    To understand how the Bootstrap grid system is used, you must know the rules by which it functions:

    • To create horizontal groups of elements, you have to create a .row class first. For the proper alignment and padding, these should be placed into .container or .container-fluid containers.
    • Content is placed in columns that are placed in rows. Only columns should be direct children of .row containers.
    • The columns create gaps between each other that are referred to as gutters. They are offset as negative margin in the first and last columns of the row. The gutters are typically 15px wide on both sides of the column.
    • You can create grid columns by specifying how many of the 12 available columns they should span.
    • Column widths are all percentage values. This keeps them responsive and fluid.
    Grid Options

    Using the following table, you can easily check out the different layout building solutions that the Boostrap grid system offers: or you can use flex as below