Responsive Working of Bootstrap Grid System(Part 2) | Tutorial - 5 HD
In this video tutorial we will understand how we can change and control the responsive layout provided by bootstrap grid system. The grid system in bootstrap framework is one of the most important aspects of bootstrap for achieving the mobile responsive properties. The grid system helps divide the entire screen into 12 parts. This grid system consists of 3 main CSS class namely - container, row and columns. All the responsive behavior is achieved by wrapping the content inside the columns(col class applied to division or section or block level elements) which are wrapped inside rows which are ultimately wrapped inside the container. So the hierarchy goes as follows - container - rows - columns We will use different column classes provided inbuilt in the bootstrap library to change the orientation of columns depending on which size of device is active based on the device width. By default bootstrap has categorized 5 types of devices - xs - extra small (width less than 576px) sm - small (width between 576 & 768) md - medium (width betweem 768 & 992) lg - large (width between 992 & 1200) xl - extra large (width greater than 1200px) Download Project code here - https://simplesnippets.tech/understanding-the-bootstrap-grid-systempart-2/ Full Web-Development Series Playlist - https://www.youtube.com/watch?v=ekxo4e7V7HM&list=PLIY8eNdw5tW85F-TuX65zYinmTnPUGzXw More information of grid system - https://getbootstrap.com/docs/4.1/layout/grid/ Simple Snippets Official Website - http://simplesnippets.tech/ Simple Snippets on Facebook - https://www.facebook.com/simplesnippets/ Simple Snippets on Instagram - https://www.instagram.com/simplesnippets/ Simple Snippets on Twitter - https://twitter.com/simplesnippet Simple Snippets Google Plus Page - https://plus.google.com/+SimpleSnippets Simple Snippets email ID - simplesnippetsinfo@gmail.com For More Technology News, Latest Updates and Blog articles visit our Official Website - http://simplesnippets.tech/ #bootstrap #responsivewebsite #boostrapgridsystem #bootstraprframework #webdevelopment #websitedevelopment
Похожие видео
Показать еще