Cards Bootstrap 5Free+ CSS
Bootstrap 5 Real Estate Box Design Snippet — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
4.8k views104 downloads
gosnippets.com/preview/bootstrap-5-real-estate-box-design-snippet
Source Code
1<div class="container main-section">
2 <div class="row">
3 <div class="col-lg-4">
4 <div class="section border bg-white rounded p-2">
5 <div class="row">
6 <div class="col-lg-12 img-section">
7 <img src="http://nicesnippets.com/demo/re-image6.jpg" class="p-0 m-0 res-ponsive">
8 <span class="badge bg-danger add-sens p-2 rounded-0">NOW</span>
9 </div>
10 <div class="col-lg-12 sectin-title">
11 <h1 class="pt-2 pb-2">This Is a Nice Palace</h1>
12 </div>
13 <div class="col-lg-12">
14 <div class="row">
15 <div class="col-lg-2">
16 <span class="badge bg-success p-2">$ 300</span>
17 </div>
18 <div class="col-lg-10 text-end">
19 <span><i class="fas fa-star"></i></span>
20 <span><i class="fas fa-star"></i></span>
21 <span><i class="fas fa-star"></i></span>
22 <span><i class="fas fa-star"></i></span>
23 <span><i class="fas fa-star-half-alt"></i></span><br>
24 </div>
25 </div>
26 <hr>
27 </div>
28 <div class="col-lg-12 section-detail">
29 <p class="ms-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
30 tempor.</p><hr>
31 </div>
32 <div class="col-lg-12 pb-2">
33 <div class="row">
34 <div class="col-lg-6">
35 <a href="#" class="btn btn-danger w-100 btn-sm">Book Now</a>
36 </div>
37 <div class="col-lg-6">
38 <a href="#" class="btn btn-info w-100 btn-sm">Apply For Rent</a>
39 </div>
40 </div>
41 </div>
42 </div>
43 </div>
44 </div>
45 <div class="col-lg-4">
46 <div class="section border bg-white rounded p-2">
47 <div class="row">
48 <div class="col-lg-12 img-section">
49 <img src="http://nicesnippets.com/demo/re-image4.jpg">
50 <span class="badge bg-danger add-sens p-2 rounded-0">NOW</span>
51 </div>
52 <div class="col-lg-12 sectin-title">
53 <h1 class="pt-2">This Is a Nice Palace</h1>
54 </div>
55 <div class="col-lg-12">
56 <div class="row">
57 <div class="col-lg-2">
58 <span class="badge bg-success p-2">$ 300</span>
59 </div>
60 <div class="col-lg-10 text-end">
61 <span><i class="fas fa-star"></i></span>
62 <span><i class="fas fa-star"></i></span>
63 <span><i class="fas fa-star"></i></span>
64 <span><i class="fas fa-star"></i></span>
65 <span><i class="fas fa-star-half-alt"></i></span><br>
66 </div>
67 </div>
68 <hr>
69 </div>
70 <div class="col-lg-12 section-detail">
71 <p class="ms-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
72 tempor.</p><hr>
73 </div>
74 <div class="col-lg-12 pb-2">
75 <div class="row">
76 <div class="col-lg-6">
77 <a href="#" class="btn btn-danger w-100 btn-sm">Book Now</a>
78 </div>
79 <div class="col-lg-6">
80 <a href="#" class="btn btn-info w-100 btn-sm">Apply For Rent</a>
81 </div>
82 </div>
83 </div>
84 </div>
85 </div>
86 </div>
87 <div class="col-lg-4">
88 <div class="section border bg-white rounded p-2">
89 <div class="row">
90 <div class="col-lg-12 img-section">
91 <img src="http://nicesnippets.com/demo/re-image5.jpeg">
92 <span class="badge bg-danger add-sens p-2 rounded-0">NOW</span>
93 </div>
94 <div class="col-lg-12 sectin-title">
95 <h1 class="pt-2">This Is a Nice Palace</h1>
96 </div>
97 <div class="col-lg-12">
98 <div class="row">
99 <div class="col-lg-2">
100 <span class="badge bg-success p-2">$ 300</span>
101 </div>
102 <div class="col-lg-10 text-end">
103 <span><i class="fas fa-star"></i></span>
104 <span><i class="fas fa-star"></i></span>
105 <span><i class="fas fa-star"></i></span>
106 <span><i class="fas fa-star"></i></span>
107 <span><i class="fas fa-star-half-alt"></i></span><br>
108 </div>
109 </div>
110 <hr>
111 </div>
112 <div class="col-lg-12 section-detail">
113 <p class="ms-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
114 tempor.</p><hr>
115 </div>
116 <div class="col-lg-12 pb-2">
117 <div class="row">
118 <div class="col-lg-6">
119 <a href="#" class="btn btn-danger w-100 btn-sm">Book Now</a>
120 </div>
121 <div class="col-lg-6">
122 <a href="#" class="btn btn-info w-100 btn-sm">Apply For Rent</a>
123 </div>
124 </div>
125 </div>
126 </div>
127 </div>
128 </div>
129 </div>
130</div>More Cards snippets
Bootstrap carousel with cards in 3 columns
Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.
CardsView →
Bootstrap 5 ecommerce product cards details template
Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
CardsView →
Bootstrap snippet Panels with nav tabs using HTML & CSS
Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
CardsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.