代码之家 › 专栏 › 技术社区 › sanoj lawrence

无法在引导程序中获取网格样式

twitter-bootstrap-3 css html

-1

sanoj lawrence · 技术社区 · 6 年前

正在尝试用bootstrap 3对以下设计进行编码

但不幸的是,我不能帮上什么忙。

这是我试过的

<DIV class=“col-md-12”>
<h3 class=“section title”>浏览8个类别的广告</h3>
</DIV>
<DIV class=“col-md-3 col-sm-6 col-xs-12”>
<div class=“category box border-1 wow fadeinupquick animated”data wow delay=“0.3s”style=“visibility:visible;-webkit animation delay:0.3s;-moz animation delay:0.3s;animation delay:0.3s;”>
<div class=“icon”>
<a href=“category.html”><i class=“lnr lnr users color-1”></i></a>
</DIV>
<div class=“category header”>
<a href=“category.html”><h4>社区</h4></a>
</DIV>
<div class=“category content”>
<ul>
<li>
<a href=“category.html”>通知</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>汽车泳池-骑自行车</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>慈善-捐赠-非政府组织</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>丢失-找到</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>招标通知</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>一般娱乐</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>查看所有子类别</a>
</li>
</ul>
</DIV>
</DIV>
</DIV>
<DIV class=“col-md-3 col-sm-6 col-xs-12”>
<div class=“category box border-2 wow fadeinupquick animated”data wow delay=“0.6s”style=“visibility:visible;-webkit animation delay:0.6s;-moz animation delay:0.6s;animation delay:0.6s;”>
<div class=“icon”>
<a href=“category.html”><i class=“lnr lnr laptop phone color-2”></i></a>
</DIV>
<div class=“category header”>
<a href=“category.html”><h4>电子产品</h4></a>
</DIV>
<div class=“category content”>
<ul>
<li>
<a href=“category.html”>家用电器</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>液晶显示器</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>慈善-捐赠-非政府组织</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>移动&平板电脑</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>电视和DVD</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>技术服务</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>其他</a>
<sapn class=“category counter”>1</sapn>
</li>
</ul>
</DIV>
</DIV>
</DIV>
<DIV class=“col-md-3 col-sm-6 col-xs-12”>
<div class=“category box border-3 wow fadeinupquick animated”data wow delay=“0.9s”style=“visibility:visible;-webkit animation delay:0.9s;-moz animation delay:0.9s;animation delay:0.9s;”>
<div class=“icon”>
<a href=“category.html”><i class=“lnr lnr cog color-3”></i></a>
</DIV>
<div class=“category header”>
<a href=“category.html”><h4>服务</h4></a>
</DIV>
<div class=“category content”>
<ul>
<li>
<a href=“category.html”>清洁服务</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>教育</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>食品服务</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>医疗</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>办公室&家庭删除</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>一般娱乐</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>查看所有子类别</a>
</li>
</ul>
</DIV>
</DIV>
</DIV>
<DIV class=“col-md-3 col-sm-6 col-xs-12”>
<div class=“category box border-4 wow fadeinupquick animated”data wow delay=“1.2s”style=“visibility:visible;-webkit animation delay:1.2s;-moz animation delay:1.2s;animation delay:1.2s;”>
<div class=“icon”>
<a href=“category.html”><i class=“lnr lnr cart color-4”></i></a>
</DIV>
<div class=“category header”>
<a href=“category.html”><h4>购物</h4></a>
</DIV>
<div class=“category content”>
<ul>
<li>
<a href=“category.html”>行李</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>美容产品</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>珠宝</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>鞋m/f</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>招标通知</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>其他</a>
<sapn class=“category counter”>3</sapn>
</li>
</ul>
</DIV>
</DIV>
</DIV>
<DIV class=“col-md-3 col-sm-6 col-xs-12”>
<div class=“category box border-5 wow fadeinupquick animated”data wow delay=“1.5s”style=“visibility:visible;-webkit animation delay:1.5s;-moz animation delay:1.5s;animation delay:1.5s;”>
<div class=“icon”>
<a href=“category.html”><i class=“lnr lnr公文包颜色-5”></i></a>
</DIV>
<div class=“category header”>
<a href=“category.html”><h4>作业</h4></a>
</DIV>
<div class=“category content”>
<ul>
<li>
<a href=“category.html”>帐户作业</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>清洁和清洗</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>网页设计</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>设计&代码</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>财务工作</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>数据输入</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>查看所有子类别</a>
</li>
</ul>
</DIV>
</DIV>
</DIV>
<DIV class=“col-md-3 col-sm-6 col-xs-12”>
<div class=“category box border-6 wow fadeinupquick animated”data wow delay=“1.8s”style=“visibility:visible;-webkit animation delay:1.8s;-moz animation delay:1.8s;animation delay:1.8s;”>
<div class=“icon”>
<a href=“category.html”><i class=“lnr lnr diversion hat color-6”></i></a>
</DIV>
<div class=“category header”>
<a href=“category.html”><h4>培训</h4></a>
</DIV>
<div class=“category content”>
<ul>
<li>
<a href=“category.html”>Android开发</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>20天html/css</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>iOS使用Swift开发</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>其他人的SEO</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
一个HREF =“类别.html”& gt;精通Java & lt;/a & gt;
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>其他</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>查看所有子类别</a>
</li>
</ul>
</DIV>
</DIV>
</DIV>
<DIV class=“col-md-3 col-sm-6 col-xs-12”>
<div class=“category box border-7 wow fadeinupquick animated”data wow delay=“2.1s”style=“visibility:visible;-webkit animation delay:2.1s;-moz animation delay:2.1s;animation delay:2.1s;”>
<div class=“icon”>
<a href=“category.html”><i class=“lnr lnr公寓颜色-7”></i></a>
</DIV>
<div class=“category header”>
<a href=“category.html”><h4>房地产</h4></a>
</DIV>
<div class=“category content”>
<ul>
<li>
<a href=“category.html”>农场</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>房屋出租</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>酒店</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>待售土地</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>出租办公室</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>其他</a>
<sapn class=“category counter”>3</sapn>
</li>
</ul>
</DIV>
</DIV>
</DIV>
<DIV class=“col-md-3 col-sm-6 col-xs-12”>
<div class=“category box border-8 wow fadeinupquick animated”data wow delay=“2.3s”style=“visibility:visible;-webkit animation delay:2.3s;-moz animation delay:2.3s;animation delay:2.3s;”>
<div class=“icon”>
<a href=“category.html”><i class=“lnr lnr car color-8”></i></a>
</DIV>
<div class=“category header”>
<a href=“category.html”><h4>车辆</h4></a>
</DIV>
<div class=“category content”>
<ul>
<li>
<a href=“category.html”>汽车</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>豪华轿车</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>儿童自行车</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>摩托车</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>经典&现代</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>种类</a>
<sapn class=“category counter”>3</sapn>
</li>
<li>
<a href=“category.html”>查看所有子类别</a>
</li>
</ul>
</DIV>
</DIV>
</DIV>
</DIV>>=


