Responsive Icon Box Snippet with Bootstrap

Discover a responsive icon box snippet designed with Bootstrap. Perfect for creating visually appealing icon box website sections that highlight key content like mission, vision, and values. Easily customizable for any website.

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap');
body {
    font-family: "Nunito", sans-serif;
    /* font-family: "Tangerine", cursive; */
}
#fw_icon_snippet_2{
  padding: 50px 0;
  background: #000;
  color: #fff;
}
#fw_icon_snippet_2 .heading span{
  font-size: 47px;
  font-family: 'Tangerine', sans-serif;
  text-transform: capitalize;
  font-weight: 100;
  display: inline-block;
  position: relative;
  padding-left: 80px;
  color: #bbb;
}
#fw_icon_snippet_2 .heading span:after{
  content: '';
  position: absolute;
  left: 0;
  width: 60px;
  border-bottom: 1px solid #bbb;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}
#fw_icon_snippet_2 .heading h2{
  text-transform: capitalize;
  font-weight: 700;
  color: #eee;
  margin: 0;
  margin-bottom: 70px;
}
#fw_icon_snippet_2 .content{
  display: flex;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
#fw_icon_snippet_2 .col-12:last-child .content{
  border: 0;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
#fw_icon_snippet_2 .content .number{
  flex: 0 1 30px;
  font-size: 14px;
  color: #9f9f9f;
}
#fw_icon_snippet_2 .content .icon{
  flex: 0 1 60px;
  margin-left: 60px;
}
#fw_icon_snippet_2 .content .icon i{
  font-size: 50px;
}
#fw_icon_snippet_2 .content .des{
  margin-left: 60px;
}
#fw_icon_snippet_2 .content .des h3{
  text-transform: capitalize;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}
#fw_icon_snippet_2 .content .des p{
  color: #9f9f9f;
}
@media (max-width: 576px){
  #fw_icon_snippet_2 .content{
    flex-direction: column;
  }
  #fw_icon_snippet_2 .content .icon,
  #fw_icon_snippet_2 .content .des{
    margin-left: 0;
  }
  #fw_icon_snippet_2 .content .icon{
    margin-bottom: 10px;
  }
}

JS

Width:

Height:

This responsive icon box snippet built with Bootstrap features a clean, modern layout for displaying your business's mission, vision, and values. It utilizes Bootstrap icons to create visually appealing and fully responsive sections, ideal for corporate or business websites. With a sleek black background and simple typography, this snippet enhances user engagement while maintaining mobile-friendly adaptability.