my navbar img dont support float left in bootstrap

user_13105317 0
Viewed 47

i code a navbar and use bootstrap for that with this code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=divice-width ,intial-scale=1">
<title>complete bootstrap 4 website layout</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/popper.min.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
</head>

<body>

<!--navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
    <a href="" class="navbar-brand float-left"><img src="img/mehrlogo.png" alt=""></a>
</div>
</nav>

</body>
</html>

i wanna set my logo to left of browser but it wont what the problem

bootstrap-4 css html
4 Answers

Bootstrap 4

Note that the Bootstrap4 docs use the div tag with the float class. https://getbootstrap.com/docs/4.0/utilities/float/

It won't work for a tag.

Bootstrap less that 4

<a href="" class="navbar-brand float-left">

I notice that you have added a float-left class in the anchor tag. As far as I know, there is no class in Bootstrap as float-left.

You can simply define your own class.

<style>
.float-left {
  float:left;
}
</style>

Hope you find it helpful :)

user_92757370

This is a bad practice you are doing because under navbar .container-fluid not using because this is a container where we have to put some other class like row col and etc

<!--navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
    <a href="" class="navbar-brand float-left"><img src="img/mehrlogo.png" alt=""></a>
</div>
</nav>

The good practice is simply use bootstrap navbar which is available on many resource from the internet the simple navbar example given below and in bootstrap.min.css file there are many css class just call class name to use in your project.

If you use this code then no need to set float left and float right just use logo under navbar brand with img tag

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

user_116076760

you can use list to do that it is very sample like 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<ul class="mr-auto mb-0 pl-0">
    <a href="" class="navbar-brand"><img src="https://res.cloudinary.com/nalabdou/image/upload/v1585057140/user.png" style="width:35px;height:35px"/></a>
</ul>
</nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

user_121725400

We think your logo is an i tag; add this class <i class="mr-auto"></i> If your logo is not an i tag, you can use this piece of code too; tags like img,div etc.

user_122754780
Related