Here we are discussing about Grid System

What is a Grid??

A grid is a two-dimensional structure made up of a series of intersecting straight (vertical, horizontal) lines used to structure material in graphic design. In print design, it's commonly utilised to create layout and content organisation. It is a very effective way for creating a consistent layout quickly and effectively utilising HTML and CSS in web design.

Grids in web design, to put it simply, organise and structure content, make webpages easier to scan, and minimise the cognitive strain on users.

What is Bootstrap Grid System??

According to the official documentation for the Bootstrap grid system,

The fluid grid architecture in Bootstrap is responsive and mobile first, scaling up to 12 columns as the device or viewport size grows. It comes with predefined classes for quick layouts and strong mixins for creating more semantic layouts.

Let's take a closer look at the statement above. Bootstrap 3 is mobile first in the sense that the code now targets smaller screens like mobile devices and tablets first, before "expanding" components and grids for bigger screens like laptops and desktops.

Mobile First Strategy:

Content: Decide what is most essential to you.

•  Layout: First, design for reduced widths.
•  The base CSS addresses mobile devices first, followed by media queries for tablets and desktops.

Progressive Enhancement: As the screen size grows, add more items.

Working of Bootstrap Grid System:

Grid systems are used to create page layouts by arranging your information in a sequence of rows and columns. The Bootstrap grid system operates as follows:

• For appropriate alignment and padding, rows must be placed within a.container class.
•  To make horizontal groups of columns, use rows.
• Only columns may be the direct children of rows, and content should be placed within the columns.
• Grid layouts may be readily created using predefined grid classes such as.row and.col-xs-4. For more semantic layouts, LESS mixins might be used.
• Padding in columns creates gutters (gaps between column content). Negative margin on.rows is used to offset the padding in rows for the first and last columns.
• Grid columns are made by choosing the amount of available columns you want to span out of a total of twelve. Three equal columns, for example, would require three.col-xs-4.

Media Queries:

The word "media query" is a sophisticated way of saying "conditional CSS rule." It simply adds CSS to a page based on a set of circumstances. The style is applied if certain conditions are met.

With Bootstrap's Media Queries, you can move, show, and hide content based on the viewport size. To create the main breakpoints in the Bootstrap grid system, the following media queries are utilised in LESS files.

/* Extra small devices (phones, less than 768px) *//* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up)
 */@media (min-width: @screen-sm-min) { ... }

/*Medium devices (desktops, 992px and up) 
*/@media (min-width: @screen-md-min) { ... }

/*Large devices (large desktops, 1200px and up) */@media (min-width: @screen-lg-min) { ... }

These are occasionally expanded to add a max-width to restrict CSS to a smaller number of devices.

@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max
Consider the following line: For all devices, regardless of type, with min-width: @screen-sm-min If the width of the screen shrinks below @screen-sm-max, take action. -width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

A device specification and a size rule are the two pieces of a media query. In the example above, the following rule is applied:

Consider the following line:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

For all devices, regardless of type, with min-width: @screen-sm-min If the width of the screen shrinks below @screen-sm-max, take action.

Grid Options:

The table below summarises how the Bootstrap grid system works across various devices.

Basic Grid Structure:

<div class = "container">
   <div class = "row">
        <divclass = "col-*-*"></div>
         <divclass = "col-*-*"></div>
   </div>
      <div class = "row">...</div>
</div>
       <divclass = "container">
   ....
</div>

Let's look at some basic grid examples:

Example: Stacked-to-Horizontal.

Example: Medium and Large Device.

Example :Mobile,Tablet,Desktop.