Bootstrap Grid System - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Grid Layout

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Grid Layout

Introduction

Bootstrap's grid system allows up to 12 columns across the page.

Bootstrap's grid system is responsive, and the columns will re-arrange on the screen size.

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

Grid Classes

The Bootstrap grid system has four classes:

Style Extension Device Screen Size
xs phones screens less than 768px wide
sm tablets screens equal to or greater than 768px wide)
md small laptopsscreens equal to or greater than 992px wide)
lg laptops and desktops screens equal to or greater than 1200px wide)

The following is a basic structure of a Bootstrap grid:

The following example shows how to get a four equal-width columns starting at tablets and scaling to large desktops.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head><!--  w  w  w  . j  av  a2 s.  com-->
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div class="row">
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:#EEEEEE;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:#EEEEEE;">.col-sm-3</div>
  </div>
</div>

</body>
</html>

Related Tutorials