CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
RonTheOld
RonTheOld

Reputation: 777

How to get an image to line up with text tag?

I am trying to create this in bootstrap 3:

enter image description here

However, right now I have got this:

enter image description here

My image is not lined up perfectly with the h4 tag and my p tags will not stay in a line as the first image. I am using bootstrap 3, so I am getting used it everything, and I was wondering if anyone can help me achieve this look. So far 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>

I am just trying to make it look like the first image with bootstrap 3.

Upvotes: 3

Views: 84

Answers (3)

satyajit rout
satyajit rout

Reputation: 1651

for line up use display:inline-flex;align-item: flex-start; and remove text-align: center; from p tag

Upvotes: 1

Johannes
Johannes

Reputation: 67799

remove text-align: center from .col-content p to avoid the text-centering in the paragraphs and change padding: 20px 10px; to padding: 0 10px 20px 10px; in .col-icon to move the icons up to the top of their container:

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

Upvotes: 3

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

Use a combination of top and left while making the icon position: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>

Upvotes: 0

Related Questions