Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
Left and Right aligned CSS List
I'm trying to create this cool idea I had for a list but cant seem to figure it out.
Basically, the list items (bullets) are centered and the first list item text is on the left then the next list item is on the right. Then continues. My idea was to create a row with two columns from Bootstrap. Column #1 is left and column #2 is right side bullets. Then I was going to try to align the bullets into the middle and align the odds (left) text to the right (text-align: right) and the opposite for the right side.
Anyone have suggestions on how to do this? I think its a cool idea but Im not quite sure how to do it.
<div class="row"> <div class="col-xs-6"> <ul class="odds_ul"> <li id="odds_li">Text for left side #1</li> <li id="odds_li">Text for left side #3</li> </ul> </div> <div class="col-xs-6"> <ul class="even"> <li id="even_li">Text for right side Bullet #2</li> <li id="even_li">Text for right side #4</li> </ul> </div> </div> ```
I would draw it and add an image but I'm not sure how to upload it.