<p><strong>Whenever you test lines of code to apply a new or awkward techniques in web front-end, It would be good to use codepen.</strong></p>
<p><strong>row</strong> : wrapper for columns.<br />
<strong>columns</strong> : There are <strong>12 template columns</strong> available per row allowing you to create different combination of elements that span any number of columns.</p>
<iframe height="300" style="width:100%" src="https://codepen.io/junoonl/embed/gOexRxB?default-tab=html%2Cresult">
  See the Pen <a href="https://codepen.io/junoonl/pen/gOexRxB">
  row and col in bootstrap</a> by Junho Shin (<a href="https://codepen.io/junoonl">@junoonl</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


<p><strong>Bootstrap’s grid system</strong> can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follows:</p>
<ul>
<li>Extra small (xs)</li>
<li>Small (sm)</li>
<li>Medium (md)</li>
<li>Large (lg)</li>
<li>Extra large (xl)</li>
<li>Extra extra large (xxl)
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1658748666629/6cy_vcrke.PNG" alt="bootstrap grid size on device.PNG" /></li>
</ul>
<h4 id="heading-lets-play-with-grid"><strong>Let's play with Grid! </strong></h4>
<iframe height="300" style="width:100%" src="https://codepen.io/junoonl/embed/NWYvgwZ?default-tab=html%2Cresult">
  See the Pen <a href="https://codepen.io/junoonl/pen/NWYvgwZ">
  bootstrap grid system</a> by Junho Shin (<a href="https://codepen.io/junoonl">@junoonl</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

<p>You can see more information here<br />
<a href="https://getbootstrap.com/docs/5.2/layout/grid/">https://getbootstrap.com/docs/5.2/layout/grid/<a></a></a></p>


**Whenever you test lines of code to apply a new or awkward techniques in web front-end, It would be good to use codepen.**


**row** : wrapper for columns.<br>
**columns** : There are **12 template columns** available per row allowing you to create different combination of elements that span any number of columns.

<iframe height="300" style="width: 100%;" scrolling="no" title="row and col in bootstrap" src="https://codepen.io/junoonl/embed/gOexRxB?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/junoonl/pen/gOexRxB">
  row and col in bootstrap</a> by Junho Shin (<a href="https://codepen.io/junoonl">@junoonl</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


**Bootstrap’s grid system** can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follows:

- Extra small (xs)
- Small (sm)
- Medium (md)
- Large (lg)
- Extra large (xl)
- Extra extra large (xxl)
![bootstrap grid size on device.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1658748666629/6cy_vcrke.PNG align="left")




#### **Let's play with Grid! **
<iframe height="300" style="width: 100%;" scrolling="no" title="bootstrap grid system" src="https://codepen.io/junoonl/embed/NWYvgwZ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/junoonl/pen/NWYvgwZ">
  bootstrap grid system</a> by Junho Shin (<a href="https://codepen.io/junoonl">@junoonl</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

You can see more information here<br>
<a href="https://getbootstrap.com/docs/5.2/layout/grid/">https://getbootstrap.com/docs/5.2/layout/grid/<a/>


Junho Dev Blog

Junho Dev Blog

Grid system in BootStrap

Let's play with Grid!