Simple bootstrap Navbar that doesn't collapse and has button to right

Question

New to bootstrap, I'm using Bootstrap 4 alpha 6 and I'm struggling to set up a simple navbar. I want the brad on the left and a simple button on the right. I've looked at the documentation and can't seem to solve my issue. I know it has something to do with mr-auto or something similar. I've tried float-right, but that doesn't work. My button just sits below the brand on the left. here's my code....

 <nav class="navbar navbar-light bg-faded">

  <a class="navbar-brand" href="#">My Brand</a>

    <div class="mr-auto">
      <a href=""><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></a>
    </div>

</nav>

Any help is greatly appreciated

If you are new to Bootstrap then I would suggest focusing on 3.3.x. There are way more examples and help that will get you up to speed then you can focus on migration to 4 closer to release. — K7Buoy, May 18 '17 at 18:09

score 1 · Accepted Answer · edited May 18 '17 at 14:23

Try using helper classes from bootstrap. Documentation: Bootstrap Responsive floats

<nav class="navbar navbar-light bg-faded">
   <div class="col-sm-12">
      <div class="float-left">
         <a class="navbar-brand" href="#">My Brand</a>
      </div>       
      <div class="float-right">
         <div class="mr-auto">
         <a href=""><button class="btn btn-outline-success my-2 my-sm-0 float-right" type="submit">Search</button></a>
         </div>
      </div>
  </div> 
</nav>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


<nav class="navbar navbar-light bg-faded">
   <div class="col-sm-12">
      <div class="float-left">
         <a class="navbar-brand" href="#">My Brand</a>
      </div>       
      <div class="float-right">
         <div class="mr-auto">
         <a href=""><button class="btn btn-outline-success my-2 my-sm-0 float-right" type="submit">Search</button></a>
         </div>
      </div>
  </div> 
</nav>

That's great, exactly what I did. One slight issue was the navbar seemed to fill the whole page. Solved this by wrapping everything in a div with a class of row. — Neil White, May 19 '17 at 12:02

score 0 · Answer 2 · answered May 18 '17 at 10:31

0

If you had shared the css along with html it would have been helpful. "navbar-right" class will float the element only above 768px width. If you want it to float right for all the screen sizes then use styling of float:right.

.mr-auto{ float:right; }

I have attached the working example of it http://jsfiddle.net/b1xpte8q/

answered May 18 '17 at 10:31

srikar

46
1

Just using the linked bootstrap css – Neil White May 19 '17 at 11:55

score 0 · Answer 3 · edited May 23 '17 at 11:33

This question is basically a dup of: Bootstrap 4 align navbar item to the right

The separate issue of making it not collapse, is a matter of using navbar-toggle-xl which prevents the mobile collapsed navbar...

<nav class="navbar navbar-toggleable-xl navbar-light bg-faded">
   <a class="navbar-brand mr-auto" href="#">My Brand</a>
   <a href=""><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></a>
</nav>

https://www.bootply.com/CTXFJPFIK4

Simple bootstrap Navbar that doesn't collapse and has button to right

3 Answers3