How to Center Buttons in Twitter Bootstrap 3

How to center buttons in Twitter Bootstrap 3?

Wrap the Button in div with "text-center" class.

Just change this:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

To this:

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

Edit

As of BootstrapV4, center-block was dropped #19102 in favor of m-*-auto

Center Twitter Bootstrap 3 Glyphicons in buttons

Move the text out of the <span> with the glyphicon and apply vertical-align: middle; to the <span>

  <button class="btn btn-default">
    <span class="glyphicon glyphicon-th" style="vertical-align: middle;"></span> Centered
  </button>

Demo

This works in Bootstrap 4 with Font Awesome icons like so

<button class="btn btn-default" style="vertical-align: middle;">
    <i class="fa fa-times"></i> Centered
</button>

How can I center Twitter-Bootstrap 3 navbar links?

Bootstrap 3 has a nav-justified class that can be used on nav. No extra CSS required:

<div class="container">
  <h3 class="text-muted">Project name</h3>
  <ul class="nav nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Demo: http://bootply.com/72519

---

Based on the comments, to have full-width centered links using the navbar-nav class, use flexbox...

.navbar-center {
    width:100%;
    display: flex;
}
.navbar-center>li {
    flex:1 1 auto;
}

<div class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav navbar-center text-center">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">More</a></li>
            <li><a href="#">Options</a></li>
        </ul>
    </div>
</div>

https://www.codeply.com/go/6ZE3obnpuP

---

Also see
Bootstrap NavBar with left, center or right aligned items

Center Navbar in Bootstrap

How can I get my Twitter Bootstrap buttons to right align?

Insert pull-right into the class attribute and let bootstrap arrange the buttons.

For Bootstrap 2.3, see: http://getbootstrap.com/2.3.2/components.html#misc > Helper classes > .pull-right.

---

For Bootstrap 3, see: https://getbootstrap.com/docs/3.3/css/#helper-classes > Helper classes.

---

For Bootstrap 4, see: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

The pull-right command was removed and replaced with float-right or in general to float-{sm,md,lg,xl}-{left,right,none}

---

For Boostrap 5, see: https://getbootstrap.com/docs/5.0/utilities/float/

The closest solution would be float-end.

How to center .btn-group from twitter-bootstrap?

Edited: This has changed as of Bootstrap 3. See solution for Bootstrap 3 below.

Is adding a wrapping div out of the question?

Look at this example: http://jsfiddle.net/EVmwe/4/

Important part of the code:

/* a wrapper for the paginatior */
.btn-group-wrap {
    text-align: center;
}

div.btn-group {
    margin: 0 auto; 
    text-align: center;
    width: inherit;
    display: inline-block;
}

a {
    float: left;   
}

Wrapping the button group within a division, and setting the div to text-align center. The button group must also be overwritten to have display inline-block and inherited width.

Overwriting the anchors display to inline-block, and float: none, would also probably work, as @Andres Ilich said.

---

Update for Bootstrap 3

As of Bootstrap 3, you have alignment classes (as seen in the documentation). You now simply have to add the text-center class to a parent. Like so:

<div class="text-center">
    <ul class="pagination">
      <li class="disabled"><a href="#">«</a></li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">»</a></li>
    </ul>
</div>

See working example here: http://jsfiddle.net/EVmwe/409/

How to align button to center using Bootstrap

One Bootstrap's most powerful features is nesting row elements. Every col-* container can have another row inside it, which then provides another full set of 12 col spaces:

<div class="col-lg-12">
    <div class="row">
        <div class="col-xs-4">
            <button class="btn btn-primary btn-sx" type="button">Confirm</button>
        </div>
        <div class="col-xs-4">
            <button class="btn btn-primary btn-xs" type="button">Middle Button</button>
        </div>
        <div class="col-xs-4">
            <button class="btn btn-primary btn-xs" type="button">Decline</button>
        </div>
    </div>
</div>

I'm not sure how your pull-* classes exactly work, but using Bootstrap's built-in grid system you should be able to get rid of those.

Don't miss the Bootstrap guide on nesting columns, as it provides way more information than this answer.

Bootstrap 4, How do I center-align a button?

In Bootstrap 4 one should use the text-center class to align inline-blocks.

NOTE: text-align:center; defined in a custom class you apply to your parent element will work regardless of the Bootstrap version you are using. And that's exactly what .text-center applies.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">  <div class="row">    <div class="col text-center">      <button class="btn btn-default">Centered button</button>    </div>  </div></div>

---

Related Topics