https://github.com/naftalimurgor/bootstrap-grid-demo

A demo for bootstrap grid system. Just a scratch on the surface.
https://github.com/naftalimurgor/bootstrap-grid-demo

Last synced: 26 days ago
JSON representation

A demo for bootstrap grid system. Just a scratch on the surface.

• Host: GitHub
• URL: https://github.com/naftalimurgor/bootstrap-grid-demo
• Owner: naftalimurgor
• Created: 2021-05-18T16:48:32.000Z (over 3 years ago)
• Default Branch: ItemsListingPage
• Last Pushed: 2021-09-08T08:39:27.000Z (about 3 years ago)
• Last Synced: 2023-03-10T07:06:28.795Z (over 1 year ago)
• Language: HTML
• Homepage:
• Size: 238 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

## Bootstrap grid demo

Install `live server` vscode extension. Enable the extension and click `Go live` from vscode status bar to open the demo on your default favorite (Chrome maybe 😄)browser.

Or just view the demo here: [demo](https://stealth-ossified-nylon.glitch.me/items.html)

## Explanation

Bootstrap offers a twelve-factor grid layout. Inside a row on a page, `columns` can range between 1-12. Utility classes for columns are prefixed with `col-{size}`.

e.g if you have 

```html

...



  
Column 1 of 2


  
Column 2 of 2



```

This will take two equal columns of the row,occupying a full-width of the viewport(on desktop) because 6 + 6 = 12(max size factor)

Same goes for smaller column sizes such as `col-2` etc. If you use a size less than 12, like `col-2`, left space would be (12-2) = 10(space will be left on the row)

If sum of column widths in a row is greater than 12, columns will be stacked on top of each other, on desktop viewports.

Add more utility class to the `col-`s to have more responsive behavior, `col-xs-{column-width` `col-md-{your-column-width}` `col-lg-{column-width` for small, medium and large screen devices.

## Refference

 [w3schools](https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp) explains bootstrap grid system better.

 

Also see this stackoverflow [question]( https://stackoverflow.com/questions/69061475/the-bootstrap-cards-could-not-grid-properly/69061520?noredirect=1#comment122058286_69061520)