col-xx-12 = occupies 100% of the screen.col-xx-11 = covers 91.74% of the screen.col-xx-10 = occupies 83.33% of the screen.col-xx-9 = occupies 75.18% of the screen.col-xx-8 = occupies 66.66% of the screen.col-xx-7 = occupies 58.82% of the screen.col-xx-6 = occupies 50% width of the screen.col-xx-5 = occupies 41.66% width of the screen.col-xx-4 = occupies 20% width of the screen.col-xx-3 = occupies 25% width of the screen.col-xx-2 = occupies 16.66% width of the screen.
col-xx-1 = occupies 8.33% width of the screen.To better understand, we can say having class - (notice 4 css classes here) it means that this div will occupy 25% width in large screen, 33.33% width in medium screen, 50% width in small screen and 100% (12/12 = 1 so 100/1 = 100) width in extra small screen.In extra small screen, it occupies 100% width. - (notice 3 css classes here) it means that this div will occupy 25% width in large screen, 33.33% width in medium screen and 50% (12/6 = 2 so 100/2 = 50) width in small screen.In small and extra small screen, it occupies 100% width. - (notice that we have two css classes here) it means that this div will occupy 25% width in large screen and 33.33% (12/4 = 3 so 100/3 = 33.33) width in medium screen.In small or extra small screen, it occupies the entire screen (100% as no css class is written for small and extra small). - it means that this div will occupy 25% (12/3 = 4, so 100/4 = 25) width of the medium and large screens.col- xs-n - xs stands for extra small screen where the width is between 0px tp 767px (phones screen).col- sm-n - sm stands for small screen where the width is between 768px to 991px (tablet screen).col- md-n - md stands for medium size screen where width is between 992px to 1199px (laptop or small desktop screen).col- lg-n - lg stands for large screen where screen width is more than 1200 px (large desktop screen).The 2 nd segment of the class name tell us the screen size. So the column width is determined depedning on which col-xx-x class we are using. The complete screen width (100%) is divided into 12 columns and it's width changes depending on the screen sizes. col-xx-x - used to specify the width of the column.row - used to clear any floating related styles of before and after elements and ensure that a clean horizontal sapce is created for inside elements.the width will be as per the width of the screen.container-fluid - as the name suggest, it also work as a container for the page content however it is used for fluid (full width) layout.for screen more than 1200px, the container width will be 1170px.for screen between 992px and 1199px, the container width will be 970px.
Responsive layout bootstrap 3 how to#
Here we will understand how to use them and in what scenario. In previous post, we have already understood different Bootstrap classes that is used to create columns in Grid based layout.
0 kommentar(er)
