кнопка закрытия справа от текстоцентрированной хлебной крошки с Bootstrap

Question

Итак, я пытаюсь создать модал с центрированной хлебной крошкой сверху и кнопкой закрытия справа, на той же линии хлебной крошки.

Я использую Bootstrap 3

Вот мой код:

<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">&times;</span>
        </button>
      </div>
    </div>
  </div>
</div>    

При этом хлебная крошка находится на своем месте, в центре верхней части модальной зоны. Но кнопка закрытия также по центру, завернутая под хлебную крошку.

Как мне этого добиться?

То, что я на самом деле хочу, это:

<!-- some space here --> centered Breadcrum <!-- some space here --> X

Answer 1

ОК, поэтому после некоторого исследования я нашел хорошее решение:

просто выведите кнопку из ряда, на самом деле перед строкой хлебных крошек:

<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">&times;</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> 

Обратите внимание, что, как упоминал @Minal Chauhan, у кнопки должно быть свойство float: right, и он самозагружает класс close, передавая ее кнопке.