How to center Buttons within a Bootstrap 3 navbar?

Question

Trying to center buttons within a bootstrap 3 navbar. I've found some examples here, but they didn't seem to apply to (or work with) buttons.

Here's my example... http://jsfiddle.net/jayinthebay/e3hj0kzw/

I'm just trying to center BUTTON1, BUTTON2, BUTTON3 on the nav.

I've tried:

text-align: center;

But I guess that's not it.

possible duplicate of [How can I center Twitter-Bootstrap 3 navbar buttons?](http://stackoverflow.com/questions/18093630/how-can-i-center-twitter-bootstrap-3-navbar-buttons) — mstrthealias, Aug 15 '14 at 20:05
@myninjaname as mentioned I found other examples on stack (including the one you referenced). The solution there was to use "nav-justified" which did not work in my tests with buttons. — JG707, Aug 17 '14 at 05:55

score 2 · Answer 1 · answered Aug 15 '14 at 19:38

2

Just changing the navbar-header to

<div class="navbar-header" style="text-align: center">

worked for me. Updated fiddle here.

answered Aug 15 '14 at 19:38

Robby Cornelissen

91,784
22
134
156

score 1 · Answer 2 · edited Jul 23 '19 at 18:32

1

.navbar {
    justify-content: center;
}

edited Jul 23 '19 at 18:32

Yunnosch

26,130
9
42
54

answered Jul 23 '19 at 18:12

Jutoki

11
1

2

@StardustGogeta When editing a code-only answer for formatting (which is helpful) do not add anything. It is the answerers job to provide an explanation. Adding somethign which looks at first glance like an explanation is not helpful, especially not the "Try this:" which makes the initially assertive answer look like a weak "I am not sure about this...". If you need to add some non-code to avoid the system complaining, then please find a different post to improve instead. – Yunnosch Jul 23 '19 at 18:37
@Yunnosch Thanks for the tip. – StardustGogeta Jul 23 '19 at 18:43

score 0 · Answer 3 · answered Aug 16 '14 at 12:28

Replace navbar-header with text-center

Like this:

<div class="text-center" >  //instead of navbar-header i used text-center


            <button type="button" class="btn btn-default navbar-btn">BUTTON1</button>
            <button type="button" class="btn btn-default navbar-btn">BUTTON2</button>
            <button type="button" class="btn btn-default navbar-btn">BUTTON3</button>


            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
            </button>

        </div>

Here is the Demo fiddle

How to center Buttons within a Bootstrap 3 navbar?

3 Answers3