CODEWITHSUNDEEP
csstwitter-bootstraphtml-lists
stevegnewman
stevegnewman

Reputation: 41

Twitter Bootstrap responsive ul text wrap

This is my first question on here although I use stack overflow as a regular resource for help and its always put me back on track until now as I have searched and searched and can't find the answer to this.

I have a responsive layout and I'm struggling to get my ul to keep its left margin when the text wraps in a smaller screen size, this results in the text wrapping to a second or third line which positions under the icon instead of maintaining the margin. I'm using bootstrap and my list also uses the icon tag for bootstrap glyphicons instead of normal bullets as follows;

<ul class="unstyled starlist">

<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li>

<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li>

<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li>

<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li>

</ul>

My (very simple) CSS (outside of bootstraps) is

.startlist li span {Margin-left:15px;}

I have tried so many different methods none of which seem to work, the closest I've been is display the span as a block which stopped the text from wrapping under the icon but the icon would then not align properly to the text and looked bad, the icon looked slightly raised.

I also used 2 divs within each li and floated left inline, which worked until the screen size was reduced and it all went messy, I didnt try media queries as thought for a simple list there must be a better method. I also tried a list-style-image but it wouldn't align to the text properly either.

I am currently using a table (dont beat me up this is just a temporary last resort until I figure it out) only so that it looks right for the time being but really would appreciate some help on putting into list format that works at all screen sizes. Tbh the table layout looks perfect and responds well to screen sizes but its not tabular data and its a lot of code for a simple list with a star for the bullet!

I look forward to anyones advice (or to be told an obvious solution and look an idiot!)

Many thanks in advance Steve.

Upvotes: 4

Views: 4303

Answers (3)

Joe
Joe

Reputation: 11

Here's the solution. wrap a p tag around your li text, set your p margin left to whatever you want, and use overflow:hidden. Now float your <i> left. That should work.

example mark-up:

#left-column .advantages li {font: normal 14px arial; margin:0 0 10px 0; color:#333; list-style:none;}
#left-column .advantages li p {margin:0 0 0 20px; overflow:hidden;}
#left-column .advantages li i {float:left;}

Upvotes: 1

freeMagee
freeMagee

Reputation: 464

Try setting a background on the list item with some padding.

ul.fancy-bullets {
    list-style-type:none;
}
ul.fancy-bullets li {
    background: url(../images/icons/star.png) left top no-repeat;
    padding-left: 2em;
}

Have tried with a long line and it does not go underneath the icon.

Upvotes: 0

Wez
Wez

Reputation: 10712

Have you tried using the :before implementation?

Something like this:

.startlist li span:before {

  content: url(../star.jpg);

}

Upvotes: 0

Related Questions