html - Bootstrap Grid and column offset -
i've following html:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-sm-5"> .col-sm-5 </div> <div class="col-sm-5 col-sm-offset-2"> .col-sm-5 .col-sm-offset-2 </div> </div> </div>
according bootstrap docs should fit row. there somethin wrong, can't figure out.
when take 11-columns account fits (notice col-sm-4 on last div instead of col-sm-5):
<div class="container"> <div class="row"> <div class="col-sm-5"> .col-sm-5 </div> <div class="col-sm-4 col-sm-offset-2"> .col-sm-5 .col-sm-offset-2 </div> </div> </div>
what i'm doing wrong in first html?
works fine me in full screen, may replacing xs
you! on 1366
width resolution. clicking on full page in below snippet works fine me.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-sm-5"> .col-sm-5 </div> <div class="col-sm-offset-2 col-sm-5"> .col-sm-5 .col-sm-offset-2 </div> </div> </div>
since totally depends on screen size, believe screen size not accommodating sm
, using xs
show in right way.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-5"> .col-xs-5 </div> <div class="col-xs-offset-2 col-xs-5"> .col-xs-5 .col-xs-offset-2 </div> </div> </div>
also, noted using border
s. make sure give this:
* {box-sizing: border-box;}
Comments
Post a Comment