Bootstrap Snippet Tabs using HTML CSS Bootstrap jQuery

"Tabs"
Bootstrap 3.3.0 Snippet by RajeshPatadiya

3.3.0 jQuery

192 0 Fav

Post to Facebook Tweet this

<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>  <div class="container"> <div class="row"> <div class="featurette" id="about">  <div class="container-fluid"> <div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500">  <div class="carousel-inner"> <div class="item active"> <div class="container-fluid"> <h4> PETROLEUM / Principals </h4> <div class="row" style="background-color:#fff !important; padding-top:20px; padding-bottom:20px;"> <div class="col-lg-2"> <div class="logos" style="background:#fff url(images/corporate%20logos/3.png) no-repeat center; background-size:contain;"> </div> </div> <div class="col-lg-2"> <div class="logos" style="background:url(images/corporate%20logos/22.png) no-repeat center; background-size:contain;"> </div> </div> <div class="col-lg-2"> <div class="logos" style="background:url(images/corporate%20logos/5.png) no-repeat center; background-size:contain;"> </div> </div> <div class="col-lg-2"> <div class="logos" style="background:url(images/corporate%20logos/9.png) no-repeat center; background-size:contain;"> </div> </div> <div class="col-lg-2"> <div class="logos" style="background:url(images/corporate%20logos/17.png) no-repeat center; background-size:contain;"> </div> </div> <div class="col-lg-2"> <div class="logos" style="background:url(images/corporate%20logos/18.png) no-repeat center; background-size:contain;"> </div> </div> </div> <h4> PETROLEUM / Clients </h4> <p> <div class="col-lg-4"> <ul> <li>Egyptalum</li> <li>Egyptian Maintenance Company</li> <li>Egyptian General Petroleum Corporation </li> <li>Suez Oil Processing Company </li> <li>El Nasr Petroleum Company </li> </ul> </div> <div class="col-lg-4"> <ul> <li>Amerya Petroleum Refining Company</li> <li>Alexandria Petroleum Company</li> <li>Cairo Oil Refining Company</li> <li>Gulf of Suez Petroleum Company</li> <li>General Petroleum Company </li> <li>Middle East Oil Refinery</li> </ul> </div> <div class="col-lg-4"> <ul> <li>Middle East & Maintenance for Hydrocarbon Industries </li> <li>Alexandria Mineral Oils Company</li> <li>Alexandria National Refining & Petrochemicals Company</li> <li>Petroleum Pipelines Company</li> </ul> </div> </p> </div> </div> <div class="item"> <div class="container-fluid"> <h4> WATER & SANITAION / Principals </h4> <div class="row" style="background-color:#fff !important; padding-top:20px; padding-bottom:20px;"> <div class="col-lg-2"> <div class="logos" style="background:#fff url(images/corporate%20logos/1.png) no-repeat center; background-size:contain;"> </div> </div> <div class="col-lg-2"> <div class="logos" style="background:url(images/corporate%20logos/13.png) no-repeat center; background-size:contain;"> </div> </div> </div> <h4> WATER & SANITAION / Clients </h4> <p> <div class="col-lg-6"> <ul> <li>Construction Authority for Potable Water & Wastewater </li> <li>National Organization for Potable & Sanitary Drainage </li> <li>The Holding Company for Water & Wastewater </li> <li>Ministry of Water Resources & Irrigation </li> <li>Army Engineering Division</li> <li>Ministry of Defense</li> </ul> </div> <div class="col-lg-6"> <ul> <li>New Urban Development Authority</li> </ul> </div> </p> </div> </div> <div class="item"> <div class="container-fluid"> <h4> ELECTRICITY & POWER / Principals </h4> <div class="row" style="background-color:#fff !important; padding-top:20px; padding-bottom:20px;"> <div class="col-lg-2"> <div class="logos" style="background:#fff url(images/corporate%20logos/7.png) no-repeat center; background-size:contain;"> </div> </div> <div class="col-lg-2"> <div class="logos" style="background:url(images/corporate%20logos/8.png) no-repeat center; background-size:contain;"> </div> </div> </div> <h4> ELECTRICITY & POWER / Clients </h4> <p> <div class="col-lg-6"> <ul> <li>Cairo Electricity Production Company</li> <li>West Delta Electricity Production Company</li> <li>Middle Delta Electricity Production Company</li> <li>Upper Egypt Electricity Production Company</li> <li>Nuclear Power Plant Authority</li> <li>Egyptian Electricity Transmission Company</li> </ul> </div> <div class="col-lg-6"> <ul> <li>Egypt Post</li> <li>Ministry of Health</li> <li>Egyptian Ministry of Electricity & Power</li> <li>Private developers</li> </ul> </div> </p> </div> </div> <div class="item"> <div class="container-fluid"> <h4> GAS / Principals </h4> <div class="row" style="background-color:#fff !important; padding-top:20px; padding-bottom:20px;"> <div class="col-lg-2"> <div class="logos" style="background:#fff url(images/corporate%20logos/11.png) no-repeat center; background-size:contain;"> </div> </div> <div class="col-lg-2"> <div class="logos" style="background:url(images/corporate%20logos/15.png) no-repeat center; background-size:contain;"> </div> </div> </div> <h4> GAS / Clients </h4> <p> <div class="col-lg-6"> <ul> <li>Petrolem Gas Company </li> <li>EgyptGas</li> <li>Petroleum Projects & Technical Consultations Company </li> <li>Alexandria Petroleum Company </li> <li>Petroleum Pipeline Company </li> <li>Arab Petroleum Pipelines Company</li> </ul> </div> <div class="col-lg-6"> <ul> <li>Gulf of Suez Petroleum Company</li> <li>Belayim Petroleum Company</li> </ul> </div> </p> </div> </div> <div class="item"> <div class="container-fluid"> <h4> CONSTRUCTION & DEVELOPMENT / Principals </h4> <div class="row" style="background-color:#fff !important; padding-top:20px; padding-bottom:20px;"> <div class="col-lg-2"> <div class="logos" style="background:#fff url(images/corporate%20logos/6.png) no-repeat center; background-size:contain;"> </div> </div> </div> <h4> CONSTRUCTION & DEVELOPMENT / Clients </h4> <p> <div class="col-lg-12"> <ul> <li> Ministry of Housing, Utilities and Urban Development</li> <li>The Administrative Cairo Capital for Urban Development Compnay</li> <li>New Urban Communities Authority</li> <br> <br> <br> </ul> </div> </p> </div> </div> <div class="item"> <div class="container-fluid"> <h4> RENEWABLE ENERGY / Principals </h4> <div class="row" style="background-color:#fff !important; padding-top:20px; padding-bottom:20px;"> <div class="col-lg-2"> <div class="logos" style="background:#fff url(images/corporate%20logos/1.png) no-repeat center; background-size:contain;"> </div> </div> <div class="col-lg-2"> <div class="logos" style="background:url(images/corporate%20logos/2.png) no-repeat center; background-size:contain;"> </div> </div> <div class="col-lg-2"> <div class="logos" style="background:url(images/corporate%20logos/16.png) no-repeat center; background-size:contain;"> </div> </div> <div class="col-lg-2"> <div class="logos" style="background:url(images/corporate%20logos/20.png) no-repeat center; background-size:contain;"> </div> </div> </div> <h4> RENEWABLE ENERGY / Clients </h4> <p> <div class="col-lg-12"> <ul> <li> Ministry of Electricity and Renewable Energy </li> <li>New & Renewable Energy Authority Egyptian Electricity Transmission</li> <li>Company Egyptian Electricity Holding</li> <li>Company</li> <li>Hydro-Power Plants Authority</li> <br> </ul> </div> </p> </div> </div> <div class="item"> <div class="container-fluid"> <h4> TRANSPORTATION / Principals </h4> <div class="row" style="background-color:#fff !important; padding-top:20px; padding-bottom:20px;"> <div class="col-lg-2"> <div class="logos" style="background:#fff url(images/corporate%20logos/4.png) no-repeat center; background-size:contain;"> </div> </div> <div class="col-lg-2"> <div class="logos" style="background:url(images/corporate%20logos/7.png) no-repeat center; background-size:contain;"> </div> </div> </div> <h4> TRANSPORTATION / Clients </h4> <p> <div class="col-lg-6"> <ul> <li> Egyptian Airports Company</li> <li>Cairo Airport Company</li> <li>Egyptian Company for Metro</li> <li>Egyptian National Railways</li> <li>Ministry of Transportation</li> <li>National Air Navigation Services Company</li> </ul> </div> <div class="col-lg-6"> <ul> <li>EgyptAir </li> </ul> </div> </p> </div> </div>  </div>  <div class="controls"> <ul class="nav"> <li data-target="#custom_carousel" data-slide-to="0" class="active"> <a href="#"><img src="images/1.png"><small>PETROLEUM</small></a> </li> <li data-target="#custom_carousel" data-slide-to="1"> <a href="#"><img src="images/2.png"><small>WATER & SANITAION</small></a> </li> <li data-target="#custom_carousel" data-slide-to="2"> <a href="#"><img src="images/3.png"><small>ELECTRICITY & POWER</small></a> </li> <li data-target="#custom_carousel" data-slide-to="3"> <a href="#"><img src="images/4.png"><small>GAS</small></a> </li> <li data-target="#custom_carousel" data-slide-to="4"> <a href="#"><img src="images/5.png"><small>CONSTRUCTION & DEVELOPMENT</small></a> </li> <li data-target="#custom_carousel" data-slide-to="5"> <a href="#"><img src="images/6.png"><small>RENEWABLE ENERGY</small></a> </li> <li data-target="#custom_carousel" data-slide-to="6"> <a href="#"><img src="images/7.png"><small>TRANSPORTATION</small></a> </li> </ul> </div> </div>  </div>  </div> </div> </div>

