1 / 5 width
	
1 / 5 width
	
1 / 5 width
	
1 / 5 width
	
1 / 5 width

.col-xs-1_5th,
.col-sm-1_5th,
.col-md-1_5th,
.col-lg-1_5th {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}
.col-xs-1_5th {
	width: 20%;
	float: left;
}

@media (min-width: 768px) {
	.col-sm-1_5th {
		width: 20%;
		float: left;
	}
}
@media (min-width: 992px) {
	.col-md-1_5th {
		width: 20%;
		float: left;
	}
}
@media (min-width: 1200px) {
	.col-lg-1_5th {
		width: 20%;
		float: left;
	}
}

Unorder list

• test
• test

	
test
	
test

Order list

1. test
2. test

	
test
	
test

Definition list

title

definition

title

definition

	
title
	
definition
	
title
	
definition

Unstyled list

• test
• test

	
test
	
test

Inline list

• test
• test
• test

	
test
	
test
	
test

Horizontal Definition list

title

definition text here. definition text here.

title

definition text here. definition text here.

	
title
	
definition text here. definition text here.
	
title
	
definition text here.　definition text here.

Basic table

Add.table class on the table element.

表に.tableクラスを付与します。

Striped table

Add.table-striped class on the table element.

表に.table-stripedクラスを付与します。

Condensed table

Add.table-condensed class on the table element.

表に.table-condensedクラスを付与します。

Bordered table

Add.table-bordered class on the table element.

表に.table-borderedクラスを付与します。

Hover row

Add.table-hover class on the table element.

表に.table-hoverクラスを付与します。

Responsive table

Wrap the table with<div class="table-responsive"></div>.

表を<div class="table-responsive"></div>で囲みます。

* This class only works on small devices (under 768px). See 'Make it better' section if you want to make it scroll on any devices.

※ このクラスは、小画面(768px未満)の時にのみ有効化されます。常に有効にするには次の「追加変更」を参照ください。

	

		

			

				
header
				
header
				
header
			
		
		

			

				
data
				
data
				
data
			
			

				
data
				
data
				
data
			
			

				
data
				
data
				
data
			
		
	

Helpper Text alignment in cells

ヘルパークラス セル内での文字配置

This helper-class for table element make th/td cell text alignment whatever they are in thead/tbody/tfoot.

表内のthead/tbody/tfootにあるセルのテキスト位置を変更するクラスです。

	

		

			
header
			
header
			
header
			
header
		
	
	

		

			
header
			
data
			
data
			
data
		
		

			
header
			
data
			
data
			
data
		
		

			
header
			
data
			
data
			
data
		
	

.th-tc th {
	text-align: center;
}
.th-tr th {
	text-align: right;
}
.th-tl th {
	text-align: left;
}

.td-tc td {
	text-align: center;
}
.td-tr td {
	text-align: right;
}
.td-tl td {
	text-align: left;
}

Text alignment in a thead, tbody and/or tfoot

	

		

			
header
			
header
			
header
			
header
		
	
	

		

			
header
			
data
			
data
			
data
		
		

			
header
			
data
			
data
			
data
		
		

			
header
			
data
			
data
			
data
		
	

.thead-tc thead th,
.thead-tc thead td {
	text-align: center;
}
.thead-tr thead th,
.thead-tr thead td {
	text-align: right;
}
.thead-tl thead th,
.thead-tl thead td {
	text-align: left;
}

.tbody-tc tbody th,
.tbody-tc tbody td {
	text-align: center;
}
.tbody-tr tbody th,
.tbody-tr tbody td {
	text-align: right;
}
.tbody-tl tbody th,
.tbody-tl tbody td {
	text-align: left;
}

.tfoot-tc tfoot th,
.tfoot-tc tfoot td {
	text-align: center;
}
.tfoot-tr tfoot th,
.tfoot-tr tfoot td {
	text-align: right;
}
.tfoot-tl tfoot th,
.tfoot-tl tfoot td {
	text-align: left;
}

	

		1
		2
		3
	
	

		4
		5
		6
	
	

		7
		8
		9
	

	

		
Tab pane #1

		
Tab pane #2

		
Tab pane #3

		
Tab pane #4

	


	

		
Tab 1
		
Tab 2
		
Tab 3
		
Tab 4
	

.tab-upside-down {
	border-top: 1px solid #DDD;
	border-bottom: none;
}
.tab-upside-down > li {
	margin-top: -1px;
	margin-bottom: 0;
}
.tab-upside-down > li > a {
	border-radius: 0 0 4px 4px;
	outline: none;
}
.tab-upside-down > li > a:hover {
	border-color: #DDD #EEE #EEE #EEE;
}
.tab-upside-down > li.active > a,
.tab-upside-down > li.active > a:focus,
.tab-upside-down > li.active > a:hover {
	border-color: transparent #DDD #DDD #DDD;
}

#accordion-better .panel-heading {
	cursor: pointer;
}
#accordion-better .panel-heading > .panel-title > a {
	text-decoration: none;
	outline: none;
}

1. Home
2. Sub category
3. Current page

.breadcrumb > li + li:before {
	font-family: 'FontAwesome';
	content: "\f054";
}

	
	

		
Young girl
		
April 10, 2015
		
Shooted by PTX
	

.card {
	border-radius: 4px;
	box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.3);
}
.card > img:first-child {
	width: 100%;
	border-radius: 4px 4px 0 0;
}
.card > .card-info {
	padding: 10px;
}

