CODEWITHSUNDEEP
csstwitter-bootstrap
Energizem
Energizem

Reputation: 221

Bootstrap grid change columns on resize

I am trying to find a way to resize grid columns. It's ahrd to explain so i've atached a picture of what i would like to achieve resize basicly when i resize browser window, grid changes so the last element in column gets moved to new row. Can this be done with bootstrap or any other technology?

A picture is worth a thousand words

Upvotes: 1

Views: 5022

Answers (2)

M.I.A
M.I.A

Reputation: 247

Bootstrap is having built in classes you can do it with them. for the above picture you showed try the following code and dont forget to include bootstrap css. which you can get from getBootstrap website. i am supposing there are 6 boxes in a row. you can even handle then with the help of @media query in css. try exploring @media query behavior on different screen widths and different type of devices like ipad tablets and phone etc.

            <html lang="en">
        <head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </head>
        <body>
        <div class="row"><!-- row is a built in class of bootstrap and each row has 12 column -->
                <!-- give each column a width of 2 columns -->
                <!-- col-lg-* is for large screens  but include all type of classes for all type of screens-->
                <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;>
                        Box 1
                </div>
                <!-- col-md-* is for medium size screens  but include all type of classes for all type of screens-->
                <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;">
                        Box 2
                </div>
                <!-- col-sm-* is for small screens  but include all type of classes for all type of screens-->
                <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;">
                        Box 3
                </div>
                <!-- col-xs-* is for extra small screens  but include all type of classes for all type of screens-->
                <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;">
                        Box 4
                </div>
                <!-- col-xl-* is for extra large screens  but include all type of classes for all type of screens-->
                <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;">
                        Box 5
                </div>

                <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;">
                        Box 6
                </div>
        </div>
        </body>
        </html>

BootStrap html Behavior on different screen sizes

Upvotes: 6

Clark Baker
Clark Baker

Reputation: 91

Unless I'm missing something in your question, this is exactly what Bootstrap is for. You could come up with your own solution, but it's so easy to start with Bootstrap.

http://getbootstrap.com/

Other responsive frameworks exist, but I recommend Bootstrap

Upvotes: 0

Related Questions