Cards Bootstrap 5Free+ CSS
Add a card to your UI with Bootstrap job board snippets. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
5.9k views48 downloads
gosnippets.com/preview/bootstrap-job-board-snippets
Source Code
1<div class="container mt-5">
2 <div class="d-flex justify-content-between">
3 <h4>Recommended Jobs</h4> <button class="btn btn-sm btn-outline-dark">Apply all</button>
4 </div>
5 <div class="row mt-2 g-1">
6 <div class="col-md-3">
7 <div class="card p-2">
8 <div class="text-end"> <small>Full Time</small> </div>
9 <div class="text-center mt-2 p-3"> <img src="https://img.icons8.com/color/96/000000/google-logo.png" width="60" /> <span class="d-block font-weight-bold">UX Designer</span>
10 <hr> <span>Google Inc</span>
11 <div class="d-flex flex-row align-items-center justify-content-center"> <i class="fa fa-map-marker"></i> <small class="ms-1">FA 100, OH, USA</small> </div>
12 <div class="d-flex justify-content-between mt-3"> <span>$40,000</span> <button class="btn btn-sm btn-outline-dark">Apply Now</button> </div>
13 </div>
14 </div>
15 </div>
16 <div class="col-md-3">
17 <div class="card p-2">
18 <div class="text-end"> <small>Full Time</small> </div>
19 <div class="text-center mt-2 p-3"> <img src="https://img.icons8.com/fluent/48/000000/instagram-new.png" width="60" /> <span class="d-block font-weight-bold">UX Designer</span>
20 <hr> <span>Instagram Inc</span>
21 <div class="d-flex flex-row align-items-center justify-content-center"> <i class="fa fa-map-marker"></i> <small class="ms-1">FA 104, OH, USA</small> </div>
22 <div class="d-flex justify-content-between mt-3"> <span>$38,000</span> <button class="btn btn-sm btn-outline-dark">Apply Now</button> </div>
23 </div>
24 </div>
25 </div>
26 <div class="col-md-3">
27 <div class="card p-2">
28 <div class="text-end"> <small>Full Time</small> </div>
29 <div class="text-center mt-2 p-3"> <img src="https://img.icons8.com/officel/80/000000/dribbble.png" width="60" /> <span class="d-block font-weight-bold">UX Designer</span>
30 <hr> <span>Dribbble Inc</span>
31 <div class="d-flex flex-row align-items-center justify-content-center"> <i class="fa fa-map-marker"></i> <small class="ms-1">FA 280, OH, USA</small> </div>
32 <div class="d-flex justify-content-between mt-3"> <span>$24,000</span> <button class="btn btn-sm btn-outline-dark">Apply Now</button> </div>
33 </div>
34 </div>
35 </div>
36 <div class="col-md-3">
37 <div class="card p-2">
38 <div class="text-end"> <small>Full Time</small> </div>
39 <div class="text-center mt-2 p-3"> <img src="https://img.icons8.com/color/96/000000/behance.png" width="60" /> <span class="d-block font-weight-bold">UX Designer</span>
40 <hr> <span>Behance Inc</span>
41 <div class="d-flex flex-row align-items-center justify-content-center"> <i class="fa fa-map-marker"></i> <small class="ms-1">FA 130, OH, USA</small> </div>
42 <div class="d-flex justify-content-between mt-3"> <span>$30,000</span> <button class="btn btn-sm btn-outline-dark">Apply Now</button> </div>
43 </div>
44 </div>
45 </div>
46 </div>
47</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.