sidebar & navbar are broken in Dashboard example

[bhutaninitin]

The sidebar in http://v4-alpha.getbootstrap.com/examples/dashboard/ does not display like the way it is shown in the screenshot.

Thanks,
Nitin

[bhutaninitin]

the navbar is also broken

[AdrianoCahete]

Everything is broken.

[tshinnic]

Some notes on the apparent display differences btw v3 and v4-dev recent ... See the end of note for screenshots.

The note in #17870 that the navbar is not changing vertical/toggleable style in mobile sizes is still present.

Balloons

Due to problems with v3 demo paths (#16699) change 079c35f dummied out the pretty balloons. But now in v4 _gh_pages correctly has the holder.min.js module located in /_gh_pages/assets/js/vendor/ so we can re-enable balloons. I'll submit a PR for that.

.navbar item alignment

In the v4 /examples/dashboard/index.html the alignment usage was changed from .pull-right to .pull-left. Perhaps this was temporary while working on navbar margins. Experimentally changing the .html as below made the appearance agree with the cited v3 jpg.

    -        <nav class="nav navbar-nav pull-left">
    -          <a class="nav-item nav-link" href="#">Dashboard</a>
    +        <nav class="nav navbar-nav pull-right">
    +          <a class="nav-item nav-link" href="#"style="margin-left: 1rem;">Dashboard</a> 

text sizes

As an aside, text sizes have changed with the move to rem sizing. For this example, from v3 to v4-dev:

• font-size: 14px --> 16px
• line-height: 20px --> 24px

This is perhaps a minor appearance effect that still will cause some freakout without reminders in the migration doc?

brand text color

A minor gotcha relates to the .navbar-brand text color change. In v3 it was muted by default but in v4 it defaults to 'white'. Attempting to apply .text-muted to the .html by changing
<a class="navbar-brand" href="#">Project name</a>
to
<a class="navbar-brand text-muted" href="#">Project name</a>
just did not work. The brand text was still white. Changing to

      <a class="navbar-brand" href="#">
        <span class="text-muted">Project name</span>
      </a>

did change the brand text to the muted gray.

v3 had the text color for brands as color: #9d9d9d; while v4-dev bootstrap.css has:

    3713 .navbar-dark .navbar-brand {
    3714   color: white;
    3715 }

    5625 .text-muted {
    5626   color: #818a91;
    5627 }

I assume that the CSS specificity weight of the first rule is why the .text-muted is overruled when used on the same element.

I could possibly wonder whether or not the very specific text modifications and other such single modifier rules should be using !important. Just as these rules already use !important:

    5483 .pull-right {
    5484   float: right !important;
    5485 }

    5511 [hidden] {
    5512   display: none !important;
    5513 }

    5723 .m-a-0 {
    5724   margin: 0 !important;
    5725 }

could it be argued that these and similar rules are 'important' too?:

    5625 .text-muted {
    5626   color: #818a91;
    5627 }

    5653 .text-warning {
    5654   color: #f0ad4e;
    5655 }

sidebar nav item spacing

It seems that currently v4-dev lacks a rule found in v3 bootstrap.css:

    3981 .nav > li > a {
    3982   position: relative;
    3983   display: block;
    3984   padding: 10px 15px;
    3985 }

Jamming that rule into the stylesheets then produces vertical spacing much closer to the v3 example display. Is this just more navbar work not yet completed?

.
Navbar work is still in progress, but I wanted to tie down apparent causes of current display differences so it wouldn't look so much like "everything is broken". 😃
.

v3 dashboard example .jpg

v4-dev recent with experimental changes

v4-dev recent (w/o any changes)