Moving an img in navbar to the right

56 Views Asked by jack At 20 October 2023 at 20:43

I have a navbar with an img. By default it is to the left of the page. I want to display it to the right

.logo-img{
    float: right;
    margin: 0px 15px 15px 0px;



<a class="navbar-brand  logo-img"  href="#"><img src="images/my_graphic_transparent.jpg" alt="shield" width="90"   ></a>

I tried creating .log-img in the styles area and then used it in the a class navbar however the graphic would not move to the right

.logo-img{
    float: right;
    margin: 0px 15px 15px 0px;



<a class="navbar-brand  logo-img"  href="#"><img src="images/my_graphic_transparent.jpg" alt="shield" width="90"   ></a>

Original Q&A

There are 1 best solutions below

Deotyma On 20 October 2023 at 21:23

If you use Bootstrap-5 you can use class d-flex in parent container for link like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous" defer></script>

    <title>Document</title>
</head>
<body>
    <nav class="navbar bg-light">
        <div class="container d-flex justify-content-end">
          <a class="navbar-brand" href="#">
            <img src="/img/cat.svg" alt="Bootstrap" width="60" height="54">
          </a>
        </div>
      </nav>
</body>
</html>

This is a result:

All documentation about d-flex in Bootstrap you will find here

Moving an img in navbar to the right

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in NAVBAR

Related Questions in BOOTSTRAP-5

Related Questions in NAV

Trending Questions

Popular # Hahtags

Popular Questions