3

I'm fiddling around with bootstrap to make a nice dashboard for our bug tracking web app, but cannot get it to display the way I want...

The dashboard will display different statistics based on who's logged in, so my code needs to be resistant to allow usage of differing number of 'widgets' as I like to refer to them. The idea is to use 'span6' containers for every widget, and have bootstrap stack them side by side (2 per row) automatically. Since I don't know how many widgets will be shown, I'm not using the <div class="row"> elements.

To make it a little more difficult I'd like to add the accordion class to each widget as well, allowing them to be collapsed independently

I started by putting everything in a <div class="span12"> element, then adding the span6 elements underneath.

Instead of writing everything down here,I created a small example on bootply: Bootply link

However for some reason, my span6's are appearing beneath each other, instead of 2x2 next to each other. Also the span6's seem to be too small, since the labels around the texts (e.g. '0 Bug(s) closed and assigned to you, good job!') don't have rounded corners on the right side.

I would be very gratefull if you could go over this code and let me know where I went the wrong way.

Thanks!

Alex
  • 928
  • 1
  • 16
  • 30

2 Answers2

2

If you check the css you can see that for an element span6 you've got margin-left: 30px.

@media (min-width: 1200px)
.span6 {
   width: 570px;
}
@media (min-width: 1200px)
[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 30px;
}

You cannot fit everything in the page.
What you can do is reduce the margins for a span6 inside an accordion.

.accordion-inner > .span6
{
 margin-left: 0 !important;
}

You can see how it works.

UPDATE:

I've plaid a bit with your code and achieved this.

Hope it helps.

LeftyX
  • 35,328
  • 21
  • 132
  • 193
  • While this works, this is not really the solution I'm looking for... I feel there has to be a better/nicer solution for this. 2 span6's should be able to fit inside a span12 or in a container div, that's the way they've done it on the bootstrap example as well. Also I noticed another problem that your solution does not fix (also edited inital question): the rounded corners on the right side of the labels are cut off. – Alex Aug 23 '13 at 10:43
  • You have to use `row-fluid` to achieve that. I'll update my answer. – LeftyX Aug 23 '13 at 11:54
  • Thanks LeftyX. While I did state in my question that I'd rather not bother useing row (or row-fluid) elements, I don't see any better solution to this. Thanks for your help – Alex Aug 23 '13 at 13:32
0

I just upgrade to Bootstrap 3.0.0, which handles this just perfectly. I defined a major col-lg-12 (new name for what was a 'span12' in bootstrap v2) and put several col-lg-6 inside it, and they're positioned perfectly next and on top of eachother.

Alex
  • 928
  • 1
  • 16
  • 30
  • Well, I've answered your question properly. Now you're accepting your own answer with a completely different matter. – LeftyX Sep 19 '13 at 13:02
  • ... And out of 5 questions you have accepted 3 of your answers. Not very good. – LeftyX Sep 19 '13 at 13:28
  • Well going to bootstrap v3 is the best solution for my problem. So that's why I marked it as the best answer for anyone else having the same problem. – Alex Sep 19 '13 at 15:06