CODEWITHSUNDEEP
htmlcssbootstrap-4
hossein
hossein

Reputation: 45

my navbar img dont support float left in bootstrap

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

Upvotes: 2

Views: 54

Answers (4)

Amir7
Amir7

Reputation: 42

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.

Upvotes: 0

Kiran Mistry
Kiran Mistry

Reputation: 2725

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/[email protected]/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>

Upvotes: 1

divy
divy

Reputation: 25

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 :)

Upvotes: 1

Nadim Al Abdou
Nadim Al Abdou

Reputation: 838

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>

Upvotes: 0

Related Questions