"Bootstrap 4 Services"
Bootstrap 4.1.1 Snippet by dkstudio

<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 rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <div class="background2"> <div class='container'> <h1>Services</h1> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="services-box leftReveal" data-sr-id="13"> <i class="fa fa-code fa-2x services-icon"></i> <h3 class="service-name">1. Web Design</h3> <p class="text-small">Lorem ipsum dolor sit amet, consectet adipiscing elit. Cras est urna, imperd eget sem at, pellentes que cursus elit.</p> <button type="button" class="btn btn-default mt10" data-toggle="modal" data-target="#item1-services">Info</button> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="services-box leftReveal" data-sr-id="13"> <i class="fa fa-code fa-2x services-icon"></i> <h3 class="service-name">1. Web Design</h3> <p class="text-small">Lorem ipsum dolor sit amet, consectet adipiscing elit. Cras est urna, imperd eget sem at, pellentes que cursus elit.</p> <button type="button" class="btn btn-default mt10" data-toggle="modal" data-target="#item1-services">Info</button> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="services-box leftReveal" data-sr-id="13"> <i class="fa fa-code fa-2x services-icon"></i> <h3 class="service-name">1. Web Design</h3> <p class="text-small">Lorem ipsum dolor sit amet, consectet adipiscing elit. Cras est urna, imperd eget sem at, pellentes que cursus elit.</p> <button type="button" class="btn btn-default mt10" data-toggle="modal" data-target="#item1-services">Info</button> </div> </div> </div> </div> </div>
.background2 { background-color: #1d1d1d; } .services-box { padding: 30px; background-color: #212121; border-left: 2px solid #292929; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; } .services-icon { font-size: 40px; color: #8980fe; } .service-name { margin-bottom: 15px; margin-top: 15px; } .text-small { font-size: 16px; color: #fff; } .btn-default { color: #fff; background-color: transparent; border-color: #535353; } .btn { border-radius: 45px; margin-bottom: 1px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: 300; letter-spacing: 2px; font-size: 10px; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .mt10 { margin-top: 10px !important; } .h3, h3 { font-size: 24px; } .h2, .h3, .h4, .h5, .h6, h2, h3, h4, h5, h6 { font-weight: 100; color: #fff; }

Related: See More


Questions / Comments: