"Material design Bootstrap 4 Sample Landing Page Template"
Bootstrap 4.1.1 Snippet by abahtin

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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Material Design Bootstrap</title> <!-- Font Awesome --> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <!-- Material Design Bootstrap --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.7/css/mdb.min.css" /> <!-- Your custom styles (optional) --> </head> <body> <!-- Start your project here--> <nav class="navbar navbar-expand-lg navbar-dark bg-warning "> <a href="" class="navbar-brand">LOGO</a> <button class="navbar-toggler" data-toggle="collapse" data-target="#is"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse " id="is"> <div class="navbar-nav w-100 justify-content-lg-center flex-md-wrap"> <div class="nav-item"> <a href="" class="nav-link px-5 py-2 ">link</a> </div> <div class="nav-item"> <a href="" class="nav-link px-5 py-2 ">link</a> </div> <div class="nav-item"> <a href="" class="nav-link px-5 py-2 ">link</a> </div> <div class="nav-item"> <a href="" class="nav-link px-5 py-2 ">link</a> </div> <div class="nav-item"> <a href="" class="nav-link px-5 py-2 ">link</a> </div> <div class="nav-item"> <a href="" class="nav-link px-5 py-2 ">link</a> </div> <div class="nav-item"> <a href="" class="nav-link px-5 py-2 ">link</a> </div> <div class="nav-item"> <a href="" class="nav-link px-5 py-2 ">link</a> </div> <div class="nav-item"> <a href="" class="nav-link px-5 py-2 ">link</a> </div> </div> </div> </nav> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://dummyimage.com/1200x400/8c8/000000&text=1200x400" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://dummyimage.com/1200x400/88c/000000&text=1200x400" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://dummyimage.com/1200x400/888/000000&text=1200x400" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" ></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" ></span> <span class="sr-only">Next</span> </a> </div> <div class="container jumbotron clearfix my-lg-4"> <div class="row no-gutters p-md-5 p-2"> <div class="col-md-4 col-12 px-2"> <div class="text-center"><i><span class="fa fa-user fa-5x"></span></i></div> <p class="mt-3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto consequatur cum eum laborum magni nam necessitatibus nisi? Ad cumque debitis dolore eum hic laboriosam nesciunt odit officia omnis similique. </p> </div> <div class="col-md-4 col-12 px-2"> <div class="text-center"><i><span class="fa fa-industry fa-5x"></span></i></div> <p class="mt-3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto consequatur cum eum laborum magni nam necessitatibus nisi? Ad cumque debitis dolore eum hic laboriosam nesciunt odit officia omnis similique. </p> </div> <div class="col-md-4 col-12 px-2"> <div class="text-center"><i><span class="fa fa-dashboard fa-5x"></span></i></div> <p class="mt-3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto consequatur cum eum laborum magni nam necessitatibus nisi? Ad cumque debitis dolore eum hic laboriosam nesciunt odit officia omnis similique. </p> </div> </div> <div class="row"> <div class="col-12 col-md-5 p-5"> <address class="m-lg-5"> <b class="d-block">Twitter, Inc.</b> <p>1355 Market St, Suite 900</p> <p>San Francisco, CA 94103</p> <p> <abbr title="Phone Number">P</abbr>: (123) 456-7890 </p> </address> </div> <div class="col-12 col-md-7"> <form> <div class="md-form"> <label for="name">Name</label> <input type="text" name="" class="form-control" id="name"> </div> <div class="md-form"> <label for="email">Email</label> <input type="email" name="" class="form-control" id="email"> </div> <div class="md-form"> <label for="pswd">Password</label> <input type="password" name="" class="form-control" id="pswd"> </div> <div class="md-form"> <input type="password" name="" class="form-control" id="r-paswd"> <label for=r-paswd>Repeat Password</label> </div> <div class="text-center text-lg-right"> <input type="submit" name="submit" id="submit" class="btn btn-warning"> </div> </form> </div> </div> </div> <!-- /Start your project here--> <!-- MDB core JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.7/js/mdb.min.js"></script> </body> </html>
$('a').click(function(event){ event.preventDefault(); });

Questions / Comments: