Bootstrap Tutorial - Create Bootstrap Layout fitting for Mobile, tablet, and desktop








Fit for three devices

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<style>div{background:#eee;border:1px solid #DDD;}</style>
</head><!-- w ww .  j  ava2 s  .  c o  m-->
<body style='margin:20px;'>

    <div class="row">
      <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-sm-8 .col-lg-8</div>
      <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
    </div>

    <div class="row">
      <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
      <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
      <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
    </div>
    <div class="row">
      <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
      <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
    </div>

</body> 
</html>

Click to view the demo