Bootstrap grid view with cards
<![CDATA[ <html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container p-2">
<!-- Row length 12-->
<!-- row 1-->
<div class="row p-2 text-center">
<!-- column 1-->
<div class="col-md-4">
<div class="card cardView">
<div class="card-body">
<h4>Menu 1</h4>
Card Body
</div>
</div>
</div>
<!-- column 2-->
<div class="col-md-4">
<div class="card cardView">
<div class="card-body">
<h4>Menu 2</h4>
Card Body
</div>
</div>
</div>
<!-- column 3-->
<div class="col-md-4">
<div class="card cardView">
<div class="card-body">
<h4>Menu 3</h4>
Card Body
</div>
</div>
</div>
</div>
<!-- row 2-->
<div class="row p-2 text-center">
<!-- column 1-->
<div class="col-md-4">
<div class="card cardView">
<div class="card-body">
<h4>Menu 1</h4>
Card Body
</div>
</div>
</div>
<!-- column 2-->
<div class="col-md-4">
<div class="card cardView">
<div class="card-body">
<h4>Menu 2</h4>
Card Body
</div>
</div>
</div>
<!-- column 3-->
<div class="col-md-4">
<div class="card cardView">
<div class="card-body">
<h4>Menu 3</h4>
Card Body
</div>
</div>
</div>
</div>
<div class="row p-2 text-center">
<!-- column 1-->
<div class="col-md-4">
<div class="card cardView">
<div class="card-body">
<h4>Menu 1</h4>
Card Body
</div>
</div>
</div>
<!-- column 2-->
<div class="col-md-4">
<div class="card cardView">
<div class="card-body">
<h4>Menu 2</h4>
Card Body
</div>
</div>
</div>
<!-- column 3-->
<div class="col-md-4">
<div class="card cardView">
<div class="card-body">
<h4>Menu 3</h4>
Card Body
</div>
</div>
</div>
</div>
<!-- container End-->
</div>
</body>
</html> ]]>
<![CDATA[.cardView{
background-color: #f5f5f5;
box-shadow: 1px 1px 1px #888;
}
.cardView:hover{
background-color: skyblue;
color: white;
box-shadow: 3px 3px 3px #888;
transition-duration: all 0.2s;
} ]]>
No comments:
Post a Comment