CheatStrap

CheatStrap provides you convenient HTML, CSS and JavaScript snippets for making web pages with Twitter Bootstrap 3.

You can simply copy those snippets and paste to your web pages. If you have any questions about Bootstrap 3, feel free to contact us from the form at the bottom of this page.

Starting

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta name="author" content="ENTEREAL">
		<meta name="format-detection" content="telephone=no">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

		<!--[if lt IE 9]>
			<script type="text/javascript" charset="UTF-8" src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script type="text/javascript" charset="UTF-8" src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="container-fluid">
			// Contents here
		</div>

		<script type="text/javascript" charset="UTF-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<script type="text/javascript" charset="UTF-8" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	</body>
</html>

Grid

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12

Sample: Left Menu 2 columns

4/12 width
8/12 width
4/12
8/12

Sample: Centering 1 column

10/12 width (with 1/12 left and right margin)
10/12 (with 1/12 margin )
Differnt Version

Sample: 5 equal width columns

1 / 5 width
1 / 5 width
1 / 5 width
1 / 5 width
1 / 5 width
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;
	}
}

Column

Width% of page widthHTML Code
1 / 1 100 %
1 / 1
1 / 2 50 %
1 / 2
1 / 3 33.33 %
1 / 3
1 / 4 25 %
1 / 4
1 / 5 20 %
1 / 5
1 / 6 16.66 %
1 / 6
1 / 8 12.5 %
1 / 8
1 / 9 11.11 %
1 / 9
1 / 10 10 %
1 / 10
1 / 12 8.33 %
1 / 12

Font Size

h1 heading : 36px Secondary text : 23.4px (65% of 36px)

h2 heading : 30px Secondary text : 19.5px (65% of 30px)

h3 heading : 24px Secondary text : 15.6px (65% of 24px)

h4 heading : 18px Secondary text : 11.7px (65% of 18px)

h5 heading : 14px Secondary text : 9.1px (65% of 14px)
h6 heading : 12px Secondary text : 7.8px (65% of 12px)

h1 heading : 36px Secondary text : 23.4px (65% of 36px)

h2 heading : 30px Secondary text : 19.5px (65% of 30px)

h3 heading : 24px Secondary text : 15.6px (65% of 24px)

h4 heading : 18px Secondary text : 11.7px (65% of 18px)

h5 heading : 14px Secondary text : 9.1px (65% of 14px)
h6 heading : 12px Secondary text : 7.8px (65% of 12px)

Color

for Text (Typo)

Class Name Color Sample
.text-muted #777777 / rgb() Sample Text: this is .text-muted class.   
.text-danger #a94442 / rgb() Sample Text: this is .text-danger class.   
.text-warning #8a6d3b / rgb() Sample Text: this is .text-warning class.   
.text-info #31708f / rgb() Sample Text: this is .text-info class.   
.text-primary #337ab7 / rgb() Sample Text: this is .text-primary class.   
.text-success #3c763d / rgb() Sample Text: this is .text-success class.   

* .text-primary is more ligther than .text-info.

for Table rows, individual cells or Background

Rows & Cells
Class Name
Color Code Background
Class Name
Color Code
.active #F5F5F5 / rgb(245, 245, 245) - -
.danger #F2DEDE / rgb(242, 222, 222) .bg-danger #F2DEDE / rgb(242, 222, 222)
.warning #FCF8E3 / rgb(252, 248, 227) .bg-warning #FCF8E3 / rgb(252, 248, 227)
.info #D9EDF7 / rgb(217, 237, 247) .bg-info #D9EDF7 / rgb(217, 237, 247)
.success #DFF0D8 / rgb(223, 240, 216) .bg-success #DFF0D8 / rgb(223, 240, 216)
- - .bg-primary #337AB7 / rgb(51, 122, 183)

for Buttons

