Working Angular NavBar not working after Bootstrap upgrade 3 to 4

Question

I have a simple working NavBar developed in Angular4 with Bootstrap 3.3.7. When I try to upgrade to Bootstrap 4 (either 4.0.0-beta or 4.0.0-alpha.6) the NavBar is simply no

Answer 1

The reason why your navbar is not displaying is because Bootstrap 4 is almost a complete rewrite of Bootstrap 3. In other words, the two versions are completely incompatible.

Here's an example of a basic navbar structure and components in Bootstrap 4:

  Navbar
  
    
  

  

    

      

        Home (current)
      
      

        Link
      
      

        
          Dropdown
        
        

          Action
          Another action
          

          Something else here
        
      
      

        Disabled
      
    
    

      
      Search
    
  

Also notice the various JavaScript components below. Those are essential to make the navbar work. Make sure you load them. In that order.

For your specific navbar the HTML would be this:

   

       NavbarBrand
       
           
       

       

           

               

                   Messages
               
               

                   Transformations
               
               

                   Actions
               
               

                   Rules
               
           
       
   

P.S. You should avoid using the container-fluid class for navbars because users on wide 4K screens will be mad at you. Use container instead (as shown in my last snippet).