<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <h1><strong>Bootstrap - Microsoft Metro Tiles</strong></h1> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="tile purple"> <h3 class="title">Purple Tile</h3> <p>Hello Purple, this is a colored tile.</p> </div> </div> <div class="col-sm-4"> <div class="tile red"> <h3 class="title">Red Tile</h3> <p>Hello Red, this is a colored tile.</p> </div> </div> <div class="col-sm-4"> <div class="tile orange"> <h3 class="title">Orange Tile</h3> <p>Hello Orange, this is a colored tile.</p> </div> </div> </div> </div> </div>

strong { font-weight: 600; } h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; line-height: 1.5em; font-weight: 300; } strong { font-weight: 400; } .tile { width: 100%; display: inline-block; box-sizing: border-box; background: #fff; padding: 20px; margin-bottom: 30px; } .tile .title { margin-top: 0px; } .tile.purple, .tile.blue, .tile.red, .tile.orange, .tile.green { color: #fff; } .tile.purple { background: #5133ab; } .tile.purple:hover { background: #3e2784; } .tile.red { background: #ac193d; } .tile.red:hover { background: #7f132d; } .tile.green { background: #00a600; } .tile.green:hover { background: #007300; } .tile.blue { background: #2672ec; } .tile.blue:hover { background: #125acd; } .tile.orange { background: #dc572e; } .tile.orange:hover { background: #b8431f; }