title
Using the Bootstrap 4 Grid | BOOTSTRAP 4 TUTORIAL

description
The grid is one of the core assets of Bootstrap 4 - time to take a closer look and understand how you may use it! You prefer CSS? Join the full CSS course: https://acad.link/css Check out all our other courses: https://academind.com/learn/our-courses ---------- Source Code: https://github.com/academind/bootstrap4-introduction/tree/02-grid Watch the Series on academind.com: https://www.academind.com/learn/css/bootstrap-4-tutorial/the-grid Official Grid Documentation: http://getbootstrap.com/docs/4.0/layout/grid/ Dive Deeper into Flexbox: https://academind.com/learn/css/understanding-css/flexbox-basics-container ---------- • Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts • Follow @maxedapps and @academind_real on Twitter • Join our Facebook community on https://www.facebook.com/academindchannel/ See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

detail
{'title': 'Using the Bootstrap 4 Grid | BOOTSTRAP 4 TUTORIAL', 'heatmap': [{'end': 224.243, 'start': 199.85, 'weight': 0.749}, {'end': 707.895, 'start': 669.34, 'weight': 0.733}, {'end': 740.903, 'start': 710.137, 'weight': 0.844}], 'summary': 'Tutorial covers bootstrap 4 grid system, explaining layout and element positioning using flexbox, styling with borders and margins, default behavior of columns, responsive grid layouts, and achieving full alignment and positioning flexibility, emphasizing the importance of total columns adding up to 12.', 'chapters': [{'end': 351.339, 'segs': [{'end': 58.34, 'src': 'embed', 'start': 28.016, 'weight': 0, 'content': [{'end': 29.537, 'text': 'how does the Bootstrap Grid work?', 'start': 28.016, 'duration': 1.521}, {'end': 36.385, 'text': 'Behind the scenes, it uses Flexbox to position elements and to make sure that everything is where it should be.', 'start': 30.138, 'duration': 6.247}, {'end': 44.475, 'text': 'You could, of course, use Flexbox yourself, and my colleague, Manuel, actually created a video on Flexbox that might be interesting to you.', 'start': 37.166, 'duration': 7.309}, {'end': 45.736, 'text': 'Feel free to check it out.', 'start': 44.795, 'duration': 0.941}, {'end': 55.539, 'text': 'but writing flexbox on your own, whilst not being super difficult, is of course more cumbersome than simply adding some css classes to your html code.', 'start': 46.497, 'duration': 9.042}, {'end': 58.34, 'text': "so let's see how the bootstrap grid works.", 'start': 55.539, 'duration': 2.801}], 'summary': 'The bootstrap grid uses flexbox to position elements for easy layout, and a colleague has made a related flexbox video.', 'duration': 30.324, 'max_score': 28.016, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw28016.jpg'}, {'end': 98.715, 'src': 'embed', 'start': 69.462, 'weight': 1, 'content': [{'end': 72.903, 'text': 'it has to be named container to be understood by bootstrap.', 'start': 69.462, 'duration': 3.441}, {'end': 82.432, 'text': 'in the container class, you now create rows and columns to define your grid, because that is how all grids typically work.', 'start': 73.923, 'duration': 8.509}, {'end': 86.296, 'text': 'so here we now add another div with the row class.', 'start': 82.432, 'duration': 3.864}, {'end': 88.298, 'text': 'you can of course add more than one row.', 'start': 86.296, 'duration': 2.002}, {'end': 90.26, 'text': 'you can add as many rows as you need.', 'start': 88.298, 'duration': 1.962}, {'end': 91.301, 'text': 'in this case, i add two.', 'start': 90.26, 'duration': 1.041}, {'end': 98.715, 'text': 'Now, in the row class, you add columns, and columns are the places where you put your actual content.', 'start': 92.526, 'duration': 6.189}], 'summary': 'Bootstrap grid system uses containers, rows, and columns to structure content.', 'duration': 29.253, 'max_score': 69.462, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw69462.jpg'}, {'end': 179.951, 'src': 'embed', 'start': 145.288, 'weight': 2, 'content': [{'end': 149.292, 'text': "I wanna style this, and for that I'll actually add my own classes.", 'start': 145.288, 'duration': 4.004}, {'end': 160.102, 'text': "I'll add my container to the container, I'll add my row to the row, And to all the columns here, I'll add my cull.", 'start': 150.033, 'duration': 10.069}, {'end': 162.883, 'text': "And for the second row, I'll also add my row.", 'start': 160.742, 'duration': 2.141}, {'end': 169.326, 'text': 'This allows me to add my own styling after the bootstrap import and deliberately add it to this file.', 'start': 163.803, 'duration': 5.523}, {'end': 179.951, 'text': "And there, I'll first of all style my container to maybe get a border of one pixel solid and green.", 'start': 170.306, 'duration': 9.645}], 'summary': 'Styling using custom classes added to containers, rows, and columns after bootstrap import, including adding a one pixel solid green border to the container.', 'duration': 34.663, 'max_score': 145.288, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw145288.jpg'}, {'end': 224.243, 'src': 'heatmap', 'start': 199.85, 'weight': 0.749, 'content': [{'end': 206.553, 'text': "And let's also add a style for our body, our document body, and give it a margin of 30 pixels,", 'start': 199.85, 'duration': 6.703}, {'end': 209.855, 'text': "so that our content doesn't sit right on the edges of the document.", 'start': 206.553, 'duration': 3.302}, {'end': 214.237, 'text': 'If we now reload this, we actually see our grid like this.', 'start': 210.435, 'duration': 3.802}, {'end': 218.439, 'text': 'And I should remove that white space to all to see the red border, I guess.', 'start': 215.318, 'duration': 3.121}, {'end': 224.243, 'text': 'So now we can clearly see the rows and the columns with the blue dots around them.', 'start': 219.48, 'duration': 4.763}], 'summary': 'Styling the document body with a 30-pixel margin creates a clear grid layout.', 'duration': 24.393, 'max_score': 199.85, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw199850.jpg'}, {'end': 253.565, 'src': 'embed', 'start': 227.164, 'weight': 3, 'content': [{'end': 231.687, 'text': 'Now, interesting to see, by default, each column takes up an equal amount of space.', 'start': 227.164, 'duration': 4.523}, {'end': 236.37, 'text': 'So if we resize this, each column stays at 50% of the available width.', 'start': 231.987, 'duration': 4.383}, {'end': 238.992, 'text': 'And if I shrink this down.', 'start': 237.57, 'duration': 1.422}, {'end': 244.516, 'text': "it's also the case, though, if I go below a certain threshold for very small devices.", 'start': 238.992, 'duration': 5.524}, {'end': 252.305, 'text': 'here it actually breaks into two lines, but i have to go really really small for that.', 'start': 244.516, 'duration': 7.789}, {'end': 253.565, 'text': 'that is the default behavior.', 'start': 252.305, 'duration': 1.26}], 'summary': 'By default, each column takes up 50% of available width and breaks into two lines for very small devices.', 'duration': 26.401, 'max_score': 227.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw227164.jpg'}, {'end': 330.153, 'src': 'embed', 'start': 280.812, 'weight': 4, 'content': [{'end': 282.212, 'text': 'So we basically change the name.', 'start': 280.812, 'duration': 1.4}, {'end': 288.915, 'text': 'Bootstrap defines a couple of different column class names and this is another one we can use, column four.', 'start': 282.993, 'duration': 5.922}, {'end': 298.157, 'text': 'We can then add column 8 to the second one and now you have to think of these numbers here as shares of the available space.', 'start': 289.975, 'duration': 8.182}, {'end': 302.658, 'text': "They always, and that's important, they always have to add up to 12.", 'start': 298.797, 'duration': 3.861}, {'end': 305.838, 'text': 'We got a 12 column grid by default.', 'start': 302.658, 'duration': 3.18}, {'end': 313.76, 'text': 'So we can add up to 12 columns where each would then be column 1 or nothing at all and it would automatically be distributed.', 'start': 306.338, 'duration': 7.422}, {'end': 325.209, 'text': 'Now, if we set this to column four, we tell Bootstrap from the 12 available columns, this column here should take four, so the width of four columns,', 'start': 314.58, 'duration': 10.629}, {'end': 327.331, 'text': 'and the second one should take eight.', 'start': 325.209, 'duration': 2.122}, {'end': 330.153, 'text': 'So together, they add up to 12.', 'start': 327.871, 'duration': 2.282}], 'summary': 'Using bootstrap grid system, columns can be specified as shares of available space, ensuring they add up to 12.', 'duration': 49.341, 'max_score': 280.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw280812.jpg'}], 'start': 3.743, 'title': 'Bootstrap grid system', 'summary': 'Explains how to use bootstrap grid to lay out a page and position elements, utilizing flexbox, styling the grid with borders and margins. it also details the default behavior of columns in the bootstrap grid system, with an emphasis on resizing, distribution of column widths, and the concept of column classes. additionally, it highlights the importance of the total columns adding up to 12.', 'chapters': [{'end': 226.764, 'start': 3.743, 'title': 'Understanding bootstrap grid', 'summary': 'Explains how to use bootstrap grid to lay out a page and position elements, utilizing flexbox, and demonstrates styling the grid with borders and margins.', 'duration': 223.021, 'highlights': ['Bootstrap grid uses Flexbox to position elements and ensure proper layout. Bootstrap grid utilizes Flexbox to position elements and ensure proper layout, offering a more convenient alternative to manually writing Flexbox code.', 'Creation of rows and columns in Bootstrap grid to define the layout. Bootstrap grid is created by defining rows and columns using div elements, allowing for the creation of the desired grid layout.', 'Demonstration of adding custom styling to the grid using CSS. The chapter demonstrates the addition of custom styling to the grid using CSS, including borders and margins, to visually enhance the layout of the content.']}, {'end': 351.339, 'start': 227.164, 'title': 'Bootstrap grid system', 'summary': 'Explains the default behavior of columns in bootstrap grid system, with an emphasis on resizing, distribution of column widths, and the concept of column classes, using examples and emphasizing the importance of the total columns adding up to 12.', 'duration': 124.175, 'highlights': ["The default behavior of Bootstrap's grid system is such that each column takes up an equal amount of space, which can be resized and breaks into two lines for very small devices.", "Bootstrap's grid system allows for customization of column widths by using column classes, with the total columns always adding up to 12, enabling flexible distribution of available space.", 'The concept of column classes in Bootstrap grid system allows for defining specific widths for columns, with the requirement that the total sum of widths always adds up to 12 for a row.']}], 'duration': 347.596, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw3743.jpg', 'highlights': ['Bootstrap grid uses Flexbox to position elements and ensure proper layout.', 'Creation of rows and columns in Bootstrap grid to define the layout.', 'Demonstration of adding custom styling to the grid using CSS.', "The default behavior of Bootstrap's grid system is such that each column takes up an equal amount of space, which can be resized and breaks into two lines for very small devices.", "Bootstrap's grid system allows for customization of column widths by using column classes, with the total columns always adding up to 12, enabling flexible distribution of available space.", 'The concept of column classes in Bootstrap grid system allows for defining specific widths for columns, with the requirement that the total sum of widths always adds up to 12 for a row.']}, {'end': 809.721, 'segs': [{'end': 379.207, 'src': 'embed', 'start': 352.563, 'weight': 2, 'content': [{'end': 359.189, 'text': 'Now, sometimes you want to be even more precise than that, because you want to have a different layout for your small and your big devices.', 'start': 352.563, 'duration': 6.626}, {'end': 365.915, 'text': "Let's say for the small devices, so for your mobile phones, you want to stack these columns.", 'start': 359.85, 'duration': 6.065}, {'end': 369.178, 'text': 'So they should actually become rows, so to say.', 'start': 366.295, 'duration': 2.883}, {'end': 370.879, 'text': 'They should not sit next to each other.', 'start': 369.238, 'duration': 1.641}, {'end': 375.484, 'text': 'But for medium-sized or larger screens, you want to have them sit next to each other.', 'start': 371.24, 'duration': 4.244}, {'end': 379.207, 'text': 'Now, you can get there by tweaking this name even more.', 'start': 376.024, 'duration': 3.183}], 'summary': 'Optimizing layout for different devices based on size.', 'duration': 26.644, 'max_score': 352.563, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw352563.jpg'}, {'end': 442.786, 'src': 'embed', 'start': 391.899, 'weight': 0, 'content': [{'end': 400.667, 'text': 'For example, I could name this CullMD4 to indicate for medium-sized or bigger screens, this should get four of the available.', 'start': 391.899, 'duration': 8.768}, {'end': 406.971, 'text': 'I, of course, can now also adjust the second column here and add MD8 here.', 'start': 401.448, 'duration': 5.523}, {'end': 409.772, 'text': 'Now, there are five classes available.', 'start': 407.551, 'duration': 2.221}, {'end': 418.035, 'text': 'You can have medium-sized screens with MD like this, but there also is large with LG for bigger screens,', 'start': 410.192, 'duration': 7.843}, {'end': 429.24, 'text': 'XL for extra large for very big screens and on the other side of medium, you got SM for small tablet size and you also got XS for extra small.', 'start': 418.035, 'duration': 11.205}, {'end': 431.741, 'text': 'That would be your smaller mobile phones.', 'start': 429.721, 'duration': 2.02}, {'end': 439.324, 'text': 'So these are the available names you can use, and you can really combine all these numbers, adding up to 12,', 'start': 432.602, 'duration': 6.722}, {'end': 442.786, 'text': 'and the size classes to control how your grid looks like.', 'start': 439.324, 'duration': 3.462}], 'summary': 'The grid system offers 5 size classes for different screen sizes, allowing a maximum of 12 combined numbers to control the grid layout.', 'duration': 50.887, 'max_score': 391.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw391899.jpg'}, {'end': 517.044, 'src': 'embed', 'start': 489.483, 'weight': 3, 'content': [{'end': 491.924, 'text': 'this is the power of the bootstrap grid.', 'start': 489.483, 'duration': 2.441}, {'end': 503.67, 'text': 'you can configure a lot and you can really fine-tune it to your needs with these combinations of shares of the available width and the different device sizes,', 'start': 491.924, 'duration': 11.746}, {'end': 505.11, 'text': 'and, as shown at the beginning,', 'start': 503.67, 'duration': 1.44}, {'end': 512.573, 'text': 'you can of course also emit all of that and just use call to distribute the available space evenly across the columns you defined.', 'start': 505.11, 'duration': 7.463}, {'end': 517.044, 'text': 'Now. with that we covered the bare basics of the grid, but we can do more.', 'start': 513.462, 'duration': 3.582}], 'summary': 'The bootstrap grid allows fine-tuning of width shares and device sizes for column distribution.', 'duration': 27.561, 'max_score': 489.483, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw489483.jpg'}, {'end': 597.335, 'src': 'embed', 'start': 562.495, 'weight': 4, 'content': [{'end': 565.358, 'text': 'But maybe you now want to center these two columns here.', 'start': 562.495, 'duration': 2.863}, {'end': 569.043, 'text': 'So in row two, you want to center them horizontally.', 'start': 565.719, 'duration': 3.324}, {'end': 571.445, 'text': "Now, that's easy with the Bootstrap grid.", 'start': 569.824, 'duration': 1.621}, {'end': 580.008, 'text': 'You can add an additional class, class not named to row, but additional class to the class list on the row div.', 'start': 571.845, 'duration': 8.163}, {'end': 586.27, 'text': 'And the classes you can add here are actually inspired by the flexbox settings that are happening behind the scenes.', 'start': 580.628, 'duration': 5.642}, {'end': 589.632, 'text': "So if you know flexbox, they're going to sound familiar to you.", 'start': 586.711, 'duration': 2.921}, {'end': 597.335, 'text': 'If you want to center everything, you can call this justify content center with dashes between the words.', 'start': 590.412, 'duration': 6.923}], 'summary': 'Using bootstrap grid, add additional class to row div to center columns horizontally.', 'duration': 34.84, 'max_score': 562.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw562495.jpg'}, {'end': 707.895, 'src': 'heatmap', 'start': 669.34, 'weight': 0.733, 'content': [{'end': 674.082, 'text': 'But what about vertical alignment? This has historically been very difficult in CSS.', 'start': 669.34, 'duration': 4.742}, {'end': 679.164, 'text': "Well, it's super simple with Flexbox and therefore also with the Bootstrap grid.", 'start': 675.282, 'duration': 3.882}, {'end': 683.125, 'text': "Let's give our row some height so that we can see this.", 'start': 680.084, 'duration': 3.041}, {'end': 688.788, 'text': "So to the MyRow class, which is added to each row, I'll add a height of 300 pixels.", 'start': 683.886, 'duration': 4.902}, {'end': 693.85, 'text': 'If I now reload the page, you see the columns take the full available height.', 'start': 689.748, 'duration': 4.102}, {'end': 696.671, 'text': 'That might be a nice default behavior you want.', 'start': 694.49, 'duration': 2.181}, {'end': 703.294, 'text': 'But sometimes you just want to take the height you set for the columns or the content requires.', 'start': 697.471, 'duration': 5.823}, {'end': 707.895, 'text': 'Now therefore, you can also define how they should be positioned vertically.', 'start': 704.332, 'duration': 3.563}], 'summary': 'Flexbox simplifies vertical alignment, setting row height to 300 pixels results in full available height for columns.', 'duration': 38.555, 'max_score': 669.34, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw669340.jpg'}, {'end': 740.903, 'src': 'heatmap', 'start': 710.137, 'weight': 0.844, 'content': [{'end': 717.905, 'text': "let's stick to the second row and there besides justify content, something you can also add align items,", 'start': 710.137, 'duration': 7.768}, {'end': 722.309, 'text': 'something again coming from that flexbox property name that is used behind the scenes.', 'start': 717.905, 'duration': 4.404}, {'end': 725.191, 'text': 'And there you got start for example.', 'start': 723.169, 'duration': 2.022}, {'end': 732.499, 'text': 'If you take start and reload the page, You actually see that now, for the second row,', 'start': 725.892, 'duration': 6.607}, {'end': 740.903, 'text': "the columns only are as high as required by their content and they're then pushed to the start vertically of the row.", 'start': 732.499, 'duration': 8.404}], 'summary': "Using flexbox properties like justify-content and align-items, the second row's columns are adjusted to the start vertically of the row.", 'duration': 30.766, 'max_score': 710.137, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw710137.jpg'}], 'start': 352.563, 'title': 'Bootstrap grid systems', 'summary': 'Explains creating responsive grid layouts with bootstrap, offering classes for various screen sizes and a maximum of 12 columns. it also covers the flexibility of the grid system, including configuring column widths, centering columns, and achieving full alignment and positioning flexibility.', 'chapters': [{'end': 488.263, 'start': 352.563, 'title': 'Responsive grid layout', 'summary': 'Explains how to create a responsive grid layout using bootstrap, allowing for different column arrangements based on screen sizes, with available classes for small (sm), medium (md), large (lg), extra large (xl), small tablet (sm), and extra small (xs) screens, and a maximum of 12 columns that can be combined and controlled for different layouts.', 'duration': 135.7, 'highlights': ['Explains the use of different size names to define layout for different screen sizes, such as CullMD4 for medium-sized or bigger screens and call SM6 for smaller screens. Different size names like CullMD4 for medium-sized or bigger screens and call SM6 for smaller screens can be used to define layouts for different screen sizes.', 'Describes the available size classes such as MD, LG, XL, SM, and XS, which can be combined to control the grid layout, allowing for a maximum of 12 columns. The available size classes like MD, LG, XL, SM, and XS can be combined to control the grid layout, with a maximum of 12 columns available.', 'Demonstrates how the grid layout changes based on screen sizes, such as stacking columns for small devices and sitting next to each other for medium-sized or larger screens. The grid layout changes based on screen sizes, stacking columns for small devices and sitting next to each other for medium-sized or larger screens.']}, {'end': 809.721, 'start': 489.483, 'title': 'Bootstrap grid alignment', 'summary': 'Covers the flexibility of the bootstrap grid system, including configuring column widths, centering columns horizontally and vertically, and achieving full flexibility in alignment and positioning of grid items.', 'duration': 320.238, 'highlights': ['The bootstrap grid system provides flexibility in configuring column widths and distributing available space across columns. The user can configure column widths and distribute available space across columns using the Bootstrap grid system.', 'The Bootstrap grid system allows for easy horizontal centering of columns using additional classes inspired by flexbox settings. The Bootstrap grid system enables easy horizontal centering of columns through the use of additional classes inspired by flexbox settings.', 'Vertical alignment of columns is made simple with the Bootstrap grid system, allowing for the alignment of items based on content requirements. The Bootstrap grid system simplifies vertical alignment by allowing items to be aligned based on their content requirements.']}], 'duration': 457.158, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw352563.jpg', 'highlights': ['Different size names like CullMD4 for medium-sized or bigger screens and call SM6 for smaller screens can be used to define layouts for different screen sizes.', 'The available size classes like MD, LG, XL, SM, and XS can be combined to control the grid layout, with a maximum of 12 columns available.', 'The grid layout changes based on screen sizes, stacking columns for small devices and sitting next to each other for medium-sized or larger screens.', 'The user can configure column widths and distribute available space across columns using the Bootstrap grid system.', 'The Bootstrap grid system enables easy horizontal centering of columns through the use of additional classes inspired by flexbox settings.', 'The Bootstrap grid system simplifies vertical alignment by allowing items to be aligned based on their content requirements.']}, {'end': 1117.627, 'segs': [{'end': 858.292, 'src': 'embed', 'start': 829.309, 'weight': 1, 'content': [{'end': 833.13, 'text': 'You can easily switch the order by adding another class to your column.', 'start': 829.309, 'duration': 3.821}, {'end': 842.194, 'text': 'So to the first column, which actually right now is obviously the first element from left to right, I could add order 12.', 'start': 833.911, 'duration': 8.283}, {'end': 846.035, 'text': 'And this also goes up all the way to 12 because we got a 12-column grid.', 'start': 842.194, 'duration': 3.841}, {'end': 854.369, 'text': 'And then I could give my other column here order 2 maybe, so a number smaller than 12.', 'start': 847.016, 'duration': 7.353}, {'end': 858.292, 'text': 'Now, keep in mind, right now, column two is on the right, which makes sense.', 'start': 854.369, 'duration': 3.923}], 'summary': 'Adjust column order in a 12-column grid layout using css classes.', 'duration': 28.983, 'max_score': 829.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw829309.jpg'}, {'end': 943.036, 'src': 'embed', 'start': 873.443, 'weight': 2, 'content': [{'end': 880.188, 'text': 'If we had more columns, then all these orders would be taken into account and they would be ordered respective to their order number.', 'start': 873.443, 'duration': 6.745}, {'end': 885.351, 'text': 'Now this could be used in conjunction with the device size breakpoints.', 'start': 880.928, 'duration': 4.423}, {'end': 891.234, 'text': 'We could say we only want to switch the order for medium sized or bigger screens.', 'start': 885.951, 'duration': 5.283}, {'end': 894.496, 'text': 'So I add the MD part to the order name.', 'start': 891.474, 'duration': 3.022}, {'end': 901.921, 'text': 'For devices smaller than that, the default order from left to right, so as defined in the HTML code will be used.', 'start': 895.237, 'duration': 6.684}, {'end': 910.709, 'text': "If I now reload this, You see, it's switched because we're on a medium-sized or bigger screen size here.", 'start': 902.721, 'duration': 7.988}, {'end': 920.035, 'text': "But if I shrink this, it actually goes back to the normal order because we're on a smaller than medium size screen,", 'start': 911.53, 'duration': 8.505}, {'end': 923.158, 'text': 'and this of course great for creating responsive layouts.', 'start': 920.035, 'duration': 3.123}, {'end': 928.523, 'text': 'where you maybe want to switch some element to the top for your mobile devices.', 'start': 923.158, 'duration': 5.365}, {'end': 930.946, 'text': 'you would code this in a mobile first way.', 'start': 928.523, 'duration': 2.423}, {'end': 939.375, 'text': 'so code the order you want to have in a mobile phone and then you can switch the order for bigger screens, as we do it here by adding the order class.', 'start': 930.946, 'duration': 8.429}, {'end': 943.036, 'text': 'Now, the last interesting thing I want to show you is offsetting.', 'start': 939.935, 'duration': 3.101}], 'summary': 'Using order classes for responsive layouts, enabling order switching based on device size, and offsetting elements.', 'duration': 69.593, 'max_score': 873.443, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw873443.jpg'}, {'end': 993.524, 'src': 'embed', 'start': 968.221, 'weight': 4, 'content': [{'end': 977.833, 'text': "let's say two columns by default and then only treat the remaining space thereafter as the well remaining space, then you can add the offset-2..", 'start': 968.221, 'duration': 9.612}, {'end': 981.937, 'text': 'class here.', 'start': 980.916, 'duration': 1.021}, {'end': 987, 'text': 'this simply tells bootstrap move this two columns to the right.', 'start': 981.937, 'duration': 5.063}, {'end': 993.524, 'text': "if we save this and reload, you won't see anything here actually, because we switched the order, which will override this,", 'start': 987, 'duration': 6.524}], 'summary': 'Using bootstrap to move two columns to the right with an offset of 2.', 'duration': 25.303, 'max_score': 968.221, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw968221.jpg'}, {'end': 1090.84, 'src': 'embed', 'start': 1063.445, 'weight': 0, 'content': [{'end': 1066.706, 'text': "But if you go to a smaller screen, that's no longer the case.", 'start': 1063.445, 'duration': 3.261}, {'end': 1070.408, 'text': 'And with that, you can really now fine-tune your positioning.', 'start': 1067.347, 'duration': 3.061}, {'end': 1079.451, 'text': "You've got a lot of tools for alignment, for distributing available space, for setting the available space by moving columns in like we just saw.", 'start': 1070.788, 'duration': 8.663}, {'end': 1088.218, 'text': 'for reordering your elements, for defining the widths of your columns, defining different widths for different screen sizes,', 'start': 1080.191, 'duration': 8.027}, {'end': 1090.84, 'text': 'and the official docs hold a lot of examples on this.', 'start': 1088.218, 'duration': 2.622}], 'summary': 'Smaller screens offer more control for fine-tuning positioning and layout with tools for alignment, distribution, and element reordering.', 'duration': 27.395, 'max_score': 1063.445, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw1063445.jpg'}], 'start': 810.402, 'title': 'Css and bootstrap grid systems', 'summary': 'Covers css grid layouts for switching column order and creating responsive designs, and also delves into using bootstrap grid system to fine-tune positioning and achieve responsive behavior for different screen sizes.', 'chapters': [{'end': 943.036, 'start': 810.402, 'title': 'Css column order and responsive layouts', 'summary': "Explains how to switch the order of columns in a css grid layout using the 'order' property and how it can be used in conjunction with device size breakpoints to create responsive layouts, with a demonstration of how the order of columns can be switched for medium-sized or bigger screens.", 'duration': 132.634, 'highlights': ["The chapter explains how to switch the order of columns in a CSS grid layout using the 'order' property. Demonstrates how the 'order' property can be used to change the visual order of columns in a CSS grid layout.", "It explains how the 'order' property can be used in conjunction with device size breakpoints to create responsive layouts. Illustrates how the 'order' property can be combined with device size breakpoints to create responsive layouts, allowing for different column orders based on screen sizes.", "Demonstrates switching the order of columns for medium-sized or bigger screens using the 'order' property with the 'MD' breakpoint. Shows an example of how the 'order' property can be used with the 'MD' breakpoint to switch the order of columns specifically for medium-sized or bigger screens, offering a practical demonstration of responsive design implementation."]}, {'end': 1117.627, 'start': 943.397, 'title': 'Bootstrap grid system', 'summary': 'Explains how to use the offset classes in the bootstrap grid system to move columns to the left or right by a specified number of columns, making it possible to fine-tune positioning and alignment, also allowing for responsive behavior based on different screen sizes.', 'duration': 174.23, 'highlights': ['Using the offset-2 class in Bootstrap allows moving two columns to the left, creating an empty space on the left and distributing the remaining space accordingly, providing fine-tuned control over column positioning.', 'Offset classes can be made responsive by adding breakpoint names, enabling the offsetting behavior to be applied based on specific screen sizes, enhancing the flexibility of the grid system.', 'The Bootstrap grid system offers various tools for alignment, distributing available space, setting the available space by moving columns, reordering elements, defining column widths for different screen sizes, and numerous examples are available in the official documentation for further exploration.']}], 'duration': 307.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qmPmwdshCMw/pics/qmPmwdshCMw810402.jpg', 'highlights': ['The chapter covers CSS grid layouts for switching column order and creating responsive designs.', "Demonstrates how the 'order' property can be used to change the visual order of columns in a CSS grid layout.", "Illustrates how the 'order' property can be combined with device size breakpoints to create responsive layouts.", "Shows an example of how the 'order' property can be used with the 'MD' breakpoint to switch the order of columns specifically for medium-sized or bigger screens.", 'Using the offset-2 class in Bootstrap allows moving two columns to the left, creating an empty space on the left and distributing the remaining space accordingly.', 'Offset classes can be made responsive by adding breakpoint names, enabling the offsetting behavior to be applied based on specific screen sizes.', 'The Bootstrap grid system offers various tools for alignment, distributing available space, setting the available space by moving columns, reordering elements, defining column widths for different screen sizes.']}], 'highlights': ['The Bootstrap grid system allows for customization of column widths by using column classes, with the total columns always adding up to 12, enabling flexible distribution of available space.', 'The concept of column classes in Bootstrap grid system allows for defining specific widths for columns, with the requirement that the total sum of widths always adds up to 12 for a row.', 'Different size names like CullMD4 for medium-sized or bigger screens and call SM6 for smaller screens can be used to define layouts for different screen sizes.', 'The available size classes like MD, LG, XL, SM, and XS can be combined to control the grid layout, with a maximum of 12 columns available.', 'The chapter covers CSS grid layouts for switching column order and creating responsive designs.', "Demonstrates how the 'order' property can be used to change the visual order of columns in a CSS grid layout.", "Illustrates how the 'order' property can be combined with device size breakpoints to create responsive layouts.", "The default behavior of Bootstrap's grid system is such that each column takes up an equal amount of space, which can be resized and breaks into two lines for very small devices."]}