1

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?

StevenHill
  • 320
  • 3
  • 8

1 Answers1

0

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.

dferenc
  • 7,918
  • 12
  • 41
  • 49
  • I had not defined $font-size-lg, but doing so in my _variables.sccs file fixed this for me, so now I know where to look if any others come up. Thanks! – StevenHill Jan 17 '18 at 14:35