bootstrap 4 inline form position of the input boxes

Viewed 1654

I am new in bootstrap in general but try to understand it. I have a log in form as you see int he below picture. I managed to change the input boxes width but I could not manage to move both of the text boxes close to "remember me" check box,

enter image description here

basically I want to make the place of the textboxes as the below image ( I did it in windows paint to show! ). enter image description here

Here is the body codes that I used :

  <body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
   <a class="navbar-brand" href="/">Test</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarCollapse">
     <ul class="navbar-nav mr-auto ">
       <li class="nav-item">
         <a class="nav-link" href="test1.html">Services</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="test2.html">Contact</a>
       </li>
     </ul>

     <ul class="navbar-nav ml-auto ">
       <li class="nav-item">

         <form class="form-inline">
           <label class="sr-only" for="inlineFormInput">Name</label>
           <input type="text" class="form-control-sm col-2 mb-0 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Username">

           <label class="sr-only" for="inlineFormInputGroup">Username</label>
           <div class="input-group mb-2 mr-sm-0 mb-sm-0">
             <input type="password" class="form-control-sm col-6  mr-sm-2" id="inlineFormInputGroup" placeholder="Password">
           </div>

           <div class="form-check mb-2 mr-sm-2 mb-sm-0">
             <label class="form-check-label">
               <input class="form-check-input" type="checkbox"> Remember me
             </label>
           </div>

           <button type="submit" class="btn btn-primary">Submit</button>
         </form>
       </li>
     </ul>
   </div>
 </nav>
</body>

Thanks!

1 Answers
Related