html 格言字符网格

Posted 2021-05-11

.logo-small{
    color: #F4511E;
    font-size: 50px;
}

<div class="container-fluid text-center">
  <h2>SERVICES</h2>
  <h4>What we offer</h4>
  <br>
  <div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-off logo-small"></span>
        <h4>POWER</h4>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-heart logo-small"></span>
        <h4>LOVE</h4>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-lock logo-small"></span>
    <h4>JOB DONE</h4>
    <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <br><br>
  <div class="row">
      <div class="col-sm-4">
        <span class="glyphicon glyphicon-leaf logo-small"></span>
        <h4>GREEN</h4>
        <p>Lorem ipsum dolor sit amet, consectetur.</p>
      </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-certificate logo-small"></span>
      <h4>CERTIFIEd</h4>
      <p>Lorem ipsum dolor sit amet, consectetur.</p>
    </div>
    <div class="col-sm-4">
        <span class="glyphicon glyphicon-wrench logo-small"></span>
        <h4>Hard WORK</h4>
        <p>Lorem ipsum dolor sit amet, consectetur.</p>
    </div>
  </div>
</div>