Как сделать div с левой стороны текста и правой стороны Image Bootstrap 4

Question

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

Answer 1

Вы можете использовать bootstrap-4 card и col-sm-6 для каждой части

См. Здесь: https://jsfiddle.net/9k8w1fpq/4/

Learnо карточке: https://www.w3schools.com/bootstrap4/bootstrap_cards.asp

img{
width:100px;
height:100%;}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="card" style="width:400px">
<div class="row">
  <div class="col-sm-6">
    <img class="card-img" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Card image"/>
  </div>
  <div class="col-sm-6">
    <div class="card-body-right">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
     </div>
  </div> 
  </div>
</div>