Can I use "Boxes and icons - Bootstrap 5.1.3" 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.

Boxes and icons - Bootstrap 5.1.3 — Free Utilities Snippet (Bootstrap 5)

Loading…

1 2 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 3 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> 4 5  6 7 <div class="container-full mt-3"> 8 <div class="row g-3 mx-0"> 9 10 <div class="col-6 col-md-4 col-lg-4"> 11 <div class=" bg-light rounded-3 shadow h-100 px-1"> 12 <i class="float-end bi bi-star-fill text-info"></i> 13 <span class="d-block text-center"><i class="bigIcon bi bi-person-hearts"></i></span> 14 <span class="d-block text-center p-2 text-info">Teste com ícone de pessoa...</span> 15 </div> 16 </div> 17 18 <div class="col-6 col-md-4 col-lg-4"> 19 <div class="rounded-3 shadow h-100 px-1"> 20 <i class="float-end bi bi-star-fill text-secondary"></i> 21 <span class="d-block text-center"><i class="bigIcon bi bi-server"></i></span> 22 <span class="d-block text-center p-2 text-secondary">database info ...</span> 23 </div> 24 </div> 25 26 <div class="col-6 col-md-4 col-lg-4"> 27 <div class="rounded-3 shadow h-100 px-1"> 28 <i class="float-end bi bi-star-fill text-success"></i> 29 <span class="d-block text-center"><i class="bigIcon bi bi-star"></i></span> 30 <span class="d-block text-center p-2 text-success">star info ...</span> 31 </div> 32 </div> 33 34 <div class="col-6 col-md-4 col-lg-4"> 35 <div class="rounded-3 shadow h-100 px-1"> 36 <i class="float-end bi bi-star-fill text-success"></i> 37 <span class="d-block text-center"><i class="bigIcon bi bi-2-circle-fill"></i></span> 38 <span class="d-block text-center p-2 text-success">message info ...</span> 39 </div> 40 </div> 41 42 <div class="col-6 col-md-4 col-lg-4"> 43 <div class="rounded-3 shadow h-100 px-1"> 44 <i class="float-end bi bi-star-fill text-danger"></i> 45 <span class="d-block text-center"><i class="bigIcon bi bi-box-seam-fill"></i></span> 46 <span class="d-block text-center p-2 text-danger">box info ...</span> 47 </div> 48 </div> 49 50 <div class="col-6 col-md-4 col-lg-4"> 51 <div class="rounded-3 shadow h-100 px-1"> 52 <i class="float-end bi bi-star-fill text-success"></i> 53 <span class="d-block text-center"><i class="bigIcon bi bi-camera-fill"></i></span> 54 <span class="d-block text-center p-2 text-success">camera info ...</span> 55 </div> 56 </div> 57 58 </div> 59 </div>

Boxes and icons - Bootstrap 5.1.3

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Utilities 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