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! While you're at it, check out some resources Treehouse students have shared here.

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

CSS

Posted by nimaghafoori
nimaghafoori
980 Points

How to implement a sidebar with icons like treehouse website in bootstrap/foundation?

Just curious how it is implemented. I tried viewing the page source but it was a bit confusing because of polymer.

1 Answer

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Hi Nima,

You could create a 1 col width container for the sidebar and add the links/icons as list items. Something like:

<div class="sidebar col-sm-1">
  <ul>
    <li><a href="#">Icon one</a></li>
    <li><a href="#">Icon two</a></li>
    <li><a href="#">Icon three</a></li>
  </ul>
</div>

<div class="main col-sm-11">
  // main content
</div>

Apply the icons as background images on the anchors or include the image inline (how Treehouse does it) like so:

<li><a href="#"><img src="anImage.jpg" /></a></li>

Then you just need to remove the bullet points and add styling with css.

Hope this helps :)