How to get image according to text tag

Question

Hi guys, I'm trying to create this in bootstrap 3:

However, now I got this:

My image is not perfectly aligned with the tag h4, and the tags pwill not remain in the line as the first image, I use bootstrap 3, so I use it all the time and wonder if it can help me achieve this look while I have:

.col-content {
  overflow: hidden;
  padding: 0 15px;
}

.col-content p {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
}

.col-icon {
  font-size: 48px;
  float: left;
  padding: 20px 10px;
  text-align: left;
}

<div class="row">
  <div class="col-md-4">
    <div class="col-icon">
      <i class="fa fa-lightbulb-o"></i>
    </div>
    <div class="col-content">
      <h4>Web <span class="highlight">Development</span></h4>
      <p>Praesent sodales, quam vitae gravida interdum, ex mi bibendum enim, sit amet tristique mi quam vel odio. Donec non nunc condimentum, hendrerit elit sed, condimentum magna. Suspendisse imperdiet purus vel ornare cursus.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="col-icon">
      <i class="fa fa-lightbulb-o"></i>
    </div>
    <div class="col-content">
      <h4>Internet <span class="highlight">Marketing</span></h4>
      <p>Curabitur et diam elementum, mollis tortor a, malesuada turpis. Vivamus gravida, justo et molestie sollicitudin, erat lorem tempus eros, vel laoreet nibh urna ac nunc, vestibulum neque vitae pellentesque efficitur.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="col-icon">
      <i class="fa fa-lightbulb-o"></i>
    </div>
    <div class="col-content">
      <h4>Client <span class="highlight">Support</span></h4>
      <p>Sed porta erat vel ipsum maximus, eget maximus est maximus. Maecenas at venenatis nibh, sit amet suscipit odio. In feugiat vehicula dui. In felis enim, maximus a dolor semper efficitur elit euismod magna quis commodo.</p>
    </div>
  </div>
</div>

Run code

I'm just trying to make it look like the first image with bootstrap 3, so any help on this would be great, thanks

Answer 1

text-align: center .col-content p, padding: 20px 10px; padding: 0 10px 20px 10px; .col-icon, :

https://codepen.io/anon/pen/wpaebo

Answer 2

display:inline-flex;align-item: flex-start; text-align: center; p

Answer 3

Use the combination topand leftwhen creating the iconposition:relative

position: relative;
top: -11px;
left: 8px;

.col-content {
  overflow: hidden;
  padding: 0 15px;
}

.col-content p {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
}

.col-icon {
  font-size: 48px;
  float: left;
  text-align: left;
  position: relative;
  top: -11px;
  left: 8px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<div class="row">
  <div class="col-md-4">
    <div class="col-icon">
      <i class="fa fa-lightbulb-o"></i>
    </div>
    <div class="col-content">
      <h4>Web <span class="highlight">Development</span></h4>
      <p>Praesent sodales, quam vitae gravida interdum, ex mi bibendum enim, sit amet tristique mi quam vel odio. Donec non nunc condimentum, hendrerit elit sed, condimentum magna. Suspendisse imperdiet purus vel ornare cursus.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="col-icon">
      <i class="fa fa-lightbulb-o"></i>
    </div>
    <div class="col-content">
      <h4>Internet <span class="highlight">Marketing</span></h4>
      <p>Curabitur et diam elementum, mollis tortor a, malesuada turpis. Vivamus gravida, justo et molestie sollicitudin, erat lorem tempus eros, vel laoreet nibh urna ac nunc, vestibulum neque vitae pellentesque efficitur.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="col-icon">
      <i class="fa fa-lightbulb-o"></i>
    </div>
    <div class="col-content">
      <h4>Client <span class="highlight">Support</span></h4>
      <p>Sed porta erat vel ipsum maximus, eget maximus est maximus. Maecenas at venenatis nibh, sit amet suscipit odio. In feugiat vehicula dui. In felis enim, maximus a dolor semper efficitur elit euismod magna quis commodo.</p>
    </div>
  </div>
</div>

Run code