Does this Bootstrap responsive layout need two separate grids? -
i want login page on xs/sm viewports:
label1 [input1] label2 [input2]
and md/lg viewports:
label1 label2 [input1] [input2]
however solution requires separate grid each
<div class="container-fluid"> <!-- small screens --> <div class="visible-xs visible-sm"> <div class="row"> <div class="col-xs-12"> <label for="username">username</label> </div> <div class="col-xs-12"> <input type="text" name="username" /> </div> </div> <div class="row"> <div class="col-xs-12"> <label for="password">password</label> </div> <div class="col-xs-12"> <input type="text" name="password" /> </div> </div> </div> <!-- large screens --> <div class="visible-md visible-lg"> <div class="row"> <div class="col-md-2"> <label for="username">username</label> </div> <div class="col-md-1"></div> <div class="col-md-2"> <label for="password">password</label> </div> <div class="col-md-7"></div> </div> <div class="row"> <div class="col-md-2"> <input type="text" name="username" /> </div> <div class="col-md-1"></div> <div class="col-md-2"> <input type="text" name="password" /> </div> <div class="col-md-7"></div> </div> </div> </div>
can 1 grid accomplish this? how , why use form-group in layout?
i think should use code rid of problem
<div class="container-fluid"> <!-- screens --> <div class="visible-lg visible-md visible-xs visible-sm"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="col-lg-6 col-md-6"> <div class="col-sm-12 col-xs-12"> <label for="username">username</label> </div> <div class="col-sm-12 col-xs-12"> <input type="text" name="username" /> </div> </div> <div class="col-lg-6 col-md-6"> <div class="col-sm-12 col-xs-12"> <label for="password">password</label> </div> <div class="col-sm-12 col-xs-12"> <input type="text" name="password" /> </div> </div> </div> </div> </div>
and .form-group
needed optimum spacing..
Comments
Post a Comment