但不幸的是,我不能帮上什么忙。

这是我试过的



    <div class="row">
    <div class="col-md-12">
    <h3 class="section-title">Browse Ads from 8 Categories</h3>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="category-box border-1 wow fadeInUpQuick animated" data-wow-delay="0.3s" style="visibility: visible;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
    <div class="icon">
    <a href="category.html"><i class="lnr lnr-users color-1"></i></a>
    </div>
    <div class="category-header">
    <a href="category.html"><h4>Community</h4></a>
    </div>
    <div class="category-content">
    <ul>
    <li>
    <a href="category.html">Announcements</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Car Pool - Bike Ride</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Charity - Donate - NGO</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Lost - Found</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Tender Notices</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">General Entertainment</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">View all subcategories â</a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="category-box border-2 wow fadeInUpQuick animated" data-wow-delay="0.6s" style="visibility: visible;-webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s;">
    <div class="icon">
    <a href="category.html"><i class="lnr lnr-laptop-phone color-2"></i></a>
    </div>
    <div class="category-header">
    <a href="category.html"><h4>Electronics</h4></a>
    </div>
    <div class="category-content">
    <ul>
    <li>
    <a href="category.html">Home Electronics</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">LCDs</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Charity - Donate - NGO</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Mobile &amp; Tablets</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">TV &amp; DVDs</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Technical Services</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Others</a>
    <sapn class="category-counter">1</sapn>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="category-box border-3 wow fadeInUpQuick animated" data-wow-delay="0.9s" style="visibility: visible;-webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; animation-delay: 0.9s;">
    <div class="icon">
    <a href="category.html"><i class="lnr lnr-cog color-3"></i></a>
    </div>
    <div class="category-header">
    <a href="category.html"><h4>Services</h4></a>
    </div>
    <div class="category-content">
    <ul>
    <li>
    <a href="category.html">Cleaning Services</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Educational</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Food Services</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Medical</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Office &amp; Home Removals</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">General Entertainment</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">View all subcategories â</a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="category-box border-4 wow fadeInUpQuick animated" data-wow-delay="1.2s" style="visibility: visible;-webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; animation-delay: 1.2s;">
    <div class="icon">
    <a href="category.html"><i class="lnr lnr-cart color-4"></i></a>
    </div>
    <div class="category-header">
    <a href="category.html"><h4>Shopping</h4></a>
    </div>
    <div class="category-content">
    <ul>
    <li>
    <a href="category.html">Bags</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Beauty Products</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Jewelry</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Shoes M/F</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Tender Notices</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Others</a>
    <sapn class="category-counter">3</sapn>
     </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="category-box border-5 wow fadeInUpQuick animated" data-wow-delay="1.5s" style="visibility: visible;-webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s;">
    <div class="icon">
    <a href="category.html"><i class="lnr lnr-briefcase color-5"></i></a>
    </div>
    <div class="category-header">
    <a href="category.html"><h4>Jobs</h4></a>
    </div>
    <div class="category-content">
    <ul>
    <li>
    <a href="category.html">Accounts Jobs</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Cleaning &amp; Washing</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Web design</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Design &amp; Code</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Finance Jobs</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Data Entry</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">View all subcategories â</a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="category-box border-6 wow fadeInUpQuick animated" data-wow-delay="1.8s" style="visibility: visible;-webkit-animation-delay: 1.8s; -moz-animation-delay: 1.8s; animation-delay: 1.8s;">
    <div class="icon">
    <a href="category.html"><i class="lnr lnr-graduation-hat color-6"></i></a>
    </div>
    <div class="category-header">
    <a href="category.html"><h4>Training</h4></a>
    </div>
    <div class="category-content">
    <ul>
    <li>
    <a href="category.html">Android Development</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">20 Days HTML/CSS</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">iOS Development with Swift</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">SEO for rest of us</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Mastering in Java</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Others</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">View all subcategories â</a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="category-box border-7 wow fadeInUpQuick animated" data-wow-delay="2.1s" style="visibility: visible;-webkit-animation-delay: 2.1s; -moz-animation-delay: 2.1s; animation-delay: 2.1s;">
    <div class="icon">
    <a href="category.html"><i class="lnr lnr-apartment color-7"></i></a>
    </div>
    <div class="category-header">
    <a href="category.html"><h4>Real Estate</h4></a>
    </div>
    <div class="category-content">
    <ul>
    <li>
    <a href="category.html">Farms</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Home for rent</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Hotels</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Land for sale</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Offices for rent</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Others</a>
    <sapn class="category-counter">3</sapn>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="category-box border-8 wow fadeInUpQuick animated" data-wow-delay="2.3s" style="visibility: visible;-webkit-animation-delay: 2.3s; -moz-animation-delay: 2.3s; animation-delay: 2.3s;">
    <div class="icon">
    <a href="category.html"><i class="lnr lnr-car color-8"></i></a>
    </div>
    <div class="category-header">
    <a href="category.html"><h4>Vehicles</h4></a>
    </div>
    <div class="category-content">
    <ul>
    <li>
    <a href="category.html">Cars</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Fancy Cars</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Kids Bikes</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Motor Bikes</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Classic &amp; Modern</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Kinds</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">View all subcategories â</a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>

