如何使用左侧文本和右侧图像 Bootstrap 4 制作 div

Question

这是这张图片中的图片，您会在左侧找到一些文字，例如该人的姓名、地址和右侧图片。所以请告诉我如何使用 bootstrap 4 制作这个

Answer 1

您可以对每个部分使用 bootstrap-4 card 和 col-sm-6

参见此处：https://jsfiddle.net/9k8w1fpq/4/

了解卡：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>