Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Tabs"
Bootstrap 3.3.0 Snippet by
wwfalcon
3.3.0
jQuery
Preview
HTML
CSS
JS
View Full Screen
Forked from
Fork
Fork this
Parent
55
 
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> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="featurette" id="about"> <!------------------------code---------------start----------------> <div class="container-fluid"> <div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500"> <!-- Wrapper for slides --> <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> <!-- End Item --> </div> <!-- End Carousel Inner --> <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> <!-- End Carousel --> </div> <!----Code------end-----------------------------------> </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
Template
Paper Kit Pro
257.9K
83
Tabs style 1
223.9K
48
Bootstrap Tabs with Table
38.3K
8
Tabs
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76