Twitter Bootstrap Question posted in

Centering logo middle of page, not middle of a margin-Twitter bootstrap

I’m struggling to figure out how to centre my logo in the middle of the page, whenever I try to do it with m-auto, it centres the logo between the other items… but not the page. I’ve tried the right:... method, but had no luck.

This is my code:

.navbar-nav {
  flex-direction: row !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" integrity="sha256-7O1DfUu4pybYI7uAATw34eDrgQaWGOfMV/8erfDQz/Q=" crossorigin="anonymous" />


<nav class="navbar navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>


  <ul class="navbar-nav m-auto">
    <a class="navbar-brand" href="#">
      <img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px;" alt="">
    </a>
  </ul>

  <div class="d-none d-md-block">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item mr-2 pr-4 my-auto">
        <a href="tel:+1833555555" class="nav-link" style="font-size: 20px;"><i class="icon-phone mr-1"></i>0122323232323</a>
      </li>
      <li class="nav-item">
        <a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
      </li>
    </ul>
  </div>
</nav>
Tags:

2

Answers


  1. 0

    To center the logo, firstly to organise it slightly better you need to make it column not row. So the the phone number and the booking button stack vertically.

    Then you need to separate the areas into columns and define their widths making the two sides equal and the center whatever is left over. i.e. left 25% middle 50% and right 25%.

    Here is the snippet.

    .navbar-nav {
  flex-direction: column !important;
  justify-content: center;
}

.side {
  width: 25%;
}

.middle {
  width: 50%;
  display: flex;
  justify-content: center;
}

.flexend {
  display: flex;
  justify-content: flex-end;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" integrity="sha256-7O1DfUu4pybYI7uAATw34eDrgQaWGOfMV/8erfDQz/Q=" crossorigin="anonymous" />


<nav class="navbar navbar-light bg-light">
  <div class="side">
    <button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
    </button>
  </div>

  <div class="middle">
    <div class="logo">
      <a class="navbar-brand" href="#">
        <img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px;" alt="">
      </a>
    </div>
  </div>

  <div class="side flexend">
    <div class="d-none d-md-block">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item mr-2 pr-4 my-auto">
          <a href="tel:+1833555555" class="nav-link" style="font-size: 20px;"><i class="icon-phone mr-1"></i>0122323232323</a>
        </li>
        <li class="nav-item">
          <a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
        </li>
      </ul>
    </div>
  </div>
</nav>
    Login or Signup to reply.
  2. 0

    A similar question has already been asked: Center an element in Bootstrap 4 Navbar

    I will answer it again because in this case there is a logo image. 

    <nav class="navbar navbar-light flex-row">
    <div class="d-flex flex-fill">
        <button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="d-flex flex-fill justify-content-center">
        <a class="navbar-brand" href="#">
            <img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px" alt="">
        </a>
    </div>
    <div class="d-none d-md-flex flex-fill">
        <ul class="navbar-nav ml-auto justify-content-end">
            <li class="nav-item mr-2 pr-4 my-auto">
                <a href="tel:+1833555555" class="nav-link" style="font-size: 20px;"><i class="icon-phone mr-1"></i>0122323232323</a>
            </li>
            <li class="nav-item">
                <a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
            </li>
        </ul>
    </div>
</nav>

    Also, check the docs for the correct Navbar structure because the way you’re using the toggler, no expand class or navbar-collapse class isn’t standard Navbar structure

    https://www.codeply.com/go/8ik1wexpjI

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search