JSFiddle - React, Tailwind, and code Playground
by Mahadevan Sivasubramanian
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<!--Row with three equal columns-->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Online Application</a>
</div>
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#">
<span class="glyphicon glyphicon glyphicon-list"></span> Online Product</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-book"></span> Contact Details</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-user"></span> About
</a>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
</div>
</div>
<!--Row with three columns divided in 1:4:1 ratio-->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table class="table-responsive">
<thead>
<tr>
<th>
Product Id
</th>
<th>
Product Name
</th>
<th>
Category
</th>
<th>
...