Marco Mancarne Marco Mancarne - 2 months ago 18
HTML Question

Placing an image left to text and icons to the right of text

I want to place some text in the middle of an icon and an image. Somehow it is not quite working out. I can't seem to get everything nice and lined out.

Here is my code:



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-12">
<div class="col-md-10">
<div class="span6">
<img class="companyIcon" src="http://findicons.com/files/icons/766/base_software/128/circle_blue.png" />
</div>
<div class="companyTitle span3">
<p>Coinchase<i class="fa fa-edit" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
</p>
</div>
</div>
<div class="col-md-2">
<p>Back to results <i class=" fa fa-mail-reply " aria-hidden="true"></i>
</p>
</div>
</div>
</div>




Answer
Try this below

.col-md-10 {
    float: left;
}
.col-md-10 .span6 {
    display: inline-block;
}
.col-md-2 {
    float: right;
}
.companyTitle.span3 {
    display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-12">
    <div class="col-md-10">
      <div class="span6">
        <img class="companyIcon" src="http://findicons.com/files/icons/766/base_software/128/circle_blue.png" />
      </div>
      <div class="companyTitle span3">
        <p>Coinchase<i class="fa  fa-edit" aria-hidden="true"></i>  <i class="fa fa-trash" aria-hidden="true"></i>
        </p>
      </div>
    </div>
    <div class="col-md-2">
      <p>Back to results <i class=" fa  fa-mail-reply " aria-hidden="true"></i>
      </p>
    </div>
  </div>
</div>