Home
Features
Pages
- Services
- About Us
- About Me
  - About Me
  - About Me 2
- Team
  - Team
  - Team 2
  - Team 3
- Pricing Table
- Contact Us
- Login & Register
- FAQ
  - FAQ
  - FAQ 2
  - FAQ 3
- Error Page
  - Error Page
  - Error Page 2
- Client
  - Client
  - Client 2
- Sidebar
- Search Result
- Invoice
- Career
- Terms and Conditions
- Privacy Policy
- Sitemap
- Blank Page
- Multi level menu
  - menu level 2
  - menu level 2
    - menu level 3
    - menu level 3
Portfolio
Blog
- Basic
- Grid
- Medium
- Single
Shop
Shortcodes
- Buttons UI
  
  Themes Button
  
  Animated Button
  
  Social Button
  
  Form
  
  Basic Forms
  Icons
  
  Icon Holder
  
  Social Icons
  
  Glyphicon
  
  Simple Line
  
  Font Awesome
  
  Tables
  Typography
  
  Basic Typography
  
  Grid
  
  Blockquote
  
  Divider
  
  Labels & Badges
  Components
  
  Tabs
  
  Pills
  
  Accordion
  
  Panels
  
  Progress Bar
  
  Pagination

Qty	Item	Price
1	Iphone 5S	$3000
1	Iphone 5S	$3000
		Total: $6,000

Tabs

Clean and Multi-purpose template made with Bootstrap

Tab Style 1

Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.

Show Code

																											
												<div class="tab-style1">
												  <!-- Nav tabs -->
												  <ul class="nav nav-tabs" role="tablist">
													<li role="presentation" class="active"><a href="#a" aria-controls="a" role="tab" data-toggle="tab"><i class="fa fa-desktop"></i>Responsive</a></li>
													<li role="presentation"><a href="#b" aria-controls="b" role="tab" data-toggle="tab"><i class="fa fa-smile-o"></i>Multipurpose</a></li>
													<li role="presentation"><a href="#c" aria-controls="c" role="tab" data-toggle="tab"><i class="fa fa-paint-brush"></i>Clean</a></li>								
												  </ul>

												  <!-- Tab panes -->
												  <div class="tab-content">
													<div role="tabpanel" class="tab-pane active" id="a">
														<div class="row">
															<div class="col-md-4">
																<p>Pellentesque posuere fermentum libero quis porta. </p>
															</div>
															<div class="col-md-4">
																<p>Pellentesque posuere fermentum libero quis porta. </p>
															</div>
															<div class="col-md-4">
																<p>Pellentesque posuere fermentum libero quis porta. </p>
															</div>
														</div>
													</div>
													<div role="tabpanel" class="tab-pane" id="b">
														
														<div class="row">
															<div class="col-md-6">
																<p>Pellentesque posuere fermentum libero quis porta. </p>
															</div>
															<div class="col-md-6">
																<p>Pellentesque posuere fermentum libero quis porta. </p>
															</div>
														</div>
													</div>
													<div role="tabpanel" class="tab-pane" id="c">
														<div class="row">
															<div class="col-md-12">
																<p>Pellentesque posuere fermentum libero quis porta. </p>
															</div>
														</div>
													</div>
												  </div>
												</div>

Tab Style 2

Show Code

																										
											<div class="tab-style2">		
											  <!-- Nav tabs -->
											  <ul class="nav nav-tabs" role="tablist">
												<li role="presentation" class="active"><a href="#d" aria-controls="d" role="tab" data-toggle="tab"><i class="fa fa-desktop"></i> Responsive</a></li>
												<li role="presentation"><a href="#e" aria-controls="e" role="tab" data-toggle="tab"><i class="fa fa-smile-o"></i> Multipurpose</a></li>
												<li role="presentation"><a href="#f" aria-controls="f" role="tab" data-toggle="tab"><i class="fa fa-paint-brush"></i> Clean</a></li>								
											  </ul>

											  <!-- Tab panes -->
											  <div class="tab-content">
												<div role="tabpanel" class="tab-pane active" id="d">
													<div class="row">
														<div class="col-md-4">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
														</div>
														<div class="col-md-4">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
														
														</div>
														<div class="col-md-4">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>												
														</div>
													</div>
												</div>
												<div role="tabpanel" class="tab-pane" id="e">
													
													<div class="row">
														<div class="col-md-6">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>								
														</div>
														<div class="col-md-6">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>								
														</div>
													</div>
												</div>
												<div role="tabpanel" class="tab-pane" id="f">
													<div class="row">
														<div class="col-md-12">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>								
														</div>
													</div>
												</div>
											  </div>
											</div>

