我怎样才能用bootstrap制作盒子

Question

我如何制作带有引导程序的盒子，如下所示： enter image description here

＆＃13;

＆＃13;

<div class="box">
    <div class="text">
        <div class="heading h2">Lorem ipsum dolor sit amet.</div>
        <p>
           Lorem ipsum dolor  <br>
sit<br>
amet </p>
        <a href="">
            Lorem ipsum            <i class="mdi mdi-box-right"></i>
        </a>
    </div>
    <div class="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

.box {
  background: #998b00;
  color: white;
  width: 450px;
  height: 200px;
  display: flex;
  align-items: center;
  margin: 10px auto;
  border-radius: 7px;
}

.logo {
  max-width: 180px;
  padding-right: 10px;
  justify-content: center
}

.box .text {
  margin-left: 20px;
}

.text .heading {
  max-width: 300px;
  font-size: 27px;
}

.text p {
  color: #cfca8a;
}

.text a {
  color: white;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="box">
        <div class="text">
          <div class="heading h2">Lorem ipsum dolor sit amet.</div>
          <p>
            Lorem ipsum dolor <br> sit
            <br> amet </p>
          <a href="">
            Lorem ipsum            <i class="mdi mdi-box-right"></i>
        </a>
        </div>
        <div class="logo pull-right"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" class="img-responsive"></div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="box">
        <div class="text">
          <div class="heading h2">Lorem ipsum dolor sit amet.</div>
          <p>
            Lorem ipsum dolor <br> sit
            <br> amet </p>
          <a href="">
            Lorem ipsum            <i class="mdi mdi-box-right"></i>
        </a>
        </div>
        <div class="logo pull-right"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" class="img-responsive"></div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="box">
        <div class="text">
          <div class="heading h2">Lorem ipsum dolor sit amet.</div>
          <p>
            Lorem ipsum dolor <br> sit
            <br> amet </p>
          <a href="">
            Lorem ipsum            <i class="mdi mdi-box-right"></i>
        </a>
        </div>
        <div class="logo pull-right"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" class="img-responsive"></div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="box">
        <div class="text">
          <div class="heading h2">Lorem ipsum dolor sit amet.</div>
          <p>
            Lorem ipsum dolor <br> sit
            <br> amet </p>
          <a href="">
            Lorem ipsum            <i class="mdi mdi-box-right"></i>
        </a>
        </div>
        <div class="logo pull-right"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" class="img-responsive"></div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="box">
        <div class="text">
          <div class="heading h2">Lorem ipsum dolor sit amet.</div>
          <p>
            Lorem ipsum dolor <br> sit
            <br> amet </p>
          <a href="">
            Lorem ipsum            <i class="mdi mdi-box-right"></i>
        </a>
        </div>
        <div class="logo pull-right"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" class="img-responsive"></div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="box">
        <div class="text">
          <div class="heading h2">Lorem ipsum dolor sit amet.</div>
          <p>
            Lorem ipsum dolor <br> sit
            <br> amet </p>
          <a href="">
            Lorem ipsum            <i class="mdi mdi-box-right"></i>
        </a>
        </div>
        <div class="logo pull-right"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" class="img-responsive"></div>
      </div>
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;