In this section, we will reimplement the graphic editor introduced in the Organizing your project structure with Sass section with Bootstrap 4 (https://v4-alpha.getbootstrap.com) and PrimeNG components. Starting with the version v4.0.0-alpha.6, Bootstrap only has a flexbox-based layout by default, with no fallback.
Flexbox is a new layout model, which is widely supported in all modern browsers (http://caniuse.com/#search=flexbox). There are many tutorials on the Internet. You can, for example, read a comprehensive guide to the CSS flexbox layout at https://css-tricks.com/snippets/css/a-guide-to-flexbox. Flexbox tackles many layout problems. One of the main advantages of flexbox is the ability to fill extra space. All columns in the flexbox layout have the same height irrespective of their content. Let's show final screens of the graphic editor for two device resolutions.
For desktop:
For mobile:
Beside PrimeNG, we need to install the latest...
