Issue on Hiding Overflow in Bootstrap CSS - css

Question

Can you please take a look at This Demo and let me know why the css overflow:hidden rule is not working for .switch class?
Please be informed that I do not want to change any thing in buttons and Switch mark ups and need to keep them as they are (Must not change the col-lg-x sizes)
<div class="panel panel-default">
<div class="panel-heading">Switch</div>
<div class="panel-body">
<div class="row">
<div class="switch col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-10 col-md-10 col-sm-10 col-xs-10">
<button class="btn btn-primary norightradius col-lg-1 col-md-1 col-sm-1 col-xs-1">Yes</button>
<button class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-11 col-xs-11">New Model</button>
<button class="btn btn-primary noleftradius col-lg-1 col-md-1 col-sm-1 col-xs-1">No</button>
</div>
</div>
</div>
</div>
Here is a shot of the required result

Answer 1

The Bootstrap grid system is based upon 12 columns. If you add up the columns consumed by your Yes button, title bar, and No button, you'll see that you've got 13 columns.
Just resize the title bar to be 10 columns instead of 11.
Change
<button class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-11 col-xs-11">New Model</button>
To
<button class="btn btn-primary noradius col-lg-10 col-md-10 col-sm-10 col-xs-10">New Model</button>
See http://jsfiddle.net/wilsonjonash/Fz4CW/6/
And if you'd like the button to be hidden at certain screen sizes, try using the responsive utility classes(like hidden-sm or hidden-xs): http://getbootstrap.com/css/#responsive-utilities
Oh, and why does it wrap? The bootstrap grid classes use float:left to arrange the grid items. overflow:hidden only has the effect of containing floats, not hiding them.