{"id":24783,"date":"2015-09-28T21:01:46","date_gmt":"2015-09-28T13:01:46","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24783"},"modified":"2020-09-30T20:40:12","modified_gmt":"2020-09-30T12:40:12","slug":"boostrap-4-best-features","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/","title":{"rendered":"Bootstrap 4: New &amp; Cool Features You&#8217;ll Love"},"content":{"rendered":"<p>The next major release of the Bootstrap framework is around the corner. The <a href=\"https:\/\/blog.getbootstrap.com\/2015\/08\/19\/bootstrap-4-alpha\/\" target=\"_blank\" rel=\"noopener noreferrer\">alpha version<\/a> can already be downloaded from Bootstrap\u2019s <a href=\"https:\/\/v4-alpha.getbootstrap.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">development website<\/a>, and the source code is also available on <a href=\"https:\/\/github.com\/twbs\/bootstrap\/tree\/v4-dev\" target=\"_blank\" rel=\"noopener noreferrer\">Github<\/a>.<\/p>\n<p><a href=\"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/\">Twitter Bootstrap<\/a> is currently the most popular frontend framework out there. It enables developers to <strong> build mobile-first and responsive websites, quickly<\/strong>. Bootstrap makes it possible to smartly make use of the standard HTML5, CSS3 and Javascript frontend trio. It\u2019s currently utilized by <a href=\"https:\/\/trends.builtwith.com\/docinfo\/Twitter-Bootstrap\" target=\"_blank\" rel=\"noopener noreferrer\">more than 6 million<\/a> sites on the web.<\/p>\n<p>Although Bootstrap 4 is still in the development phase (so don\u2019t use it on a live site yet), the developers have done a fabulous job. In this post we will take a look at the new version which includes many great features that will surely <strong>streamline and improve the frontend development workflow<\/strong>.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/bootstrap-alternatives\/\" class=\"ref-block__link\" title=\"Read More: 10 Lightweight Alternatives To Bootstrap & Foundation\" rel=\"bookmark\"><span class=\"screen-reader-text\">10 Lightweight Alternatives To Bootstrap & Foundation<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/bootstrap-alternatives.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-23177 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/bootstrap-alternatives.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">10 Lightweight Alternatives To Bootstrap & Foundation<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tChoosing the right framework that is the perfect fit for your projects could be a little bit overwhelming...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>1. Sass Instead of LESS<\/h2>\n<p>Until now Bootstrap has used LESS as its main <a href=\"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS prepocessor<\/a>, but for the new major release, the style rules will be refactored to Sass, which is much more popular among frontend developers, has a huge contributor base, generally easier to use and offers more possibilities.<\/p>\n<p>Thanks to the powerful <a href=\"https:\/\/github.com\/sass\/libsass\" target=\"_blank\" rel=\"noopener noreferrer\">Libsass Sass Complier<\/a> written in C\/C++ <strong>Bootstrap 4 will compile much faster<\/strong> than before.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/sass-vs-less.jpg\" alt=\"Sass Versus Less\"><\/figure>\n<h2>2. New Grid Tier for Smaller Screens<\/h2>\n<p>Bootstrap has a sophisticated responsive grid system that allows developers to target devices with different viewports. Bootstrap 3 currently has 4 grid classes for columns, .<em>col-xs-XX<\/em> for mobile phones, .<em>col-sm-XX<\/em> for tablets, .<em>col-md-XX<\/em> for desktops, and .<em>col-lg-XX<\/em> for larger desktops.<\/p>\n<p>Bootstrap 4 will enhance the grid system with a fifth one that will facilitate developers to <strong>target smaller devices under 480px viewport width<\/strong>.<\/p>\n<p>The new grid class has taken the name of the previous smallest one, and pushed the current names of the grid tiers upwards by one notch. In Bootstrap 4 the large desktops will use the<em><strong> .col-xl-XX <\/strong><\/em>class selector.<\/p>\n<p>It\u2019s important to know that despite the new name they didn\u2019t add a new class for extra large screens but for extra small ones.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/grid-system.jpg\" alt=\"Grid System\" width=\"700\" height=\"154\"><\/figure>\n<h2>3. Introduces Relative CSS Units<\/h2>\n<p>Bootstrap 4 finally drops the support for Internet Explorer 8. That\u2019s really a smart step as it allows them to get rid of pesky polyfills, and convert to relative <a href=\"https:\/\/www.hongkiat.com\/blog\/css-units\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS units<\/a>. Instead of pixels, the new major release will <strong>use REMs and EMs<\/strong> that make it possible to <strong>implement responsive typography<\/strong> on Bootstrap sites. This will also increase readability, and make sites more <a href=\"https:\/\/www.hongkiat.com\/blog\/accessibility-design-needs\/\">accessible for disabled users<\/a>.<\/p>\n<p>If you want to try out how relative units work with the new Bootstrap 4, check out <a href=\"https:\/\/codepen.io\/barssala\/pen\/vNEZwx\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">this demo<\/a> on Codepen.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/relative-units.jpg\" alt=\"Relative Units\" width=\"700\" height=\"243\"><\/figure>\n<h2>4. Brand New Bootstrap Cards<\/h2>\n<p>The development team decided to unify some previous elements of Bootstrap\u2019s user interface, so they decided to introduce a <strong>new UI component called Cards<\/strong>.<\/p>\n<p>Cards will replace the former wells, thumbnails and panels, and will provide users with a more streamlined workflow. Don\u2019t worry, cards will keep familiar elements, such as titles, headers and footers of wells, thumbnails and panels.<\/p>\n<p>As cards will be more flexible than the current UI components, they will allow a bigger space for creative implementations. There are some pioneers out there who have already conducted <a href=\"https:\/\/codepen.io\/search\/pens\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"> experiments<\/a> on Codepen with Bootstrap Cards. You can check them out, or create your own cards.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/bootstrap-cards.jpg\" alt=\"Bootstrap Cards\" width=\"700\" height=\"421\"><\/figure>\n<h2>5. New Reboot Module<\/h2>\n<p>The new Reboot module replaces the previous <strong>normalize.css<\/strong> reset file. It doesn\u2019t ditch it; on the contrary, it builds more rules upon it. The goal of the move was to include all generic CSS selectors and reset styles in a <strong>single, easy-to-use SCSS file<\/strong>.<\/p>\n<p>You can take a look at the source code <a href=\"https:\/\/github.com\/twbs\/bootstrap\/blob\/v4-dev\/scss\/_reboot.scss\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> if you want to better understand how the new module works.<\/p>\n<p>It\u2019s good to know that the new reset styles smartly set the box-sizing CSS property to <strong>border-box<\/strong> on the <code>&lt;html&gt;<\/code> element, which is therefore inherited by each child element on the page. The new style rule <strong>makes responsive layouts more manageable<\/strong>.<\/p>\n<p>If you want to experience the difference between the content-box and border-box layout types, take a look at this <a href=\"https:\/\/codepen.io\/team\/css-tricks\/pen\/970f26f621cfa3ae3eec7e2a6b0e8c97\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">handy demo<\/a> provided by <a href=\"https:\/\/css-tricks.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS-Tricks.com<\/a> (it wasn\u2019t created for Bootstrap 4, it just shows how box-sizing generally works).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/box-sizing.jpg\" alt=\"How Box Sizing Works\" width=\"700\" height=\"550\"><\/figure>\n<h2>6. Opt-in Flexbox Support<\/h2>\n<p>Bootstrap 4 makes it possible to take leverage of CSS3\u2019s <a href=\"https:\/\/www.w3.org\/TR\/css-flexbox-1\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Flexbox Layout<\/a>, however \u2013 as Internet Explorer 9 doesn\u2019t support the flexbox module \u2013 the default version of Bootstrap 4 rather <strong>makes use of the float and display CSS properties to implement a fluid layout<\/strong>.<\/p>\n<p>Flexbox has an easy-to-use layout that can be excellently utilized in responsive design, as it provides a flexible container that either expands or shrinks itself to fill the available space the best way. Only use the opt-in flexbox feature if you <em>don\u2019t<\/em> need to provide support for IE9.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/flexbox.jpg\" alt=\"Flexbox\" width=\"700\" height=\"380\"><\/figure>\n<h2>7. Streamlined Variable Customization<\/h2>\n<p>All Sass variables used in the new Bootstrap release are included in a single file called <a href=\"https:\/\/github.com\/twbs\/bootstrap\/blob\/v4-dev\/scss\/_variables.scss\" target=\"_blank\" rel=\"noopener noreferrer\">_variables.scss<\/a>, that will significantly streamline the development process. You don\u2019t have to do anything else apart from copying the settings from this file into another one called <strong>_custom.scss<\/strong> to change the default values.<\/p>\n<p>You can <strong>customize many things<\/strong> such as colours, spacing, link styles, typography, tables, grid breakpoints and containers, column number and gutter width, and many others.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/customize.jpg\" alt=\"Customize Variables\" width=\"700\" height=\"181\"><\/figure>\n<h2>8. New Utility Classes for Spacing<\/h2>\n<p>Bootstrap 3 already has many practical utility classes such as the ones that change floating or the clearfix, but Bootstrap 4 adds even more. The <strong>new spacing classes<\/strong> allow developers to quickly change paddings and margins on their sites.<\/p>\n<p>The syntax for the new classes is quite straightforward, for example adding the .<em>m-a-0 class<\/em> links a style rule that <strong>sets margins to 0 on all sides of the given element (margin-all-0).<\/strong> While margins use the <em>m- <\/em>prefix, paddings are styled with the <em>p- <\/em>prefix. In the <a href=\"https:\/\/getbootstrap.com\/docs\/4.1\/getting-started\/introduction\/\" target=\"_blank\" rel=\"noopener noreferrer\">development docs<\/a> you can take a look at all the new spacing utility classes.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/spacing-utility-classes.jpg\" alt=\"Spacing Utility Classes\" width=\"700\" height=\"204\"><\/figure>\n<h2>9. Tooltips and Popovers Powered By Tether<\/h2>\n<p>In Bootstrap 4 tooltips and popovers makes use of the supercool <a href=\"https:\/\/github.com\/shipshapecode\/tether\" target=\"_blank\" rel=\"noopener noreferrer\">Tether library<\/a>, a positioning engine that makes it possible to keep an absolutely positioned element right next to another element on the same page. This means tooltips and popovers <strong>will be automatically placed properly<\/strong> on Bootstrap 4 websites.<\/p>\n<p>Don\u2019t forget that as Tether is a third party JavaScript library, you need to separately include it in the HTML before your bootstrap.js file.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/tether.jpg\" alt=\"Tether JavaScript Library\" width=\"700\" height=\"423\"><\/figure>\n<h2>10. Refactored JavaScript Plugins<\/h2>\n<p>The development team refactored each JavaScript plugin for the new release using <a href=\"https:\/\/github.com\/rse\/es6-features\" target=\"_blank\" rel=\"noopener noreferrer\"> EcmaScript 6<\/a>. With the smart utilization of the latest specificatons and the newest enhancements they intend to improve the frontend experience.<\/p>\n<p>The new Bootstrap 4 has also undergone through other JavaScript improvements, such as <strong>option type checking<\/strong>,<strong> generic teardown methods<\/strong>, and<strong> UMD support<\/strong>, that will all work together to make the most popular frontend framework run more smoothly than ever before.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/run-smoothly.jpg\" alt=\"Enhancements\" width=\"700\" height=\"466\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>The next major release of the Bootstrap framework is around the corner. The alpha version can already be downloaded from Bootstrap\u2019s development website, and the source code is also available on Github. Twitter Bootstrap is currently the most popular frontend framework out there. It enables developers to build mobile-first and responsive websites, quickly. Bootstrap makes&hellip;<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[2289],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Bootstrap 4: New &amp; Cool Features You&#039;ll Love - Hongkiat<\/title>\n<meta name=\"description\" content=\"The next major release of the Bootstrap framework is around the corner. The alpha version can already be downloaded from Bootstrap&#039;s development website,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap 4: New &amp; Cool Features You&#039;ll Love\" \/>\n<meta property=\"og:description\" content=\"The next major release of the Bootstrap framework is around the corner. The alpha version can already be downloaded from Bootstrap&#039;s development website,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-28T13:01:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-30T12:40:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/sass-vs-less.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/boostrap-4-best-features\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/boostrap-4-best-features\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"Bootstrap 4: New &amp; Cool Features You&#8217;ll Love\",\"datePublished\":\"2015-09-28T13:01:46+00:00\",\"dateModified\":\"2020-09-30T12:40:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/boostrap-4-best-features\\\/\"},\"wordCount\":1111,\"commentCount\":23,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/boostrap-4-best-features\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/boostrap-4-best-features\\\/sass-vs-less.jpg\",\"keywords\":[\"Bootstrap\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/boostrap-4-best-features\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/boostrap-4-best-features\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/boostrap-4-best-features\\\/\",\"name\":\"Bootstrap 4: New &amp; Cool Features You'll Love - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/boostrap-4-best-features\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/boostrap-4-best-features\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/boostrap-4-best-features\\\/sass-vs-less.jpg\",\"datePublished\":\"2015-09-28T13:01:46+00:00\",\"dateModified\":\"2020-09-30T12:40:12+00:00\",\"description\":\"The next major release of the Bootstrap framework is around the corner. The alpha version can already be downloaded from Bootstrap's development website,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/boostrap-4-best-features\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/boostrap-4-best-features\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/boostrap-4-best-features\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/boostrap-4-best-features\\\/sass-vs-less.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/boostrap-4-best-features\\\/sass-vs-less.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/boostrap-4-best-features\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap 4: New &amp; Cool Features You&#8217;ll Love\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bootstrap 4: New &amp; Cool Features You'll Love - Hongkiat","description":"The next major release of the Bootstrap framework is around the corner. The alpha version can already be downloaded from Bootstrap's development website,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap 4: New &amp; Cool Features You'll Love","og_description":"The next major release of the Bootstrap framework is around the corner. The alpha version can already be downloaded from Bootstrap's development website,","og_url":"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-09-28T13:01:46+00:00","article_modified_time":"2020-09-30T12:40:12+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/sass-vs-less.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"Bootstrap 4: New &amp; Cool Features You&#8217;ll Love","datePublished":"2015-09-28T13:01:46+00:00","dateModified":"2020-09-30T12:40:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/"},"wordCount":1111,"commentCount":23,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/sass-vs-less.jpg","keywords":["Bootstrap"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/","url":"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/","name":"Bootstrap 4: New &amp; Cool Features You'll Love - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/sass-vs-less.jpg","datePublished":"2015-09-28T13:01:46+00:00","dateModified":"2020-09-30T12:40:12+00:00","description":"The next major release of the Bootstrap framework is around the corner. The alpha version can already be downloaded from Bootstrap's development website,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/sass-vs-less.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/boostrap-4-best-features\/sass-vs-less.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bootstrap 4: New &amp; Cool Features You&#8217;ll Love"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6rJ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24783","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=24783"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24783\/revisions"}],"predecessor-version":[{"id":52429,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24783\/revisions\/52429"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=24783"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=24783"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=24783"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=24783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}