Class Name Color Hover Color Border Color Sample
.btn-default #FFFFFF
rgb(255, 255, 255)
#E6E6E6
rgb(230, 230, 230)
#CCCCCC
rgb(204, 204, 204)
.btn-default
.btn-danger #D9534F
rgb(217, 83, 79)
#C9302C
rgb(201, 48, 44)
#D43F3A
rgb(212, 63, 58)
.btn-danger
.btn-warning #F0AD4E
rgb(240, 173, 78)
#EC971F
rgb(236, 151, 31)
#EEA236
rgb(238, 162, 54)
.btn-warning
.btn-info #5BC0DE
rgb(91, 192, 222)
#31B0D5
rgb(49, 176, 213)
#46B8DA
rgb(70, 184, 218)
.btn-info
.btn-primary #337AB7
rgb(51, 122, 183)
#286090
rgb(40, 96, 144)
#2E6DA4
rgb(46, 109, 164)
.btn-primary
.btn-success #5CB85C
rgb(92, 184, 92)
#449D44
rgb(68, 157, 68)
#4CAE4C
rgb(76, 174, 76)
.btn-success

List

Unorder list

  • test
  • test
  • test
  • test

Order list

  1. test
  2. test
  1. test
  2. 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.
Differnt Version
Icon list

.icon-caret-right

  • test
  • test
  • test

.icon-check-square-o

  • test
  • test
  • test

.icon-plus-square-o

  • test
  • test
  • test
  • test
  • test
  • test
.icon-list > li {
	list-style: none;
}
.icon-list > li:before {
	font-family: 'FontAwesome';
	margin: 0 8px 0 -12px;
}
.icon-list.icon-caret-right > li:before {
	content: '\f0da';
}
.icon-list.icon-check-square-o > li:before {
	content: '\f046';
}

.icon-list.icon-plus-square-o > li:before {
	content: '\f196';
}
Narrow width 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.
.dl-horizontal.dt-100 > dt {
	width: 100px;
}
.dl-horizontal.dt-100 > dd {
	margin-left: 120px;
}
Striped 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.
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.
.dl-horizontal.dl-striped > dt {
	margin-right: 20px;
	padding: 5px 0;
}
.dl-horizontal.dl-striped > dd {
	margin-left: 0;
	padding: 5px 0 0 0;
}
.dl-horizontal.dl-striped > dd:nth-child(4n - 2) {
	background-color: rgba(0, 0, 0, 0.1);
}

Table

Basic table

Add .table class on the table element.

header header header
data data data
data data data
data data data

Striped table

Add .table-striped class on the table element.

header header header
data data data
data data data
data data data

Condensed table

Add .table-condensed class on the table element.

header header header
data data data
data data data
data data data

Bordered table

Add .table-bordered class on the table element.

header header header
data data data
data data data
data data data

Hover row

Add .table-hover class on the table element.

header header header
data data data
data data data
data data data

Responsive table

Wrap the table with <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.

header header header
data data data
data data data
data data data
Make it better

To meke it responsive scroll on any devices, add .force-responsive class on the wrapper.

header header header header header header
data data data data data data
data data data data data data
data data data data data data
.table-responsive.force-responsive {
	overflow-y: hidden;
}
.table-responsive.force-responsive > .table > tbody > tr > td,
.table-responsive.force-responsive > .table > tbody > tr > th,
.table-responsive.force-responsive > .table > tfoot > tr > td,
.table-responsive.force-responsive > .table > tfoot > tr > th,
.table-responsive.force-responsive > .table > thead > tr > td,
.table-responsive.force-responsive > .table > thead > tr > th {
	white-space: nowrap;
}
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.

header header header header
header data data data
header data data data
header data data data
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
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;
}

Button

Sizes










Colors












Elements

a-button submit-button span-button
a-button





submit-button

span-button

Condition

active-button disabled-button
active-button



disabled-button


Button group (horizontal)

Justified Button group (with A element button)

Justified Button group (with button element button)

Button toolbar (Nested Button group)

Button group (vertical)

Button dropdown

Split Button dropdown

Dropup button

Input group button


Alert

Danger Alert text
Warning Alert text
Info Alert text
Success Alert text
Info Alert text

Tab

Tab pane #1
Tab pane #2
Tab pane #3
Tab pane #4
...
...
...
...
$('#sample-tab a').click(function(e) {
	e.preventDefault();
	$(this).tab('show');
});
Make it better

To prevent showing dotted line around tabs, add the small css style on it.

#sample-tab > .nav > li > a {
	outline: none;
}
Differnt Version
Upside down Tab
Tab pane #1
Tab pane #2
Tab pane #3
Tab pane #4

Tab pane #1
Tab pane #2
Tab pane #3
Tab pane #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


Make it better

