O’Reilly Web Programming

About this course

hi I'm Jen Kramer a staff author here at O'Reilly Media I'm looking at four hot new features in bootstrap for alpha-1 bootstrap 4 was released in its alpha

form back in mid-august watch for a few more alpha releases 2 beta releases and 2 release candidates before the final release the first new feature will look at in bootstrap 4 is a new additional

break point in the grid system bringing the total to 5 breakpoints in all all the documentation is available here at the bootstrap 4 website shown on the screen bootstrap has always had a grid

system for layout but the number of breakpoints has grown significantly in recent versions in bootstrap 3 we had four grid sizes corresponding to three break points at 768 992 and 1200 pixels

unfortunately this meant that a small layout particularly in the phone realm didn't work particularly well sometimes since the phone screen widths are sized in the 300 to 450 pixel range in

bootstrap 4 we now have 5 grid sizes corresponding to 4 breakpoints the smallest breakpoint is now at 34 m/s or 544 pixels at least for now the documentation talks about 480 pixels

instead of 544 pixels so we may see the final number shift a bit between the Alpha and the stable version this chart brings up one other item worth mentioning in bootstrap 4 notice the new

breakpoints are specified in m's instead of pixels although I provided you with a pixel conversion so you can compare with the bootstrap 3 numbers all of bootstrap 4 has been rewritten in m's instead of

pixels because M's work better for responsive design the grid system works the same way it did in bootstrap 3 and then you can specify multiple classes for each grid cell to specify exactly

how you want the page to resize at different widths in this web page you can see each grid size its behavior as I narrow the page width notice that the extra small grid system never collapses

while the other sized grids collapse at different points as was true in bootstrap 3 you can combine these breakpoints to see different numbers of columns at different dimensions gaining

more control over your website layouts with additional breakpoints is a he help particularly at these smaller sizes this is just one of the hot new features in bootstrap for be sure to sign up for

email notification when the new bootstrap for training title is released so you can learn everything there is to know about bootstrap for you