Как выровнять текст рядом друг с другом

Question

Я не могу понять, как я могу выровнять текст рядом друг с другом внутри столбца. Я попытался:

<div className="row">
  <div className="col-md-3 property">
        <div className="card shadow">
            <img className="card-img-top" alt="Image 1" src={("./Components/Images/slide-image1.jpg")}></img>
            <div className="card-body">
                <h5 className="card-title">Info</h5>
                <div className="row">
                    <div className="col-md-6">
                        <h3>$ 500</h3>
                    </div>
                    <div className="col-md-3">
                        <span className="badge badge-warning">Villa</span>
                    </div>
                    <div className="col-md-3">
                        <button className="btn btn-details btn-sm text">View Details</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

Это вложенная строка, но я не могу заставить ее работать. Как я могу выровнять $ 500 villa button рядом друг с другом?

Answer 1

Вам не нужны эти дополнительные столбцы. Просто поместите весь текст внутри строки и поместите float: left на элементы.

Answer 2

Вы можете добавить этот стиль

style="text-align:center;"