Can I use "Colored boxes boostrap 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.

Colored boxes boostrap 5.1.3 — Free Carousels Snippet (Bootstrap 5)

Loading…

1<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 2 5<div class="container-full mt-3"> 6 <div class="row g-3 mx-0"> 7  8 <div class="col-6 col-md-4 col-lg-4"> 9 <div class="border border-info position-relative rounded-3 shadow" style="height:250px"> 10 <div class="p-3 m-0 bg-info bg-gradient text-center text-white "> 11 header box 12 </div> 13 <div class="position-absolute top-50 start-50 translate-middle"> 14 text center 15 </div> 16 <div class="position-absolute bottom-0 text-white w-100 p-3 text-center bg-info bg-gradient"> 17 footer box 18 </div> 19 </div> 20 </div> 21  22 <div class="col-6 col-md-4 col-lg-4"> 23 <div class="border border-danger position-relative rounded-3 shadow" style="height:250px"> 24 <div class="p-3 m-0 bg-danger bg-gradient text-center text-white "> 25 header box 26 </div> 27 <div class="position-absolute top-50 start-50 translate-middle"> 28 text center 29 </div> 30 <div class="position-absolute bottom-0 text-white w-100 p-3 text-center bg-danger bg-gradient"> 31 footer box 32 </div> 33 </div> 34 </div> 35  36 <div class="col-6 col-md-4 col-lg-4"> 37 <div class="border border-dark position-relative rounded-3 shadow" style="height:250px"> 38 <div class="bg-dark bg-gradient p-3 m-0 text-center text-white "> 39 header box 40 </div> 41 <div class="position-absolute top-50 start-50 translate-middle"> 42 text center 43 </div> 44 <div class=" bg-dark bg-gradient position-absolute bottom-0 text-white w-100 p-3 text-center"> 45 footer box 46 </div> 47 </div> 48 </div> 49  50 <div class="col-6 col-md-4 col-lg-4"> 51 <div class="border border-success position-relative rounded-3 shadow" style="height:250px"> 52 <div class="bg-success bg-gradient p-3 m-0 text-center text-white "> 53 header box 54 </div> 55 <div class="position-absolute top-50 start-50 translate-middle"> 56 text center 57 </div> 58 <div class=" bg-success bg-gradient position-absolute bottom-0 text-white w-100 p-3 text-center"> 59 footer box 60 </div> 61 </div> 62 </div> 63  64 <div class="col-6 col-md-4 col-lg-4"> 65 <div class="border border-warning position-relative rounded-3 shadow" style="height:250px"> 66 <div class="bg-warning bg-gradient p-3 m-0 text-center text-white "> 67 header box 68 </div> 69 <div class="position-absolute top-50 start-50 translate-middle"> 70 text center 71 </div> 72 <div class=" bg-warning bg-gradient position-absolute bottom-0 text-white w-100 p-3 text-center"> 73 footer box 74 </div> 75 </div> 76 </div> 77  78 <div class="col-6 col-md-4 col-lg-4"> 79 <div class="border border-secondary position-relative rounded-3 shadow" style="height:250px"> 80 <div class="bg-secondary bg-gradient p-3 m-0 text-center text-white "> 81 header box 82 </div> 83 <div class="position-absolute top-50 start-50 translate-middle"> 84 text center 85 </div> 86 <div class=" bg-secondary bg-gradient position-absolute bottom-0 text-white w-100 p-3 text-center"> 87 footer box 88 </div> 89 </div> 90 </div> 91 </div> 92 </div>

Colored boxes boostrap 5.1.3

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

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