Twitter Bootstrap Question posted in

bootstrap 3 grid system not working accordingly – Twitter bootstrap

I’m trying to test bootstrap 3 grid system. Two columns in a row. In extra small devices like mobiles, it’ll be stacked in one column and in small devices like in tablets, it’ll be in 2 columns. But it’s not working accordingly in mobile devices. In mobile devices, it’ showing in 2 columns whereas it should show in 1 column. Anything wrong in my code? Thanks. 

   <html>
    <head>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    </head>
    <body>
    <div class="container-fluid">
    <div class="row">
       <div class="col-xs-12 col-sm-6">
          <p>Item 1</p>
       </div>
       <div class="col-xs-12 col-sm-6">
          <p>Item 2</p>
       </div>

    </div>
    </div>
    </body>
    </html>
Tags:

3

Answers


  1. 0

    hidden-xs will hide the things in small screen. col-sm-6 will automatically take width:100% for screen below 767px; So .col-xs-12 not required to include.

    HTML:

     <div class="container-fluid">
        <div class="row">
           <div class="col-sm-6">
              <p>Item 1</p>
           </div>
           <div class="col-sm-6">
              <p>Item 2</p>
           </div>

        </div>
        </div>
    Login or Signup to reply.
  2. 0

    Remove the class="hidden-xs" B’coz its hide the content when screen size is extra-small.

    Login or Signup to reply.
  3. 0

    you are close but you are using wrong column sizes.

    If you want column to be 100% on tablets (small devices) and below you shouldn’t use col-sm-6 as it will still be on 2 columns on tablets, you should use col-sm-12, or col-md-6 – col-md-6 is saying that on desktop (medium) devices, 992px and above, that column width should be 50%, and below it should be 100%.

    You also hide everything on mobiles (extra small ‘xs’ devices) with hidden-xs!

    So try this code:

    <html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    </head>
    <body>
        <div class="container-fluid">
            <div class="row ">
                <div class="col-sm-12 col-md-6">
                    <p>Item 1</p>
                </div>
                <div class="col-sm-12 col-md-6">
                    <p>Item 2</p>
                </div>
            </div>
        </div>
    </body>
</html>

    Again we don’t need to use col-sm-12 as all sizes below smallest specified (in this case md-medium) are automatically 100%, this comes from mobile first design principle.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search