Count Menu (no responsive)

This bootstrap snippet called "Count Menu (no responsive)" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: bootstrap,snippet,count,menu

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container bootstrap snippet">
<div class="config block">
<div class="tab-content">
  <!-- 1st Block of tab-content -->
<div class="tab-pane active" id="home">
  <div class="container bootstrap snippet">
    <div class="row">
      <div class="col-md-3 col-xs-6">
        <div class="config-one-item animated animation fadeInDown">
          <a href="#"><i class="fa fa-heart-o red"></i></a>
          <h2>19</h2>
          <h4 class="br-red">My Love</h4>
        </div>
      </div>
      <div class="col-md-3 col-xs-6">
        <div class="config-one-item animated animation fadeInDown">
          <a href="#"><i class="fa fa-desktop lblue"></i></a>
          <h2>29</h2>
          <h4 class="br-lblue">My Desk</h4>
        </div>
      </div>
      <div class="col-md-3 col-xs-6">
        <div class="config-one-item animated animation fadeInDown">
          <a href="#"><i class="fa fa-comment-o green"></i></a>
          <h2>39</h2>
          <h4 class="br-green">My Coms</h4>
        </div>
      </div>
      <div class="col-md-3 col-xs-6">
        <div class="config-one-item animated animation fadeInDown">
          <a href="#"><i class="fa fa-flag-o orange"></i></a>
          <h2>49</h2>
          <h4 class="br-orange">My Nav</h4>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3 col-xs-6">
        <div class="config-one-item animated animation fadeInDown">
          <a href="#"><i class="fa fa-envelope-o green"></i></a>
          <h2>59</h2>
          <h4 class="br-green">My Mail</h4>
        </div>
      </div>
      <div class="col-md-3 col-xs-6">
        <div class="config-one-item animated animation fadeInDown">
          <a href="#"><i class="fa fa-laptop pink"></i></a>
          <h2>69</h2>
          <h4 class="br-pink">My Pc</h4>
        </div>
      </div>
      <div class="col-md-3 col-xs-6">
        <div class="config-one-item animated animation fadeInDown">
          <a href="#"><i class="fa fa-sun-o blue"></i></a>
          <h2>79</h2>
          <h4 class="br-blue">My Deal</h4>
        </div>
      </div>
      <div class="col-md-3 col-xs-6">
        <div class="config-one-item animated animation fadeInDown">
          <a href="#"><i class="fa fa-search red"></i></a>
          <h2>89</h2>
          <h4 class="br-red">My View</h4>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="tab-pane" id="profile">
  <div class="container bootstrap snippet">
    <!-- 2nd Block of tab-content -->
      <div class="row">
        <div class="col-md-4 col-sm-4">
          <div class="config-two-item">
            <h4><a href="#"><i class="fa fa-heart red"></i>Its Me To Do</a></h4>
            <p>Shows the Configuration of the data to be used. Shows the Configuration. </p>
          </div>
        </div>
        <div class="col-md-4 col-sm-4">
          <div class="config-two-item">
            <h4><a href="#"><i class="fa fa-desktop red"></i>Long term Course</a></h4>
            <p>Shows the Configuration of the data to be used. Shows the Configuration.</p>
          </div>
        </div>
        <div class="col-md-4 col-sm-4">
          <div class="config-two-item">
            <h4><a href="#"><i class="fa fa-comment red"></i>SIT College of University</a></h4>
            <p>Shows the Configuration of the data to be used. Shows the Configuration.</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 col-sm-4">
          <div class="config-two-item">
            <h4><a href="#"><i class="fa fa-envelope red"></i>Single two or Three</a></h4>
            <p>Shows the Configuration of the data to be used. Shows the Configuration.</p>
          </div>
        </div>
        <div class="col-md-4 col-sm-4">
          <div class="config-two-item">
            <h4><a href="#"><i class="fa fa-laptop red"></i>The Fire of Ocean</a></h4>
            <p>Shows the Configuration of the data to be used. Shows the Configuration.</p>
          </div>
        </div>
        <div class="col-md-4 col-sm-4">
          <div class="config-two-item">
            <h4><a href="#"><i class="fa fa-sun-o red"></i>Sys Con to be Used</a></h4>
            <p>Shows the Configuration of the data to be used. Shows the Configuration.</p>
          </div>
        </div>
      </div>
  </div>
