"mobile card"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ---------->
<body>
<main>
<!-- Navigation -->
<section class="navigation">
<div class="back-to-home">
<!-- Arrow - object svg -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 30 30" version="1.1">
<title>Arrow</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g stroke-width="2" stroke="#42444C">
<polyline class="arrow" points="29.3 4 18.3 15.5 29.3 26"/>
</g></g>
</svg>
</div>
<div class="search">
<!-- Search - object svg -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 30 30" version="1.1">
<title>Search</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g stroke="#40414A" stroke-width="2">
<path class="line" d="M18 19L26.6 27.6" stroke-linecap="square"/>
<path class="circle" d="M10.5 21C15.7 21 20 16.7 20 11.5 20 6.3 15.7 2 10.5 2 5.3 2 1 6.3 1 11.5 1 16.7 5.3 21 10.5 21L10.5 21Z"/>
</g></g>
</svg>
</div>
</section>
<!-- Picture and name of restaurant -->
<section class="restaurant">
<div></div>
<h1>The Water Club</h1>
</section>
<!-- Number of tables to book -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
/* Typo */
@import 'https://fonts.googleapis.com/css?family=Montserrat|Varela|Oswald:400,700';
/* Main */
body {
background-color: #F4F4F4;
}
main {
width: 375px;
height: 667px;
margin: 40px auto 0 auto;
border: 1px solid #F4F4F4;
background-color: #FFFFFF;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .2);
position: relative;
}
section {
width: 315px;
margin: 0 auto;
}
/* Navigation */
.navigation {
margin-top: 40px;
overflow: hidden;
height: 30px;
}
.back-to-home {
float: left;
}
.search {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard React
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: