CODEWITHSUNDEEP
csstwitter-bootstrap-3navbarcentering
JG707
JG707

Reputation: 245

How to center Buttons within a Bootstrap 3 navbar?

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.

Upvotes: 0

Views: 5624

Answers (3)

Jutoki
Jutoki

Reputation: 11

.navbar {
    justify-content: center;
}

Upvotes: 1

Suganth G
Suganth G

Reputation: 5156

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

Upvotes: 0

Robby Cornelissen
Robby Cornelissen

Reputation: 97140

Just changing the navbar-header to

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

worked for me. Updated fiddle here.

Upvotes: 2

Related Questions