NavBar to center

Question

I'm having small issue with justify-content-sm-center, i want to center this <a class="navbar-brand" href="#">Navbar</a>, but the problem is when i try to center it, it will also center the toggler icon with it.:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>

  <nav class="navbar navbar-expand-md bg-dark navbar-dark justify-content-sm-center">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </nav>
  <br>


</body>

</html>

this is what happens now :

my question is how to have 'justify-content-sm-center' to affect just this ' Navbar' and not the icon

What does this mean: `when those other 'Link' have disappeared,` ? — ikiK, Feb 24 '21 at 22:42
@ikiK just want to make this work without affecting toggle icon, at the moment it works but affect also toggle icon — , Feb 24 '21 at 22:43
I still don't know what is your goal nor I don't know what is affecting what. And you haven't answered my question. — ikiK, Feb 24 '21 at 22:47

score 0 · Answer 1 · answered Feb 24 '21 at 23:08

Read this topic: CSS float-right not working in Bootstrap 4 Navbar

.navbar-brand {
  margin: auto
}

.navbar-toggler {
  margin-left: auto
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>

  <nav class="navbar navbar-expand-md bg-dark navbar-dark justify-content-sm-center">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon" ></span>
  </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </nav>
  <br>


</body>

</html>

this is the right answer but could you explain why it works? how it knows to start affecting only on small screen ? even we dont need this here 'justify-content-sm-center' — , Feb 25 '21 at 06:12
@walee I dont use bootstrap.And i don't know theirs media queries's. But they are oblivious using flex-box, did you even go an read the link i provided? There is a link to documentation, go and read it to understand how it works: https://getbootstrap.com/docs/4.0/utilities/flex/ EVERYTHING you need to know about this is there, that is why i linked it. Its about nav bar and positioning, about justify-content... — ikiK, Feb 25 '21 at 12:46

score 0 · Answer 2 · edited Mar 04 '21 at 15:19

0

Usually, I make the parent element of the icon as position: relative; and icon as position: absolute; with top and right properties. In bootstrap classes for these properties are named: "position-relative", "position-absolute". For positioning (top, right) icon you should probably use CSS.

edited Mar 04 '21 at 15:19

elbik

1,749
2
16
21

answered Feb 24 '21 at 23:12

Michał Skorus

84
3

should i use media queries for small screen ? or this 'justify-content-sm-center' ? could you give working code as example ? – Feb 25 '21 at 06:13

NavBar to center

2 Answers2