2 回复 | 直到 6 年前

××× × ×××× 6 年前

https://jsfiddle.net/apn4o32e/34/ )

panel https://www.w3schools.com/bootstrap/bootstrap_panels.asp

font awesome 5 到图标: https://fontawesome.com

:before

body{
 padding-left: 37px;
 padding-top:50px
}
.panel.panel-default{
  margin:0;
  padding:0;
  border-bottom-color:red;
  border-bottom-width:3px;
  width: 350px;
}
.panel-heading{
  padding-top: 30px!important;
  text-align:center;
  height: 90px;
}
.panel-heading:before{
    box-shadow: 2px 5px #c1d7d7;
    padding-top: 20px;
    width: 60px;
    height: 60px;
    position: absolute;
    background-color: red;
    content: '\f0c0';
    font-weight: 900;
    top: -34px;
    left: 138px;
    font-family: 'Font Awesome 5 Free';
}
span{float: right;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="conteiner">
<div class="row">

    <div class="panel panel-default col-md-3 col-sm-6 col-xs-12">
              
          <div class="panel-heading">
      
          <h4>Community</h4>
          </div>
   			<div class="panel-body">
              <div class="list-group">
                 <ul>
    <li>
    <a href="category.html">Announcements</a>
    <span class="category-counter">3</span >
    </li>
    <li>
    <a href="category.html">Car Pool - Bike Ride</a>
    <span class="category-counter">3</span >
    </li>
    <li>
    <a href="category.html">Charity - Donate - NGO</a>
    <span class="category-counter">3</span >
    </li>
    <li>
    <a href="category.html">Lost - Found</a>
    <span class="category-counter">3</span >
    </li>
    <li>
    <a href="category.html">Tender Notices</a>
    <span class="category-counter">3</span >
    </li>
    <li>
    <a href="category.html">General Entertainment</a>
    <span class="category-counter">3</span >
    </li>
    <li>
    <a href="category.html">View all subcategories â</a>
    </li>
    </ul>
              </div>
            </div>
   		</div>
      	</div>
</div>

Nandita Sharma 6 年前

我添加了以下CSS样式,还添加了 container-fluid span 提及为 sapn

.row {
  display: flex;
  flex-wrap: wrap;
}

.category-box {
  box-shadow: 3px 1px 3px #aaa, 3px -2px 3px #aaa, -1px -2px 3px #aaa;
  height: 100%;
  position: relative;
  border-bottom: 2px solid red;
}

.icon {
  position: absolute;
  top: -25px;
  font-size: 24px;
  padding: 6px 15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: aquamarine;
  box-shadow: 3px 3px 1px #aaa;
}

.category-header {
  padding: 20px 10px;
  text-align: center;
  background-color: #dedbdb;
}

.col-md-3.col-sm-6.col-xs-12 {
  margin-bottom: 45px;
}

.category-content {
  padding: 15px;
}

.category-content ul {
  padding: 0;
}

.category-content li {
  display: flex;
}

.category-content li span {
  margin-left: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/eed659c9d4.js"></script>
<div class="container-fluid">
  <h3 class="section-title">Browse Ads from 8 Categories</h3>
  <div class="row">

    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="category-box border-1 wow fadeInUpQuick animated" data-wow-delay="0.3s" style="visibility: visible;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
        <div class="icon">
          <a href="category.html"><i class="fa fa-home"></i></a>
        </div>
        <div class="category-header">
          <a href="category.html">
            <h4>Community</h4>
          </a>
        </div>
        <div class="category-content">
          <ul>
            <li>
              <a href="category.html">Announcements</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Car Pool - Bike Ride</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Charity - Donate - NGO</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Lost - Found</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Tender Notices</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">General Entertainment</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">View all subcategories â</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="category-box border-2 wow fadeInUpQuick animated" data-wow-delay="0.6s" style="visibility: visible;-webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s;">
        <div class="icon">
          <a href="category.html"><i class="fa fa-home"></i></i></a>
        </div>
        <div class="category-header">
          <a href="category.html">
            <h4>Electronics</h4>
          </a>
        </div>
        <div class="category-content">
          <ul>
            <li>
              <a href="category.html">Home Electronics</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">LCDs</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Charity - Donate - NGO</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Mobile &amp; Tablets</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">TV &amp; DVDs</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Technical Services</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Others</a>
              <span class="category-counter">1</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="category-box border-3 wow fadeInUpQuick animated" data-wow-delay="0.9s" style="visibility: visible;-webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; animation-delay: 0.9s;">
        <div class="icon">
          <a href="category.html"><i class="fa fa-home"></i></a>
        </div>
        <div class="category-header">
          <a href="category.html">
            <h4>Services</h4>
          </a>
        </div>
        <div class="category-content">
          <ul>
            <li>
              <a href="category.html">Cleaning Services</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Educational</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Food Services</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Medical</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Office &amp; Home Removals</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">General Entertainment</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">View all subcategories â</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="category-box border-4 wow fadeInUpQuick animated" data-wow-delay="1.2s" style="visibility: visible;-webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; animation-delay: 1.2s;">
        <div class="icon">
          <a href="category.html"><i class="fa fa-home"></i></a>
        </div>
        <div class="category-header">
          <a href="category.html">
            <h4>Shopping</h4>
          </a>
        </div>
        <div class="category-content">
          <ul>
            <li>
              <a href="category.html">Bags</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Beauty Products</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Jewelry</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Shoes M/F</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Tender Notices</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Others</a>
              <span class="category-counter">3</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="category-box border-5 wow fadeInUpQuick animated" data-wow-delay="1.5s" style="visibility: visible;-webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s;">
        <div class="icon">
          <a href="category.html"><i class="fa fa-home"></i></a>
        </div>
        <div class="category-header">
          <a href="category.html">
            <h4>Jobs</h4>
          </a>
        </div>
        <div class="category-content">
          <ul>
            <li>
              <a href="category.html">Accounts Jobs</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Cleaning &amp; Washing</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Web design</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Design &amp; Code</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Finance Jobs</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Data Entry</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">View all subcategories â</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="category-box border-6 wow fadeInUpQuick animated" data-wow-delay="1.8s" style="visibility: visible;-webkit-animation-delay: 1.8s; -moz-animation-delay: 1.8s; animation-delay: 1.8s;">
        <div class="icon">
          <a href="category.html"><i class="fa fa-home"></i></a>
        </div>
        <div class="category-header">
          <a href="category.html">
            <h4>Training</h4>
          </a>
        </div>
        <div class="category-content">
          <ul>
            <li>
              <a href="category.html">Android Development</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">20 Days HTML/CSS</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">iOS Development with Swift</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">SEO for rest of us</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Mastering in Java</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Others</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">View all subcategories â</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="category-box border-7 wow fadeInUpQuick animated" data-wow-delay="2.1s" style="visibility: visible;-webkit-animation-delay: 2.1s; -moz-animation-delay: 2.1s; animation-delay: 2.1s;">
        <div class="icon">
          <a href="category.html"><i class="fa fa-home"></i></a>
        </div>
        <div class="category-header">
          <a href="category.html">
            <h4>Real Estate</h4>
          </a>
        </div>
        <div class="category-content">
          <ul>
            <li>
              <a href="category.html">Farms</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Home for rent</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Hotels</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Land for sale</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Offices for rent</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Others</a>
              <span class="category-counter">3</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="category-box border-8 wow fadeInUpQuick animated" data-wow-delay="2.3s" style="visibility: visible;-webkit-animation-delay: 2.3s; -moz-animation-delay: 2.3s; animation-delay: 2.3s;">
        <div class="icon">
          <a href="category.html"><i class="fa fa-home"></i></a>
        </div>
        <div class="category-header">
          <a href="category.html">
            <h4>Vehicles</h4>
          </a>
        </div>
        <div class="category-content">
          <ul>
            <li>
              <a href="category.html">Cars</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Fancy Cars</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Kids Bikes</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Motor Bikes</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Classic &amp; Modern</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">Kinds</a>
              <span class="category-counter">3</span>
            </li>
            <li>
              <a href="category.html">View all subcategories â</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>