#custom_carousel .item { color: #fff; background-color: #232323; padding: 0 0 20px 0; } #custom_carousel .controls { overflow-x: auto; overflow-y: hidden; padding: 0; margin: 0; white-space: nowrap; text-align: center; position: relative; background: #ddd } #custom_carousel .controls li { display: table-cell; width: 1%; max-width: 90px } #custom_carousel .controls li.active { background-color: #232323; border-top: 3px solid orange; } #custom_carousel .controls a small { overflow: hidden; display: block; font-size: 10px; margin-top: 5px; font-weight: bold } .featurette img { width: 35px; } #custom_carousel .col-lg-2 { box-sizing: border-box; padding: 10px; } #custom_carousel .col-lg-2 .logos { height: 75px; box-sizing: border-box; } #custom_carousel h4 { padding: 20px; }

$(document).ready(function (ev) { $('#custom_carousel').on('slide.bs.carousel', function (evt) { $('#custom_carousel .controls li.active').removeClass('active'); $('#custom_carousel .controls li:eq(' + $(evt.relatedTarget).index() + ')').addClass('active'); }) });

Related: See More

Paper Bootstrap Wizard

Paper Bootstrap Wizard

Tabs style 1

Bootstrap Tabs with Table

Bootstrap Tabs with Table

Tabs

Questions / Comments:

Posting GuidelinesFormatting