0

I need to use two imagens, one is company logo and the other is the app logo.

So I created this nav bar and my idea is to position the images one on each side to see how it will look.

However, I cant move the position of the images inside the navbar, how could I do this?

I try the text-right, but without sucess

<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <div class="row">
            <div class="col-md-6 text-center">
                <img src="~/Content/img/logo_1_v_.png" width="30" alt="">
            </div>
            <div class="col-md-6 text-right ">
                <img src="~/Content/img/logo_2_v_.png" width="30" alt="">
            </div>
        </div>        
    </a>
</nav>
Jhensen
  • 71
  • 7
  • Please don't use the grid inside the Navbar. Follow the docs to learn about [the supported Navbar content](http://getbootstrap.com/docs/4.1/components/navbar/#supported-content) and how to align items. – Carol Skelly Nov 20 '18 at 23:09

1 Answers1

0

Try using a simple layout because you are nesting a row in a navbar-brand maybe something like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="#" width="30" height="30" alt="Image Logo">
  </a>
  
  <a class="app-image float-right">
    <img src="#" width="30" height="30" alt="App Image">
  </a>
</nav>

ir you are not using Bootstrap 4 just add .app-image {float: right;}

This is just an approach, you can achieve this in a lot of ways it depends on your desire result, another way will be using flex :

.navbar {
  display: flex;
  justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="#" width="30" height="30" alt="Image Logo">
  </a>
  
  <a class="app-image">
    <img src="#" width="30" height="30" alt="App Image">
  </a>
</nav>
Yandy_Viera
  • 4,320
  • 4
  • 21
  • 42