Bootstrap Snippet Bootstrap 4.2.1 landing page and Materials Desgning using HTML CSS Bootstrap

"Bootstrap 4.2.1 landing page and Materials Desgning "
Bootstrap 4.1.1 Snippet by luckmoshy

4.1.1 landing page

17.3K 12 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>  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Luckmoshy Desgner template</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="all,follow">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">  <link rel="stylesheet" href="css/custom.css">  <link rel="shortcut icon" href="favicon.png">  </head> <body>  <nav class="navbar navbar-light navbar-expand-lg fixed-top shadow-sm bg-white"><a href="index.html" class="navbar-brand">Free BS Template</a> <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button> <div id="navbarSupportedContent" class="collapse navbar-collapse"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a href="#" class="nav-link">About Us</a></li> <li class="nav-item"><a href="#" class="nav-link">Features</a></li> <li class="nav-item"><a href="#" class="nav-link">Testimonials</a></li> </ul> <div class="navbar-text ml-lg-3"> <a href="#" class="btn btn-primary text-white shadow">Sign Up</a></div> </div> </nav>  <section class="bg-light"> <div class="container"> <div class="row"> <div class="col-lg-6 order-2 order-lg-1"> <h1>Luckmoshy Designer Template</h1> <p class="lead">Proident eu nisi commodo enim deserunt enim duis sunt nostrud anim. Sunt do sit enim veniam nostrud culpa adipisicing do ullamco occaecat et. </p> <p><a href="#" class="btn btn-primary shadow mr-2">Discover More</a><a href="#" class="btn btn-outline-primary">Some another action</a></p> </div> <div class="col-lg-6 order-1 order-lg-2"><img src="https://3.bp.blogspot.com/-_7vaKiNZPXk/XCWoF-0xj7I/AAAAAAAAAMk/Bx7Ne5WLEvINHPDoG1jwY6rGO2d62pprwCKgBGAs/s1600/ux-design.jpeg" alt="..." class="img-fluid"></div> </div> </div> </section>  <section> <div class="container"> <h2>Services</h2> <p class="text-muted mb-5">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p> <div class="row"> <div class="col-sm-6 col-lg-4 mb-3"> <svg class="lnr text-primary services-icon"> <use xlink:href="#lnr-magic-wand"></use> </svg> <h6>Ex cupidatat eu</h6> <p class="text-muted">Ex cupidatat eu officia consequat incididunt labore occaecat ut veniam labore et cillum id et.</p> </div> <div class="col-sm-6 col-lg-4 mb-3"> <svg class="lnr text-primary services-icon"> <use xlink:href="#lnr-heart"></use> </svg> <h6>Tempor aute occaecat</h6> <p class="text-muted">Tempor aute occaecat pariatur esse aute amet.</p> </div> <div class="col-sm-6 col-lg-4 mb-3"> <svg class="lnr text-primary services-icon"> <use xlink:href="#lnr-rocket"></use> </svg> <h6>Voluptate ex irure</h6> <p class="text-muted">Voluptate ex irure ipsum ipsum ullamco ipsum reprehenderit non ut mollit commodo.</p> </div> <div class="col-sm-6 col-lg-4 mb-3"> <svg class="lnr text-primary services-icon"> <use xlink:href="#lnr-paperclip"></use> </svg> <h6>Tempor commodo</h6> <p class="text-muted">Tempor commodo nostrud ex Lorem occaecat duis occaecat minim.</p> </div> <div class="col-sm-6 col-lg-4 mb-3"> <svg class="lnr text-primary services-icon"> <use xlink:href="#lnr-screen"></use> </svg> <h6>Et fugiat sint occaecat</h6> <p class="text-muted">Et fugiat sint occaecat voluptate incididunt anim nostrud ea cillum cillum consequat.</p> </div> <div class="col-sm-6 col-lg-4 mb-3"> <svg class="lnr text-primary services-icon"> <use xlink:href="#lnr-inbox"></use> </svg> <h6>Et labore tempor et</h6> <p class="text-muted">Et labore tempor et adipisicing dolor.</p> </div> </div> </div> </section>  <section class="bg-light"> <div class="container"> <h2>Portfolio</h2> <p class="lead text-muted mb-5">In enim non sit irure ut adipisicing laboris et laborum.</p> <div class="row"> <div class="col-md-4 mb-4"> <div class="card shadow border-0 h-100"><a href="#"><img src="https://1.bp.blogspot.com/-hNRLdXOiEXs/XCpRF6CP1HI/AAAAAAAAATs/gTX8-uWQz1AbO71risG-Clv9q9xZLGafwCKgBGAs/s1600/nkjl.png" alt="" class="card-img-top"></a> <div class="card-body"> <h5> <a href="#" class="text-dark">Ex cupidatat eu</a></h5> <p class="text-muted card-text">Ex cupidatat eu officia consequat incididunt labore occaecat ut veniam labore et cillum id et.</p> <p class="card-text"><a href="#">Read more</a></p> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card shadow border-0 h-100"><a href="#"><img src="https://1.bp.blogspot.com/-hNRLdXOiEXs/XCpRF6CP1HI/AAAAAAAAATs/gTX8-uWQz1AbO71risG-Clv9q9xZLGafwCKgBGAs/s1600/nkjl.png" alt="" class="card-img-top"></a> <div class="card-body"> <h5> <a href="#" class="text-dark">Tempor aute occaecat</a></h5> <p class="text-muted card-text">Tempor aute occaecat pariatur esse aute amet.</p> <p class="card-text"><a href="#">Read more</a></p> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card shadow border-0 h-100"><a href="#"><img src="https://1.bp.blogspot.com/-hNRLdXOiEXs/XCpRF6CP1HI/AAAAAAAAATs/gTX8-uWQz1AbO71risG-Clv9q9xZLGafwCKgBGAs/s1600/nkjl.png" alt="" class="card-img-top"></a> <div class="card-body"> <h5> <a href="#" class="text-dark">Voluptate ex irure</a></h5> <p class="text-muted card-text">Voluptate ex irure ipsum ipsum ullamco ipsum reprehenderit non ut mollit commodo.</p> <p class="card-text"><a href="#">Read more</a></p> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card shadow border-0 h-100"><a href="#"><img src="https://1.bp.blogspot.com/-hNRLdXOiEXs/XCpRF6CP1HI/AAAAAAAAATs/gTX8-uWQz1AbO71risG-Clv9q9xZLGafwCKgBGAs/s1600/nkjl.png" alt="" class="card-img-top"></a> <div class="card-body"> <h5> <a href="#" class="text-dark">Tempor commodo</a></h5> <p class="text-muted card-text">Tempor commodo nostrud ex Lorem occaecat duis occaecat minim.</p> <p class="card-text"><a href="#">Read more</a></p> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card shadow border-0 h-100"><a href="#"><img src="https://1.bp.blogspot.com/-hNRLdXOiEXs/XCpRF6CP1HI/AAAAAAAAATs/gTX8-uWQz1AbO71risG-Clv9q9xZLGafwCKgBGAs/s1600/nkjl.png" alt="" class="card-img-top"></a> <div class="card-body"> <h5> <a href="#" class="text-dark">Et fugiat sint occaecat</a></h5> <p class="text-muted card-text">Et fugiat sint occaecat voluptate incididunt anim nostrud ea cillum cillum consequat.</p> <p class="card-text"><a href="#">Read more</a></p> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card shadow border-0 h-100"><a href="#"><img src="https://1.bp.blogspot.com/-hNRLdXOiEXs/XCpRF6CP1HI/AAAAAAAAATs/gTX8-uWQz1AbO71risG-Clv9q9xZLGafwCKgBGAs/s1600/nkjl.png" alt="" class="card-img-top"></a> <div class="card-body"> <h5> <a href="#" class="text-dark">Et labore tempor et</a></h5> <p class="text-muted card-text">Et labore tempor et adipisicing dolor.</p> <p class="card-text"><a href="#">Read more</a></p> </div> </div> </div> </div> </div> </section>  <div class="container"> <div class="row mt-4"> <div class="col-md-6"> <p class="lead display-4">outline Button Materials</p> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button> </div> <div class="col-md-6"> <p class="lead display-4"> Button Materials</p> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> </div></div> </div> <div class="container mt-5"> <p class="lead display-4">block Button Materials</p> <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button> </div> <div class="container mt-4"> <p class="lead display-4">Table</p> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <div class="container mt-4"> <p class="lead display-4">Text color</p> <p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning">.text-warning</p> <p class="text-info">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-body">.text-body</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p> <p class="text-black-50">.text-black-50</p> <p class="text-white-50 bg-dark">.text-white-50</p> </div> <section> <div class="container"> <div class="row"> <div class="card border-primary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-primary"> <h5 class="card-title">Primary card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card border-secondary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-secondary"> <h5 class="card-title">Secondary card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card border-success mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-success"> <h5 class="card-title">Success card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card border-danger mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-danger"> <h5 class="card-title">Danger card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card border-warning mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-warning"> <h5 class="card-title">Warning card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card border-info mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-info"> <h5 class="card-title">Info card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card border-light mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Light card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card border-dark mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-dark"> <h5 class="card-title">Dark card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="row"> <div class="card text-white bg-primary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Primary card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-white bg-secondary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Secondary card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-white bg-success mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Success card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-white bg-danger mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Danger card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-white bg-warning mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Warning card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-white bg-info mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Info card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card bg-light mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Light card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-white bg-dark mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Dark card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> </div> </section> <div class="container mt-4"> <div class="row"> <div class="card-columns"> <div class="card"> <img class="card-img-top" src="https://4.bp.blogspot.com/-InDD3Hm_bhU/XB4_TK3TT7I/AAAAAAAAAJ4/r5tUeCOqq1MTchFh7D7pWdf582A4qYIIwCEwYBhgL/s1600/Businesswoman-working-at-a-computer-1280x720.jpg" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title that wraps to a new line</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> <div class="card p-3"> <blockquote class="blockquote mb-0 card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer"> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card"> <img class="card-img-top" src="https://4.bp.blogspot.com/-InDD3Hm_bhU/XB4_TK3TT7I/AAAAAAAAAJ4/r5tUeCOqq1MTchFh7D7pWdf582A4qYIIwCEwYBhgL/s1600/Businesswoman-working-at-a-computer-1280x720.jpg" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card bg-primary text-white text-center p-3"> <blockquote class="blockquote mb-0"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <footer class="blockquote-footer"> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This card has a regular title and short paragraphy of text below it.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img" src="https://4.bp.blogspot.com/-InDD3Hm_bhU/XB4_TK3TT7I/AAAAAAAAAJ4/r5tUeCOqq1MTchFh7D7pWdf582A4qYIIwCEwYBhgL/s1600/Businesswoman-working-at-a-computer-1280x720.jpg" alt="Card image"> </div> <div class="card p-3 text-right"> <blockquote class="blockquote mb-0"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer"> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> </div> <section> <div class="container"> <blockquote class="blockquote text-center mb-0"> <svg class="lnr text-muted quote-icon pull-left"> <use xlink:href="#lnr-heart"> </svg> <p class="mb-0">There is no place like 127.0.0.1</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </section>  <div class="py-5 bg-light"> <div class="container"> <div class="row"> <div class="col-lg-4 mb-4 mb-lg-0"> <h5>Bootstrap 101</h5> <ul class="contact-info list-unstyled"> <li><a href="mailto:sales@landy.com" class="text-dark">hello@bootstrap101.com</a></li> <li><a href="tel:123456789" class="text-dark">+00 123 456 789</a></li> </ul> <p class="text-muted">Laborum aute enim consectetur eu laboris commodo.</p> </div> <div class="col-lg-4 col-md-6"> <h5>Pages</h5> <ul class="links list-unstyled"> <li> <a href="#" class="text-muted">Nisi in commodo</a></li> <li> <a href="#" class="text-muted">reprehenderit</a></li> <li> <a href="#" class="text-muted">Nostrud</a></li> <li> <a href="#" class="text-muted">Et eu eu</a></li> </ul> </div> <div class="col-lg-4 col-md-6"> <h5>Favourites</h5> <ul class="links list-unstyled"> <li> <a href="#" class="text-muted">Minim labore nulla</a></li> <li> <a href="#" class="text-muted">Nulla qui nisi</a></li> <li> <a href="#" class="text-muted">Iris Vor Arnim</a></li> <li> <a href="#" class="text-muted">Consectetur cupidatat</a></li> </ul> </div> </div> </div> </div> <div class="py-3 bg-dark text-white"> <div class="container"> <div class="row"> <div class="col-md-7 text-center text-md-left"> <p class="mb-md-0">© 2018 Your company. All rights reserved. </p> </div> <div class="col-md-5 text-center text-md-right"> <p class="mb-0">Template By <a href="https://bootstrapious.com/" class="external text-white">Bootstrapious</a> </p> </div> </div> </div> </div>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js"></script> </body> </html>

body { padding-top: 56px; } section { padding-top: 5rem; padding-bottom: 5rem; } .lnr { display: inline-block; fill: currentColor; width: 1em; height: 1em; vertical-align: -0.05em; stroke-width: 1; } .services-icon { margin-bottom: 20px; font-size: 30px; } .quote-icon { font-size: 40px; margin-bottom: 20px; }

Related: See More

Hipster As F*** Cards

Hipster As F*** Cards

bootstrap 4.1.1 landing carousel

bootstrap 4.1.1 landing carousel

Elegant Login Page

Elegant Login Page

My Awesome Login Page

My Awesome Login Page

Questions / Comments:

Posting GuidelinesFormatting