1

I've just started to learn Bootstrap (v3) and still cannot get the clear understanding of how the grid works in terms of seamlessly joining adjacent cells.

I'm putting together a fluid navigation bar. Roughly, I'm using this approach:

 <div class="row">
    <div class="col-md-3">LEFT PART OF IMAGE</div>
    <div class="col-md-6">CENTRAL PART-NAVIGATION</div>
    <div class="col-md-3">RIGHT PART OF IMAGE</div>
 </div>

But I still cannot get rid of the blank spaces between the columns (it gets uglier on bigger screens). Is there a way I can do put it together seamlessly in Bootstrap? I mean, I could easily design the row stretching across the whole screen without any breaks or white spaces using tables or divs (fixed design), but with Bootstrap's fluid columns it just doesn't seem to work.

enter image description here

In the code (see here) I've tried a number of tricks - like overriding gutter settings (making it = 0) - to almost make it work, but I still feel like there is a fundamental issue with BS or a fundamental misunderstanding on my side.

Am I doing something completely wrong here? How can I fix it and turn it into a nice responsible row?

Would greatly appreciate any advice.

Nick
  • 160
  • 1
  • 10

1 Answers1

1

I'm not much familiar with Bootstrap, but as i can see you page, you just need to make the width: auto of the container containing the ul which contains the icons.

<div class="col-md-6" style="width: auto ! important;">CENTRAL PART-NAVIGATION</div>

You can also set the class and add it to the div.

.new-class {
  width: auto ! important;
}

And make the html <div class="col-md-6 new-class">CENTRAL PART-NAVIGATION</div>

Output

enter image description here

Hope this might help you.

Ashis Kumar
  • 6,494
  • 2
  • 21
  • 36
  • Thank you Ashis, it works! Maybe you could also suggest something in terms of centering the block? Shall I try using only BS3 col-* classes or there is also an universal way to do it that doesn't hurt the responsiveness? – Nick Sep 08 '13 at 12:57
  • 1
    If you have fixed no. of items, then you might be able to set the icons to center by following this post http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page. I would suggest you to make the ul and the side images inside a single div, and make the div float at the center. – Ashis Kumar Sep 08 '13 at 13:21
  • I'm not sure if it'll work in BS3 (it's all about non-fixed widths and float:left for every element is essential for it to work) but I'll definitely try! – Nick Sep 08 '13 at 13:31