.nested-menu-danger li.active,
.nested-menu-danger li:hover {
	border-left-color: #D9534F;
}
.nested-menu-warning li.active,
.nested-menu-warning li:hover {
	border-left-color: #F0AD4E;
}
.nested-menu-info li.active,
.nested-menu-info li:hover {
	border-left-color: #5BC0DE;
}
.nested-menu-primary li.active,
.nested-menu-primary li:hover {
	border-left-color: #337AB7;
}
.nested-menu-success li.active,
.nested-menu-success li:hover {
	border-left-color: #5CB85C;
}

	

		

			
Free Trial Plan
			
Plan Name Aside
			
		
		

			

				
Shared Server
				
2GB Memory
				
10GB HDD
				

				

					SLA 95.0 %

					
					
					
					
				
				
Wide backbone network
			
		
		

			Free
		
		

			Register Now
		
	

	

		

			
Standard Plan
			
Plan Name Aside
			
		
		

			

				
Shared Server
				
2GB Memory
				
20GB HDD
				
SSL available
				

					SLA 95.0 %

					
					
					
					
				
				
Wide backbone network
			
		
		

			$
			29.9
			/ mo
		
		

			Buy Now
		
	

	

		

			
Popular Plan
			
Plan Name Aside
			
		
		

			

				
Shared Server
				
4GB Memory
				
50GB HDD
				
SSL available
				

					SLA 97.5 %

					
					
					
					
				
				
Wide backbone network
			
		
		

			$
			49.9
			/ mo
		
		

			Buy Now
		
	

	

		

			
Premium Plan
			
Plan Name Aside
			
		
		

			

				
Virtual Private Server
				
16GB Memory
				
5GB SSD + 100GB HDD
				
SSL available
				

					SLA 99.999 %

					
					
					
					
					
				
				
Wide backbone network
			
		
		

			$
			99.9
			/ mo
		
		

			Buy Now
		
	

.price-table {
	display: inline-block;
	text-align: center;
	margin: 0 auto;
}
.price-table > .plan-box {
	position: relative;
	float: left;
	display: inline-block;
	width: 180px;
	margin: 0;
	z-index: 100;
}
.price-table > .plan-box.plan-enphasize {
	width: 210px;
	box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2);
	margin-right: -5px;
	margin-left: -5px;
	z-index: 1000;
}
.plan-box > .plan-header {
	background-color: #337AB7;
	margin-top: 15px;
	padding: 10px 15px;
}
.plan-box.plan-enphasize > .plan-header {
	margin-top: 0 !important;
	padding: 20px 30px 15px 30px;
}
.plan-box > .plan-header > .plan-name {
	color: #FFF;
	font-size: 30px;
	font-weight: bold;
	margin: 0;
}
.plan-box > .plan-header > .plan-name-aside {
	color: #FFF;
	font-size: 12px;
	font-weight: normal;
	margin: 0 0 10px 0;
}
.plan-box > .plan-header > img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	margin: 0 auto;
}
.plan-box > .plan-body {
	background-color: #FFF;
}
.plan-box > .plan-body > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.plan-box > .plan-body > ul > li {
	background-color: #FFF !important;
	border-bottom: 1px solid #337AB7;
	padding: 10px 0;
}
.plan-box > .price-label {
	background-color: #337AB7;
	padding: 10px 15px;
}
.plan-box > .price-label > .price-prefix {
	color: #FFF;
	font-size: 12px;
	margin: 0;
}
.plan-box > .price-label > .price-tag {
	color: #FFF;
	font-size: 30px;
	font-weight: bold;
	line-height: 30px;
	margin: 0 5px;
}
.plan-box > .price-label > .price-suffix {
	color: #FFF;
	font-size: 12px;
	margin: 0;
}
.plan-box > .plan-footer {
	background-color: #FFF;
	padding: 10px;
}

.plan-box:nth-child(1) > .plan-header,
.plan-box:nth-child(1) > .plan-body > ul > li,
.plan-box:nth-child(1) > .price-label {
	background-color: #afcee9;
	border-color: #afcee9;
}
.plan-box:nth-child(2) > .plan-header,
.plan-box:nth-child(2) > .plan-body > ul > li,
.plan-box:nth-child(2) > .price-label {
	background-color: #5f9dd3;
	border-color: #5f9dd3;
}
.plan-box:nth-child(3) > .plan-header,
.plan-box:nth-child(3) > .plan-body > ul > li,
.plan-box:nth-child(3) > .price-label {
	background-color: #2c6aa0;
	border-color: #2c6aa0;
}
.plan-box:nth-child(4) > .plan-header,
.plan-box:nth-child(4) > .plan-body > ul > li,
.plan-box:nth-child(4) > .price-label {
	background-color: #163550;
	border-color: #163550;
}

• Twitter
• Facebook
• Google+
• Line

.social-btn {
	display: block;
	color: #FFF;
	text-align: center;
	padding: 10px;
}
.social-btn:hover {
	color: #EEE;
	text-decoration: none;
}
.bg-tw {
	background-color: #10A5DE;
}
.bg-fb {
	background-color: #284A95;
}
.bg-gp {
	background-color: #D04C3C;
}
.bg-ln {
	background-color: #00C300
}

.move-btn-box {
	position: fixed;
	bottom: 50px;
	right: 0;
	z-index: 1000;
}
.move-btn {
	display: inline-block;
	color: rgba(255, 255, 255, 0.5);
	background-color: rgba(0, 0, 0, 0.1);
	text-align: center;
	padding: 10px;
}
.move-btn:hover {
	color: rgba(255, 255, 255, 1.0);
	background-color: rgba(0, 0, 0, 0.4);
	text-decoration: none;
}

function moveUpDown(btnObj) {
	var positionY = 0;

	if (btnObj.hasClass('move-top')) {
		positionY = 0;

	} else if (btnObj.hasClass('move-bottom')) {
		positionY = $(document).height();
	}

	$('html, body').stop().animate({
		scrollTop: positionY
	}, 500);
};