"bootstrap 4 card layout"
Bootstrap 4.0.0 Snippet by sibaspage

<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="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <div class="jumbotron jumbotron-fluid"> <div class="container-fluid text-center"> <h1 class="display-3">Sibas Page</h1> <p class="lead">An UI & UX Developer.</p> </div> </div> <div class="container"> <div class="row"> <h2>Latest News</h2> <div class="card-columns"> <div class="card"> <img class="card-img-top img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Placeholder_couple_superhero.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title that wraps to a new line</h4> <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="card-block card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card card-inverse card-primary p-3 text-center"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card"> <img class="card-img img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Placeholder_couple_superhero.png" alt="Card image"> </div> <div class="card p-3 text-right"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <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 img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Placeholder_couple_superhero.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <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"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card text-center"> <div class="card-block"> <h4 class="card-title">Card title</h4> <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> <a href="http://www.sibaspage.com" target="_blank">SIBASPAGE</a> </div> </div>
body{ background-color:#f2f2f2; font-family: 'Roboto', sans-serif; } .card{ box-shadow:0px 2px 2px #aaa; } .card-primary { background-color: #6c08a2; border-color: #6c08a2; } .card:hover{ box-shadow:0px 4px 4px #aaa; } .jumbotron{ box-shadow:0px 2px 2px #aaa; background:#6c08a2; color:#fff; }

Related: See More


Questions / Comments: