Colored boxes boostrap 5.1.3

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

Source Code

More Carousels snippets

Comments(0)