Bootstrap Tutorial - Layout a page for both mobile and desktop








Mobile and desktop

The following columns are always 50% wide, on mobile and desktop.

<!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><!--from w w  w  .ja va2  s  .  c  om-->
<body style='margin:20px;'>

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

    <div class="row">
      <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
      <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
    </div>
    <div class="row">
      <div class="col-lg-6 col-lg-offset-3">...</div>
    </div>

</body> 
</html>

Click to view the demo