At first I am going to tell what is Bootstrap and what for this is used. Bootstrap is basically a css framework i.e. front-end component library which build responsive, mobile-first projects on the web.<\/p>\n
It is also an open source toolkit for developing with HTML, CSS, and JS to build entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.<\/p>\n
The new Bootstrap beta version is almost complete version for usage and \u00a0it\u2019s components that need Popper.js as dependency.<\/p>\n
![\"image](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/10\/img1.png\")
<\/p>\n
It is required as because<\/p>\n
- \n
- Tooltips rely on the 3rd party library Popper.js for positioning.<\/li>\n
- Popovers rely on the 3rd party library Popper.js for positioning.<\/li>\n
- Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection.<\/li>\n<\/ul>\n
So these are the Bootstrap 4 components that need Popper.js.<\/p>\n
Though Popper.js is stated as required for Bootstrap 4, and Bootstrap 4 JS logs an error if it can’t find Popper,\u00a0you can still use Bootstrap 4 JS without Popper, if you don’t need tooltips, popovers nor dropdowns and Bootstrap modals also require Popper.js.<\/strong><\/p>\n
<\/p>\n
Grid System<\/em><\/a><\/strong><\/h4>\n
Bootstrap\u2019s grid system uses a series of containers, rows, and columns to layout and align content. It\u2019s built with\u00a0flexbox<\/a>\u00a0and is fully responsive. Below is an example and an in-depth look at how the grid comes together.<\/p>\n
![\"image](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/10\/img2.png\")
<\/p>\nThe above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent\u00a0<\/span>
.container<\/span><\/code>.<\/span> This is called flexbox design.<\/span><\/p>\n\u00a0<\/span><\/p>\n
While Bootstrap uses\u00a0<\/span>
em<\/span><\/code>s or\u00a0<\/span>rem<\/span><\/code>s for defining most sizes,\u00a0<\/span>px<\/span><\/code>s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.<\/span><\/p>\nSee how aspects of the Bootstrap grid system work across multiple devices with a handy table.<\/span><\/p>\n
![\"image](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/10\/img3.png\")
<\/p>\nHere \u2013xs- class is deleted and new \u2013xl- class has been added for extra large screens.<\/span><\/p>\n
Auto width with columns with equal width<\/strong><\/p>\n
For example, here are two grid layouts that apply to every device and viewport, from\u00a0<\/span>
xs<\/span><\/code>to\u00a0<\/span><\/span>xl<\/span><\/code>. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.<\/span> <\/span><\/p>\n![\"image](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/10\/img4.png\")
<\/p>\n<\/h4>\n
<\/p>\n
Cards<\/strong><\/em><\/a><\/h4>\n
<\/p>\n
Cards\u00a0replace Bootstrap 3’s old\u00a0panels\u00a0and\u00a0wells. Cards are defined as\u00a0a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.<\/em><\/p>\n
They’re essentially individual content blocks with a ton of out-of-the-box options.<\/p>\n
The big thing to take away here is you get a ton of new component options to basically build these little card blocks however you want.<\/p>\n
This works both with Flexbox and the default grid mode. If you’re using Flex Box, the cards are built using Flex Box properties. If you’re using the default grid, they’re actually using a CSS trick to avoid the need for JS. The container uses\u00a0display: table;\u00a0and each “card” is\u00a0display: table-cell;\u00a0making it have table properties (aka, equal column heights).<\/p>\n
<\/p>\n
New Reset Component called Reboot.css<\/strong><\/em><\/a><\/h4>\n
<\/p>\n
Previously, Bootstrap used\u00a0Normalize.css\u00a0as its CSS reset. Normalize is awesome and well-respected. With Bootstrap 4, they actually just take normalize.css, and add some Bootstrap things to it.<\/p>\n
In layman’s terms, they combined their reset and base styles into a single file. This is useful because eventually you could essentially use just\u00a0reboot.css\u00a0on it’s own.<\/p>\n
<\/p>\n
Sass Variables for Customizing<\/span><\/span><\/strong><\/em><\/a><\/h4>\n
<\/p>\n
Everything with Bootstrap 4 is about customizing – maybe more than any other version before. They’ve consolidated all the variable options to a single file where you can compile your Sass on the fly and with little effort. This used be all previously done in a separate style sheet.<\/p>\n
There’s also a bunch of brand new customization options. They may streamline the process further to a different file.<\/p>\n
You can custom things like:<\/p>\n
- \n
- Colors<\/li>\n
- Options (Flex Box, transitions, rounded, shadows, etc.)<\/li>\n
- Spacing<\/li>\n
- Body (defaults)<\/li>\n
- Link Styles<\/li>\n
- Grid Breakpoints<\/li>\n
- Grid Containers<\/li>\n
- Grid Columns<\/li>\n
- Typography<\/li>\n
- Components<\/li>\n
- Tables<\/li>\n
- And more…<\/li>\n<\/ul>\n
<\/p>\n
Dropped IE8 Support<\/span><\/span><\/strong><\/em><\/a><\/h4>\n
<\/p>\n
IE8 support was dropped. Dropping support for IE8 means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks. It also means that the maintainers can focus on new technologies and pushing forward.<\/p>\n
It’s currently unclear if there will be a partial support with a\u00a0HTML5 shiv\u00a0and\u00a0respond.js\u00a0or not. It seems though that if you need Internet Explorer 8 support, you’ll have to stick to using Bootstrap 3.<\/p>\n
<\/p>\n
Inverse Tables<\/span><\/span><\/strong><\/em><\/a><\/h4>\n
<\/p>\n
Tables now have an added\u00a0table-inverse\u00a0class for having another variation of a table. It’s definitely a nice to have.<\/p>\n
<\/p>\n
New Outline Buttons<\/span><\/span><\/strong><\/em><\/a><\/h4>\n
<\/p>\n
Bootstrap 4 has added some new button styles with “Outline Buttons”. Outline Buttons appear hollow or are simply inverses of a regular button.<\/p>\n
The classes for them are:<\/p>\n
Primary<\/em><\/p>\n
Secondary<\/em><\/p>\n
Success<\/em><\/p>\n
Warning<\/em><\/p>\n
Danger<\/em><\/p>\n
<\/p>\n
Glyphicons are dropped<\/strong><\/em><\/h4>\n
<\/p>\n
Bootstrap 4 also dropped Glyphicon support. And recommended for using\u00a0FontAwesome<\/a><\/p>\n
<\/p>\n
Introduces new Spacing Utility Classes<\/strong><\/em><\/a><\/h4>\n
<\/p>\n
Another cool feature that was added is spacing utility classes. Spacing utility classes allow you to quickly add spacing in any direction via\u00a0margin\u00a0or\u00a0padding\u00a0using a utility class.<\/p>\n
For\u00a0Margin or Padding<\/strong> \u00a0use:<\/p>\n
- \n
- “m” for margin<\/li>\n
- “p” for padding<\/li>\n<\/ul>\n
For\u00a0direction<\/strong>, you can use:<\/p>\n
- \n
- “a” for all<\/li>\n
- “t” for top<\/li>\n
- “r” for right<\/li>\n
- “l” for left<\/li>\n
- “x” for left and right<\/li>\n
- “y” for top and bottom<\/li>\n<\/ul>\n
For\u00a0sizes<\/strong>, you can use:<\/p>\n
- \n
- “0” for zero<\/li>\n
- Leave Blank for default<\/li>\n
- “auto” for Auto<\/li>\n
- “md” for Medium<\/li>\n
- “lg” for Large<\/li>\n<\/ul>\n
Example :<\/strong><\/p>\n
<div class=”w-100″><\/div><\/em> = The div width is 100%<\/p>\n
<div class=\u201dmr-3\u201d><\/div><\/em> =\u00a0 margin right is 1 rem i.e. 16px<\/p>\n
<div class=\u201dmt-3\u201d><\/div><\/em> =\u00a0 margin top is 0<\/p>\n
<div class=\u201dbg-light\u201d><\/div><\/em> =\u00a0 Backgrounf color is light grey<\/p>\n
And much more..<\/p>\n
<\/p>\n
You can check and explore the whole Bootstrap docs for more on http:\/\/getbootstrap.com\/<\/a><\/p>\n
Please share if you like it!<\/p>\n