1

I want to create a side navigation which looks similar like follows in the snapshot using twitter bootstrap. The special thing here to note is if the name of the label is big...it converts into "...." and not showing it completely and going to different line. Also the entire list must be scrolling if possible. Anybody has got any idea how to achieve it.

enter image description here

Saurabh Kumar
  • 16,353
  • 49
  • 133
  • 212

2 Answers2

2

Add the class "navbaritem-ellipsis" to your LI's, and add this to your CSS file:

li.navbaritem-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: no-wrap;
}

no-wrap tells the browser to not wrap the text to the next line. ellipses instructs the brower to add the "..." to the end of the text if it is too big.

Troy Morehouse
  • 5,320
  • 1
  • 27
  • 38
  • the text-overflow: ellipsis option may not be supported on older browsers. But for those the text will just be truncated "hard" – Troy Morehouse Nov 26 '13 at 21:55
-2

Well, the documentation describes this pretty well: http://twitter.github.com/bootstrap/components.html#navs

I use a side navigation bar on one of my web apps - basically using bootstrap's grid layout you create two columns. One smaller one on the left for your nav bar, and one on the right for your main content. This is also in the documentation: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

James Adam
  • 2,324
  • 3
  • 16
  • 19
  • 1
    Hello . I know the link but i wanted to know how to convert a label string into that .... if the string is large. – Saurabh Kumar Mar 01 '13 at 15:05
  • You could handle this on the server side or in javascript. For example, in ruby one can truncate strings as explained in the answers to this question: http://stackoverflow.com/questions/7023545/truncate-string-with-rails – James Adam Mar 01 '13 at 16:36