<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="container">
<div class="row">
<h2>Create Custom responsive Tabview in HTML </h2>
<div class="tab_content">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs ">
<li class="active">
<a href="#tab_default_1" data-toggle="tab">
Sprinkle Types </a>
</li>
<li>
<a href="#tab_default_2" data-toggle="tab">
Sprinkle Size </a>
</li>
<li>
<a href="#tab_default_3" data-toggle="tab">
Sprinkle Head Types </a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_default_1">
<ul class="sprinkle_types">
<li>Quick response</li>
<li>CMSA (control mode specific application)</li>
<li>Standard response</li>
<li>Residential</li>
<li>ESFR (early suppression fast response)</li>
</ul>
<h2 class="sprinkle_types_title">ESFR</h2>
<p class="sprinkle_types_para">ESFR (early suppression fast response) refers to both a concept and a type of sprinkler. "The concept is that fa
st response of sprinklers can produce an advantage in a fire if the response is accompanied by an effective dis
charge density — that is, a sprinkler spray capable of fighting its way down through the fire plume in sufficient
quantities to suppress the burning fuel package."[18] The sprinkler that was developed for this concept was cre
ated for use in high rack storage.
</p><br>
<p class="sprinkle_types_para_two">ESFR sprinkler heads were developed in the 1980s to take advantage of the latest fast-response fire sprinkler t
echnology to provide fire suppression of specific high-challenge fire hazards. Prior to the introduction of these
sprinklers, protection systems were designed to control fires until the arrival of the fire department.</p>
</div>
<div class="tab-pane" id="tab_default_2">
<ul class="sprinkle_size">
<li>
Maximum Ceiling Temprature
<ul class="temp_ceiling">
<li>100 °F / 38 °C</li>
<li>300 °F / 149 °C</li>
<li>625 °F / 329 °C</li>
</ul>
</li>
<li>
Temprature Rating
<ul class="temp_rating">
<li>135-170 °F / 57-77 °C</li>
<li>325-375 °F / 163-191 °C </li>
<li>650 °F / 343 °C</li>
</ul>
</li>
<li>
Temprature Classification
<ul class="temp_classification">
<li>Ordinary</li>
<li>Extra High</li>
<li>Ultra high</li>
</ul>
</li>
<li>
Color Code (with Fusible Link)
<ul class="temp_color">
<li>Uncolored or Black</li>
<li>Red</li>
<li>Orange</li>
</ul>
</li>
<li>
Operating Time in second
<ul class="temp_time">
<li>3 to 32 second</li>
</ul>
</li>
</ul>
</div>
<div class="tab-pane" id="tab_default_3">
<ul class="sprinkler_head_types">
<li>
Rotary Heads
<ul class="rotary">
<li>Large spray radius (15-50 ft.) - Good for large areas</li>
<li>Low flow rate reduces puddling and runoff</li>
<li>High spray force helps prevent clogging of spray heads</li>
</ul>
</li>
<li>
Spray Heads
<ul class="spray">
<li>Good for use in small areas</li>
<li>Higher rate of flow than rotary heads</li>
<li>More susceptible to water runoff and puddling</li>
<li>Spray heads are stationary with a wide range of coverage</li>
<li>The water is emitted in fine droplets that, on hot days, may lower irrigation efficiency through evaporation</li>
<li>Versatile and can water difficult and small areas that rotors cannot</li>
</ul>
</li>
<li>
Bubblers
<ul class="bubblers">
<li>Application of water to individual plants or plant groups</li>
<li>Flow rates are higher than drip systems</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/* Tabs panel */
.tabbable-panel {
border:1px solid #eee;
padding: 10px;
margin:40px auto;
}
/* Default mode */
.tabbable-line > .nav-tabs {
border: none;
margin: 0px;
background: white;
}
.tabbable-line > .nav-tabs > li {
margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
border: 0;
margin-right: 0;
color: #737373;
padding: 15px 25px;
}
.tabbable-line > .nav-tabs > li > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
border-bottom: 2px solid #fbcdcf;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
border: 0;
background: none !important;
color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
border-bottom: 2px solid red;
position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
border: 0;
color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
color: #404040;
}
.tabbable-line > .tab-content {
margin-top: -3px;
background-color: #fff;
border: 0;
border-top: 1px solid #eee;
padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
padding-bottom: 0;
}
.tab_content
{
background: #eceff7;
}
.sprinkle_types,.sprinkle_size,.sprinkler_head_types
{
list-style: none;
margin-top: 25px;
}
.sprinkle_types,.sprinkle_size,.sprinkler_head_types
{
font-size: 18px;
}
.sprinkle_size
{
margin-bottom: 10px;
}
.sprinkle_types li:before,.sprinkle_size li:before,.sprinkler_head_types li:before
{
content: "\f111";
font-family: 'FontAwesome';
color: #42B32F;
font-size: 8px;
font-weight: bold;
margin-right: 10px;
}
.sprinkle_types_title,.sprinkle_types_para,.sprinkle_types_para_two
{
-webkit-padding-start: 40px;
-moz-padding-start: 40px;
}
.sprinkle_types_title
{
font-size: 30px;
color: #42B32F;
font-weight: 400;
}
.sprinkle_types_para,.sprinkle_types_para_two
{
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
padding-right: 40px;
}
.temp_ceiling,.temp_rating,.temp_classification,.temp_color,.temp_time,.spray,.rotary,.bubblers
{
list-style: none;
font-size: 14px;
margin-bottom: 25px;
}
.temp_ceiling li:before,.temp_classification li:before,.temp_color li:before,.temp_rating li:before,.temp_time li:before,
.rotary li:before,.spray li:before,.bubblers li:before
{
content: "\f105";
font-family: 'FontAwesome';
color: black;
font-size: 15px;
font-weight: bold;
margin-right: 15px;
}
