Как сделать отображение карты начальной загрузки горизонтальным

Question

Я сделал загрузочную карту на своем веб-сайте и хочу сделать ее горизонтальной. ht tps://stackru.com/image s/8339cc625177107ecc330b0e2894e2e3ad705bcc.jpg и я хочу преобразовать его в ht tps://stackru.com/image s/f5363385163070ff97609c5a0dc9982a4ae4e191.jpg.

Пожалуйста, предоставьте решение, проверив мой код!

.blue-bg{
    background-image: linear-gradient(#1385de,#045f9b);
    color: white;
    
}
.brown-bg{
    
    background-image: linear-gradient(#f8b949,#f7951f);
}
.order-btn2{
    background-image: linear-gradient(#ffde5e,#fdd215);
    color: black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<li class="card col-sm-3">
                            <img class="card-img-top" src="https://i.ibb.co/Tcn9qV7/phoneSms.png" alt="Card image">
                            <div class="card-header brown-bg">
                                SMS Order
                            </div>
                            <div class="card-body blue-bg p-0 mt-1">
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.</p>
                                <a href="#" class="btn btn-primary order-btn2">Place Order</a>
                            </div>
                        </li>

Спасибо.

Answer 1

В основном у bootstrap есть встроенное решение - Horizontal Card, вы можете делать карты как в горизонтальном, так и в вертикальном положении.

Вот простой пример для горизонтальной карты.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-4">
      <img src="https://via.placeholder.com/150" class="card-img" alt="...">
    </div>
    <div class="col-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>