"bootsrap 4 crad responsive"
Bootstrap 4.0.0 Snippet by Juan86

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav"> <div class="container"> <a class="navbar-brand js-scroll-trigger" href="http://lacodeid.com/">LACODEID WEBDESIGN</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#page-top">Home</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#services">Service</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#team">Team</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#work">Work</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> <!-- header --> <header class="bg-primary text-white"> <div class="container-background-header bg-container-header"> <div class="container text-center"> <h3>Welcome to Portfolio</h3> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore. For Bootstrap 4</p> </div> </div> </header> <section id="about" class="section"> <div class="container container-setting"> <div class="row"> <div class="col-lg-3 mx-auto text-center"> <div class="background-setting backgorund-default margin-setting"> <img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/1.jpg" class="img-responsive img-setting"> <h2>LACODEID</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p> <div class="line-dash"></div> <div> <i class="fa fa-facebook fa-style fa-style-facebook"></i> <i class="fa fa-twitter fa-style fa-style-twitter"></i> <i class="fa fa-instagram fa-style fa-style-instagram"></i> <i class="fa fa-google-plus fa-style fa-style-google-plus"></i> </div> </div> </div> <div class="col-lg-3 mx-auto text-center"> <div class="background-setting backgorund-default margin-setting"> <img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/2.jpg" class="img-responsive img-setting"> <h2>LACODEID</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p> <div class="line-dash"></div> <div> <i class="fa fa-facebook fa-style fa-style-facebook"></i> <i class="fa fa-twitter fa-style fa-style-twitter"></i> <i class="fa fa-instagram fa-style fa-style-instagram"></i> <i class="fa fa-google-plus fa-style fa-style-google-plus"></i> </div> </div> </div> <div class="col-lg-3 mx-auto text-center"> <div class="background-setting backgorund-default margin-setting"> <img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/5.jpg" class="img-responsive img-setting"> <h2>LACODEID</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p> <div class="line-dash"></div> <div> <i class="fa fa-facebook fa-style fa-style-facebook"></i> <i class="fa fa-twitter fa-style fa-style-twitter"></i> <i class="fa fa-instagram fa-style fa-style-instagram"></i> <i class="fa fa-google-plus fa-style fa-style-google-plus"></i> </div> </div> </div> <div class="col-lg-3 mx-auto text-center"> <div class="background-setting backgorund-default margin-setting"> <img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/4.jpg" class="img-responsive img-setting"> <h2>LACODEID</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p> <div class="line-dash"></div> <div> <i class="fa fa-facebook fa-style fa-style-facebook"></i> <i class="fa fa-twitter fa-style fa-style-twitter"></i> <i class="fa fa-instagram fa-style fa-style-instagram"></i> <i class="fa fa-google-plus fa-style fa-style-google-plus"></i> </div> </div> </div> </div> </div> </section> <section id="work" class="section"> <div class="container container-setting-default"> <div class="row"> <div class="col-md-3 mx-auto text-center margin-setting"> <h2 style="text-align: center;">WORK</h2> <i class="fa fa-2x fa-users fa-style-cricle"></i> </div> </div> <div class="row"> <div class="col-lg-3 mx-auto text-center"> <div class="background-setting backgorund-default margin-setting"> <img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/1.png" class="img-responsive img-setting"> <h2>LACODEID</h2> </div> </div> <div class="col-lg-3 mx-auto text-center"> <div class="background-setting backgorund-default margin-setting"> <img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/2.png" class="img-responsive img-setting"> <h2>LACODEID</h2> </div> </div> <div class="col-lg-3 mx-auto text-center"> <div class="background-setting backgorund-default margin-setting"> <img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/3.png" class="img-responsive img-setting"> <h2>LACODEID</h2> </div> </div> <div class="col-lg-3 mx-auto text-center"> <div class="background-setting backgorund-default margin-setting"> <img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/4.png" class="img-responsive img-setting"> <h2>LACODEID</h2> </div> </div> </div> <div class="row"> <div class="col-lg-3 mx-auto text-center"> <div class="background-setting backgorund-default margin-setting"> <img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/5.png" class="img-responsive img-setting"> <h2>LACODEID</h2> </div> </div> <div class="col-lg-3 mx-auto text-center"> <div class="background-setting backgorund-default margin-setting"> <img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/6.png" class="img-responsive img-setting"> <h2>LACODEID</h2> </div> </div> <div class="col-lg-3 mx-auto text-center"> <div class="background-setting backgorund-default margin-setting"> <img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/7.png" class="img-responsive img-setting"> <h2>LACODEID</h2> </div> </div> <div class="col-lg-3 mx-auto text-center"> <div class="background-setting backgorund-default margin-setting"> <img src="http://lacodeid.com/template/demolink/portfoliopart1zip/img/snap/8.png" class="img-responsive img-setting"> <h2>LACODEID</h2> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="py-5 bg-dark"> <div class="container"> <p class="m-0 text-center text-white">Copyright © Your Website lacodeid 2017</p> </div> <!-- /.container --> </footer> </body> </html>
body { font-size: 14px; font-family: 'Rubik', sans-serif; font-weight: 500px; } h2 { margin-top: 10px; margin-bottom: 10px; } p { padding: 10px; line-height: 1.7; } /*main header*/ @media (min-width: 992px) { header { padding: 220px 0 139px!important; } } header { padding: 220px 0 139px!important; } @media (min-width: 992px) { header { padding: 156px 0 100px; } } .bg-container-header { background: #000; background: -webkit-linear-gradient(to left, #000 , #000); background: linear-gradient(to left, #000 , #000); opacity: .7; } .container-background-header.bg-container-header { position: absolute; top: 0; left: 0; right: 0; margin-top: 0; margin-bottom: 0; max-width: 100%; height: 100%; color: #ffffff; } .container-background-header.bg-container-header { padding: 95px 0 135px; overflow: hidden; } /*container*/ .container-setting-default { background-color: #ffffff; padding: 25px; margin-top: -75px; } .container-setting { background-color: #ffffff; padding: 25px; border-top: 2px solid #0193df; } @media (min-width: 992px) { .container-setting { position: relative; display: block; margin-top: -45px; margin-left: 119px; } .container-setting-default { margin-left: 119px; } .container-background-header.bg-container-header { padding: 160px 0 135px!important; } .fa-style-home { margin-top: -20px!important; } } /*section*/ section { padding: 150px 0; } .section { padding: 25px 0!important; } .bg-light-default { background-color: #ffc107!important; } .bg-primary { position: relative; background-image: url('../img/header.jpg'); background-color: transparent!important; overflow: visible; } /*background*/ .background-setting { display: block; margin: 0 auto; padding: 10px 0 10px 0; color: #000; } .background-setting.backgorund-default { background-color: #f9f9f9; } .backgorund-default:focus, .backgorund-default:hover { transition: all 0.4s ease-in-out; cursor: default; box-shadow: 0 0 16px rgba(0, 0, 0, 0.3); } /*margin*/ .margin-setting { margin-top: 0; margin-bottom: 25px; } .mx-auto { margin-right: auto!important; margin-left: auto!important; } .line-dash { border: 1px solid #ccc; border-style: dashed; margin-top: 5px; margin-bottom: 5px; } .fa-style { color: #ffffff; padding: 10px; text-align: center; border-radius: 25px; font-size: 16px!important; width: 35px; } .fa-style-facebook { background: #343a40; } .fa-style-twitter { background: #343a40; } .fa-style-instagram { background: #343a40; } .fa-style-google-plus { background: #343a40; } .fa-style-facebook:hover { background: #0b5fb3; } .fa-style-twitter:hover { background: #82c0ff; } .fa-style-instagram:hover { background: #ff35ae; } .fa-style-google-plus:hover { background: #ff3535; } .fa-style-cricle { display: block; margin: 0 auto; margin-top: 15px; overflow: visible; background-color: #343a40; border-radius: 35px; border: dotted; padding: 15px; width: 65px; height: auto; color: #fff; text-align: center; } .fa-style-home { background-color: #ffc107; color: #fff; padding: 10px; border-radius: 25px; } .fa-style-home { margin-top: 5px; } .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .fa-5x { font-size: 5em; } .fa-inverse { color: #ffffff; } .fa-stack-1x { line-height: inherit; } .fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-text-cs { color: #ffc107; } .style-text { font-weight: bold; color: #ffc107; } .lacodeid-jarak-colum-content.background-deafult { background-color: #f9f9f9; line-height: 1.7; color: #000; overflow: hidden; } .img-cricle { border-radius: 80px; border: dotted; } .panel-body { margin-bottom: 15px; } .img-setting { width: 93%; height: 175px; } .img-setting { visibility: inherit; }

Related: See More


Questions / Comments: