"Box Material Design"
Bootstrap 3.2.0 Snippet by eldragon87

<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-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="box"> <div class="box-icon"> <span class="fa fa-4x fa-html5"></span> </div> <div class="info"> <h4 class="text-center">Title</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!</p> <a href="" class="btn">Link</a> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="box"> <div class="box-icon"> <span class="fa fa-4x fa-css3"></span> </div> <div class="info"> <h4 class="text-center">Title</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!</p> <a href="" class="btn">Link</a> </div> </div> </div> </div> </div>
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css); body {padding-top:50px;} .box { border-radius: 3px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); padding: 10px 25px; text-align: right; display: block; margin-top: 60px; } .box-icon { background-color: #57a544; border-radius: 50%; display: table; height: 100px; margin: 0 auto; width: 100px; margin-top: -61px; } .box-icon span { color: #fff; display: table-cell; text-align: center; vertical-align: middle; } .info h4 { font-size: 26px; letter-spacing: 2px; text-transform: uppercase; } .info > p { color: #717171; font-size: 16px; padding-top: 10px; text-align: justify; } .info > a { background-color: #03a9f4; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); color: #fff; transition: all 0.5s ease 0s; } .info > a:hover { background-color: #0288d1; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12); color: #fff; transition: all 0.5s ease 0s; }

Related: See More


Questions / Comments:

Hi, I love this design, however on apple/mac products the box-icon displays sideways and outside of the box. Anyone know an easy fix to this?

syndigital () - 8 years ago - Reply 0


Hello syndigital, I created an updated version of this component. It uses more consistent cross browser CSS code which will likely solve the issue you are describing. Check out my version at this link: http://bootsnipp.com/snippe...

Updates:
• More cross browser consistent border-radius CSS code
• Different class names
• Different content housing
• More cross browser consistent CSS code for centering icons inside the circles
• Simpler buttons
• Larger layout
• More minimal box-shadow CSS code
• Glyphicons instead of Font Awesome (both are great)
• etc. I change almost everything...

Guru () - 8 years ago - Reply 0


very nice

mostafa moheb () - 9 years ago - Reply 0


Beautifull

Layon Ferreira () - 9 years ago - Reply 0


Wonderfull

Pacific Rim () - 9 years ago - Reply 0


nice

Mirchu () - 9 years ago - Reply 0