Center Bootstrap navbar title

Question

I'm looking for handle my Bootstrap navbar title and I don't overcome to center my tag.

My script for this part looks like :

<style>
  .navbar.navbar-inverse .navbar-header .navbar-brand {
    display: inline-block;
    text-align:center;
    float: none;
    vertical-align: top;
  }
</style>

<!-- #################### -->
<!-- Upper navigation bar -->
<!-- #################### -->

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="navbar-header">
                    <a class="navbar-brand"> Choix du logiciel </a>
                </div>
            </div>
        </div>
    </div>
</nav>

I would like to center : Choix du logiciel

I already read this post : Center content in responsive bootstrap navbar

But I don't find a way to make what I want :/

I think that it's not hard, but up to now it's not a success.

Thank you

So you're saying that adding `text-align:center;` to your navbar doesn't working right? — Chirag, Apr 19 '17 at 13:47
Yes, I forgot this line when I wrote my question. I would like to center this sentence but none effect up to now. — Essex, Apr 19 '17 at 13:48

Vincent G · Accepted Answer · 2017-04-19T14:00:14.160

4

EDIT : It should work with this fiddle

.navbar.navbar-inverse .navbar-header .navbar-brand {
        display: block;
        text-align:center;
        float: none;
        vertical-align: top;
}

.navbar.navbar-inverse .navbar-header{
  float: none; 
}

edited Apr 19 '17 at 14:00

answered Apr 19 '17 at 13:51

Vincent G

8,547
1
18
36

I don't see the difference xD – Essex Apr 19 '17 at 13:53
I've edited, it should be – Vincent G Apr 19 '17 at 13:54
Oh sorry, I added manually the first `` ;) – Essex Apr 19 '17 at 13:54
Perfect ! Thank you very much :) – Essex Apr 19 '17 at 14:03

Dalin Huang · Answer 2 · 2017-04-19T16:03:56.533

1

take text-align: center; out from your css .navbar.navbar-inverse.navbar-header.navbar-brand {..} and move it to

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

will fix it.

.navbar.navbar-inverse.navbar-header.navbar-brand {
  display: inline-block;
  float: none;
  vertical-align: top;
}

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

.bg-red {
  background-color: red;
}

.bg-yellow {
  background-color: yellow;
}

<!-- #################### -->
<!-- Upper navigation bar -->
<!-- #################### -->
<div class="wraper">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="navbar-header bg-yellow">
            <a class="navbar-brand bg-red"> Choix du logiciel </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>

edited Apr 19 '17 at 16:03

answered Apr 19 '17 at 13:55

Dalin Huang

11,212
5
32
49

I had another css file that's why some answers didn't work. Now it's okay with your answer ;) – Essex Apr 19 '17 at 14:03
@Deadpool a good way to debug is put some background color to each container, so you can see each block. =D – Dalin Huang Apr 19 '17 at 14:05
I take your idea and I will make this process next time :) – Essex Apr 19 '17 at 14:06

score 1 · Answer 3 · answered Apr 19 '17 at 13:59

1

Use this css:

.navbar.navbar-inverse .navbar-header {
    text-align: center;
    width: 100%;
}

.navbar.navbar-inverse .navbar-header .navbar-brand {
    display: inline-block;
    float: none;
}

answered Apr 19 '17 at 13:59

Douwe de Haan

6,247
1
30
45

score 1 · Answer 4 · answered Apr 19 '17 at 14:45

1

Change inline block to just block.

.navbar.navbar-inverse .navbar-header .navbar-brand {
    display: block;
    text-align: center;
    float: none;
    vertical-align: top;
  }

answered Apr 19 '17 at 14:45

Lakindu Gunasekara

4,221
4
27
41

score 0 · Answer 5 · answered Apr 19 '17 at 13:52

0

Just put text-align:center on .navbar-header. It must work.

Your a tag must be display block so your text inside tag can be centered.

You can put display:block on a tag too.

answered Apr 19 '17 at 13:52

Jovan Poplasen

156
7

score 0 · Answer 6 · answered Apr 19 '17 at 13:59

0

Adding display:inline-block to .navbar-brand may fix it. And also text-align:center to .navbar-header

answered Apr 19 '17 at 13:59

Orkun Tuzel

1,342
10
22

score 0 · Answer 7 · answered Apr 19 '17 at 21:01

0

Check this and see please

.navbar.navbar-inverse .navbar-header .navbar-brand {
        display: block;
        text-align: center;
        float: none;
        vertical-align: top;
      }

answered Apr 19 '17 at 21:01

score 0 · Answer 8 · answered Jun 21 '22 at 08:29

This is now possible with inbuilt bootstrap class '.justify-content-center', but will be applicable on bootstrap versions v4.4 and above

Can be applied to a nav component like below

 <nav className="navbar navbar-light bg-light justify-content-center">
    <span className="navbar-brand mb-0 h1">Navbar</span>
 </nav>

Center Bootstrap navbar title

8 Answers8

Linked