CODEWITHSUNDEEP
twitter-bootstrappug
Dercni
Dercni

Reputation: 1224

Bootstrap navbar badges using Jade

I am trying to get badges displayed in the navbar using Jade/Pug.

What I see is instead of a "4" in a badge I see "<4>" in a badge.

Ref: https://webdesign.tutsplus.com/tutorials/baking-bootstrap-snippets-with-jade--cms-22798

nav.navbar.navbar-default( role="navigation" )
    .navbar-header
        button.navbar-toggle.collapsed( type="button", data-toggle="collapse", data-target="#navbar-inverse", aria-expanded="false", aria-controls="navbar")
            span.sr-only Toggle navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
        a.navbar-brand(href="#") Project name

    #navbar-inverse.collapse.navbar-collapse
        ul.nav.navbar-nav
            li.active: a( href="#") Home
            li: a( href="#about" ) About
            li: a( href="#contact" ) Contact
            li: a( href="#unknown" ) Points
              span.badge.badge-important
                4
            li.dropdown
                a.dropdown-toggle( href="#", data-toggle="dropdown", role="button", aria-expanded="false" ) Dropdown 
                    span.caret
                ul.dropdown-menu( role="menu" )
                    li: a( href="#" ) Action
                    li: a( href="#" ) Another action
                    li: a( href="#" ) Something else here
                    li.divider
                    li.dropdown-header Nav header
                    li: a( href="#" ) Separated link
                    li: a( href="#" ) One more separated link

Upvotes: 0

Views: 1680

Answers (1)

Fran&#231;ois-Xavier Aeberhard
Fran&#231;ois-Xavier Aeberhard

Reputation: 622

Put it all on 1 line, e.g. ´span.badge.badge-important 4´

Upvotes: 1

Related Questions