Question

What would be the ideal way to implement:

1. A list of widgets / panels . I am looking for widgets like in
   iGoogle or heft.me. A possible solution would be to use the css
   from the heft.me site, but I would like to know if there is a
   twitter bootstrap way of doing it or are there any extensions
   available ?

2. Once I achieve rendering widgets, I will be adding widgets
   dynamically. I would like these widgets to be horizontally
   scrollable. One possible solution is that I should tweak the
   carousel plugin that comes with twitter-bootstrap, but again I would
   like to know if there is a better way ?

3. Will it be advisable to maintain a list of horizontal scrolling
   widgets for smaller devices like mobile phones or is better to
   render them differently on mobile devices, may be accordion panels
   or something of that sort ?

   BTW I am using twitter-bootstrap 2.0.4

Answer 1

Based on this answer and this jQuery plugin

Here is a working solution : jsfiddle.

<div class="myClass">
    <div class="row">
        <div class="span5"></div>
        <div class="span5"></div>
        <div class="span5"></div>
    </div>
</div>

div.myClass {
    overflow-x: hidden;
    white-space: nowrap;
}
div.myClass [class*="span"] {
    display: inline-block;
    float: none;
}

$('.myClass').dragscrollable();

I don’t know the plugin fiability, but you should be able to retro-engineer it if you want your own version of it.