Because it has too many IDs and Classes, and the only <a></a> links are clickable, not easily understadable especially for beginner users. Instead of this, we override small CSS code and jQuery script.

Collapsible Group Item #1

Contents 1

Collapsible Group Item #2

Contents 2

Collapsible Group Item #3

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

Collapsible Group Item #1

Contents 1

Collapsible Group Item #2

Contents 2

Collapsible Group Item #3

Contents 3

Callout

It's not an official compornent but exists on the Bootstrap official dodocument.

Callout heading text

content text

Callout heading text

content text

Callout heading text

content text

Callout heading text

content text

Callout heading text

content text

.callout {
	border-width: 1px 1px 1px 5px;
	border-style: solid;
	border-color: #EEE;
	border-radius: 3px;
	margin: 20px 0;
	padding: 20px;
}

.callout-danger {
	border-left-color: #ce4844;
}
.callout-danger > h4 {
	color: #ce4844;
}
.callout-warning {
	border-left-color: #aa6708;
}
.callout-warning > h4 {
	color: #aa6708;
}
.callout-info {
	border-left-color: #1b809e;
}
.callout-info > h4 {
	color: #1b809e;
}

Card

Young girl

April 10, 2015

Shooted by PTX

Desert

April 10, 2015

Shooted by PTX

Skyscrapers

April 10, 2015

Shooted by PTX

Surfing

April 10, 2015

Shooted by PTX

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

.nested-menu,
.nested-menu > li > ul {
	display: block;
	margin: 0;
	padding: 0;
}
.nested-menu li {
	float: left;
	display: block;
	width: 100%;
	list-style: none;
	background-color: #F7F7F7;
	border-left: 5px solid #F7F7F7;
	margin: 0 0 3px 0;
}
.nested-menu	li > a {
	position: relative;
	display: block;
	width: 100%;
	height: 30px;
	line-height: 30px;
	color: #333;
	text-decoration: none;
	padding: 0 5px 0 10px;
}
.nested-menu li.active,
.nested-menu li:hover {
	background-color: #EEE;
	border-left-color: #CCC;
}
.nested-menu li.active > a:after,
.nested-menu li > a:hover:after {
	position: absolute;
	top: 2px;
	right: 5px;
	font-family: 'FontAwesome';
	content: "\f054";
}
.nested-menu > .has-sub-menu {
	position: relative;
	min-height: 30px;
	border: none;
	padding: 5px 0 0 15px;
}
.nested-menu > .has-sub-menu:after {
	position: absolute;
	top: 4px;
	right: 5px;
	font-family: 'FontAwesome';
	content: "\f078";
	color: #AAA;
}
.nested-menu > .has-sub-menu:hover:after {
	color: #333;
}
.nested-menu > .has-sub-menu.opened:after {
	content: "";
}
.nested-menu > .has-sub-menu > ul {
	display: none;
	margin: 5px 0 0 0;
}
Different Color

To make it colorful, just add following color class such as .nested-menu-primary to the .nested-menu element.

.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;
}

Price Table

Free Trial Plan

Plan Name Aside

  • Shared Server
  • 2GB Memory
  • 10GB HDD
  • SLA 95.0 %
  • Wide backbone network
Free

Standard Plan

Plan Name Aside

  • Shared Server
  • 2GB Memory
  • 20GB HDD
  • SSL available
  • SLA 95.0 %
  • Wide backbone network
$ 29.9 / mo

Popular Plan

Plan Name Aside

  • Shared Server
  • 4GB Memory
  • 50GB HDD
  • SSL available
  • SLA 97.5 %
  • Wide backbone network
$ 49.9 / mo

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

Free Trial Plan

Plan Name Aside

  • Shared Server
  • 2GB Memory
  • 10GB HDD
  • SLA 95.0 %
  • Wide backbone network
Free

Standard Plan

Plan Name Aside

  • Shared Server
  • 2GB Memory
  • 20GB HDD
  • SSL available
  • SLA 95.0 %
  • Wide backbone network
$ 29.9 / mo

Popular Plan

Plan Name Aside

  • Shared Server
  • 4GB Memory
  • 50GB HDD
  • SSL available
  • SLA 97.5 %
  • Wide backbone network
$ 49.9 / mo

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
.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;
}

Social Button

.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 Top/Bottom Button

.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);
};