Tab Style 3

Show Code

																										
											<div class="tab-style3">		
											  <!-- Nav tabs -->
											  <ul class="nav nav-tabs" role="tablist">
												<li role="presentation" class="active"><a href="#g" aria-controls="g" role="tab" data-toggle="tab"><i class="fa fa-desktop"></i> Responsive</a></li>
												<li role="presentation"><a href="#h" aria-controls="h" role="tab" data-toggle="tab"><i class="fa fa-smile-o"></i> Multipurpose</a></li>
												<li role="presentation"><a href="#i" aria-controls="i" role="tab" data-toggle="tab"><i class="fa fa-paint-brush"></i> Clean</a></li>								
											  </ul>

											  <!-- Tab panes -->
											  <div class="tab-content">
												<div role="tabpanel" class="tab-pane active" id="g">
													<div class="row">
														<div class="col-md-4">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
														</div>
														<div class="col-md-4">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
														
														</div>
														<div class="col-md-4">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>												
														</div>
													</div>
												</div>
												<div role="tabpanel" class="tab-pane" id="h">
													
													<div class="row">
														<div class="col-md-6">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>								
														</div>
														<div class="col-md-6">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>								
														</div>
													</div>
												</div>
												<div role="tabpanel" class="tab-pane" id="i">
													<div class="row">
														<div class="col-md-12">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>								
														</div>
													</div>
												</div>
											  </div>
											</div>

Tab Style 4

Show Code

																										
											<div class="tab-style4">		
											  <!-- Nav tabs -->
											  <ul class="nav nav-tabs" role="tablist">
												<li role="presentation" class="active"><a href="#j" aria-controls="j" role="tab" data-toggle="tab"><i class="fa fa-desktop"></i> Responsive</a></li>
												<li role="presentation"><a href="#k" aria-controls="k" role="tab" data-toggle="tab"><i class="fa fa-smile-o"></i> Multipurpose</a></li>
												<li role="presentation"><a href="#l" aria-controls="l" role="tab" data-toggle="tab"><i class="fa fa-paint-brush"></i> Clean</a></li>								
											  </ul>

											  <!-- Tab panes -->
											  <div class="tab-content">
												<div role="tabpanel" class="tab-pane active" id="j">
													<div class="row">
														<div class="col-md-4">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
														</div>
														<div class="col-md-4">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
														
														</div>
														<div class="col-md-4">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>												
														</div>
													</div>
												</div>
												<div role="tabpanel" class="tab-pane" id="k">
													
													<div class="row">
														<div class="col-md-6">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>								
														</div>
														<div class="col-md-6">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>								
														</div>
													</div>
												</div>
												<div role="tabpanel" class="tab-pane" id="l">
													<div class="row">
														<div class="col-md-12">
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>
															<p>Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh. Curabitur tincidunt vulputate augue, non rhoncus nibh mollis et. Pellentesque posuere fermentum libero quis porta. Fusce leo urna, efficitur quis rhoncus sit amet, placerat a nibh.</p>								
														</div>
													</div>
												</div>
											  </div>
											</div>

Tabs

Tab Style 1

Tab Style 2

Tab Style 3

Tab Style 4

Style Switcher

Predefined Colors

Layout Style

Background Image

Background Color

Buttons UI

Form

Icons

Typography

Components

Tabs

Tab Style 1

Tab Style 2

Tab Style 3

Tab Style 4

Style Switcher

Predefined Colors

Layout Style

Background Image

Background Color