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

16.9K 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

Paper Bootstrap Wizard

Paper Bootstrap Wizard

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