Bootstrap snippet: microsoft metro tiles bootstrap

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: metro,tiles,bootstrap,colored



<div class="container bootstrap snippet"> <div class="row"> <div class="col-md-12"> <h1><strong>Microsoft Metro Tiles with bootstrap</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 class="row"> <div class="col-sm-4"> <div class="tile green"> <h3 class="title">Green Tile</h3> <p>Hello Green, this is a colored tile.</p> </div> </div> <div class="col-sm-4"> <div class="tile blue"> <h3 class="title">Blue Tile</h3> <p>Hello Blue, this is a colored tile.</p> </div> </div> </div> </div>
p, span, a, ul, li, button { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } 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-serify; 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; } .title { margin-top: 0px; } .purple, .blue, .red, .orange, .green { color: #fff; } .purple { background: #5133AB; } .purple:hover { background: darken(#5133AB, 10%); } .red { background: #AC193D;} .red:hover { background: darken(#AC193D, 10%); } .green {background: #00A600;} .green:hover { background: darken(#00A600, 10%); } .blue { background: #2672EC;} .blue:hover { background: darken(#2672EC, 10%); } .orange { background: #DC572E;} .orange:hover { background: darken(#DC572E, 10%); }
Dey-Dey

microsoft metro tiles bootstrap

Dey-Dey
  May 10th 2014, 17:15
3.9K Views