twitter-bootstrap-4-beta

Is Bootstrap 4 beta 3 missing some length units or did I do something wrong?


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?


Solution

  • 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.