content-box<\/strong> model which is often the default.<\/p>\n*::before,\r\n *::after {\r\n box-sizing: border-box;\r\n }<\/pre>\nThe box-sizing<\/strong> property determines how browsers calculate width and height of HTML elements with respect to padding and borders. The turning point is that with the border-box<\/strong> all over the place, when you set a width or height of X pixels, it\u2019s going to be X pixels regardless of borders and padding. In the content-box<\/strong> model, instead, the set height or width applies only to content. Subsequently, if you set an element to 100% of width and then add some padding, you get into trouble.<\/p>\nAnother relevant aspect of Bootstrap 4 reboot is the use of REM units for measures. In CSS, to size fonts or spaces you can indicate explicitly the required number of pixels or indicate a relative measurement. If you use EM, then the value you set is a percentage of the size of the direct parent. If you use REM, instead, it is relative to the HTML root. REM units are as good for accessibility and consistency as EM units are, but they make maintenance much simpler as you need to adapt sizes in just one place, and everything else automatically adjusts.<\/p>\n
Bootstrap 4 also picks up whatever font is defaulted for the current operating system ensuring zero load time for the font, while showing users the same font they\u2019re used to on that browser. Other smaller but still sensible changes are the removal of margin top on paragraph and text elements (i.e, H1, H2, P, UL) and basic simple styles assigned to those HTML elements (TABLE, FORM) that often need to be styled in a particular way for graphical purposes.<\/p>\n
Layout and Grid System<\/h2>\n
Bootstrap conquered the developer\u2019s heart by introducing a grid system and predefined responsive breakpoints. Over the years, though, the number of breakpoints proved not always appropriate for the vast majority of cases. In particular, the XS breakpoint set to 768 pixels was way too large to effectively represent content tailormade for smartphones and other smaller devices. In Bootstrap 4, a fifth breakpoint has been added at the width of 576 pixels.<\/p>\n
\/\/ XS - Small devices (phones) \r\n @media (max-width: 575px) { ... }\r\n \r\n\/\/ SM - Small devices (mini-tablets, large smartphones) \r\n @media (min-width: 576px) { ... }\r\n \r\n\/\/ MD - Medium devices (tablets) \r\n @media (min-width: 768px) { ... }\r\n \r\n\/\/ LG Large devices (desktop computers) \r\n @media (min-width: 992px) { ... }\r\n \r\n\/\/ XL - Extra-large devices (large desktops) \r\n @media (min-width: 1200px) { ... }<\/pre>\nResponsive breakpoints are used to determine how many columns will fit in the available space. Also, in Bootstrap 4, columns are arranged within containers. A container is a DIV<\/strong> styled with an ad hoc class. A container is required only when you intend to use the default grid system.<\/p>\n<div class=\"container\">\r\n <!-- Some content here -->\r\n <\/div>\r\n <div class=\"container-fluid\">\r\n <!-- Some content here -->\r\n <\/div><\/pre>\nThe difference between container<\/strong> and container-fluid<\/strong> is the same as in previous versions of Bootstrap. Fluid containers span their content through the full width of the viewport. If your browser window is, for example, somewhere in between LG and XL (say, 1100 pixels) then a basic container will only use 992 pixels, while a fluid container will use all the available space.<\/p>\nDefining a Navigation Bar<\/h2>\n
To quickly figure out what\u2019s different in Bootstrap 4, before listing some more display and style utility classes, let\u2019s see how you change a canonical navigation bar from any code you may have that works well in earlier versions. In Bootstrap 3.x, you might have the following:<\/p>\n
<nav class=\"navbar navbar-inverse navbar-fixed-top\">\r\n<\/nav><\/pre>\nThat\u2019s just the outermost container\u2014a NAV<\/strong> or a DIV<\/strong> element. Note that a NAV<\/strong> is preferable for accessibility reasons. Except for navbar<\/strong>, the other classes have been renamed. Renaming is common and widespread in Bootstrap 4 and, at the end of the day, the best and quickest thing you can do is just looking at what Visual Studio and ReSharper suggest is wrong with your CSS classes. I find that the approach of pouring some 3.x code into a 4.0 template and fixing what appears to be no longer supported works nicely. If, instead, you are building some completely new artifact, then looking into some snippet repository or going through the documentation is effective as well. The documentation, though, seems effective only if you know what you\u2019re looking for.<\/p>\nHere\u2019s the same navigation bar\u2014dark-colored and fixed at the top of the viewport\u2014as it appears in Bootstrap 4.<\/p>\n
<nav class=\"navbar fixed-top navbar-expand-lg navbar-dark bg-dark\">\r\n <\/nav><\/pre>\nAs you can see, navbar-inverse<\/strong> has been renamed to navbar-dark<\/strong> and bg-dark<\/strong> has been added to the list of system classes for background colors. Interestingly, you need both classes because navbar-dark<\/strong> now only sets the foreground color while bg-dark<\/strong> takes care of the background. However, you should note that while the name bg-dark<\/strong> contains a direct reference to the tone (dark) of the color for the background, navbar-dark<\/strong> indirectly refers to the text color that is most appropriate\u2014given the Bootstrap color scheme\u2014for a dark background.<\/p>\n.navbar-dark\u00a0.navbar-brand\u00a0{\r\n \u00a0\u00a0color:\u00a0#fff;\r\n }\r\n .navbar-dark\u00a0.navbar-nav\u00a0.nav-link\u00a0{\r\n \u00a0\u00a0color:\u00a0rgba(255,\u00a0255,\u00a0255,\u00a00.5);\r\n }<\/pre>\nAs you can see, navbar-dark alone doesn\u2019t count but it disambiguates the foreground color settings for other classes such as navbar-brand<\/strong>, nav-link<\/strong> and the like.<\/p>\nTo stick the navigation bar to the top of the viewport, you now use the fixed-top<\/strong> class instead of navbar-fixed-top<\/strong>. In both cases, you should manually guarantee that any other content in the body of a page with a fixed-top navigation bar doesn\u2019t get covered. This means that you probably need to give a margin to any other content to ensure it shows just below the bar.<\/p>\nStill speaking of navbars stuck to the top, it is worth noting the difference between fixed-top<\/strong> and sticky-top<\/strong>. When the latter style is set, the bar is not initially forced to the top, but when the user scrolls up it moves with it and sticks at the top, as in the figure below.<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/03\/word-image-136.png\")
<\/p>\n
Let\u2019s have a look at the internal implementation of the sticky-top class.<\/p>\n
.sticky-top {\r\n position: -webkit-sticky;\r\n position: sticky;\r\n top: 0;\r\n z-index: 1020;\r\n }<\/pre>\nAs you can see, it leverages the attribute sticky<\/strong> of the position element. This attribute is not supported by all browsers? According to https:\/\/caniuse.com\/#feat=css-sticky<\/strong>, it is not supported by any version of Internet Explorer and is partially supported by most versions of Chrome because of still pending bugs.<\/p>\nA navigation bar can be hidden when the size of the screen becomes too small. You control when the bar collapses by using the navbar-expand-XX<\/strong> class, where XX<\/strong> is the code of any of the supported breakpoints (SM, MD, etc). The following picture shows the effect of the markup below.<\/p>\n<nav class=\"navbar navbar-expand-sm navbar-dark bg-dark fixed-top\"><\/pre>\n <\/p>\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/03\/word-image-137.png\")
<\/p>\n
The navbar-expand-sm<\/strong> class used in the code snippet sets the collapse status of the navigation bar across the border of the XS\/SM breakpoint. As discussed earlier, the XS\/SM breakpoint is set at 576 pixels. The screenshot on the left is taken at a viewport width of 577 pixels when the Bootstrap grid is in SM mode and the navigation bar is well visible. The screenshot on the right presents the same page 575 pixels wide and the navigation bar is hidden because the Bootstrap grid system switched to XS mode. In other words, if the navigation bar is collapsible then it always shows as collapsed unless you use a navbar-expand-XX<\/strong> class and the XX<\/strong> class sets when the bar expands and shows up.<\/p>\nA Collapsible Navigation Bar<\/h2>\n
A NAV element is meant to be collapsible if it contains a toggler button and a collapsible container. Here\u2019s some sample markup.<\/p>\n
<nav class=\"navbar navbar-expand-sm navbar-dark bg-dark fixed-top\">\r\n <button class=\"navbar-toggler\" type=\"button\" \r\n data-toggle=\"collapse\" data-target=\"#dropdownNavbar\">\r\n <span class=\"navbar-toggler-icon\"><\/span>\r\n <\/button>\r\n <div class=\"collapse navbar-collapse\" id=\"dropdownNavbar\">\r\n <!-- Content of the collapsible bar -->\r\n <\/div>\r\n <\/nav><\/pre>\n <\/p>\n
The navbar-collapse<\/strong> class makes some content collapsible under the control of the toggler button and the parent navbar. The link between the toggler button and a specific collapse area is set via the data-target<\/strong> attribute.<\/p>\nSummary<\/h2>\n
Most pages that work nicely with Bootstrap 3.x will work with Bootstrap 4, but the switch might not be painless. More likely, instead, it will require that you spend some time to figure out how they renamed just that class you used or in which way the technique you used must be coded in the new version.<\/p>\n
At the same time, though, you will often experience a sort of jaw-dropping experience when you find out that just the class you crafted yourself or found boring to code repeatedly with plain CSS styles is now available at a much higher level of abstraction right out of the box.<\/p>\n
Bootstrap 4 is much more expressive and function rich than the previous version for the obvious reason that it was designed to be so. That said, I would definitely use it in any new projects but consider using it on existing projects only on small segments, even individual views, and only with a good evidence of benefits.<\/p>\n","protected":false},"excerpt":{"rendered":"
Bootstrap is a popular open source tool for developing HTML and CSS. Version 4 has recently been released. Dino Esposito explains some of the differences between Bootstrap 3 and Bootstrap 4 when developing navigation bars.…<\/p>\n","protected":false},"author":221911,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[143538],"tags":[95509],"coauthors":[6780],"class_list":["post-77900","post","type-post","status-publish","format-standard","hentry","category-dotnet-development","tag-standardize"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/77900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/221911"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=77900"}],"version-history":[{"count":12,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/77900\/revisions"}],"predecessor-version":[{"id":77914,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/77900\/revisions\/77914"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=77900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=77900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=77900"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=77900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}