Can I use "Bootstrap job board snippets" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Bootstrap job board snippets — Free Cards Snippet (Bootstrap 5)

Loading…

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>

Bootstrap job board snippets

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Cards snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection