close button on right of text-centered breadcrum with Bootstrap - html

Question

So I am trying to create a modal with a centered breadcrum on top and a close button on the very right, on the same line of the breadcrum.
I am using Bootstrap 3
Here is my code:
<div class="modal container">
<div class="modal-content col-sm-6 col-sm-offset-3">
<div class="row text-center">
<div class="breadcrumb-container">
<ol class="breadcrumb modal-breadcrum">
<li class="breadcrumb-step step-one">Abonnement</li>
<li class="breadcrumb-step step-two">Inscription</li>
<li class="breadcrumb-step step-three">Paiement</li>
</ol>
<button type="button" class="close" aria-label="Close">
<span id="close-btn" aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
With this, The breadcrum is at its rights place, centered on top of the modal.
But the close button is also centered, wrapped under the breadcrum.
How can I achieve this ?
What I actually want is:
<!-- some space here --> centered Breadcrum <!-- some space here --> X

Answer 1

OK so after some research, I found a good solution:
simply put the button out of the row, actually before the breadcrum row:
<div class="modal container">
<div class="modal-content col-sm-6 col-sm-offset-3">
<button type="button" class="close" aria-label="Close">
<span id="close-btn" aria-hidden="true">×</span>
</button>
<div class="row text-center">
<div class="breadcrumb-container">
<ol class="breadcrumb modal-breadcrum">
<li class="breadcrumb-step step-one">Abonnement</li>
<li class="breadcrumb-step step-two">Inscription</li>
<li class="breadcrumb-step step-three">Paiement</li>
</ol>
</div>
</div>
</div>
</div>
Notice that, as #Minal Chauhan mentionned, the button must have the float: right property, and he bootstrap close class gives it to the button.