Theme Components

Responsive Carousel

<div id="myCarousel" class="carousel slide" style="max-width:700px">
<!-- Carousel items -->
<div class="carousel-inner">
	<div class="active item"><img alt="" src="http://placehold.it/700x350">
		<div class="carousel-caption">
			<h4>An item with caption</h4>
			<p>Caption...</p>
		</div>
	</div>
	<div class="item"><img alt="" src="http://placehold.it/700x350"></div>
	<div class="item"><img alt="" src="http://placehold.it/700x350"></div>
	<div class="item"><img alt="" src="http://placehold.it/700x350"></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>			

jQuery Tabs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tem
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tem
ipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tem
cing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tem
	
<ul class="nav nav-tabs" id="myTab">
	<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
	<li><a href="#profile" data-toggle="tab">Profile</a></li>
	<li><a href="#messages" data-toggle="tab">Messages</a></li>
	<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
 
<div class="tab-content">
	<div class="tab-pane active" id="home">...</div>
	<div class="tab-pane" id="profile">...</div>
	<div class="tab-pane" id="messages">...</div>
	<div class="tab-pane" id="settings">...</div>
</div>	

Left tabs

Lorem ipsum content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica,

Lorem ipsum content 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica,

Lorem ipsum content 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica,

Lorem ipsum content 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica,
<div class="tabbable tabs-left">
<!--bootstrap tabs implementation-->
<ul class="nav nav-tabs">
	<!--tabs-->
	<li class="active"><a data-toggle="tab" href="#tab1">TAB 1</a></li>
	<li><a data-toggle="tab" href="#tab2">TAB 2</a></li>
	<li><a data-toggle="tab" href="#tab3">TAB 3</a></li>
	<li><a data-toggle="tab" href="#tab4">TAB 3</a></li>

</ul>

<!--tabs content -->
<div class="tab-content">
	<div id="tab1" class="tab-pane  active fade in">
		<h3>Lorem ipsum content</h3>
		content...
		</div>

	<div id="tab2" class="tab-pane  fade  ">
		<h3>Lorem ipsum content 2</h3>
		content...
	</div>

	<div id="tab3" class="tab-pane  fade  ">
		<h3>Lorem ipsum content 3</h3>
		content...
	</div>

	<div id="tab4" class="tab-pane  fade  ">
		<h3>Lorem ipsum content 4</h3>
		content...
	</div>
</div><!--tab content -->
</div>			

According Content

ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praese
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praese
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praese
	
<h2 class="bordered">According Content</h2>
	<div class="accordion" id="accordion">
		
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
			Collapsible Group Item #1
			</a>
		</div>
		<div id="collapseOne" class="accordion-body collapse in">
			<div class="accordion-inner">
			CONTENT GOES HERE...
			</div>
		</div>
	</div>
	
	<div class="accordion-group">
	<div class="accordion-heading">
		<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
		Collapsible Group Item #2
		</a>
	</div>
	<div id="collapseTwo" class="accordion-body collapse">
		<div class="accordion-inner">
		CONTENT GOES HERE...
		</div>
	</div>
	</div>
	
	<div class="accordion-group">
	<div class="accordion-heading">
		<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
		Collapsible Group Item #2
		</a>
	</div>
	<div id="collapseThree" class="accordion-body collapse">
		<div class="accordion-inner">
		CONTENT GOES HERE...
		</div>
	</div>
	</div>
	
</div>	

jQuery Tooltip

Lorem Ipsum dolor sit amet, consectetuer adipiscing elit, sed Right tooltip nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea Bottom Lorem Ipsum consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tem

	
<a data-original-title="Click here to login" data-placement="top" rel="tooltip" href="/icompany/dev/user">Lorem Ipsum</a>
<!-- you can change tooltip direction by changing data-placement attribute to left, right, bottom top -->

Beautiful Popovers

<a data-placement="right" data-content="POPOVER CONTENT GOES HERE" rel="popover" class=" btn btn-theme btn-small "  data-original-title="A Title">Right popover</a>	        
 <a data-placement="top"  data-content="POPOVER CONTENT GOES HERE" rel="popover" class="btn btn-theme btn-small"  data-original-title="A Title">Top popover</a>	        
 <a data-placement="left"  data-content="POPOVER CONTENT GOES HERE" rel="popover" class="btn btn-theme btn-small"  data-original-title="A Title">Left popover</a>	        
 <a data-placement="bottom"  data-content="POPOVER CONTENT GOES HERE" rel="popover" class="btn btn-theme btn-small"  data-original-title="A Title">Bottom popover</a>	 
 <!-- The only major differece in above buttons is data-placement direction of popovers-->	

Modal Window

You can place any block in modal block region and then call modal window with a link. Call Modal Window
<a data-toggle="modal" role="button" href="#myModal" >Call Modal Window</a> 
 <!-- Yippee, its as simple as that -->

Alerts

Warning: Best check yo self, you're not...
Error: Best check yo self, you're not...
Success: Best check yo self, you're not...

Buttons

Theme Button (automatically changes color when scheme is changed)

Buy Now   Buy Now  Buy Now

Default Buttons

Buy Now   Buy Now  Buy Now

Button with inverse class

Buy Now   Buy Now  Buy Now

Button with success class

Buy Now   Buy Now  Buy Now

Button with danger class

Buy Now   Buy Now  Buy Now
<!-- DEFAULT BUTTONS WITH DIFFERENT SIZE-->
<a class="btn btn-small" href="http://themeforest.net">Buy Now</a>
<a class="btn" href="http://themeforest.net">Buy Now</a>
<a class="btn btn-large" href="http://themeforest.net">Buy Now</a>	

<!--  BUTTONS WITH .btn-theme CLASS TO ADD COLOR SCHEME-->
<a class="btn btn-small" href="http://themeforest.net">Buy Now</a>
<a class="btn" href="http://themeforest.net">Buy Now</a>
<a class="btn btn-large" href="http://themeforest.net">Buy Now</a>	 	        

You can use these classes to change style:
.btn-theme, .btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, btn-inverse, .btn-link, .btn-block (block level button)

Images with rounded, circle and polaroid styles

     
<img src="http://placehold.it/150x150" class="img-rounded"> 
<img src="http://placehold.it/150x150" class="img-circle"> 
<img src="http://placehold.it/150x150" class="img-polaroid"> 

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons .

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen
Simple include these to inline elements by adding above mentioned class. Ideally you should add them as span tag or text tag like <i>. 
Example:<span class="icon-home"></span> OR <i class="icon-home"></i> I m home. 

Labels and Badges

Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>
Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Progress Bars


<div class="progress progress-info">
	<div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
	<div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
	<div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
	<div class="bar" style="width: 80%"></div>
</div>

Undefined

Reservation Form - with the most competitive prices

Alternatively you can make a secure booking by using our booking form. From and to Katakolo port. and with the most competitive prices - book now

Go to top