"Panels with nav tabs"
Bootstrap 3.2.0 Snippet by usrec

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="page-header"> <h1 class="text-center">Agents, teams and those just beginning their career</h1> <div class="text-center"> You will be supported by a team comprised of management and team associates who want and will help you succeed. </div><hr> <div class="text-center">Our philosophy is to build strength through mutual benefit. We’re a technology-powered real estate brokerage on a mission to empower agents while providing the highest level of service to all our agents and clients. Our agent-centric cloud based brokerage model allows our associates and brokers to build their own businesses and careers by working, training and collaborating together </div> <div> <br> <div class="row"> <div class="col-md-12"> <div class="panel with-nav-tabs panel-default"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#team" data-toggle="tab">TEAM</a></li> <li><a href="#iagent" data-toggle="tab">INDEPENDENT AGENT</a></li> <li><a href="#iteam" data-toggle="tab">INDEPENDENT TEAM</a></li> <li><a href="#branch" data-toggle="tab">BRANCH</a></li> <li><a href="#revenue" data-toggle="tab">REVENUE</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="team"> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-area-chart" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>CONTRACTS</h4><span>In-house, licensed Brokers write and manage all of the contracts within the hour, with full transaction administration with TransActionAdmin.com</span> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-cubes" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>CRM</h4> <div> Customer Relationship Management (CRM) to Manage leads and stay organized with free best on market software. </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-briefcase" style="color:#ff0000"> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>MEDIA</h4> <div id="WrForms"> Professional Business cards, lock boxes, signs, website, marketing brochures, hangers, postcards, etc. provided free. </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-anchor" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>BROKER SUPPORT</h4> <div id="WrGridSystem"> Full support of an experienced team of Brokers who always have your back. </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-user" style="color:#ff0000"> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>LEADS</h4> <div id="leads"> Verified Buyers and Listings leads at no cost to agents </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-dollar" style="color:#ff0000 "> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>NO HIDDEN COSTS</h4> <div id="NoHiddenCosts">No Hidden Costs, No E&O fees, No marketing fees, No desk fees, No monthly fees.</div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-user-plus" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>TRAINING</h4> <div id="WrThemesIcons">We provide both “hands on” mentoring, shadowing and extensive online training to help you succeed at our ever growing training site FREE at EducatedAgent.com</div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-users" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>COACHING</h4> <div id="WrThemesIcons">Your journey to success with custom real estate coaching programs designed to take your real estate business to the next leve</div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="iagent"> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-area-chart" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>CONTRACTS</h4><span>In-house, licensed Brokers write and manage all of the contracts within the hour, with full transaction administration with TransActionAdmin.com</span> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-cubes" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>CRM</h4> <div> Customer Relationship Management (CRM) to Manage leads and stay organized with free best on market software. </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-briefcase" style="color:#ff0000"> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>MEDIA</h4> <div id="WrForms"> Professional Business cards, lock boxes, signs, website, marketing brochures, hangers, postcards, etc. provided free. </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-anchor" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>BROKER SUPPORT</h4> <div id="WrGridSystem"> Full support of an experienced team of Brokers who always have your back. </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-user" style="color:#ff0000"> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>LEADS</h4> <div id="leads"> Verified Buyers and Listings leads at no cost to agents </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-dollar" style="color:#ff0000 "> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>NO HIDDEN COSTS</h4> <div id="NoHiddenCosts">No Hidden Costs, No E&O fees, No marketing fees, No desk fees, No monthly fees.</div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-user-plus" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>TRAINING</h4> <div id="WrThemesIcons">We provide both “hands on” mentoring, shadowing and extensive online training to help you succeed at our ever growing training site FREE at EducatedAgent.com</div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-users" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>COACHING</h4> <div id="WrThemesIcons">Your journey to success with custom real estate coaching programs designed to take your real estate business to the next leve</div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="iteam"> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-area-chart" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>CONTRACTS</h4><span>In-house, licensed Brokers write and manage all of the contracts within the hour, with full transaction administration with TransActionAdmin.com</span> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-cubes" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>CRM</h4> <div> Customer Relationship Management (CRM) to Manage leads and stay organized with free best on market software. </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-briefcase" style="color:#ff0000"> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>MEDIA</h4> <div id="WrForms"> Professional Business cards, lock boxes, signs, website, marketing brochures, hangers, postcards, etc. provided free. </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-anchor" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>BROKER SUPPORT</h4> <div id="WrGridSystem"> Full support of an experienced team of Brokers who always have your back. </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-user" style="color:#ff0000"> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>LEADS</h4> <div id="leads"> Verified Buyers and Listings leads at no cost to agents </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-dollar" style="color:#ff0000 "> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>NO HIDDEN COSTS</h4> <div id="NoHiddenCosts">No Hidden Costs, No E&O fees, No marketing fees, No desk fees, No monthly fees.</div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-user-plus" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>TRAINING</h4> <div id="WrThemesIcons">We provide both “hands on” mentoring, shadowing and extensive online training to help you succeed at our ever growing training site FREE at EducatedAgent.com</div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-users" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>COACHING</h4> <div id="WrThemesIcons">Your journey to success with custom real estate coaching programs designed to take your real estate business to the next leve</div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="branch"> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-area-chart" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>CONTRACTS</h4><span>In-house, licensed Brokers write and manage all of the contracts within the hour, with full transaction administration with TransActionAdmin.com</span> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-cubes" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>CRM</h4> <div> Customer Relationship Management (CRM) to Manage leads and stay organized with free best on market software. </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-briefcase" style="color:#ff0000"> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>MEDIA</h4> <div id="WrForms"> Professional Business cards, lock boxes, signs, website, marketing brochures, hangers, postcards, etc. provided free. </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-anchor" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>BROKER SUPPORT</h4> <div id="WrGridSystem"> Full support of an experienced team of Brokers who always have your back. </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-user" style="color:#ff0000"> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>LEADS</h4> <div id="leads"> Verified Buyers and Listings leads at no cost to agents </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-dollar" style="color:#ff0000 "> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>NO HIDDEN COSTS</h4> <div id="NoHiddenCosts">No Hidden Costs, No E&O fees, No marketing fees, No desk fees, No monthly fees.</div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-user-plus" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>TRAINING</h4> <div id="WrThemesIcons">We provide both “hands on” mentoring, shadowing and extensive online training to help you succeed at our ever growing training site FREE at EducatedAgent.com</div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-users" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>COACHING</h4> <div id="WrThemesIcons">Your journey to success with custom real estate coaching programs designed to take your real estate business to the next leve</div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="revenue"> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-area-chart" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>CONTRACTS</h4><span>In-house, licensed Brokers write and manage all of the contracts within the hour, with full transaction administration with TransActionAdmin.com</span> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-cubes" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>CRM</h4> <div> Customer Relationship Management (CRM) to Manage leads and stay organized with free best on market software. </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-briefcase" style="color:#ff0000"> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>MEDIA</h4> <div id="WrForms"> Professional Business cards, lock boxes, signs, website, marketing brochures, hangers, postcards, etc. provided free. </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-anchor" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>BROKER SUPPORT</h4> <div id="WrGridSystem"> Full support of an experienced team of Brokers who always have your back. </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-user" style="color:#ff0000"> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>LEADS</h4> <div id="leads"> Verified Buyers and Listings leads at no cost to agents </div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-dollar" style="color:#ff0000 "> </i></center> </div> <div class="wrimagecard-topimage_title"> <h4>NO HIDDEN COSTS</h4> <div id="NoHiddenCosts">No Hidden Costs, No E&O fees, No marketing fees, No desk fees, No monthly fees.</div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-user-plus" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>TRAINING</h4> <div id="WrThemesIcons">We provide both “hands on” mentoring, shadowing and extensive online training to help you succeed at our ever growing training site FREE at EducatedAgent.com</div> </div> </div> </div> <div class="col-sm-4"> <div class="wrimagecard wrimagecard-topimage"> <div class="wrimagecard-topimage_header"> <center><i class="fa fa-users" style="color:#ff0000"></i></center> </div> <div class="wrimagecard-topimage_title"> <h4>COACHING</h4> <div id="WrThemesIcons">Your journey to success with custom real estate coaching programs designed to take your real estate business to the next leve</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
.panel.with-nav-tabs .panel-heading{ padding: 5px 5px 0 5px; } .panel.with-nav-tabs .nav-tabs{ border-bottom: none; } .panel.with-nav-tabs .nav-justified{ margin-bottom: -1px; } /********************************************************************/ /*** PANEL DEFAULT ***/ .with-nav-tabs.panel-default .nav-tabs > li > a, .with-nav-tabs.panel-default .nav-tabs > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li > a:focus { color: #777; } .with-nav-tabs.panel-default .nav-tabs > .open > a, .with-nav-tabs.panel-default .nav-tabs > .open > a:hover, .with-nav-tabs.panel-default .nav-tabs > .open > a:focus, .with-nav-tabs.panel-default .nav-tabs > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li > a:focus { color: #777; background-color: #ddd; border-color: transparent; } .with-nav-tabs.panel-default .nav-tabs > li.active > a, .with-nav-tabs.panel-default .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-default .nav-tabs > li.active > a:focus { color: green; background-color: #fff; border-color: #ddd; border-bottom-color: transparent; text-align:center; font-weight: bold; } .with-nav-tabs.panel-default .nav-tabs { background-color: #f5f5f5; border-color: #ddd; text-align:center; } .with-nav-tabs.panel-default .nav-tabs > li > a { color: #777; text-align:center; } .with-nav-tabs.panel-default .nav-tabs > .active > a, .with-nav-tabs.panel-default .nav-tabs > .active > a:hover, .with-nav-tabs.panel-default .nav-tabs > .active > a:focus { color: #fff; background-color: #5255; text-align:center; } .nav-tabs > li { float:none; display:inline-block; zoom:1; } .nav-tabs { text-align:center; }

Related: See More


Questions / Comments: