Unable to get grid style in bootstrap - SEO

sanojlawrence
June 18, 2018
112 views
0 votes
2 Answers

Am trying to code following design with bootstrap 3

But unfortunately i can’t can some one help.

here is what i tried

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

Answers

I added the following CSS styles, also added a container-fluid div(thats a must if using row). And corrected typo of span mentioned as 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>

See code below:(see JSFiddle:https://jsfiddle.net/apn4o32e/34/)

I create it with panel of bootstrap 3:https://www.w3schools.com/bootstrap/bootstrap_panels.asp

I use font awesome 5 to the icon:https://fontawesome.com

To create the icon section I use :before to panel

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Unable to get grid style in bootstrap – SEO

Answers