I have bootstrap 4 beta 3 installed in a Laravel 5.4 application by changing the package.json to use "bootstrap": "^4.0.0-beta", in place of the entry for loading v3 of bootstrap. I also modified the app.scss file and other locations to be sure to reference the bootstrap v4 files with respect to both css and js.
I am having an issue with in my header with an element that has the navbar-brand class applied to it with respect to it being the proper size. Upon inspecting that element I found that "font-size: 2;" was there and struck out as being invalid. Clicking the link to the css file I see this bit of css that clearly is missing the length not on the font-size value.
.navbar-brand {
display: inline-block;
padding-top: 0.18rem;
padding-bottom: 0.18rem;
margin-right: 1rem;
font-size: 2;
line-height: inherit;
white-space: nowrap;
}
So, is there something I missed, or is this just a case where this bets 3 is not ready yet?
In Bootstrap 4 beta 3 the default style of .navbar-brand
is as follows:
.navbar-brand {
display: inline-block;
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-padding-x;
font-size: $navbar-brand-font-size;
line-height: inherit;
white-space: nowrap;
/* @include hover-focus */
}
The value of $navbar-brand-font-size
is defined in the _variables.scss
file as:
$navbar-brand-font-size: $font-size-lg !default;
Where $font-size-lg
above is defined in the same file as:
$font-size-lg: ($font-size-base * 1.25) !default;
Finally, the default value of $font-size-base
is set to 1rem
with that:
$font-size-base: 1rem !default;
All of that compiles to font-size: 1.25rem;
by default, and this is the value that can be observed in the bootstrap.css file available from the official Bootstrap cdn.
So, I guess that this value gets overwritten somewhere in your code.