"Forum with Category"
Bootstrap 3.0.0 Snippet by kmsharif

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default navbar-doublerow navbar-trans"> <!-- Master nav --> <!-- top nav --> <nav class="navbar navbar-top"> <div class="container"> <!-- left nav top --> <ul class="nav navbar-nav pull-left"> <li><a href="#"><span class="glyphicon glyphicon glyphicon-bold text-white"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-globe text-white"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-pushpin text-white"></span></a></li> </ul> <!-- right nav top --> <ul class="nav navbar-nav pull-right" style="padding:9px;"> <input type="text" class="" name="username" placeholder="Username"> <input type="text" class="" name="password" placeholder="Password"> <a href="#" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-user"></span> Sign In</a> <a href="#" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-certificate"></span> Register</a> </ul> </div> </nav> <!-- down nav --> <nav class="navbar navbar-down"> <div class="container"> <div class="flex-container"> <div class="navbar-header flex-item"> <div class="navbar-brand" href="#">Geek Connect</div> </div> <ul class="nav navbar-nav flex-item hidden-xs"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Contact</a></li> <li><a href="#">FAQ</a></li> </ul> <ul class="nav navbar-nav flex-item hidden-xs pull-right"> <li><a href="#" class=""></a></li> </ul> </div> </div> </nav> </nav> <!-- /master nav --> <div class="container body-content"> <div class="row"> <!-- left section --> <div class="col-md-8"> <div class="page-header"> <h1><i class="fa fa-home"></i> Welcome</h1> </div> <span class="alert alert-info" role="alert"> This is a simple hero unit, a simple jumbotron-style <a href="#" class="alert-link">component</a> for calling extra attention to featured content or information. </span> <h4 class="plain-text" style="margin-top:24px;">This forum is useful for the beginners to get information related to various topics. There is a centralized database in which all the information is managed. The administrator acts as the highest authority and has the rights to update the database. There are also connected user who acts as an intermediate user who can also answer the questions of the end-user if they know it. The intermediate user can also cache the information provided by the administrator to the end-user. This cached information is useful when the same question is repeated some another user , then the intermediate user can get the information from cache memory and reply to the end-user. This reduces the response time. Whenever a question is asked by the end-user to get information ,it is received by the administrator who fetches the information from the database and reply to the end-user. Whenever the new information is arrived it is updated by the end-user. The end-user is provided with the access rights which is managed by the administrator. The access to the database is provided to the end-user according to these rights only. The technological discussion form gives specific information to the programmers about programming languages.It is also helpful for the beginners to gain information about programming languages from the same site only.It is very useful site for the beginners to gain information as well as learn new programming languages very easily.The goal of this site is to provide information about the technical related questions and language related questions to the end user. </h4> </div> <!-- right section --> <div class="col-md-4"> <!-- Featured panel --> <div class="panel panel-info"> <div class="panel-heading"> <h4>Featured Categories</h4> </div> <div class="panel-body"> <div class="single category"> <ul class="list-unstyled"> <li><a href="" title="">Business <span class="pull-right">13</span></a></li> <li><a href="" title="">Technology <span class="pull-right">13</span></a></li> <li><a href="" title="">Web <span class="pull-right">13</span></a></li> <li><a href="" title="">Ecommerce <span class="pull-right">13</span></a></li> <li><a href="" title="">Wordpress <span class="pull-right">13</span></a></li> <li><a href="" title="">Android <span class="pull-right">13</span></a></li> <li><a href="" title="">IOS <span class="pull-right">13</span></a></li> <li><a href="" title="">Windows <span class="pull-right">13</span></a></li> </ul> </div> </div> </div> <!-- Newsletter panel --> <div class="panel panel-success"> <div class="panel-heading"> <h4>Newsletter</h4> </div> <div class="panel-body"> <p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> <!-- /right section --> </div> <!-- /row --> </div> <!-- /container -->
body{ background:#EDEDEE; } .panel{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1); } .single { padding: 10px 15px; margin-top: 0px; background: #fcfcfc; border: 1px solid #f0f0f0; } .single ul { margin-bottom: 0; } .single li a { color: #666; font-size: 14px; text-transform: uppercase; border-bottom: 1px solid #f3f0f0; line-height: 40px; display: block; text-decoration: none; } .single li a:hover { color: #60B078; } .navbar-top { background: #4D5061; border-bottom: 4px solid #60B078; color: #FFF; } .input-field{ color: #000; } .text-white{ color:#fff; } .navbar-doublerow > .navbar{ display: block; padding: 0px auto; margin: 0px auto; min-height: 25px; } /*Down nav*/ .navbar-doublerow .navbar-down .navbar-brand { /*navbar brand*/ padding: 0px auto; float: left; color: #60B078; font-size: 30px; } .navbar-doublerow .navbar-down ul>li>a{ /*Menu items*/ font-size: 15px; color: #000; } .navbar-doublerow .navbar-down ul>li>a:hover{ /*menu hover*/ border-bottom: 1px solid #60B078; color: #60B078; }

Related: See More


Questions / Comments: