Issue on Hiding Overflow in Bootstrap CSS


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>

Here is a shot of the required result

enter image description here

Problem courtesy of: Suffii


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.


<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 noradius col-lg-10 col-md-10 col-sm-10 col-xs-10">New Model</button>


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):

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.

Solution courtesy of: Jonathan Wilson


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.