</div>

<div class="tab-pane text-center" id="messages">
<div class="container bootstrap snippet">
  <!-- 3rd Block of tab-content -->
  <div class="row">
    <div class="col-md-4 col-sm-4">
      <div class="config-three-item animated">
        <img src="img/user-1.jpg" class="img-responsive" alt="">
        <h4>Luara</h4>
        <a href="#"><i class="fa fa-facebook br-blue"></i></a>&nbsp;
        <a href="#"><i class="fa fa-twitter br-lblue"></i></a>&nbsp;
        <a href="#"><i class="fa fa-google-plus br-red"></i></a>&nbsp;
        <a href="#"><i class="fa fa-skype br-blue"></i></a>&nbsp;
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="config-three-item animated">
        <img src="img/user-2.jpg" class="img-responsive" alt="">
        <h4>Keran</h4>
        <a href="#"><i class="fa fa-facebook br-blue"></i></a>&nbsp;
        <a href="#"><i class="fa fa-twitter br-lblue"></i></a>&nbsp;
        <a href="#"><i class="fa fa-google-plus br-red"></i></a>&nbsp;
        <a href="#"><i class="fa fa-skype br-blue"></i></a>&nbsp;
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="config-three-item animated">
        <img src="img/user-3.jpg" class="img-responsive" alt="">
        <h4>Mia</h4>
        <a href="#"><i class="fa fa-facebook br-blue"></i></a>&nbsp;
        <a href="#"><i class="fa fa-twitter br-lblue"></i></a>&nbsp;
        <a href="#"><i class="fa fa-google-plus br-red"></i></a>&nbsp;
        <a href="#"><i class="fa fa-skype br-blue"></i></a>&nbsp;
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 col-sm-4">
      <div class="config-three-item animated">
        <img src="img/user-4.jpg" class="img-responsive" alt="">
        <h4>shilpa</h4>
        <a href="#"><i class="fa fa-facebook br-blue"></i></a>&nbsp;
        <a href="#"><i class="fa fa-twitter br-lblue"></i></a>&nbsp;
        <a href="#"><i class="fa fa-google-plus br-red"></i></a>&nbsp;
        <a href="#"><i class="fa fa-skype br-blue"></i></a>&nbsp;
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="config-three-item animated">
        <img src="img/user-5.jpg" class="img-responsive" alt="">
        <h4>Simsa</h4>
        <a href="#"><i class="fa fa-facebook br-blue"></i></a>&nbsp;
        <a href="#"><i class="fa fa-twitter br-lblue"></i></a>&nbsp;
        <a href="#"><i class="fa fa-google-plus br-red"></i></a>&nbsp;
        <a href="#"><i class="fa fa-skype br-blue"></i></a>&nbsp;
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="config-three-item animated">
        <img src="img/user-6.jpg" class="img-responsive" alt="">
        <h4>Sherin</h4>
        <a href="#"><i class="fa fa-facebook br-blue"></i></a>&nbsp;
        <a href="#"><i class="fa fa-twitter br-lblue"></i></a>&nbsp;
        <a href="#"><i class="fa fa-google-plus br-red"></i></a>&nbsp;
        <a href="#"><i class="fa fa-skype br-blue"></i></a>&nbsp;
      </div>
    </div>
  </div>
</div>
</div>
</div>
</div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


                        
/* Colors */

.white{
    color:#fff;
}

.black{
	color:#444;
}

.grey{
	color:#bbb;
}

.red{
	color:#f75353;
}

.green{
	color:#51d466;
}

.lblue{
	color:#32c8de;
}

.blue{
	color:#609cee;
}

.brown{
	color:#c27256;
}

.pink{
	color:#eb76cb;
}	

.orange{
	color:#f7a253;
}

.yellow{
	color:#f4e375;
}

