Look Who it Was Random video

How to Create Custom Grid System in Photoshop for Web Design

2,821 views · Published 17 December 2017 · 8:51 · Indexed 1 November 2026

Channel: Angga Risky · 2017 · Education

Watch on YouTube

Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Tip: Remember that grid column should add up to twelve for a row. More than that, columns will stack no matter the viewport.

Grid Classes

The Bootstrap grid system has four classes:
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)

Learn More:
https://www.mockplus.com/blog/post/web-designer-vs-web-developer/?r=grace

What tools I used to UI Design:
https://www.youtube.com/watch?v=1_CTow88_Ds

Read My Blog:
English: http://www.anggarisky.com/en/blog
Indonesian: http://www.garudapixel.com

Take My Course:
udemy.com/user/angga-risky

My Work:
dribbble.com/anggarisky
behance.net/anggarisky

Personal Site:
anggarisky.com

Connect Me:
fb.com/anggariskycom
instagram.com/anggariskycom

More from this channel