Boxes responsívos com ícone e bootstrap

Veja este exemplo de código em nosso playground!
Boxes responsívos coloridos com ícone.
Código gerado
<style media="screen">
 .custom-icon {
 width: 100px;
 height: 100px;
 font-size: 4em;
 background-color: #9b0faa ;
 margin-bottom: 10px;
 }
 </style>
</head>

<body>
 <div class="container mt-3 pt-3 bg-light">
 <div class="row g-3 pb-3">
 <div class="col-6 col-lg-4">
 <div class="text-center px-5 h-100 bg-white shadow rounded">
 <div class="py-4">
 <strong>title card here</strong>
 </div>
 <div class="d-flex justify-content-center custom-icon mx-auto rounded-circle">
 <i class="align-self-center bi bi-house-heart text-white"></i>
 </div>
 <div class="pb-3">
 typesetting, remaining essentially unchanged.
 </div>
 </div>
 </div>

 <div class="col-6 col-lg-4">
 <div class="text-center px-5 h-100 bg-white shadow rounded">
 <div class="py-4">
 <strong>title card here</strong>
 </div>
 <div class="d-flex justify-content-center custom-icon mx-auto rounded-circle">
 <i class="align-self-center bi bi-file-code text-white"></i>
 </div>
 <div class="pb-3">
 typesetting, remaining essentially unchanged.
 </div>
 </div>
 </div>

 <div class="col-6 col-lg-4">
 <div class="text-center px-5 h-100 bg-white shadow rounded">
 <div class="py-4">
 <strong>title card here</strong>
 </div>
 <div class="d-flex justify-content-center custom-icon mx-auto rounded-circle">
 <i class="align-self-center bi bi-file-pdf text-white"></i>
 </div>
 <div class="pb-3">
 typesetting, remaining essentially unchanged.
 </div>
 </div>
 </div>

 <div class="col-6 col-lg-4">
 <div class="text-center px-5 h-100 bg-white shadow rounded">
 <div class="py-4">
 <strong>title card here</strong>
 </div>
 <div class="d-flex justify-content-center custom-icon mx-auto rounded-circle">
 <i class="align-self-center bi bi-box-fill text-white"></i>
 </div>
 <div class="pb-3">
 typesetting, remaining essentially unchanged.
 </div>
 </div>
 </div>

 <div class="col-6 col-lg-4">
 <div class="text-center px-5 h-100 bg-white shadow rounded">
 <div class="py-4">
 <strong>title card here</strong>
 </div>
 <div class="d-flex justify-content-center custom-icon mx-auto rounded-circle bg-warning">
 <i class="align-self-center bi-calendar2-day text-white"></i>
 </div>
 <div class="pb-3">
 typesetting, remaining essentially unchanged.
 </div>
 </div>
 </div>

 <div class="col-6 col-lg-4">
 <div class="text-center px-5 h-100 bg-white shadow rounded">
 <div class="py-4">
 <strong>title card here</strong>
 </div>
 <div class="d-flex justify-content-center custom-icon mx-auto rounded-circle bg-info">
 <i class="align-self-center bi bi-cart-plus text-white"></i>
 </div>
 <div class="pb-3">
 typesetting, remaining essentially unchanged. typesetting, remaining essentially unchanged.
 </div>
 </div>
 </div>

 </div>
 </div>
<body>
Demonstração
Veja nossa página de indicação de cursos https://www.codesnippets.dev.br/cursos
Technology Used by Successwful Businesses
Rakuten Kobo Brazil