You don't need tDW's permission to start using Bootstrap 4 right now. I've been using it for a while now.
For convenience, you can reference links to the latest scripts on Max CDN. Notice some of the Classes have changed.
Bootstrap 4 Tutorial
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Cards Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--BOOTSTRAP 4 CYBORG THEME-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/4.0.0-beta.2/cyborg/bootstrap.min.css">
<style>
html, body {height: 100% }
</style>
</head>
<body>
<!--begin top nav bar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-default">
<!-- Brand -->
<a class="navbar-brand" href="#">Brand Name or Logo</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#">THIS PAGE</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">MENU 2</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">MENU 3</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">MENU 4</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">MENU 5</a> </li>
</ul>
</div>
</nav>
<div class="container">
<div class="jumbotron center-block">
<h1 class="text-white">Hello World!</h1>
<h2 class="text-warning">Welcome to Bootstrap 4</h2>
<h3 class="text-primary">Vertically Centered Cards </h3>
</div>
<div class="row row-eq-height bg-dark">
<!--BEGIN 4 COLUMNS & CARDS-->
<div class="col-sm-6 col-lg-3 align-self-center">
<div class="card h-100"> <img class="card-img-top" src="https://dummyimage.com/200x200" alt="Card image">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>
<!--/card-body--></div>
<!--/card--></div>
<!--/col--></div>
<div class="col-sm-6 col-lg-3 align-self-center">
<div class="card h-100"> <img class="card-img-top" src="https://dummyimage.com/200x200" alt="Card image">
<p> </p>
<img class="card-img-bottom" src="https://dummyimage.com/200x200" alt="Card image">
<!--/card--></div>
<!--/col--></div>
<div class="col-sm-6 col-lg-3 align-self-center">
<div class="card h-100">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quos sequi maiores, quia error numquam repudiandae ipsam ab eveniet voluptas at eum.</p>
<a href="#" class="btn btn-danger">MORE +</a>
<!--/card-body--></div>
<!--/card--></div>
<!--/col--></div>
<div class="col-sm-6 col-lg-3 align-self-center">
<div class="card h-100">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text.</p>
<a href="#" class="btn btn-danger">MORE +</a>
<!--/card-body--></div>
<!--/card--></div>
<!--/col--></div>
<!--/row--></div>
<hr>
<footer class="row">
<p class="text-center text-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ab explicabo voluptas libero impedit. Modi vel, dolores placeat id magni ut odit libero repudiandae necessitatibus? Dolorem magni illo necessitatibus error.</p>
</footer>
<!--/container--></div>
<!--First jQuery then Popper then Bootstrap-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Popper JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<!--Latest Bootstap 4 JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Nancy O'Shea— Product User, Community Expert & Moderator
1 Correct answer
4
Replies
AdChoices