CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
okoboko
okoboko

Reputation: 4482

Bootstrap - Pull Icon to Left of Text

In Bootstrap 3, I want to have an icon centered to the left of an H6 and some text.

Here's my code:

<div class="row">
    <div class="col-sm-8">
         <div class="pull-left"><i class="fa fa-life-ring fa-3x"></i></div>
         <div class="pull-right">
         <h6>Unlimited Support</h6>
         We're here to help! Just ask away...
         </div>
    </div>
</div>

It looks like this right now (icon is above the text, rather than on the left):

screenshot1

How do I get it to format correctly?

This code:

<div class="row">
    <div class="col-sm-8">
         <div class="pull-right">
             <h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6>
             We're here to help! Just ask away...
         </div>
    </div>
</div>

Displays like this:

screenshot2

But, I want to put the icon beside both lines of text (have the "We're here..." move to the right/not wrap underneath.

Upvotes: 4

Views: 11728

Answers (6)

Julian
Julian

Reputation: 767

The following approach would be an alternative to the Bootstrap Grid:

<div>
    <img class=position-absolute src="ICONNAME.svg" alt="ICON-ALT" width="40" height="40">
    <div class=pl-3>
    text right
    </div>
</div>

Manual Bootstrap Spacing

Upvotes: 0

Luis Leon Gonzalez
Luis Leon Gonzalez

Reputation: 91

If it's Bootstrap you could do something like this:

<div class="row">
   <div class="col-md-2">
    <i class="fa fa-life-ring fa-3x"></i>
   </div>
   <div class="col-md-10">
     <h6>Unlimited Support</h6>
     We're here to help! Just ask away...
   </div>
</div>

Upvotes: 4

Shawn Taylor
Shawn Taylor

Reputation: 15730

Looks like it should be simple enough, but you need to bash your elements around with some forced margins... here goes:

<div class="col-sm-6 custom">
  <i class="fa fa-camera-retro fa-3x pull-left"></i>
  <div class="text">
    <h6 class="custom-margin">Unlimited Support</h6>
      We're here to help! Just ask away...

CSS:

.text{margin-left: 60px;overflow: hidden;}
.custom-margin{margin-top:4px;margin-bottom:4px}

EXAMPLE: http://www.bootply.com/qvjfInH7yQ

ps - your code shows an h6 for "Unlimited Support" but your example image looks like it's something else. I've used h6 as starting point, but if it's something else, you'll need some more bashing precise tweaking of margins to get it into the right exact placement.

Upvotes: 0

Asbar
Asbar

Reputation: 391

you can add put the text "We're here to help!..." in a span and give it some padding or margin on the left.

<div class="row">
<div class="col-sm-8">
     <div class="pull-right">
         <h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6>
         <span class="text-on-the-right">We're here to help! Just ask away...</span>
     </div>
</div>
</div>

the CSS for the span class: .text-on-the-right { margin-left:10px/* or the desired the width */ }

Upvotes: 0

Sunny
Sunny

Reputation: 194

you can try this

jsFiddle Demo

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Upvotes: 5

Tyler Evans
Tyler Evans

Reputation: 579

Try this-

<div class="row">
    <div class="col-sm-8">
         <div class="pull-right">
             <h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6>
             We're here to help! Just ask away...
         </div>
    </div>
</div>

Alternatively, you can try this (if you do not want your text pulled to the right).

<div class="row">
    <div class="col-sm-8">
         <h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6>
         We're here to help! Just ask away...
    </div>
</div>

Upvotes: 0

Related Questions