Hiding a column in a fluid bootstrap layout

Question

I'm using bootstrap 3 and AngularJS and I have two column fluid layout.

The two columns are declared like so -

<div class="chart col-md-8">...</div>
<div class="options col-md-4">...</div>

If the user's browser window is less than a certain width, or if they resize it to less than a certain width, I want to hide the options column and make the chart column take up the full width of the screen. How would I do this?

Answer 1

Look here:

Responsive Utilities

If you add the .hidden-xs class to the options div it won't be visible for extra small devices (<768px). Find the appropriate class for your usage. You can use a single or a combination of the available classes for toggling content across viewport breakpoints.

<div class="options col-md-4 hidden-xs">...</div>

Answer 2

Bootstrap provides specis helper classes for this. So for your situation it can be:

<div class="chart col-md-8 col-xs-12">...</div>
<div class="options col-md-4 hidden-xs">...</div>

It means that when xs media query is triggered .options column will be hidden and .chart will expand to full width (12 cols).