.purple{
	color:#cb79e6;
}

.violet{
	color:#9427e1 !important;
}
.br-white{
    background:#fff !important;
}

.br-black{
	background:#444 !important;
}

.br-grey{
	background:#bbb !important;
}

.br-red{
	background:#f75353 !important;
}

.br-green{
	background:#51d466 !important;
}

.br-lblue{
	background:#32c8de !important;
}

.br-blue{
	background:#609cee !important;
}

.br-brown{
	background:#c27256 !important;
}

.br-pink{
	background:#eb76cb !important;
}

.br-orange{
	background:#f7a253 !important;
}

.br-yellow{
	background:#ead54e !important;
}

.br-purple{
	background:#cb79e6 !important;
}

.br-violet{
	background:#9427e1 !important;
}

.br-dpink{
	background:#d33caa !important;
}

.br-dgreen{
	background:#5eb26c !important;
}

.config ul{
	text-align:center;
	margin-top:40px;
	margin-bottom:30px;
}

.config ul  li{
	margin:10px 20px;
	display:inline-block;
	padding:10px 40px 10px 40px;
	position: relative;
	border: 1px solid #ccc;
	height:110px;
	width:250px;
	background:#fafafa;
	border-radius:5px;
}

.config ul  li.active:after, .config ul  li.active:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.config ul  li.active:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #fff;
	border-width: 15px;
	margin-left: -15px;
}

.config ul  li.active:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #ccc;
	border-width: 17px;
	margin-left: -17px;
}

.config ul  li h5{
	font-size:18px;
}

.config ul  li p{
	line-height:21px;
	font-size:12px;
}

.config ul li:hover{
	background:#fff;
	border: 1px solid #ccc;
}

.config ul li a{
	color:#777;
	text-decoration:none !important;
}

.config .tab-content .tab-pane{
	background:#fff;
	border:1px solid #ddd;
	border-radius:8px;
	padding:20px;
}

.config .tab-content .config-one-item{
	text-align:center;
	margin-bottom:20px;
	margin-top:20px;

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	animation-duration: 1s;
    animation-delay:0s;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0s;
    -moz-animation-duration: 1s;
    -moz-animation-delay:0s;
    -ms-animation-duration: 1s;
    -ms-animation-delay: 0s;
    -o-animation-duration: 1s;    
    -o-animation-delay: 0s;
}

.config .tab-content .config-one-item i{
	font-size:45px;
}

.config .tab-content .config-one-item h2{
	font-size:85px;
	font-weight:normal;
	margin-bottom:20px;
	line-height:60px;
}

.config .tab-content .config-one-item  h4{
	display:inline;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#fff;
	background:#f75353;
	padding:5px 10px 5px 10px;
	border-radius:5px;
}

.config .tab-pane .config-two-item{
	margin-top:15px;
	margin-bottom:15px;
}

.config .tab-pane .config-two-item h4{
	margin:0px;
	color:#777;
	font-size:18px;
	font-weight:bold;
}

.config .tab-pane .config-two-item  p{
	line-height:20px;
	margin-bottom:10px;
	max-width:250px;
	font-size:12px;
}

.config .tab-pane .config-two-item a{
	color:#777;
}

.config .tab-pane .config-two-item i{
	display:inline-block;
	height:35px;
	width:25px;
	border-radius:100px;
	line-height:30px;
	font-size:15px;
} 

.config .tab-pane .config-three-item {
	margin-top:40px;
	margin-bottom:40px;
	border:1px solid #ccc;
	padding:7px 7px 7px 7px;
	border-radius:5px;
	max-width:300px;
}

.config .tab-pane .config-three-item img{
	border-radius:2px;
}

.config .tab-pane .config-three-item h4{
	text-align:center;
	margin-top:10px;
	font-size:20px;
}

.config .tab-pane .config-three-item i{
	display:inline-block;
	height:30px;
	width:30px;
	line-height:30px;
	text-align:center;
	border-radius:100px;
	color:#fff;
	font-size:15px;
}                    
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.2.0

Created: Aug 30th 2014, 10:59

Views: 4.0K