Bootstrap 3 Category Grid Sample

bootstrap-3-category-grid-sample.markdown

Bootstrap 3 Category Grid Sample

hover over the category to highlight it

A Pen by Vincent Tang on CodePen.

License.

index.pug

.panel.panel-default
  .panel-heading
    h3.panel-title Category Example
  .panel-body
    .row.category-split
      .col-md-12
        p.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus. Vestibulum congue nunc eget feugiat euismod. Praesent porta cursus libero, ut vestibulum leo suscipit non. Vivamus vulputate urna quis tincidunt congue. Vestibulum malesuada neque sit amet eros efficitur pharetra. Vestibulum consequat purus sit amet ex euismod, ut consequat tellus vehicula. Proin suscipit in risus ut placerat. Integer porta id libero ac finibus. Ut at tellus turpis. Phasellus dolor erat, ullamcorper a risus ultrices, iaculis malesuada nisl. Integer tellus arcu, sodales quis mattis ac, sagittis eu turpis. Suspendisse tristique tempor pharetra.
      .col-md-12
        .row.category-row
          - for (var x = 0; x < 10; x++)
              .col-xs-6.col-sm-3.col-md-3.col-lg-2.category-box
                a(href="/")
                  img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/867725/productSample.jpg", alt="")
                  p Paper packages             

style.scss

// 320px,768px, 992px, 1200px, 1440px
@mixin screen-min($min) { @media (min-width: $min) { @content } };
@mixin screen-max($max) { @media (max-width: $max) { @content } };
@mixin screen-minmax($min, $max){ @media (min-width: $min) and (max-width: $max){ @content }};

body {
  padding: 40px;
}
img {
  width: 100px;
}
.row.category-row {
  text-align: center;
}
.panel-body{
  padding-bottom: 0px;
}
.row.category-row {
  border-top: 1px solid #dadbd9;
}
.panel-heading{
  background-color: #226586;
  background-image: linear-gradient(to bottom,#246b8e,#1f5c7a);
  background-repeat: repeat x;
  background-color: lightblue !important;
  color: white !important;
}
h3 {
  font-weight: bold;
}
a:hover {
  text-decoration: none;
}
.category-box {
  padding-top: 10px;
  border-right: 1px solid #dadbd9;
  border-bottom: 1px solid #dadbd9;
  &:hover{
    box-shadow: inset 0 -5px 15px rgba(0,0,0,.1);
    a {
      color: hsl(220, 100%, 20%);
    }
  }
}
.category-box{
  @include screen-min(768px){
    border:right;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />