CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Sikander
Sikander

Reputation: 2835

Bootstrap 3.0 hidden-xs not working

I have a bootstrap 3.0 page that is divided like 9 cols on the left and 3 cols on the right now. What I want is to hide 3 right cols when screen size is less than 768. This is my code structure:

<div class="col-md-3 col-sm-6 col-xs-12 hidden-xs">
     <div id="column_right">
   //php stuff goes here 
    </div>
 <div>

CSS is default bootstrap 3.0, but the problem is that when I go to small screen size like mobiles the right 3 cols are still visible. What's wrong with it?

Upvotes: 1

Views: 5166

Answers (2)

ganders
ganders

Reputation: 7432

Your markup pretty much works as it stands now. Here's a bootply [adding in your left column]

http://www.bootply.com/FYLVttbyUH

Here's the code in case bootply is not available:

<div class="col-md-9 col-sm-6 col-xs-12 red">
  <div id="column_left">
    <span>This is always shown</span>
  </div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 hidden-xs blue">
  <div id="column_right">
    <span>This should be hidden on mobile devices</span>
  </div>
  <div>
  </div></div>


            <div id="push"></div>

Upvotes: 2

joshvito
joshvito

Reputation: 1563

Your code doesn't include 2 columns.

Maybe what you want is something like this?

<div class="row">

    <div class="col-md-9 col-sm-6 col-xs-12">
        <!-- persistent column -->
    </div>
    <div class="col-md-3 col-sm-6 hidden-xs">
     <div class="row">
        <div id="column_right">
       //php stuff goes here 
        </div>
     </div>    
    </div> 
<div>

Upvotes: 0

Related Questions