"bootstrap 4 card layout"
Bootstrap 4.0.0 Snippet by sibaspage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: