Bootstrap Tutorial - Style a web page to fit to different screen size in Bootstrap








Fit to different screen size

.col-lg-* class is for larger screen, which is wider than 940px. .col-sm-* class is for smaller screen, which is wider than 728px but less than 940px. .col-* class is for extra smaller screen.

The following code uses the style for smaller screen.

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

Click to view the demo