Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"4 boxes"
Bootstrap 4.1.1 Snippet by
jeevan123456
4.1.1
Preview
HTML
View Full Screen
Fork
Fork this
662
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> Encourage a sense of social responsibility We are determined to bring a positive change in the society with your co-operation. We work with parents, teachers, Anganwadi workers, communities, district and corporates including children. <section class="py-5 bg-white"> <div class="container"> <div class="row d-flex "> <div class="col-md-12 "> <i class="fa fa-heart text-primary fa-2x"></i><p></p> <h1>Support our cause and help make the world a better place</h1> <p>Change lives and make a difference with us</p> </div> </div> <div class="row"> <div class="col-md-3"> <div class="card bg-primary"> <div class="card-body"> <h5>Education</h5> <p>Invest in education today for a brighter tomorrow</p> </div> </div> </div> <div class="col-md-3"> <div class="card bg-danger"> <div class="card-body"> <h5>Women Empowerment</h5> <p>Empowering women means empowering communities</p> </div> </div> </div> <div class="col-md-3"> <div class="card bg-success "> <div class="card-body"> <h5>Livelihood</h5> <p>Building better livelihoods, stronger futures ahead</p> </div> </div> </div> <div class="col-md-3"> <div class="card bg-warning "> <div class="card-body"> <h5>Awareness</h5> <p>Awareness is the spark that ignites change</p> </div> </div> </div> </div> </div> </section> <section class="bg-success"> <div class="container"> <div class="row d-flex "> <div class="col-md-12 "> <i class="fa fa-heart text-primary fa-2x"></i><p></p> <h1>Support our cause and help make the world a better place</h1> <p>Change lives and make a difference with us</p> </div> </div> <div class="row"> <div class="col-md-3"> <div class="card bg-white text-center shadow"> <div class="card-body"> <h5>Education</h5> </div> </div> </div> <div class="col-md-3"> <div class="card bg-white text-center shadow"> <div class="card-body"> <h5>Women Empowerment</h5> </div> </div> </div> <div class="col-md-3"> <div class="card bg-white text-center shadow"> <div class="card-body"> <h5>Livelihood</h5> </div> </div> </div> <div class="col-md-3"> <div class="card bg-white text-center shadow"> <div class="card-body"> <h5>Education</h5> </div> </div> </div> </div> </div> </section> <section class="py-5 bg-primary"> <div class="container"> <div class="row py-5"> <div class="col-md-3"> <div class="card bg-white text-center shadow"> <div class="card-body"> <i class="fa fa-graduation-cap fa-4x"></i> <h5>Education</h5> <p>Invest in education today for a brighter tomorrow</p> </div> </div> </div> <div class="col-md-3"> <div class="card bg-white text-center shadow"> <div class="card-body"> <i class="fa fa-users fa-4x"></i> <h5>Women Empowerment</h5> <p>Empowering women means empowering communities</p> </div> </div> </div> <div class="col-md-3"> <div class="card bg-white text-center shadow"> <div class="card-body"> <i class="fa fa-newspaper-o fa-4x"></i> <h5>Livelihood</h5> <p>Building better livelihoods, stronger futures ahead</p> </div> </div> </div> <div class="col-md-3"> <div class="card bg-white text-center shadow"> <div class="card-body"> <i class="fa fa-bullhorn fa-4x"></i> <h5>Awareness</h5> <p>Awareness is the spark that ignites change</p> </div> </div> </div> </div> </div> </section>
Related:
See More
Free Template
Vue Argon Design System
71.1K
127
Status Boxes
148.8K
353
Boxes with icon hover
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76