Ответ 1

Вам нужно будет изменить некоторые правила CSS для компонента Navbar. Поэтому добавьте center классов в nav.navbar и следующие правила:

.navbar.center .navbar-inner {
    text-align: center;
}

.navbar.center .navbar-inner .nav {
    display:inline-block;
    float: none;
}

Рабочая демоверсия (Bootstrap 3.3.7)

Ответ 2

Чтобы расширить выбранный ответ, добавление вертикального выравнивания вверх предотвратит появление пространства под элементами навигации.

.navbar.center .navbar-inner {
    text-align: center;
}

.navbar.center .navbar-inner .nav {
    display:inline-block;
    float: none;
    vertical-align: top;
}

Демо

Ответ 3

Вы можете использовать

text-align:center;

для элемента-обертки для центрирования его дочерних элементов, но только если у childs есть

display: inline;
/* or */
display: inline-block;

Другой вариант, если вы знаете ширину элемента, который хотите центрировать,

display: block;
width: /* something */;
margin: 0 auto;

Ответ 4

У меня была похожая проблема. Для меня сработало добавление правила justify-content, например:

CSS:

.navbar-expand-lg .navbar-collapse {
display: flex!important;
justify-content: space-around;
flex-basis: auto;
}

HTML:

<nav id="hamburger" class="navbar sticky-top navbar-expand-lg navbar-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav center">
        <div><a class="nav-item nav-link active" href="#">
          Start <span class="sr-only">(current)</span></a>
        </div>
        <div><a class="nav-item nav-link" href="#">Portfolio</a></div>
        <div><a class="nav-item nav-link" href="#">Blog</a></div>
        <div><a class="nav-item nav-link" href="#">O mnie</a></div>
        <div><a class="nav-item nav-link" href="#">Kontakt</a></div>
    </div>
  </div>
</nav>

Ответ 5

Используйте text-center или mx-auto или container-fluid liquid или используйте технику flexbox, flex justify-center

1. Вы можете использовать этот хак text-center (это относится не только к тексту)

2. Или используйте точный класс Boostrap mx-auto

пример class="text-center" или class="mx-auto"

в контексте

<div class="btn-group text-center"> or <div class="btn-group mx-auto">

ПОПРОБУЙТЕ НЕ ИСПОЛЬЗОВАТЬ встроенные стили (плохая практика)

<div class="btn-group" style="margin:0 auto">

Ссылки здесь:

text-center => https://getbootstrap.com/docs/4.0/utilities/text/

mx-auto => https://getbootstrap.com/docs/4.0/utilities/spacing/#horizont-centering