CODEWITHSUNDEEP
csstwitter-bootstrapglyphicons
Andy Holmes
Andy Holmes

Reputation: 8047

Bootstrap 3.3.5 glyphicon issues

I have this code:

<p>
    <span class="glyphicon glyphicon-map-marker"></span>
    The Old Steam House, Unit 10, Goblands Farm, Cemetery Lane, Hadlow, Kent, TN11 0LT
</p>

Which outputs like this, which is fine. enter image description here

However, on a mobile it looks like this

enter image description here

How/what is the best way to indent the text all the way down like this enter image description here

I apologise if this isn't a good question to ask, i've never used Bootstrap before.

Upvotes: 2

Views: 520

Answers (2)

DavidDomain
DavidDomain

Reputation: 15293

Negative left margin on the glyphicon should work.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");

.multiline-margin {
    margin: 0 0 0 20px;
}

.multiline-margin > .glyphicon {
    margin: 0 0 0 -20px;
}
<p class="multiline-margin">
  <span class="glyphicon glyphicon-map-marker"></span>
  The Old Steam House, Unit 10, Goblands Farm, Cemetery Lane, Hadlow, Kent, TN11 0LT
</p>

Upvotes: 2

elad.chen
elad.chen

Reputation: 2425

Like i said in the comment, bootstrap doesn't solve such cases.

What you can do is use padding-left: [value] where value is the font-size + the spacing you want.

HTML ( changed "p" since "div" cannot be a child of "p" ):

<div>
    <span class="glyphicon glyphicon-map-marker pull-left"></span>
    <p class="padded-box">The Old Steam House, Unit 10, Goblands Farm, Cemetery Lane, Hadlow, Kent, TN11 0LT</p>
</div>

CSS:

/* this selector is just for example */
div {
    font-size: 18px;
}

.padded-box {
    padding-left: 23px /* 18px + 5px for spacing */ 
}

Here's a fiddle: http://jsfiddle.net/dkcw54wy/

Upvotes: 0

Related Questions