microsoft metro tiles bootstrap

This bootstrap snippet called "microsoft metro tiles bootstrap" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: metro,tiles,bootstrap,colored

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection


                      
<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>                    

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection


                       
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%);
}
                      
                                    

Similar snippets

Bootstrap snippet Colorful cards with gradient

Colorful cards with gradient

View

Bootstrap snippet Colored user cards

Colored user cards

View

Bootstrap snippet Material design for Bootstrap 3 bootdey

Material design for Bootstrap 3 bootdey

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.1.0

Created: May 10th 2014, 00:12

Views: 5.4K

Rated 5/5 based on 2 reviews