How to tidy up this navbar on bootstrap?

Question

I'm learning some Bootstrap and this problem is getting me off, because I'd like to know how to tidy this navbar correctly, I did some col, col-offset... but nothing helps me...

What I'm trying to get is:

INDEX.HTML (NAVBAR SNIPPET)

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
            <img alt="Brand" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmHCiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh3ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7VhxCRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSMeVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC" width="20">
            </a>
        </div>
        <div class="row">
            <form class="navbar-form" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                    </div>
                </div>
            </form>
        </div>
        <!--SEARCH NAVBAR-->
        <div class="row">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Dropdown
                <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">Alta usuari</a></li>
                    <li><a href="#">Cerca d'usuaris</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Manteniment taules mestre</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Ajuda DIBA</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Logout</a></li>
                </ul>
            </div>
        </div>
        <!--MENU NAVBAR-->
        <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" 
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">ToggleNav</span> 
            <!--EL ICONO DE MENU, SE HACE ASI, QUE TRISTE-->
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
        </button>
    </div>
</nav>

What are the best practices to get a correct order implementing some stuff on a navbar? Thanks you very much

UPDATE ERROR BRACKETS:

I know that's not an error of code, but it disconnects the live preview, and when I maximize the windows, it doesn't shows the navbar-toggle...

Answer 1

Here's the link which might gives some help to your question : http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_right&stacked=h

Answer 2

Here is a bootply of what you are looking for. You don't want to use the class .row in the navbar and you do want to use the class of .navbar-right http://www.bootply.com/lu9p6jQXlx#

Updated link for the minimized navbar to work. You shouldn't need to use any css for bootstrap to work.

Answer 3

For visualizing your toggle-bar in all screen size you have to use this css code:

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.navbar-collapse.collapse.in{
  display:block !important;
}

I have also keep some menu in toggle bar. you can change/delete it.

You don't need to use row.

<div class="navbar-header">
    <a class="navbar-brand" href="#">B</a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <div class="dropdown pull-right" style="margin-top:7px;">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Dropdown
                <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">Alta usuari</a></li>
                    <li><a href="#">Cerca d'usuaris</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Manteniment taules mestre</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Ajuda DIBA</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Logout</a></li>
                </ul>
            </div>

    <form class="navbar-form navbar-right" role="search">
        <div class="form-group input-group">
          <input type="text" class="form-control" placeholder="Search..">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">
              <span class="glyphicon glyphicon-search"></span>
            </button>
          </span>
        </div>
      </form>
  </div>

See your desired output: http://www.bootply.com/obQ6W1pL81