How do I make two bootstrap buttons side by side?

Question

I am trying to set buttons on a modal side by side. One is a download link and the other is a mirror. I tried creating my own class with the css of display: inline-block; but that didnt work. How do I make them side by side?

Heres my code for my modal:

<!-- Texturepack Popup Start -->      <div class = "modal fade" id = "texturepack" role = "dialog">         <div class = "modal-dialog">             <div class = "modal-content">                 <div class = "modal-header">                     <h4>Texture Pack Download</h4>                 </div>                 <div class = "modal-body">                     <center><h3>Download our Custom Texture Pack!</h3></center>                     <p class = "tpbutton btn-toolbar">                     <a style = "margin: 0 200px; display: inline-block" class = "btn navbar-btn btn-primary pull-center" href = "#" target = "_texturepack">Download</a>                     <a style = "margin: 0 300px; display: inline-block" class = "btn navbar-btn btn-default pull-center" href = "#" target = "_texturepack">Mirror</a>                     </p> <!-- Carousel Text Start -->     <div style = "height:15px"></div>     <div style = "border: 2px solid black; width: 500px; margin: 0 auto" id = "textureCarousel" class = "carousel slide">              <ol class = "carousel-indicators" data-ride = "carousel">             <li data-target = "#textureCarousel" data-slide-to = "0" class = "active"></li>             <li data-target = "#textureCarousel" data-slide-to = "1"></li>             <li data-target = "#textureCarousel" data-slide-to = "2"></li>         </ol>              <div class = "carousel-inner">                  <div class = "item active">                 <img src = "img/a.png" alt = "Beach" class = "img-responsive">             </div>              <div class = "item">                 <img src = "img/b.png" alt = "Beach" class = "img-responsive">             </div>              <div class = "item">                 <img src = "img/c.png" alt = "Beach" class = "img-responsive">             </div>              </div>              </div>            <!-- Carousel End -->                 </div>                 <div class = "modal-footer">                     <a class = "btn btn-danger" data-dismiss = "modal">Close</a>                 </div>             </div>         </div>     </div>  <!-- Texturepack Popup End --> 

Answer 1

Use a button group.

<div class="btn-group">   <a href="#" class="btn btn-primary">Download</a>   <a href="#" class="btn btn-default">Mirror</a> </div> 

Answer 2

Try this putting text-align:center on the outer element:

<p class = "tpbutton btn-toolbar" style="text-align:center">      <a class = "btn navbar-btn btn-primary" href = "#" target = "_texturepack">Download</a>      <a class = "btn navbar-btn btn-default" href = "#" target = "_texturepack">Mirror</a> </p> 

Demonstration

EDIT: Or by using the text-center class:

<p class = "tpbutton btn-toolbar text-center">      <a class = "btn navbar-btn btn-primary" href = "#" target = "_texturepack">Download</a>      <a class = "btn navbar-btn btn-default" href = "#" target = "_texturepack">Mirror</a> </p> 

Demonstration