CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
pankaj jha
pankaj jha

Reputation: 49

Bootstrap-4.0.0 how li will align in right corner

I am using B-4.0.0 this is very irritating I used almost all class which use in the document but text can't align in right corner this is very irritating please if anyone have a solution of these rearrange class give me the list it is very confusing to me

   <!DOCTYPE html>
    <html lang="">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <title>Hipstrify.io</title>
        
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        
    </head>
    
    <body>
       <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-default ">
       
       <div id="container"> 
       <div class="navbar-header">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
           
        <span class="sr-only">Toggle navigation</span><span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
          
          <span class="icon-bar"></span>
          
          <span class="icon-bar"></span>
           </button> 
           
          <a class="navbar-brand" href="index.html">HIpstrify.io</a>
          
           
           
       </div>
       
       <div class="collapse  navbar-collapse " id="navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="active "> <a href="">Home</a></li>
            
            <li> <a href="">About</a></li>
            
            <li> <a href="">Our Team</a></li>
            <li> <a href="">Contact</a></li>
            
            
        </ul>
           </div>
           
       </div>
       
       
    
    
         </nav>
      
       <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" > </script>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
       </body>   
          
    </html>

Upvotes: 1

Views: 49

Answers (1)

mooga
mooga

Reputation: 3307

First in you code snippet you used id="container" and that's needs to be class="container"

Then I have added the css position:absolute to the navbar-brand

it will be always into right top because container is relative

   <!DOCTYPE html>
    <html lang="">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <title>Hipstrify.io</title>
        
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
          .navbar-brand {
            position:absolute;
            right:0;
            top:0;
          }
        </style>
    </head>
    
    <body>
       <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-default ">
       
       <div class="container"> 
       <div class="navbar-header">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
           
        <span class="sr-only">Toggle navigation</span><span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
          
          <span class="icon-bar"></span>
          
          <span class="icon-bar"></span>
           </button> 
           
          <a class="navbar-brand" href="index.html">HIpstrify.io</a>
          
           
           
       </div>
       
       <div class="collapse  navbar-collapse " id="navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="active "> <a href="">Home</a></li>
            
            <li> <a href="">About</a></li>
            
            <li> <a href="">Our Team</a></li>
            <li> <a href="">Contact</a></li>
            
            
        </ul>
           </div>
           
       </div>
       
       
    
    
         </nav>
      
       <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" > </script>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
       </body>   
          
    </html>

Upvotes: 1

Related Questions