WebSVN – cheapmusic – Blame – /www/tests/color-theme.html

Rev	Author	Line No.	Line
62	-	1	`<!doctype html>`
		2	`<html lang="en">`
		3
		4	`<head>`
65	-	5	`<title>Bootstrap Color Theme Test</title>`
		6	`<meta charset="utf-8">`
		7	`<meta name="viewport" content="width=device-width, initial-scale=1">`
		8	`<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">`
		9	`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>`
		10	`<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>`
		11	`<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>`
		12	`<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.1/css/all.css">`
62	-	13
65	-	14	`<link rel="stylesheet" href="https://www.findcheapmusic.linkpc.net/css/style.css">`
		15	`<link rel="stylesheet" href="https://www.findcheapmusic.linkpc.net/css/theme-pastell.css">`
62	-	16	`</head>`
65	-	17
62	-	18	`<body>`
		19	`<div class="preview">`
		20
		21	`<div class="container-fluid pb-5">`
		22	`<!-- Brand color -->`
		23	`<div class="container-fluid mt-5" data-category="brand-color">`
65	-	24	`<h1>Bootstrap Color Theme Test</h1>`
62	-	25
		26	`<div class="mt-3 mb-5">`
		27	`<h3>Theme colors</h3>`
65	-	28	`<div class="p-2 mb-2 bg-primary">`
		29	`<div class="row">`
		30	`<div class="col-1">`
		31	`.bg-primary:`
		32	`</div>`
		33	`<div class="col-1" style="padding: 0 0 0 0;margin:0 0 0 0;border-right: 6px solid black;">`
		34	`<button type="button" class="btn btn-primary">Primary</button>`
		35	`</div>`
		36	`<div class="col-9">`
		37	`<button type="button" class="btn btn-outline-primary">Primary</button>`
		38	`<button type="button" class="btn btn-outline-secondary">Secondary</button>`
		39	`<button type="button" class="btn btn-outline-success">Success</button>`
		40	`<button type="button" class="btn btn-outline-danger">Danger</button>`
		41	`<button type="button" class="btn btn-outline-warning">Warning</button>`
		42	`<button type="button" class="btn btn-outline-info">Info</button>`
		43	`<button type="button" class="btn btn-outline-light">Light</button>`
		44	`<button type="button" class="btn btn-outline-dark">Dark</button>`
		45	`<span class="col-1" style="padding: 8px 0 12px 0;margin:0 5px 0 5px;border-right: 6px solid black;"></span>`
		46	`<button type="button" class="btn btn-primary">Primary</button>`
		47	`<button type="button" class="btn btn-secondary">Secondary</button>`
		48	`<button type="button" class="btn btn-success">Success</button>`
		49	`<button type="button" class="btn btn-danger">Danger</button>`
		50	`<button type="button" class="btn btn-warning">Warning</button>`
		51	`<button type="button" class="btn btn-info">Info</button>`
		52	`<button type="button" class="btn btn-light">Light</button>`
		53	`<button type="button" class="btn btn-dark">Dark</button>`
		54	`</div>`
		55	`</div>`
62	-	56	`</div>`
65	-	57	`<div class="p-2 mb-2 bg-secondary">`
62	-	58	`<div class="row">`
65	-	59	`<div class="col-1">`
		60	`.bg-secondary:`
		61	`</div>`
		62	`<div class="col-1" style="padding: 0 0 0 0;margin:0 0 0 0;border-right: 6px solid black;">`
		63	`<button type="button" class="btn btn-secondary">Secondary</button>`
		64	`</div>`
		65	`<div class="col-9">`
		66	`<button type="button" class="btn btn-outline-primary">Primary</button>`
		67	`<button type="button" class="btn btn-outline-secondary">Secondary</button>`
		68	`<button type="button" class="btn btn-outline-success">Success</button>`
		69	`<button type="button" class="btn btn-outline-danger">Danger</button>`
		70	`<button type="button" class="btn btn-outline-warning">Warning</button>`
		71	`<button type="button" class="btn btn-outline-info">Info</button>`
		72	`<button type="button" class="btn btn-outline-light">Light</button>`
		73	`<button type="button" class="btn btn-outline-dark">Dark</button>`
		74	`<span class="col-1" style="padding: 8px 0 12px 0;margin:0 5px 0 5px;border-right: 6px solid black;"></span>`
		75	`<button type="button" class="btn btn-primary">Primary</button>`
		76	`<button type="button" class="btn btn-secondary">Secondary</button>`
		77	`<button type="button" class="btn btn-success">Success</button>`
		78	`<button type="button" class="btn btn-danger">Danger</button>`
		79	`<button type="button" class="btn btn-warning">Warning</button>`
		80	`<button type="button" class="btn btn-info">Info</button>`
		81	`<button type="button" class="btn btn-light">Light</button>`
		82	`<button type="button" class="btn btn-dark">Dark</button>`
		83	`</div>`
62	-	84	`</div>`
65	-	85	`</div>`
		86	`<div class="p-2 mb-2 bg-info">`
62	-	87	`<div class="row">`
65	-	88	`<div class="col-1">`
		89	`.bg-info:`
		90	`</div>`
		91	`<div class="col-1" style="padding: 0 0 0 0;margin:0 0 0 0;border-right: 6px solid black;">`
		92	`<button type="button" class="btn btn-info">Info</button>`
		93	`</div>`
		94	`<div class="col-9">`
		95	`<button type="button" class="btn btn-outline-primary">Primary</button>`
		96	`<button type="button" class="btn btn-outline-secondary">Secondary</button>`
		97	`<button type="button" class="btn btn-outline-success">Success</button>`
		98	`<button type="button" class="btn btn-outline-danger">Danger</button>`
		99	`<button type="button" class="btn btn-outline-warning">Warning</button>`
		100	`<button type="button" class="btn btn-outline-info">Info</button>`
		101	`<button type="button" class="btn btn-outline-light">Light</button>`
		102	`<button type="button" class="btn btn-outline-dark">Dark</button>`
		103	`<span class="col-1" style="padding: 8px 0 12px 0;margin:0 5px 0 5px;border-right: 6px solid black;"></span>`
		104	`<button type="button" class="btn btn-primary">Primary</button>`
		105	`<button type="button" class="btn btn-secondary">Secondary</button>`
		106	`<button type="button" class="btn btn-success">Success</button>`
		107	`<button type="button" class="btn btn-danger">Danger</button>`
		108	`<button type="button" class="btn btn-warning">Warning</button>`
		109	`<button type="button" class="btn btn-info">Info</button>`
		110	`<button type="button" class="btn btn-light">Light</button>`
		111	`<button type="button" class="btn btn-dark">Dark</button>`
		112	`</div>`
62	-	113	`</div>`
65	-	114	`</div>`
		115	`<div class="p-2 mb-2 bg-success">`
62	-	116	`<div class="row">`
65	-	117	`<div class="col-1">`
		118	`.bg-success:`
		119	`</div>`
		120	`<div class="col-1" style="padding: 0 0 0 0;margin:0 0 0 0;border-right: 6px solid black;">`
		121	`<button type="button" class="btn btn-success">Success</button>`
		122	`</div>`
		123	`<div class="col-9">`
		124	`<button type="button" class="btn btn-outline-primary">Primary</button>`
		125	`<button type="button" class="btn btn-outline-secondary">Secondary</button>`
		126	`<button type="button" class="btn btn-outline-success">Success</button>`
		127	`<button type="button" class="btn btn-outline-danger">Danger</button>`
		128	`<button type="button" class="btn btn-outline-warning">Warning</button>`
		129	`<button type="button" class="btn btn-outline-info">Info</button>`
		130	`<button type="button" class="btn btn-outline-light">Light</button>`
		131	`<button type="button" class="btn btn-outline-dark">Dark</button>`
		132	`<span class="col-1" style="padding: 8px 0 12px 0;margin:0 5px 0 5px;border-right: 6px solid black;"></span>`
		133	`<button type="button" class="btn btn-primary">Primary</button>`
		134	`<button type="button" class="btn btn-secondary">Secondary</button>`
		135	`<button type="button" class="btn btn-success">Success</button>`
		136	`<button type="button" class="btn btn-danger">Danger</button>`
		137	`<button type="button" class="btn btn-warning">Warning</button>`
		138	`<button type="button" class="btn btn-info">Info</button>`
		139	`<button type="button" class="btn btn-light">Light</button>`
		140	`<button type="button" class="btn btn-dark">Dark</button>`
		141	`</div>`
62	-	142	`</div>`
65	-	143	`</div>`
		144	`<div class="p-2 mb-2 bg-danger">`
62	-	145	`<div class="row">`
65	-	146	`<div class="col-1">`
		147	`.bg-danger:`
		148	`</div>`
		149	`<div class="col-1" style="padding: 0 0 0 0;margin:0 0 0 0;border-right: 6px solid black;">`
		150	`<button type="button" class="btn btn-danger">Danger</button>`
		151	`</div>`
		152	`<div class="col-9">`
		153	`<button type="button" class="btn btn-outline-primary">Primary</button>`
		154	`<button type="button" class="btn btn-outline-secondary">Secondary</button>`
		155	`<button type="button" class="btn btn-outline-success">Success</button>`
		156	`<button type="button" class="btn btn-outline-danger">Danger</button>`
		157	`<button type="button" class="btn btn-outline-warning">Warning</button>`
		158	`<button type="button" class="btn btn-outline-info">Info</button>`
		159	`<button type="button" class="btn btn-outline-light">Light</button>`
		160	`<button type="button" class="btn btn-outline-dark">Dark</button>`
		161	`<span class="col-1" style="padding: 8px 0 12px 0;margin:0 5px 0 5px;border-right: 6px solid black;"></span>`
		162	`<button type="button" class="btn btn-primary">Primary</button>`
		163	`<button type="button" class="btn btn-secondary">Secondary</button>`
		164	`<button type="button" class="btn btn-success">Success</button>`
		165	`<button type="button" class="btn btn-danger">Danger</button>`
		166	`<button type="button" class="btn btn-warning">Warning</button>`
		167	`<button type="button" class="btn btn-info">Info</button>`
		168	`<button type="button" class="btn btn-light">Light</button>`
		169	`<button type="button" class="btn btn-dark">Dark</button>`
		170	`</div>`
62	-	171	`</div>`
65	-	172	`</div>`
		173	`<div class="p-2 mb-2 bg-warning">`
62	-	174	`<div class="row">`
65	-	175	`<div class="col-1">`
		176	`.bg-warning:`
		177	`</div>`
		178	`<div class="col-1" style="padding: 0 0 0 0;margin:0 0 0 0;border-right: 6px solid black;">`
		179	`<button type="button" class="btn btn-warning">Warning</button>`
		180	`</div>`
		181	`<div class="col-9">`
		182	`<button type="button" class="btn btn-outline-primary">Primary</button>`
		183	`<button type="button" class="btn btn-outline-secondary">Secondary</button>`
		184	`<button type="button" class="btn btn-outline-success">Success</button>`
		185	`<button type="button" class="btn btn-outline-danger">Danger</button>`
		186	`<button type="button" class="btn btn-outline-warning">Warning</button>`
		187	`<button type="button" class="btn btn-outline-info">Info</button>`
		188	`<button type="button" class="btn btn-outline-light">Light</button>`
		189	`<button type="button" class="btn btn-outline-dark">Dark</button>`
		190	`<span class="col-1" style="padding: 8px 0 12px 0;margin:0 5px 0 5px;border-right: 6px solid black;"></span>`
		191	`<button type="button" class="btn btn-primary">Primary</button>`
		192	`<button type="button" class="btn btn-secondary">Secondary</button>`
		193	`<button type="button" class="btn btn-success">Success</button>`
		194	`<button type="button" class="btn btn-danger">Danger</button>`
		195	`<button type="button" class="btn btn-warning">Warning</button>`
		196	`<button type="button" class="btn btn-info">Info</button>`
		197	`<button type="button" class="btn btn-light">Light</button>`
		198	`<button type="button" class="btn btn-dark">Dark</button>`
		199	`</div>`
62	-	200	`</div>`
65	-	201	`</div>`
		202	`<div class="p-2 mb-2 bg-info">`
62	-	203	`<div class="row">`
65	-	204	`<div class="col-1">`
		205	`.bg-info:`
		206	`</div>`
		207	`<div class="col-1" style="padding: 0 0 0 0;margin:0 0 0 0;border-right: 6px solid black;">`
		208	`<button type="button" class="btn btn-info">Info</button>`
		209	`</div>`
		210	`<div class="col-9">`
		211	`<button type="button" class="btn btn-outline-primary">Primary</button>`
		212	`<button type="button" class="btn btn-outline-secondary">Secondary</button>`
		213	`<button type="button" class="btn btn-outline-success">Success</button>`
		214	`<button type="button" class="btn btn-outline-danger">Danger</button>`
		215	`<button type="button" class="btn btn-outline-warning">Warning</button>`
		216	`<button type="button" class="btn btn-outline-info">Info</button>`
		217	`<button type="button" class="btn btn-outline-light">Light</button>`
		218	`<button type="button" class="btn btn-outline-dark">Dark</button>`
		219	`<span class="col-1" style="padding: 8px 0 12px 0;margin:0 5px 0 5px;border-right: 6px solid black;"></span>`
		220	`<button type="button" class="btn btn-primary">Primary</button>`
		221	`<button type="button" class="btn btn-secondary">Secondary</button>`
		222	`<button type="button" class="btn btn-success">Success</button>`
		223	`<button type="button" class="btn btn-danger">Danger</button>`
		224	`<button type="button" class="btn btn-warning">Warning</button>`
		225	`<button type="button" class="btn btn-info">Info</button>`
		226	`<button type="button" class="btn btn-light">Light</button>`
		227	`<button type="button" class="btn btn-dark">Dark</button>`
		228	`</div>`
62	-	229	`</div>`
		230	`</div>`
65	-	231	`<div class="p-2 mb-2 bg-light">`
		232	`<div class="row">`
		233	`<div class="col-1">`
		234	`.bg-light:`
		235	`</div>`
		236	`<div class="col-1" style="padding: 0 0 0 0;margin:0 0 0 0;border-right: 6px solid black;">`
		237	`<button type="button" class="btn btn-light">Light</button>`
		238	`</div>`
		239	`<div class="col-9">`
		240	`<button type="button" class="btn btn-outline-primary">Primary</button>`
		241	`<button type="button" class="btn btn-outline-secondary">Secondary</button>`
		242	`<button type="button" class="btn btn-outline-success">Success</button>`
		243	`<button type="button" class="btn btn-outline-danger">Danger</button>`
		244	`<button type="button" class="btn btn-outline-warning">Warning</button>`
		245	`<button type="button" class="btn btn-outline-info">Info</button>`
		246	`<button type="button" class="btn btn-outline-light">Light</button>`
		247	`<button type="button" class="btn btn-outline-dark">Dark</button>`
		248	`<span class="col-1" style="padding: 8px 0 12px 0;margin:0 5px 0 5px;border-right: 6px solid black;"></span>`
		249	`<button type="button" class="btn btn-primary">Primary</button>`
		250	`<button type="button" class="btn btn-secondary">Secondary</button>`
		251	`<button type="button" class="btn btn-success">Success</button>`
		252	`<button type="button" class="btn btn-danger">Danger</button>`
		253	`<button type="button" class="btn btn-warning">Warning</button>`
		254	`<button type="button" class="btn btn-info">Info</button>`
		255	`<button type="button" class="btn btn-light">Light</button>`
		256	`<button type="button" class="btn btn-dark">Dark</button>`
		257	`</div>`
		258	`</div>`
		259	`</div>`
		260	`<div class="p-2 mb-2 bg-white">`
		261	`<div class="row">`
		262	`<div class="col-1">`
		263	`.bg-white:`
		264	`</div>`
		265	`<div class="col-1" style="padding: 0 0 0 0;margin:0 0 0 0;border-right: 6px solid black;">`
		266	`<button type="button" class="btn btn-white">White</button>`
		267	`</div>`
		268	`<div class="col-9">`
		269	`<button type="button" class="btn btn-outline-primary">Primary</button>`
		270	`<button type="button" class="btn btn-outline-secondary">Secondary</button>`
		271	`<button type="button" class="btn btn-outline-success">Success</button>`
		272	`<button type="button" class="btn btn-outline-danger">Danger</button>`
		273	`<button type="button" class="btn btn-outline-warning">Warning</button>`
		274	`<button type="button" class="btn btn-outline-info">Info</button>`
		275	`<button type="button" class="btn btn-outline-light">Light</button>`
		276	`<button type="button" class="btn btn-outline-dark">Dark</button>`
		277	`<span class="col-1" style="padding: 8px 0 12px 0;margin:0 5px 0 5px;border-right: 6px solid black;"></span>`
		278	`<button type="button" class="btn btn-primary">Primary</button>`
		279	`<button type="button" class="btn btn-secondary">Secondary</button>`
		280	`<button type="button" class="btn btn-success">Success</button>`
		281	`<button type="button" class="btn btn-danger">Danger</button>`
		282	`<button type="button" class="btn btn-warning">Warning</button>`
		283	`<button type="button" class="btn btn-info">Info</button>`
		284	`<button type="button" class="btn btn-light">Light</button>`
		285	`<button type="button" class="btn btn-dark">Dark</button>`
		286	`</div>`
		287	`</div>`
		288	`</div>`
		289	`<div class="p-2 mb-2 bg-dark">`
		290	`<div class="row">`
		291	`<div class="col-1">`
		292	`.bg-dark:`
		293	`</div>`
		294	`<div class="col-1" style="padding: 0 0 0 0;margin:0 0 0 0;border-right: 6px solid black;">`
		295	`<button type="button" class="btn btn-dark">Dark</button>`
		296	`</div>`
		297	`<div class="col-9">`
		298	`<button type="button" class="btn btn-outline-primary">Primary</button>`
		299	`<button type="button" class="btn btn-outline-secondary">Secondary</button>`
		300	`<button type="button" class="btn btn-outline-success">Success</button>`
		301	`<button type="button" class="btn btn-outline-danger">Danger</button>`
		302	`<button type="button" class="btn btn-outline-warning">Warning</button>`
		303	`<button type="button" class="btn btn-outline-info">Info</button>`
		304	`<button type="button" class="btn btn-outline-light">Light</button>`
		305	`<button type="button" class="btn btn-outline-dark">Dark</button>`
		306	`<span class="col-1" style="padding: 8px 0 12px 0;margin:0 5px 0 5px;border-right: 6px solid black;"></span>`
		307	`<button type="button" class="btn btn-primary">Primary</button>`
		308	`<button type="button" class="btn btn-secondary">Secondary</button>`
		309	`<button type="button" class="btn btn-success">Success</button>`
		310	`<button type="button" class="btn btn-danger">Danger</button>`
		311	`<button type="button" class="btn btn-warning">Warning</button>`
		312	`<button type="button" class="btn btn-info">Info</button>`
		313	`<button type="button" class="btn btn-light">Light</button>`
		314	`<button type="button" class="btn btn-dark">Dark</button>`
		315	`</div>`
		316	`</div>`
		317	`</div>`
		318	`<div class="p-2 mb-2 bg-transparent">`
		319	`<div class="row">`
		320	`<div class="col-1">`
		321	`.bg-transparent:`
		322	`</div>`
		323	`<div class="col-1" style="padding: 0 0 0 0;margin:0 0 0 0;border-right: 6px solid black;">`
		324	`<button type="button" class="btn btn-transparent">Transparent</button>`
		325	`</div>`
		326	`<div class="col-9">`
		327	`<button type="button" class="btn btn-outline-primary">Primary</button>`
		328	`<button type="button" class="btn btn-outline-secondary">Secondary</button>`
		329	`<button type="button" class="btn btn-outline-success">Success</button>`
		330	`<button type="button" class="btn btn-outline-danger">Danger</button>`
		331	`<button type="button" class="btn btn-outline-warning">Warning</button>`
		332	`<button type="button" class="btn btn-outline-info">Info</button>`
		333	`<button type="button" class="btn btn-outline-light">Light</button>`
		334	`<button type="button" class="btn btn-outline-dark">Dark</button>`
		335	`<span class="col-1" style="padding: 8px 0 12px 0;margin:0 5px 0 5px;border-right: 6px solid black;"></span>`
		336	`<button type="button" class="btn btn-primary">Primary</button>`
		337	`<button type="button" class="btn btn-secondary">Secondary</button>`
		338	`<button type="button" class="btn btn-success">Success</button>`
		339	`<button type="button" class="btn btn-danger">Danger</button>`
		340	`<button type="button" class="btn btn-warning">Warning</button>`
		341	`<button type="button" class="btn btn-info">Info</button>`
		342	`<button type="button" class="btn btn-light">Light</button>`
		343	`<button type="button" class="btn btn-dark">Dark</button>`
		344	`</div>`
		345	`</div>`
		346	`</div>`
		347	`<div class="p-2 mb-2">`
		348	`<div class="row">`
		349	`<div class="col-1">`
		350	`No Background:`
		351	`</div>`
		352	`<div class="col-1" style="padding: 0 0 0 0;margin:0 0 0 0;border-right: 6px solid black;">`
		353	`<button type="button" class="btn">No Outline</button>`
		354	`</div>`
		355	`<div class="col-9">`
		356	`<button type="button" class="btn btn-outline-primary">Primary</button>`
		357	`<button type="button" class="btn btn-outline-secondary">Secondary</button>`
		358	`<button type="button" class="btn btn-outline-success">Success</button>`
		359	`<button type="button" class="btn btn-outline-danger">Danger</button>`
		360	`<button type="button" class="btn btn-outline-warning">Warning</button>`
		361	`<button type="button" class="btn btn-outline-info">Info</button>`
		362	`<button type="button" class="btn btn-outline-light">Light</button>`
		363	`<button type="button" class="btn btn-outline-dark">Dark</button>`
		364	`<span class="col-1" style="padding: 8px 0 12px 0;margin:0 5px 0 5px;border-right: 6px solid black;"></span>`
		365	`<button type="button" class="btn btn-primary">Primary</button>`
		366	`<button type="button" class="btn btn-secondary">Secondary</button>`
		367	`<button type="button" class="btn btn-success">Success</button>`
		368	`<button type="button" class="btn btn-danger">Danger</button>`
		369	`<button type="button" class="btn btn-warning">Warning</button>`
		370	`<button type="button" class="btn btn-info">Info</button>`
		371	`<button type="button" class="btn btn-light">Light</button>`
		372	`<button type="button" class="btn btn-dark">Dark</button>`
		373	`</div>`
		374	`</div>`
		375	`</div>`
62	-	376	`</div>`
		377	`</div>`
65	-	378	`</div>`
62	-	379
65	-	380	`<!-- Links -->`
		381	`<div class="container-fluid" data-category="links">`
		382	`<h1>Links</h1>`
62	-	383
65	-	384	`<div class="mt-3 mb-5">`
		385	`<h3>Default Link</h3>`
		386	`<a href="javascript:void(0);">Example link</a>`
		387	`</div>`
62	-	388
65	-	389	`<div class="mt-3 mb-5">`
		390	`<h3>Link inside an alert</h3>`
		391	`<div class="alert alert-primary" role="alert">`
		392	`This is a primary alert with`
		393	`<a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.`
		394	`</div>`
		395	`</div>`
		396	`</div>`
62	-	397
65	-	398	`<!-- Grid -->`
		399	`<div class="container-fluid" data-category="grid">`
		400	`<h1>Grid</h1>`
		401
		402	`<div>`
		403	`<div class="bs-example-row">`
		404	`<!-- Bootstrap Grid -->`
		405	`<div class="row">`
		406	`<div class="col-sm-1">.col-sm-1</div>`
		407	`<div class="col-sm-1">.col-sm-1</div>`
		408	`<div class="col-sm-1">.col-sm-1</div>`
		409	`<div class="col-sm-1">.col-sm-1</div>`
		410	`<div class="col-sm-1">.col-sm-1</div>`
		411	`<div class="col-sm-1">.col-sm-1</div>`
		412	`<div class="col-sm-1">.col-sm-1</div>`
		413	`<div class="col-sm-1">.col-sm-1</div>`
		414	`<div class="col-sm-1">.col-sm-1</div>`
		415	`<div class="col-sm-1">.col-sm-1</div>`
		416	`<div class="col-sm-1">.col-sm-1</div>`
		417	`<div class="col-sm-1">.col-sm-1</div>`
		418	`</div>`
		419	`<div class="row">`
		420	`<div class="col-sm-2">.col-sm-2</div>`
		421	`<div class="col-sm-3">.col-sm-3</div>`
		422	`<div class="col-sm-7">.col-sm-7</div>`
		423	`</div>`
		424	`<div class="row">`
		425	`<div class="col-sm-4">.col-sm-4</div>`
		426	`<div class="col-sm-4">.col-sm-4</div>`
		427	`<div class="col-sm-4">.col-sm-4</div>`
		428	`</div>`
		429	`<div class="row">`
		430	`<div class="col-sm-5">.col-sm-5</div>`
		431	`<div class="col-sm-7">.col-sm-7</div>`
		432	`</div>`
		433	`<div class="row">`
		434	`<div class="col-sm-6">.col-sm-6</div>`
		435	`<div class="col-sm-6">.col-sm-6</div>`
		436	`</div>`
		437	`<div class="row">`
		438	`<div class="col-sm-12">.col-sm-12</div>`
		439	`</div>`
		440	`</div>`
		441	`</div>`
		442	`</div>`
		443
		444	`<!-- Fonts -->`
		445	`<div class="container-fluid" data-category="fonts">`
		446	`<h1>Fonts</h1>`
		447
		448	`<div>`
		449	`<h1>h1 </h1>`
		450	`<h2>h2 </h2>`
		451	`<h3>h3 </h3>`
		452	`<h4>h4 </h4>`
		453	`<h5>h5 </h5>`
		454	`<h6>h6 </h6>`
		455
		456	`<br>`
		457
		458	`<h1>Heading 1`
62	-	459	`<small>Sub-heading</small>`
		460	`</h1>`
65	-	461	`<h2>Heading 2`
62	-	462	`<small>Sub-heading</small>`
		463	`</h2>`
65	-	464	`<h3>Heading 3`
62	-	465	`<small>Sub-heading</small>`
		466	`</h3>`
65	-	467	`<h4>Heading 4`
62	-	468	`<small>Sub-heading</small>`
		469	`</h4>`
65	-	470	`<h5>Heading 5`
62	-	471	`<small>Sub-heading</small>`
		472	`</h5>`
65	-	473	`<h6>Heading 6`
62	-	474	`<small>Sub-heading</small>`
		475	`</h6>`
		476
65	-	477	`<br>`
62	-	478
65	-	479	`<h1 class="display-1">Display 1</h1>`
		480	`<h1 class="display-2">Display 2</h1>`
		481	`<h1 class="display-3">Display 3</h1>`
		482	`<h1 class="display-4">Display 4</h1>`
		483	`<h1 class="display-5">Display 5</h1>`
		484	`<h1 class="display-6">Display 6</h1>`
		485	`<h1 class="display-7">Display 7</h1>`
62	-	486
65	-	487	`<br>`
62	-	488
65	-	489	`<p class="lead">`
		490	`This is the article lead — it stands out at the start of the article.`
		491	`</p>`
62	-	492
65	-	493	`<p>`
		494	`This is normal text at the normal size etc...`
		495	`</p>`
62	-	496
65	-	497	`<p>Sample`
		498	`<mark>marked text</mark>.</p>`
62	-	499
65	-	500	`<br>`
		501	`<blockquote class="blockquote">`
		502	`<p>The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now.</p>`
		503	`</blockquote>`
62	-	504	`</div>`
65	-	505	`</div>`
62	-	506
		507
		508
65	-	509	`<!-- Buttons -->`
		510	`<div class="container-fluid" data-category="buttons">`
		511	`<h1>Buttons</h1>`
62	-	512
65	-	513	`<div class="mt-3 mb-5">`
		514	`<h3>Default buttons</h3>`
		515	`<button type="button" class="btn btn-primary">Primary</button>`
		516	`<button type="button" class="btn btn-secondary">Secondary</button>`
		517	`<button type="button" class="btn btn-info">Info</button>`
		518	`<button type="button" class="btn btn-success">Success</button>`
		519	`<button type="button" class="btn btn-warning">Warning</button>`
		520	`<button type="button" class="btn btn-danger">Danger</button>`
		521	`<button type="button" class="btn btn-light">Light</button>`
		522	`<button type="button" class="btn btn-dark">Dark</button>`
		523	`<button type="button" class="btn btn-link">Link</button>`
		524	`</div>`
62	-	525
65	-	526	`<div class="mt-3 mb-5">`
		527	`<h3>Buttons with outline</h3>`
		528	`<button type="button" class="btn btn-outline-primary">Primary</button>`
		529	`<button type="button" class="btn btn-outline-secondary">Secondary</button>`
		530	`<button type="button" class="btn btn-outline-info">Info</button>`
		531	`<button type="button" class="btn btn-outline-success">Success</button>`
		532	`<button type="button" class="btn btn-outline-warning">Warning</button>`
		533	`<button type="button" class="btn btn-outline-danger">Danger</button>`
		534	`<button type="button" class="btn btn-outline-light">Light</button>`
		535	`<button type="button" class="btn btn-outline-dark">Dark</button>`
		536	`</div>`
62	-	537
		538
		539
65	-	540	`<div class="mt-3 mb-5">`
		541	`<h3>Buttons sizes</h3>`
		542	`<button type="button" class="btn btn-success btn-sm">Small</button>`
		543	`<button type="button" class="btn btn-success">Default</button>`
		544	`<button type="button" class="btn btn-success btn-lg">Large</button>`
62	-	545
65	-	546	`<br>`
62	-	547
65	-	548	`<button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>`
		549	`</div>`
62	-	550
		551
		552
65	-	553	`<div class="mt-3 mb-5">`
		554	`<h3>Disabled button</h3>`
		555	`<p>`
		556	`<a href="javascript:void(0);" class="btn btn-primary btn-lg disabled" role="button">The 'a' Element</a>`
		557	`</p>`
62	-	558
65	-	559	`<p>`
		560	`<button type="button" class="btn btn-lg btn-primary" disabled="disabled">The 'button' Element</button>`
		561	`</p>`
62	-	562
65	-	563	`<p>`
		564	`<input type="button" class="btn btn-lg btn-primary" disabled="disabled" value="The 'input' Element">`
		565	`</p>`
		566	`</div>`
62	-	567
65	-	568	`<div class="mt-3 mb-5">`
		569	`<h3>Checkbox buttons</h3>`
		570	`<div class="btn-group" data-toggle="buttons">`
		571	`<label class="btn btn-primary active">`
		572	`<input type="checkbox" checked> Boots`
		573	`</label>`
		574	`<label class="btn btn-primary">`
		575	`<input type="checkbox"> Shoes`
		576	`</label>`
		577	`<label class="btn btn-primary">`
		578	`<input type="checkbox"> Feet`
		579	`</label>`
62	-	580	`</div>`
65	-	581	`</div>`
62	-	582
		583
		584
65	-	585	`<div class="mt-3 mb-5">`
		586	`<h3>Radio buttons</h3>`
		587	`<div class="btn-group" data-toggle="buttons">`
		588	`<label class="btn btn-primary">`
		589	`<input type="radio" name="options" id="boots" checked> Boots`
		590	`</label>`
		591	`<label class="btn btn-primary">`
		592	`<input type="radio" name="options" id="shoes"> Shoes`
		593	`</label>`
		594	`<label class="btn btn-primary">`
		595	`<input type="radio" name="options" id="feet"> Feet`
		596	`</label>`
62	-	597	`</div>`
		598	`</div>`
65	-	599	`</div>`
62	-	600
65	-	601	`<!-- Forms -->`
		602	`<div class="container-fluid" data-category="forms">`
		603	`<h1>Forms</h1>`
62	-	604
		605
		606
65	-	607	`<div class="mt-3 mb-5">`
		608	`<h3>Default form group</h3>`
		609	`<form action="javascript:void(0);">`
		610	`<fieldset class="form-group">`
		611	`<label for="first_name1">First Name</label>`
		612	`<input type="text" class="form-control" id="first_name1" name="first_name">`
		613	`</fieldset>`
		614	`<fieldset class="form-group">`
		615	`<label for="last_name1">Last Name</label>`
		616	`<input type="text" class="form-control" id="last_name1" name="last_name">`
		617	`</fieldset>`
		618	`<button type="submit" class="btn btn-default">Submit</button>`
		619	`</form>`
		620	`</div>`
62	-	621
65	-	622	`<h3>Inline form</h3>`
62	-	623
65	-	624	`<div class="mt-3 mb-5">`
		625	`<form action="javascript:void(0);" class="form-inline">`
		626	`<label class="mr-sm-2 mb-0" for="first_name2">First Name</label>`
		627	`<input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name2" name="first_name">`
		628	`<label class="mr-sm-2 mb-0" for="last_name2">Last Name</label>`
		629	`<input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name2" name="last_name">`
		630	`<button type="submit" class="btn btn-default mt-2 mt-sm-0">Submit</button>`
		631	`</form>`
		632	`</div>`
62	-	633
65	-	634	`<h3>Aligned form</h3>`
62	-	635
65	-	636	`<div class="mt-3 mb-5">`
		637	`<div class="container">`
		638	`<form action="javascript:void(0);">`
		639	`<div class="form-group row">`
		640	`<label for="first_name3" class="col-xs-3 col-form-label mr-2">First Name</label>`
		641	`<div class="col-xs-9">`
		642	`<input type="text" class="form-control" id="first_name3" name="first_name">`
62	-	643	`</div>`
65	-	644	`</div>`
		645	`<div class="form-group row">`
		646	`<label for="last_name3" class="col-xs-3 col-form-label mr-2">Last Name</label>`
		647	`<div class="col-xs-9">`
		648	`<input type="text" class="form-control" id="last_name3" name="last_name">`
62	-	649	`</div>`
65	-	650	`</div>`
		651	`<div class="form-group row">`
		652	`<div class="offset-xs-3 col-xs-9">`
		653	`<button type="submit" class="btn btn-default">Submit</button>`
62	-	654	`</div>`
65	-	655	`</div>`
		656	`</form>`
62	-	657	`</div>`
65	-	658	`</div>`
62	-	659
65	-	660	`<div>`
		661	`<div class="container">`
		662	`<form action="javascript:void(0);">`
		663	`<fieldset class="form-group">`
		664	`<div class="row">`
		665	`<label class="col-form-legend col-3">Fruit</label>`
		666	`<div class="col-9">`
		667	`<div class="form-check">`
		668	`<label class="form-check-label">`
		669	`<input class="form-check-input" type="radio" name="legendRadio" id="legendRadio1" value="1"> Apple`
		670	`</label>`
62	-	671	`</div>`
65	-	672	`<div class="form-check">`
		673	`<label class="form-check-label">`
		674	`<input class="form-check-input" type="radio" name="legendRadio" id="legendRadio2" value="2" checked> Orange`
		675	`</label>`
		676	`</div>`
		677	`<div class="form-check">`
		678	`<label class="form-check-label">`
		679	`<input class="form-check-input" type="radio" name="legendRadio" id="legendRadio3" value="3"> Watermelon`
		680	`</label>`
		681	`</div>`
62	-	682	`</div>`
65	-	683	`</div>`
		684	`</fieldset>`
62	-	685
65	-	686	`<div class="form-group row">`
		687	`<label for="first_name4" class="col-3 col-form-label">First Name</label>`
		688	`<div class="col-9">`
		689	`<input type="text" class="form-control" id="first_name4" name="first_name">`
62	-	690	`</div>`
65	-	691	`</div>`
		692	`<div class="form-group row">`
		693	`<label for="last_name4" class="col-3 col-form-label">Last Name</label>`
		694	`<div class="col-9">`
		695	`<input type="text" class="form-control" id="last_name4" name="last_name">`
62	-	696	`</div>`
65	-	697	`</div>`
62	-	698
65	-	699	`<div class="form-group row">`
		700	`<div class="offset-3 col-9">`
		701	`<button type="submit" class="btn btn-default">Submit</button>`
62	-	702	`</div>`
65	-	703	`</div>`
62	-	704
65	-	705	`</form>`
62	-	706	`</div>`
65	-	707	`</div>`
62	-	708
65	-	709	`<h3>Form with help text </h3>`
62	-	710
65	-	711	`<div class="mt-3 mb-5">`
		712	`<label for="accountId">Account Id</label>`
		713	`<input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId">`
		714	`<span id="helpAccountId" class="form-text text-muted">Your account ID is located at the top of your invoice.</span>`
		715	`</div>`
62	-	716
65	-	717	`<h3>Checkbox and radio </h3>`
62	-	718
65	-	719	`<div class="mt-3 mb-5">`
		720	`<div class="form-check form-check-inline">`
		721	`<label class="form-check-label">`
		722	`<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1"> 1`
		723	`</label>`
		724	`</div>`
62	-	725
65	-	726	`<div class="form-check form-check-inline">`
		727	`<label class="form-check-label">`
		728	`<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2"> 2`
		729	`</label>`
		730	`</div>`
62	-	731
65	-	732	`<div class="form-check form-check-inline">`
		733	`<label class="form-check-label">`
		734	`<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3"> 3`
		735	`</label>`
		736	`</div>`
62	-	737
65	-	738	`<div class="form-check form-check-inline">`
		739	`<label class="form-check-label">`
		740	`<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1"> 1`
		741	`</label>`
		742	`</div>`
62	-	743
65	-	744	`<div class="form-check form-check-inline">`
		745	`<label class="form-check-label">`
		746	`<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2"> 2`
		747	`</label>`
		748	`</div>`
62	-	749
65	-	750	`<div class="form-check form-check-inline">`
		751	`<label class="form-check-label">`
		752	`<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3"> 3`
		753	`</label>`
62	-	754	`</div>`
		755	`</div>`
65	-	756	`</div>`
62	-	757
65	-	758	`<!-- Dropdown -->`
		759	`<div class="container-fluid" data-category="dropdown">`
		760	`<h1>Dropdown</h1>`
62	-	761
65	-	762	`<div class="row">`
		763	`<div style="position: relative" class="mt-3 mb-5 col-4">`
		764	`<h3>Default dropdown</h3>`
		765	`<div class="dropdown">`
		766	`<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">`
		767	`Dropdown button`
		768	`</button>`
		769	`<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">`
		770	`<a class="dropdown-item" href="javascript:void(0);">Action</a>`
		771	`<a class="dropdown-item" href="javascript:void(0);">Another action</a>`
		772	`<a class="dropdown-item" href="javascript:void(0);">Something else here</a>`
		773	`</div>`
62	-	774
		775	`</div>`
65	-	776	`</div>`
		777	`<div class="mt-3 mb-5 col-4">`
		778	`<h3>Dropdown with menu</h3>`
		779	`<div class="dropdown">`
		780	`<button class="btn btn-primary dropdown-toggle" type="button" id="about-us1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">`
		781	`About Us`
		782	`</button>`
		783	`<div class="dropdown-menu" aria-labelledby="about-us1">`
		784	`<h6 class="dropdown-header">Company Information</h6>`
		785	`<a class="dropdown-item" href="javascript:void(0);">Our Story</a>`
		786	`<a class="dropdown-item" href="javascript:void(0);">Our Team</a>`
		787	`<h6 class="dropdown-header">Contact Us</h6>`
		788	`<a class="dropdown-item" href="javascript:void(0);">Call Center</a>`
		789	`<a class="dropdown-item" href="javascript:void(0);">Store Locations</a>`
62	-	790	`</div>`
		791	`</div>`
65	-	792	`</div>`
		793	`<div class="mt-3 mb-5 col-4">`
		794	`<h3>Dropdown with divider</h3>`
		795	`<div class="dropdown">`
		796	`<button class="btn btn-primary dropdown-toggle" type="button" id="about-us2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">`
		797	`About Us`
		798	`</button>`
		799	`<div class="dropdown-menu" aria-labelledby="about-us2">`
		800	`<a class="dropdown-item" href="javascript:void(0);">Our Story</a>`
		801	`<a class="dropdown-item" href="javascript:void(0);">Our Team</a>`
		802	`<div class="dropdown-divider"></div>`
		803	`<a class="dropdown-item" href="javascript:void(0);">Contact Us</a>`
62	-	804	`</div>`
		805	`</div>`
		806	`</div>`
		807	`</div>`
65	-	808	`</div>`
62	-	809
65	-	810	`<!-- Navs -->`
		811	`<div class="container-fluid" data-category="navs">`
		812	`<h1>Navs</h1>`
62	-	813
65	-	814	`<h3>Default nav</h3>`
62	-	815
65	-	816	`<div class="mt-3 mb-5">`
		817	`<ul class="nav">`
62	-	818
65	-	819	`<li class="nav-item">`
		820	`<a class="nav-link active" href="javascript:void(0);">HTML</a>`
		821	`</li>`
62	-	822
65	-	823	`<li class="nav-item">`
		824	`<a class="nav-link" href="javascript:void(0);">CSS</a>`
		825	`</li>`
62	-	826
65	-	827	`<li class="nav-item">`
		828	`<a class="nav-link" href="javascript:void(0);">JavaScript</a>`
		829	`</li>`
62	-	830
65	-	831	`<li class="nav-item">`
		832	`<a class="nav-link" href="javascript:void(0);">Preview</a>`
		833	`</li>`
62	-	834
65	-	835	`</ul>`
		836	`</div>`
62	-	837
65	-	838	`<h3>Horizontal menu</h3>`
62	-	839
65	-	840	`<div class="mt-3 mb-5">`
		841	`<nav class="nav flex-column">`
		842	`<a class="nav-link active" href="javascript:void(0);">HTML</a>`
		843	`<a class="nav-link" href="javascript:void(0);">CSS</a>`
		844	`<a class="nav-link" href="javascript:void(0);">JavaScript</a>`
		845	`<a class="nav-link" href="javascript:void(0);">Preview</a>`
		846	`</nav>`
		847	`</div>`
62	-	848
65	-	849	`<h3>Nav with tabs</h3>`
62	-	850
65	-	851	`<div class="mt-3 mb-5">`
		852	`<ul class="nav nav-tabs">`
62	-	853
65	-	854	`<li class="nav-item">`
		855	`<a class="nav-link active" href="javascript:void(0);">HTML</a>`
		856	`</li>`
62	-	857
65	-	858	`<li class="nav-item">`
		859	`<a class="nav-link" href="javascript:void(0);">CSS</a>`
		860	`</li>`
62	-	861
65	-	862	`<li class="nav-item">`
		863	`<a class="nav-link" href="javascript:void(0);">JavaScript</a>`
		864	`</li>`
62	-	865
65	-	866	`<li class="nav-item">`
		867	`<a class="nav-link" href="javascript:void(0);">Preview</a>`
		868	`</li>`
62	-	869
65	-	870	`</ul>`
		871	`</div>`
62	-	872
65	-	873	`<h3>Nav with pills</h3>`
62	-	874
65	-	875	`<div class="mt-3 mb-5">`
		876	`<ul class="nav nav-pills">`
62	-	877
65	-	878	`<li class="nav-item">`
		879	`<a class="nav-link active" href="javascript:void(0);">HTML</a>`
		880	`</li>`
62	-	881
65	-	882	`<li class="nav-item">`
		883	`<a class="nav-link" href="javascript:void(0);">CSS</a>`
		884	`</li>`
62	-	885
65	-	886	`<li class="nav-item">`
		887	`<a class="nav-link" href="javascript:void(0);">JavaScript</a>`
		888	`</li>`
62	-	889
65	-	890	`<li class="nav-item">`
		891	`<a class="nav-link" href="javascript:void(0);">Preview</a>`
		892	`</li>`
62	-	893
65	-	894	`</ul>`
		895	`</div>`
62	-	896
65	-	897	`<h3>Horizontal nav with pills</h3>`
62	-	898
65	-	899	`<div class="mt-3 mb-5">`
		900	`<ul class="nav nav-pills flex-column">`
62	-	901
65	-	902	`<li class="nav-item">`
		903	`<a class="nav-link active" href="javascript:void(0);">HTML</a>`
		904	`</li>`
62	-	905
65	-	906	`<li class="nav-item">`
		907	`<a class="nav-link" href="javascript:void(0);">CSS</a>`
		908	`</li>`
62	-	909
65	-	910	`<li class="nav-item">`
		911	`<a class="nav-link" href="javascript:void(0);">JavaScript</a>`
		912	`</li>`
62	-	913
65	-	914	`<li class="nav-item">`
		915	`<a class="nav-link" href="javascript:void(0);">Preview</a>`
		916	`</li>`
62	-	917
65	-	918	`</ul>`
		919	`</div>`
62	-	920
65	-	921	`<h3>Nav with tabs and dropdown</h3>`
62	-	922
65	-	923	`<div class="mt-3 mb-5">`
		924	`<ul id="clothing-nav" class="nav nav-tabs" role="tablist">`
62	-	925
65	-	926	`<li class="nav-item">`
		927	`<a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>`
		928	`</li>`
62	-	929
65	-	930	`<li class="nav-item">`
		931	`<a class="nav-link" href="#hats" role="tab" id="hats-tab" data-toggle="tab" aria-controls="hats">Hats</a>`
		932	`</li>`
62	-	933
65	-	934	`<!-- Dropdown -->`
		935	`<li class="nav-item dropdown">`
		936	`<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" role="button" aria-haspopup="true" aria-expanded="false">`
62	-	937	`Footwear`
		938	`</a>`
65	-	939	`<div class="dropdown-menu">`
		940	`<a class="dropdown-item" href="#dropdown-shoes" role="tab" id="dropdown-shoes-tab" data-toggle="tab" aria-controls="dropdown-shoes">Shoes</a>`
		941	`<a class="dropdown-item" href="#dropdown-boots" role="tab" id="dropdown-boots-tab" data-toggle="tab" aria-controls="dropdown-boots">Boots</a>`
		942	`</div>`
		943	`</li>`
62	-	944
65	-	945	`</ul>`
62	-	946
65	-	947	`<!-- Content Panel -->`
		948	`<div id="clothing-nav-content" class="tab-content">`
62	-	949
65	-	950	`<div role="tabpanel" class="tab-pane fade show active" id="home" aria-labelledby="home-tab">`
		951	`<p>Welcome home! Click on the tabs to see the content change.</p>`
		952	`</div>`
62	-	953
65	-	954	`<div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab">`
		955	`<p>A hat is a head covering. It can be worn for protection against the elements, ceremonial reasons, religious reasons, safety, or as a fashion accessory.</p>`
		956	`</div>`
62	-	957
65	-	958	`<div role="tabpanel" class="tab-pane fade" id="dropdown-shoes" aria-labelledby="dropdown-shoes-tab">`
		959	`<p>A shoe is an item of footwear intended to protect and comfort the human foot while doing various activities. Shoes are also used as an item of decoration.</p>`
		960	`</div>`
62	-	961
65	-	962	`<div role="tabpanel" class="tab-pane fade" id="dropdown-boots" aria-labelledby="dropdown-boots-tab">`
		963	`<p>A boot is a type of footwear and a specific type of shoe. Most boots mainly cover the foot and the ankle, while some also cover some part of the lower calf. Some boots extend up the leg, sometimes as far as the knee or even the hip.`
		964	`</p>`
		965	`</div>`
62	-	966
		967	`</div>`
		968	`</div>`
65	-	969	`</div>`
62	-	970
65	-	971	`<!-- Navbar -->`
		972	`<div class="container-fluid" data-category="navbar">`
		973	`<h1>Navbar</h1>`
62	-	974
65	-	975	`<div class="mt-3 mb-5">`
		976	`<nav class="navbar navbar-expand-sm bg-faded">`
		977	`<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content1" aria-expanded="false" aria-label="Toggle navigation">`
		978	`<span class="navbar-toggler-icon"></span>`
		979	`</button>`
62	-	980
65	-	981	`<!-- Brand -->`
		982	`<a class="navbar-brand" href="javascript:void(0);">Logo</a>`
62	-	983
65	-	984	`<!-- Links -->`
		985	`<div class="collapse navbar-collapse" id="nav-content1">`
		986	`<ul class="navbar-nav">`
		987	`<li class="nav-item">`
		988	`<a class="nav-link" href="javascript:void(0);">Link 1</a>`
		989	`</li>`
		990	`<li class="nav-item active">`
		991	`<a class="nav-link" href="javascript:void(0);">Link 2`
62	-	992	`<span class="sr-only">(current)</span>`
		993	`</a>`
65	-	994	`</li>`
		995	`<li class="nav-item">`
		996	`<a class="nav-link" href="javascript:void(0);">Link 3</a>`
		997	`</li>`
		998	`</ul>`
		999	`</div>`
		1000	`</nav>`
62	-	1001
65	-	1002	`</div>`
		1003	`<div class="mt-3 mb-5">`
		1004	`<nav class="navbar navbar-expand-sm bg-dark navbar-light bg-primary">`
		1005	`<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content2" aria-expanded="false" aria-label="Toggle navigation">`
		1006	`<span class="navbar-toggler-icon"></span>`
		1007	`</button>`
62	-	1008
65	-	1009	`<!-- Brand -->`
		1010	`<a class="navbar-brand" href="javascript:void(0);">Logo</a>`
62	-	1011
65	-	1012	`<!-- Links -->`
		1013	`<div class="collapse navbar-collapse" id="nav-content2">`
		1014	`<ul class="navbar-nav">`
		1015	`<li class="nav-item">`
		1016	`<a class="nav-link" href="javascript:void(0);">Link 1</a>`
		1017	`</li>`
		1018	`<li class="nav-item">`
		1019	`<a class="nav-link" href="javascript:void(0);">Link 2</a>`
		1020	`</li>`
		1021	`<li class="nav-item">`
		1022	`<a class="nav-link" href="javascript:void(0);">Link 3</a>`
		1023	`</li>`
		1024	`</ul>`
		1025	`</div>`
		1026	`</nav>`
62	-	1027
		1028	`</div>`
		1029
65	-	1030	`<div class="mt-3 mb-5">`
		1031	`<nav class="navbar navbar-expand-sm bg-dark navbar-dark bg-primary">`
		1032	`<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content3" aria-expanded="false" aria-label="Toggle navigation">`
		1033	`<span class="navbar-toggler-icon"></span>`
		1034	`</button>`
62	-	1035
65	-	1036	`<!-- Brand -->`
		1037	`<a class="navbar-brand" href="javascript:void(0);">Logo</a>`
62	-	1038
65	-	1039	`<!-- Links -->`
		1040	`<div class="collapse navbar-collapse" id="nav-content3">`
		1041	`<ul class="navbar-nav">`
		1042	`<li class="nav-item">`
		1043	`<a class="nav-link" href="javascript:void(0);">Link 1</a>`
		1044	`</li>`
		1045	`<li class="nav-item">`
		1046	`<a class="nav-link" href="javascript:void(0);">Link 2</a>`
		1047	`</li>`
		1048	`<li class="nav-item">`
		1049	`<a class="nav-link" href="javascript:void(0);">Link 3</a>`
		1050	`</li>`
		1051	`</ul>`
62	-	1052	`</div>`
65	-	1053	`</nav>`
		1054	`</div>`
		1055	`</div>`
62	-	1056
		1057
65	-	1058	`<!-- Tables -->`
		1059	`<div class="container-fluid" data-category="tables">`
		1060	`<h1>Tables</h1>`
62	-	1061
65	-	1062	`<div class="mt-3 mb-5">`
		1063	`<h3>Default table</h3>`
		1064	`<div>`
		1065	`<table class="table">`
62	-	1066	`<thead>`
		1067	`<tr>`
		1068	`<th>Header 1</th>`
		1069	`<th>Header 2</th>`
		1070	`<th>Header 3</th>`
		1071	`</tr>`
		1072	`</thead>`
		1073	`<tbody>`
		1074	`<tr>`
		1075	`<td>Cell</td>`
		1076	`<td>Cell</td>`
		1077	`<td>Cell</td>`
		1078	`</tr>`
		1079	`<tr>`
		1080	`<td>Cell</td>`
		1081	`<td>Cell</td>`
		1082	`<td>Cell</td>`
		1083	`</tr>`
		1084	`<tr>`
		1085	`<td>Cell</td>`
		1086	`<td>Cell</td>`
		1087	`<td>Cell</td>`
		1088	`</tr>`
		1089	`</tbody>`
		1090	`<tfoot>`
		1091	`<tr>`
		1092	`<th>Footer 1</th>`
		1093	`<th>Footer 2</th>`
		1094	`<th>Footer 3</th>`
		1095	`</tr>`
		1096	`</tfoot>`
		1097	`</table>`
		1098	`</div>`
65	-	1099	`</div>`
62	-	1100
		1101
		1102
65	-	1103	`<div class="mt-3 mb-5">`
		1104	`<h3>Table inverse</h3>`
		1105	`<table class="table table-inverse">`
		1106	`<thead>`
		1107	`<tr>`
		1108	`<th>Header 1</th>`
		1109	`<th>Header 2</th>`
		1110	`<th>Header 3</th>`
		1111	`</tr>`
		1112	`</thead>`
		1113	`<tbody>`
		1114	`<tr>`
		1115	`<td>Cell</td>`
		1116	`<td>Cell</td>`
		1117	`<td>Cell</td>`
		1118	`</tr>`
		1119	`<tr>`
		1120	`<td>Cell</td>`
		1121	`<td>Cell</td>`
		1122	`<td>Cell</td>`
		1123	`</tr>`
		1124	`<tr>`
		1125	`<td>Cell</td>`
		1126	`<td>Cell</td>`
		1127	`<td>Cell</td>`
		1128	`</tr>`
		1129	`</tbody>`
		1130	`<tfoot>`
		1131	`<tr>`
		1132	`<th>Footer 1</th>`
		1133	`<th>Footer 2</th>`
		1134	`<th>Footer 3</th>`
		1135	`</tr>`
		1136	`</tfoot>`
		1137	`</table>`
		1138	`</div>`
62	-	1139
		1140
		1141
65	-	1142	`<div class="mt-3 mb-5">`
		1143	`<h3>Table striped</h3>`
		1144	`<table class="table table-striped">`
		1145	`<thead>`
		1146	`<tr>`
		1147	`<th>Header 1</th>`
		1148	`<th>Header 2</th>`
		1149	`<th>Header 3</th>`
		1150	`</tr>`
		1151	`</thead>`
		1152	`<tbody>`
		1153	`<tr>`
		1154	`<td>Cell</td>`
		1155	`<td>Cell</td>`
		1156	`<td>Cell</td>`
		1157	`</tr>`
		1158	`<tr>`
		1159	`<td>Cell</td>`
		1160	`<td>Cell</td>`
		1161	`<td>Cell</td>`
		1162	`</tr>`
		1163	`<tr>`
		1164	`<td>Cell</td>`
		1165	`<td>Cell</td>`
		1166	`<td>Cell</td>`
		1167	`</tr>`
		1168	`</tbody>`
		1169	`<tfoot>`
		1170	`<tr>`
		1171	`<th>Footer 1</th>`
		1172	`<th>Footer 2</th>`
		1173	`<th>Footer 3</th>`
		1174	`</tr>`
		1175	`</tfoot>`
		1176	`</table>`
		1177	`</div>`
62	-	1178
		1179
		1180
65	-	1181	`<div class="mt-3 mb-5">`
		1182	`<h3>Table with border</h3>`
		1183	`<table class="table table-bordered">`
		1184	`<thead>`
		1185	`<tr>`
		1186	`<th>Header 1</th>`
		1187	`<th>Header 2</th>`
		1188	`<th>Header 3</th>`
		1189	`</tr>`
		1190	`</thead>`
		1191	`<tbody>`
		1192	`<tr>`
		1193	`<td>Cell</td>`
		1194	`<td>Cell</td>`
		1195	`<td>Cell</td>`
		1196	`</tr>`
		1197	`<tr>`
		1198	`<td>Cell</td>`
		1199	`<td>Cell</td>`
		1200	`<td>Cell</td>`
		1201	`</tr>`
		1202	`<tr>`
		1203	`<td>Cell</td>`
		1204	`<td>Cell</td>`
		1205	`<td>Cell</td>`
		1206	`</tr>`
		1207	`</tbody>`
		1208	`<tfoot>`
		1209	`<tr>`
		1210	`<th>Footer 1</th>`
		1211	`<th>Footer 2</th>`
		1212	`<th>Footer 3</th>`
		1213	`</tr>`
		1214	`</tfoot>`
		1215	`</table>`
		1216	`</div>`
62	-	1217
65	-	1218	`<div class="mt-3 mb-5">`
		1219	`<h3>Table with hover</h3>`
		1220	`<table class="table table-hover">`
		1221	`<thead>`
		1222	`<tr>`
		1223	`<th>Header 1</th>`
		1224	`<th>Header 2</th>`
		1225	`<th>Header 3</th>`
		1226	`</tr>`
		1227	`</thead>`
		1228	`<tbody>`
		1229	`<tr>`
		1230	`<td>Cell</td>`
		1231	`<td>Cell</td>`
		1232	`<td>Cell</td>`
		1233	`</tr>`
		1234	`<tr>`
		1235	`<td>Cell</td>`
		1236	`<td>Cell</td>`
		1237	`<td>Cell</td>`
		1238	`</tr>`
		1239	`<tr>`
		1240	`<td>Cell</td>`
		1241	`<td>Cell</td>`
		1242	`<td>Cell</td>`
		1243	`</tr>`
		1244	`</tbody>`
		1245	`<tfoot>`
		1246	`<tr>`
		1247	`<th>Footer 1</th>`
		1248	`<th>Footer 2</th>`
		1249	`<th>Footer 3</th>`
		1250	`</tr>`
		1251	`</tfoot>`
		1252	`</table>`
		1253	`</div>`
62	-	1254
		1255
		1256
65	-	1257	`<div class="mt-3 mb-5">`
		1258	`<h3>Table with Head with default color</h3>`
		1259	`<table class="table">`
		1260	`<thead class="thead-default">`
		1261	`<tr>`
		1262	`<th>Header 1</th>`
		1263	`<th>Header 2</th>`
		1264	`<th>Header 3</th>`
		1265	`</tr>`
		1266	`</thead>`
		1267	`<tbody>`
		1268	`<tr>`
		1269	`<td>Cell</td>`
		1270	`<td>Cell</td>`
		1271	`<td>Cell</td>`
		1272	`</tr>`
		1273	`<tr>`
		1274	`<td>Cell</td>`
		1275	`<td>Cell</td>`
		1276	`<td>Cell</td>`
		1277	`</tr>`
		1278	`<tr>`
		1279	`<td>Cell</td>`
		1280	`<td>Cell</td>`
		1281	`<td>Cell</td>`
		1282	`</tr>`
		1283	`</tbody>`
		1284	`<tfoot>`
		1285	`<tr>`
		1286	`<th>Footer 1</th>`
		1287	`<th>Footer 2</th>`
		1288	`<th>Footer 3</th>`
		1289	`</tr>`
		1290	`</tfoot>`
		1291	`</table>`
62	-	1292	`</div>`
		1293
		1294
		1295
65	-	1296	`<div class="mt-3 mb-5">`
		1297	`<h3>Table with inverse Head color</h3>`
		1298	`<table class="table">`
		1299	`<thead class="thead-inverse">`
		1300	`<tr>`
		1301	`<th>Header 1</th>`
		1302	`<th>Header 2</th>`
		1303	`<th>Header 3</th>`
		1304	`</tr>`
		1305	`</thead>`
		1306	`<tbody>`
		1307	`<tr>`
		1308	`<td>Cell</td>`
		1309	`<td>Cell</td>`
		1310	`<td>Cell</td>`
		1311	`</tr>`
		1312	`<tr>`
		1313	`<td>Cell</td>`
		1314	`<td>Cell</td>`
		1315	`<td>Cell</td>`
		1316	`</tr>`
		1317	`<tr>`
		1318	`<td>Cell</td>`
		1319	`<td>Cell</td>`
		1320	`<td>Cell</td>`
		1321	`</tr>`
		1322	`</tbody>`
		1323	`<tfoot>`
		1324	`<tr>`
		1325	`<th>Footer 1</th>`
		1326	`<th>Footer 2</th>`
		1327	`<th>Footer 3</th>`
		1328	`</tr>`
		1329	`</tfoot>`
		1330	`</table>`
		1331	`</div>`
		1332	`</div>`
62	-	1333
65	-	1334	`<!-- Pagination -->`
		1335	`<div class="container-fluid" data-category="pagination">`
		1336	`<h1>Pagination</h1>`
62	-	1337
65	-	1338	`<div class="mt-3 mb-5">`
		1339	`<nav>`
		1340	`<ul class="pagination">`
		1341	`<li class="page-item">`
		1342	`<a href="javascript:void(0);" class="page-link" aria-label="Previous">`
		1343	`<span aria-hidden="true">«</span>`
		1344	`</a>`
		1345	`</li>`
		1346	`<li class="page-item">`
		1347	`<a href="javascript:void(0);" class="page-link">1</a>`
		1348	`</li>`
		1349	`<li class="page-item">`
		1350	`<a href="javascript:void(0);" class="page-link">2</a>`
		1351	`</li>`
		1352	`<li class="page-item">`
		1353	`<a href="javascript:void(0);" class="page-link">3</a>`
		1354	`</li>`
		1355	`<li class="page-item">`
		1356	`<a href="javascript:void(0);" class="page-link">4</a>`
		1357	`</li>`
		1358	`<li class="page-item">`
		1359	`<a href="javascript:void(0);" class="page-link">5</a>`
		1360	`</li>`
		1361	`<li class="page-item">`
		1362	`<a href="javascript:void(0);" class="page-link">6</a>`
		1363	`</li>`
		1364	`<li class="page-item">`
		1365	`<a href="javascript:void(0);" class="page-link">7</a>`
		1366	`</li>`
		1367	`<li class="page-item">`
		1368	`<a href="javascript:void(0);" class="page-link" aria-label="Next">`
		1369	`<span aria-hidden="true">»</span>`
		1370	`</a>`
		1371	`</li>`
		1372	`</ul>`
		1373	`</nav>`
		1374	`</div>`
		1375
		1376	`<div class="mt-3 mb-5">`
		1377	`<nav>`
		1378	`<ul class="pagination">`
		1379	`<li class="page-item">`
		1380	`<a href="javascript:void(0);" class="page-link" aria-label="Previous">`
		1381	`<span aria-hidden="true">«</span>`
		1382	`</a>`
		1383	`</li>`
		1384	`<li class="page-item">`
		1385	`<a href="javascript:void(0);" class="page-link">1</a>`
		1386	`</li>`
		1387	`<li class="page-item">`
		1388	`<a href="javascript:void(0);" class="page-link">2</a>`
		1389	`</li>`
		1390	`<li class="page-item">`
		1391	`<a href="javascript:void(0);" class="page-link">3</a>`
		1392	`</li>`
		1393	`<li class="page-item active">`
		1394	`<a href="javascript:void(0);" class="page-link">4</a>`
		1395	`</li>`
		1396	`<li class="page-item">`
		1397	`<a href="javascript:void(0);" class="page-link">5</a>`
		1398	`</li>`
		1399	`<li class="page-item">`
		1400	`<a href="javascript:void(0);" class="page-link">6</a>`
		1401	`</li>`
		1402	`<li class="page-item">`
		1403	`<a href="javascript:void(0);" class="page-link">7</a>`
		1404	`</li>`
		1405	`<li class="page-item">`
		1406	`<a href="javascript:void(0);" class="page-link" aria-label="Next">`
		1407	`<span aria-hidden="true">»</span>`
		1408	`</a>`
		1409	`</li>`
		1410	`</ul>`
		1411	`</nav>`
		1412	`</div>`
		1413
		1414	`<div class="mt-3 mb-5">`
		1415	`<nav>`
		1416	`<ul class="pagination pagination-lg">`
		1417	`<li class="page-item">`
		1418	`<a href="javascript:void(0);" class="page-link" aria-label="Previous">`
		1419	`<span aria-hidden="true">«</span>`
		1420	`</a>`
		1421	`</li>`
		1422	`<li class="page-item">`
		1423	`<a href="javascript:void(0);" class="page-link">1</a>`
		1424	`</li>`
		1425	`<li class="page-item">`
		1426	`<a href="javascript:void(0);" class="page-link">2</a>`
		1427	`</li>`
		1428	`<li class="page-item">`
		1429	`<a href="javascript:void(0);" class="page-link">3</a>`
		1430	`</li>`
		1431	`<li class="page-item">`
		1432	`<a href="javascript:void(0);" class="page-link">4</a>`
		1433	`</li>`
		1434	`<li class="page-item">`
		1435	`<a href="javascript:void(0);" class="page-link">5</a>`
		1436	`</li>`
		1437	`<li class="page-item">`
		1438	`<a href="javascript:void(0);" class="page-link">6</a>`
		1439	`</li>`
		1440	`<li class="page-item">`
		1441	`<a href="javascript:void(0);" class="page-link">7</a>`
		1442	`</li>`
		1443	`<li class="page-item">`
		1444	`<a href="javascript:void(0);" class="page-link" aria-label="Next">`
		1445	`<span aria-hidden="true">»</span>`
		1446	`</a>`
		1447	`</li>`
		1448	`</ul>`
		1449	`</nav>`
		1450	`</div>`
		1451
		1452	`<div class="mt-3 mb-5">`
		1453	`<nav>`
		1454	`<ul class="pagination">`
		1455	`<li class="page-item">`
		1456	`<a href="javascript:void(0);" class="page-link" aria-label="Previous">`
		1457	`<span aria-hidden="true">«</span>`
		1458	`</a>`
		1459	`</li>`
		1460	`<li class="page-item">`
		1461	`<a href="javascript:void(0);" class="page-link">1</a>`
		1462	`</li>`
		1463	`<li class="page-item">`
		1464	`<a href="javascript:void(0);" class="page-link">2</a>`
		1465	`</li>`
		1466	`<li class="page-item">`
		1467	`<a href="javascript:void(0);" class="page-link">3</a>`
		1468	`</li>`
		1469	`<li class="page-item">`
		1470	`<a href="javascript:void(0);" class="page-link">4</a>`
		1471	`</li>`
		1472	`<li class="page-item">`
		1473	`<a href="javascript:void(0);" class="page-link">5</a>`
		1474	`</li>`
		1475	`<li class="page-item">`
		1476	`<a href="javascript:void(0);" class="page-link">6</a>`
		1477	`</li>`
		1478	`<li class="page-item">`
		1479	`<a href="javascript:void(0);" class="page-link">7</a>`
		1480	`</li>`
		1481	`<li class="page-item">`
		1482	`<a href="javascript:void(0);" class="page-link" aria-label="Next">`
		1483	`<span aria-hidden="true">»</span>`
		1484	`</a>`
		1485	`</li>`
		1486	`</ul>`
		1487	`</nav>`
		1488	`</div>`
		1489
		1490	`<div class="mt-3 mb-5">`
		1491	`<nav>`
		1492	`<ul class="pagination pagination-sm">`
		1493	`<li class="page-item">`
		1494	`<a href="javascript:void(0);" class="page-link" aria-label="Previous">`
		1495	`<span aria-hidden="true">«</span>`
		1496	`</a>`
		1497	`</li>`
		1498	`<li class="page-item">`
		1499	`<a href="javascript:void(0);" class="page-link">1</a>`
		1500	`</li>`
		1501	`<li class="page-item">`
		1502	`<a href="javascript:void(0);" class="page-link">2</a>`
		1503	`</li>`
		1504	`<li class="page-item">`
		1505	`<a href="javascript:void(0);" class="page-link">3</a>`
		1506	`</li>`
		1507	`<li class="page-item">`
		1508	`<a href="javascript:void(0);" class="page-link">4</a>`
		1509	`</li>`
		1510	`<li class="page-item">`
		1511	`<a href="javascript:void(0);" class="page-link">5</a>`
		1512	`</li>`
		1513	`<li class="page-item">`
		1514	`<a href="javascript:void(0);" class="page-link">6</a>`
		1515	`</li>`
		1516	`<li class="page-item">`
		1517	`<a href="javascript:void(0);" class="page-link">7</a>`
		1518	`</li>`
		1519	`<li class="page-item">`
		1520	`<a href="javascript:void(0);" class="page-link" aria-label="Next">`
		1521	`<span aria-hidden="true">»</span>`
		1522	`</a>`
		1523	`</li>`
		1524	`</ul>`
		1525	`</nav>`
		1526	`</div>`
		1527	`</div>`
		1528
		1529	`<!-- Jumbotron -->`
		1530	`<div class="container-fluid" data-category="jumbotron">`
		1531	`<h1>Jumbotron</h1>`
		1532
		1533	`<div class="container">`
		1534	`<div class="jumbotron">`
		1535	`<h1>Container size jumboton</h1>`
		1536	`<p>Think BIG with a Bootstrap Jumbotron!</p>`
62	-	1537	`</div>`
65	-	1538	`</div>`
62	-	1539
65	-	1540	`<div>`
		1541	`<div class="jumbotron jumbotron-fluid">`
		1542	`<div class="container">`
		1543	`<h1>Container fluid size jumbotron</h1>`
		1544	`<p>Think BIG with a Bootstrap Jumbotron!</p>`
		1545	`</div>`
62	-	1546	`</div>`
		1547	`</div>`
65	-	1548	`</div>`
62	-	1549
65	-	1550	`<!-- Cards -->`
		1551	`<div class="container-fluid" data-category="cards">`
		1552	`<h1>Cards</h1>`
		1553	`<div class="row mb-3">`
		1554	`<div class="col-3">`
		1555	`<div class="card card-body">`
		1556	`<h4 class="card-title">Boot Polish</h4>`
		1557	`<p class="card-text">Boot polish is a waxy paste, cream, or liquid used to polish, shine, and waterproof leather shoes or boots to extend the footwear's life, and restore, maintain and improve their appearance.</p>`
		1558	`<a href="javascript:void(0);" class="btn btn-primary">More</a>`
		1559	`</div>`
		1560	`</div>`
62	-	1561
65	-	1562	`<div class="col-3">`
		1563	`<div class="card">`
		1564	`<div class="card-body">`
		1565	`<h4 class="card-title">Sun Gone</h4>`
		1566	`<p class="card-text">Here are the top resources for all things related to the Sun.</p>`
		1567	`<a href="javascript:void(0);" class="card-link">Sun Gone</a>`
		1568	`<a href="javascript:void(0);" class="card-link">Still Gone</a>`
		1569	`</div>`
62	-	1570	`</div>`
		1571	`</div>`
		1572
65	-	1573	`<div class="col-3">`
		1574	`<div class="card text-center">`
		1575	`<div class="card-body">`
		1576	`<h4 class="card-title">Sun Gone</h4>`
		1577	`<h6 class="card-subtitle text-muted">Sun disappears!</h6>`
62	-	1578	`</div>`
65	-	1579	`<img src="https://via.placeholder.com/300x150" alt="Photo of sunset">`
		1580
		1581	`<div class="card-body">`
		1582	`<p class="card-text">The sun disappeared behind the horizon today. Experts claim it could be gone for good!</p>`
		1583	`<a href="javascript:void(0);" class="btn btn-primary">Full Report</a>`
		1584	`</div>`
		1585
62	-	1586	`</div>`
		1587	`</div>`
		1588
65	-	1589	`<div class="col-3">`
		1590	`<div class="card">`
		1591	`<div class="card-header">`
		1592	`Sponsored Content`
62	-	1593	`</div>`
65	-	1594	`<div class="card-body">`
		1595	`<h4 class="card-title">Ugg Boots</h4>`
		1596	`<p class="card-text">Best ugg boots on the planet. Free shipping, 24/7 customer service.</p>`
		1597	`</div>`
		1598	`<div class="card-footer">`
		1599	`By boots.com`
		1600	`</div>`
62	-	1601	`</div>`
65	-	1602	`</div>`
62	-	1603
65	-	1604	`</div>`
		1605	`<div class="row mb-3">`
		1606	`<div class="col-12">`
		1607	`<div class="card-group">`
62	-	1608	`<div class="card">`
65	-	1609	`<div class="card-header">Sun Gone</div>`
62	-	1610	`<div class="card-body">`
65	-	1611	`<p class="card-text">The top resources for all things related to the Sun.</p>`
62	-	1612	`<a href="javascript:void(0);" class="card-link">Sun Gone</a>`
		1613	`<a href="javascript:void(0);" class="card-link">Still Gone</a>`
		1614	`</div>`
		1615	`</div>`
		1616
65	-	1617	`<div class="card">`
		1618	`<div class="card-header">Sun Up</div>`
62	-	1619	`<div class="card-body">`
65	-	1620	`<p class="card-text">Looks like the Sun has returned. Here's`
		1621	`<a href="javascript:void(0);" class="card-link">why</a>.</p>`
62	-	1622	`</div>`
		1623	`</div>`
		1624
		1625	`</div>`
		1626	`</div>`
		1627
65	-	1628	`</div>`
		1629	`</div>`
62	-	1630
65	-	1631	`<!-- Tooltip -->`
		1632	`<div class="container-fluid" data-category="tooltip">`
		1633	`<h1>Tooltip</h1>`
62	-	1634
65	-	1635	`<div class="mt-3 mb-5">`
		1636	`<h3>Inline tooltip</h3>`
		1637	`<p style="margin:40px;">Check out my`
		1638	`<a target="_blank" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Build advanced layouts easily with CSS!">Grid tutorial</a>, as you never know when you might need it!</p>`
62	-	1639	`</div>`
		1640
65	-	1641	`<div class="mt-3 mb-5">`
		1642	`<h3>All position tooltip</h3>`
		1643	`<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Top shoes" style="margin:20px;">`
		1644	`Shoes`
		1645	`</button>`
		1646	`<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="Right boot" style="margin:20px;">`
		1647	`Boots`
		1648	`</button>`
		1649	`<button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Bottom uggs" style="margin:20px;">`
		1650	`Ugg`
		1651	`</button>`
		1652	`<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="left" title="Left sock" style="margin:20px;">`
		1653	`Socks`
		1654	`</button>`
		1655	`</div>`
62	-	1656
65	-	1657	`</div>`
62	-	1658
65	-	1659	`<!-- Popovers -->`
		1660	`<div class="container-fluid" data-category="popovers">`
		1661	`<h1>Popovers</h1>`
		1662	`<div class="mt-3 mb-5">`
		1663	`<h3>All popover position</h3>`
		1664	`<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">`
		1665	`Popover on top`
		1666	`</button>`
62	-	1667
65	-	1668	`<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">`
		1669	`Popover on right`
		1670	`</button>`
62	-	1671
65	-	1672	`<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus`
62	-	1673	`sagittis lacus vel augue laoreet rutrum faucibus.">`
65	-	1674	`Popover on bottom`
		1675	`</button>`
62	-	1676
65	-	1677	`<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">`
		1678	`Popover on left`
		1679	`</button>`
62	-	1680	`</div>`
65	-	1681	`</div>`
62	-	1682
65	-	1683	`<!-- Badges -->`
		1684	`<div class="container-fluid" data-category="badges">`
		1685	`<h1>Badges</h1>`
62	-	1686
65	-	1687	`<div class="mt-3 mb-5">`
		1688	`<h3>Badge heading</h3>`
		1689	`<h1>Example heading`
62	-	1690	`<span class="badge badge-secondary">New</span>`
		1691	`</h1>`
65	-	1692	`<h2>Example heading`
62	-	1693	`<span class="badge badge-secondary">New</span>`
		1694	`</h2>`
65	-	1695	`<h3>Example heading`
62	-	1696	`<span class="badge badge-secondary">New</span>`
		1697	`</h3>`
65	-	1698	`<h4>Example heading`
62	-	1699	`<span class="badge badge-secondary">New</span>`
		1700	`</h4>`
65	-	1701	`<h5>Example heading`
62	-	1702	`<span class="badge badge-secondary">New</span>`
		1703	`</h5>`
65	-	1704	`<h6>Example heading`
62	-	1705	`<span class="badge badge-secondary">New</span>`
		1706	`</h6>`
65	-	1707	`</div>`
62	-	1708
65	-	1709	`<div class="mt-3 mb-5">`
		1710	`<h3>Button with inline badge</h3>`
		1711	`<button type="button" class="btn btn-primary">`
		1712	`Notifications`
		1713	`<span class="badge badge-light">4</span>`
		1714	`</button>`
		1715	`<button type="button" class="btn btn-primary">`
		1716	`Profile`
		1717	`<span class="badge badge-light">9</span>`
		1718	`<span class="sr-only">unread messages</span>`
		1719	`</button>`
		1720	`</div>`
62	-	1721
65	-	1722	`<div class="mt-3 mb-5">`
		1723	`<h3>Default badges</h3>`
		1724	`<span class="badge badge-primary">Primary</span>`
		1725	`<span class="badge badge-secondary">Secondary</span>`
		1726	`<span class="badge badge-success">Success</span>`
		1727	`<span class="badge badge-danger">Danger</span>`
		1728	`<span class="badge badge-warning">Warning</span>`
		1729	`<span class="badge badge-info">Info</span>`
		1730	`<span class="badge badge-light">Light</span>`
		1731	`<span class="badge badge-dark">Dark</span>`
		1732	`</div>`
62	-	1733
65	-	1734	`<div class="mt-3 mb-5">`
		1735	`<h3>Badges pill</h3>`
		1736	`<span class="badge badge-pill badge-primary">Primary</span>`
		1737	`<span class="badge badge-pill badge-secondary">Secondary</span>`
		1738	`<span class="badge badge-pill badge-success">Success</span>`
		1739	`<span class="badge badge-pill badge-danger">Danger</span>`
		1740	`<span class="badge badge-pill badge-warning">Warning</span>`
		1741	`<span class="badge badge-pill badge-info">Info</span>`
		1742	`<span class="badge badge-pill badge-light">Light</span>`
		1743	`<span class="badge badge-pill badge-dark">Dark</span>`
		1744	`</div>`
62	-	1745
65	-	1746	`<div class="mt-3 mb-5">`
		1747	`<h3>Badges with link</h3>`
		1748	`<a href="javascript:void(0);" class="badge badge-primary">Primary</a>`
		1749	`<a href="javascript:void(0);" class="badge badge-secondary">Secondary</a>`
		1750	`<a href="javascript:void(0);" class="badge badge-success">Success</a>`
		1751	`<a href="javascript:void(0);" class="badge badge-danger">Danger</a>`
		1752	`<a href="javascript:void(0);" class="badge badge-warning">Warning</a>`
		1753	`<a href="javascript:void(0);" class="badge badge-info">Info</a>`
		1754	`<a href="javascript:void(0);" class="badge badge-light">Light</a>`
		1755	`<a href="javascript:void(0);" class="badge badge-dark">Dark</a>`
62	-	1756	`</div>`
65	-	1757	`</div>`
62	-	1758
65	-	1759	`<!-- Modals -->`
		1760	`<div class="container-fluid" data-category="modals">`
		1761	`<h1>Modals</h1>`
62	-	1762
65	-	1763	`<div class="mt-3 mb-5 row">`
		1764	`<button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal" data-target="#flipFlop">`
		1765	`Default Modal`
		1766	`</button>`
62	-	1767
65	-	1768	`<button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal" data-target="#largeShoes">`
		1769	`Large Modal`
		1770	`</button>`
62	-	1771
65	-	1772	`<button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal" data-target="#smallShoes">`
		1773	`Small Modal`
		1774	`</button>`
62	-	1775
65	-	1776	`<!-- The modal -->`
		1777	`<div class="modal fade" id="smallShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">`
		1778	`<div class="modal-dialog modal-sm">`
		1779	`<div class="modal-content">`
62	-	1780
65	-	1781	`<div class="modal-header">`
		1782	`<button type="button" class="close" data-dismiss="modal" aria-label="Close">`
		1783	`<span aria-hidden="true">×</span>`
		1784	`</button>`
		1785	`<h4 class="modal-title" id="modalLabelSmall">Small Shoes</h4>`
		1786	`</div>`
62	-	1787
65	-	1788	`<div class="modal-body">`
		1789	`Small shoes are typically worn by people with small feet.`
		1790	`</div>`
62	-	1791
		1792	`</div>`
		1793	`</div>`
65	-	1794	`</div>`
62	-	1795
65	-	1796	`<!-- The modal -->`
		1797	`<div class="modal fade" id="largeShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">`
		1798	`<div class="modal-dialog modal-lg">`
		1799	`<div class="modal-content">`
62	-	1800
65	-	1801	`<div class="modal-header">`
		1802	`<button type="button" class="close" data-dismiss="modal" aria-label="Close">`
		1803	`<span aria-hidden="true">×</span>`
		1804	`</button>`
		1805	`<h4 class="modal-title" id="modalLabelLarge">Large Shoes</h4>`
		1806	`</div>`
62	-	1807
65	-	1808	`<div class="modal-body">`
		1809	`Large shoes are usually avoided by people with small feet.`
		1810	`</div>`
62	-	1811
		1812	`</div>`
		1813	`</div>`
65	-	1814	`</div>`
62	-	1815
65	-	1816	`<!-- The modal -->`
		1817	`<div class="modal fade" id="flipFlop" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">`
		1818	`<div class="modal-dialog" role="document">`
		1819	`<div class="modal-content">`
		1820	`<div class="modal-header">`
		1821	`<button type="button" class="close" data-dismiss="modal" aria-label="Close">`
		1822	`<span aria-hidden="true">×</span>`
		1823	`</button>`
		1824	`<h4 class="modal-title" id="modalLabel">Flip-flop</h4>`
62	-	1825	`</div>`
65	-	1826	`<div class="modal-body">`
		1827	`A type of open-toed sandal.`
		1828	`</div>`
		1829	`<div class="modal-footer">`
		1830	`<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>`
		1831	`</div>`
62	-	1832	`</div>`
		1833	`</div>`
		1834	`</div>`
		1835	`</div>`
65	-	1836	`</div>`
62	-	1837
65	-	1838	`<!-- Alerts -->`
		1839	`<div class="container-fluid" data-category="alerts">`
		1840	`<h1>Alerts</h1>`
62	-	1841
65	-	1842	`<div class="mt-3 mb-5">`
		1843	`<h3>Default alert</h3>`
		1844	`<div class="alert alert-success" role="alert">Success alert</div>`
		1845	`<div class="alert alert-info" role="alert">Info alert</div>`
		1846	`<div class="alert alert-warning" role="alert">Warning alert</div>`
		1847	`<div class="alert alert-danger" role="alert">Danger alert</div>`
		1848	`<div class="alert alert-light" role="alert">Light alert</div>`
		1849	`<div class="alert alert-dark" role="alert">Dark alert</div>`
		1850	`</div>`
62	-	1851
65	-	1852	`<div class="mt-3 mb-5">`
		1853	`<h3>Dismissible alert</h3>`
		1854	`<div class="alert alert-success alert-dismissible" role="alert">`
		1855	`<button type="button" class="close" data-dismiss="alert" aria-label="Close">`
		1856	`<span aria-hidden="true">×</span>`
		1857	`</button>`
		1858	`<strong>Congratulations!</strong> You successfully tied your shoelace!`
62	-	1859	`</div>`
65	-	1860	`</div>`
62	-	1861
65	-	1862	`<div class="mt-3 mb-5">`
		1863	`<h3>Dismissible alert with fade</h3>`
		1864	`<div class="alert alert-success alert-dismissible fade show" role="alert">`
		1865	`<button type="button" class="close" data-dismiss="alert" aria-label="Close">`
		1866	`<span aria-hidden="true">×</span>`
		1867	`</button>`
		1868	`<strong>Congratulations!</strong> You successfully tied your shoelace!`
62	-	1869	`</div>`
		1870	`</div>`
65	-	1871	`</div>`
62	-	1872
65	-	1873	`<!-- Progress bars -->`
		1874	`<div class="container-fluid" data-category="progress-bars">`
		1875	`<h1>Progress bars</h1>`
62	-	1876
65	-	1877	`<div class="mt-3 mb-5">`
		1878	`<h3>Default Progress bar</h3>`
		1879	`<div class="progress">`
		1880	`<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>`
62	-	1881	`</div>`
65	-	1882	`<br>`
		1883	`<div class="progress">`
		1884	`<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>`
		1885	`</div>`
		1886	`<br>`
		1887	`<div class="progress">`
		1888	`<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>`
		1889	`</div>`
		1890	`<br>`
		1891	`<div class="progress">`
		1892	`<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>`
		1893	`</div>`
		1894	`<br>`
		1895	`<div class="progress">`
		1896	`<div class="progress-bar bg-light" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>`
		1897	`</div>`
		1898	`<br>`
		1899	`<div class="progress">`
		1900	`<div class="progress-bar bg-dark" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>`
		1901	`</div>`
		1902	`</div>`
62	-	1903
65	-	1904	`<div class="mt-3 mb-5">`
		1905	`<h3>Striped Progress bar </h3>`
		1906	`<div class="progress">`
		1907	`<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>`
62	-	1908	`</div>`
65	-	1909	`<br>`
		1910	`<div class="progress">`
		1911	`<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>`
		1912	`</div>`
		1913	`<br>`
		1914	`<div class="progress">`
		1915	`<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>`
		1916	`</div>`
		1917	`<br>`
		1918	`<div class="progress">`
		1919	`<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>`
		1920	`</div>`
		1921	`<br>`
		1922	`<div class="progress">`
		1923	`<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>`
		1924	`</div>`
		1925	`<br>`
		1926	`<div class="progress">`
		1927	`<div class="progress-bar progress-bar-striped bg-light" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>`
		1928	`</div>`
		1929	`<br>`
		1930	`<div class="progress">`
		1931	`<div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>`
		1932	`</div>`
		1933	`</div>`
62	-	1934
65	-	1935	`<div class="mt-3 mb-5">`
		1936	`<h3>Animated Progress bar</h3>`
		1937	`<div class="progress">`
		1938	`<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>`
62	-	1939	`</div>`
		1940	`</div>`
65	-	1941	`</div>`
62	-	1942
65	-	1943	`<!-- List group -->`
		1944	`<div class="container-fluid" data-category="list-group">`
		1945	`<h1>List group</h1>`
62	-	1946
65	-	1947	`<div class="mt-3 mb-5">`
		1948	`<h3>Default list group</h3>`
		1949	`<ul class="list-group">`
		1950	`<li class="list-group-item">These Boots Are Made For Walking</li>`
		1951	`<li class="list-group-item">Eleanor, Put Your Boots On</li>`
		1952	`<li class="list-group-item">Puss 'n' Boots</li>`
		1953	`<li class="list-group-item">Die With Your Boots On</li>`
		1954	`<li class="list-group-item">Fairies Wear Boots</li>`
		1955	`</ul>`
		1956	`</div>`
62	-	1957
65	-	1958	`<div class="mt-3 mb-5">`
		1959	`<h3>List group with pills</h3>`
		1960	`<ul class="list-group">`
		1961	`<li class="list-group-item justify-content-between">`
		1962	`These Boots Are Made For Walking`
		1963	`<span class="badge badge-secondary badge-pill">15</span>`
		1964	`</li>`
		1965	`<li class="list-group-item justify-content-between">`
		1966	`Eleanor, Put Your Boots On`
		1967	`<span class="badge badge-secondary badge-pill">38</span>`
		1968	`</li>`
		1969	`<li class="list-group-item justify-content-between">`
		1970	`Puss 'n' Boots`
		1971	`<span class="badge badge-secondary badge-pill">76</span>`
		1972	`</li>`
		1973	`<li class="list-group-item justify-content-between">`
		1974	`Die With Your Boots On`
		1975	`<span class="badge badge-secondary badge-pill">112</span>`
		1976	`</li>`
		1977	`<li class="list-group-item justify-content-between">`
		1978	`Fairies Wear Boots`
		1979	`<span class="badge badge-secondary badge-pill">181</span>`
		1980	`</li>`
		1981	`</ul>`
		1982	`</div>`
62	-	1983
65	-	1984	`<div class="mt-3 mb-5">`
		1985	`<h3>Link List group</h3>`
		1986	`<div class="list-group">`
		1987	`<a href="javascript:void(0);" class="list-group-item list-group-item-action">These Boots Are Made For Walking</a>`
		1988	`<a href="javascript:void(0);" class="list-group-item list-group-item-action active">Eleanor, Put Your Boots On</a>`
		1989	`<a href="javascript:void(0);" class="list-group-item list-group-item-action">Puss 'n' Boots</a>`
		1990	`<a href="javascript:void(0);" class="list-group-item list-group-item-action">Die With Your Boots On</a>`
		1991	`<a href="javascript:void(0);" class="list-group-item list-group-item-action">Fairies Wear Boots</a>`
62	-	1992	`</div>`
65	-	1993	`</div>`
62	-	1994
65	-	1995	`<div class="mt-3 mb-5">`
		1996	`<h3>Button List group</h3>`
		1997	`<div class="list-group">`
		1998	`<button type="button" class="list-group-item list-group-item-action">These Boots Are Made For Walking</button>`
		1999	`<button type="button" class="list-group-item list-group-item-action active">Eleanor, Put Your Boots On</button>`
		2000	`<button type="button" class="list-group-item list-group-item-action">Puss 'n' Boots</button>`
		2001	`<button type="button" class="list-group-item list-group-item-action">Die With Your Boots On</button>`
		2002	`<button type="button" class="list-group-item list-group-item-action">Fairies Wear Boots</button>`
62	-	2003	`</div>`
65	-	2004	`</div>`
62	-	2005
65	-	2006	`<div class="mt-3 mb-5">`
		2007	`<h3>List group with colors</h3>`
		2008	`<div class="list-group">`
		2009	`<a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-success">These Boots Are Made For Walking</a>`
		2010	`<a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-success active">Eleanor, Put Your Boots On</a>`
		2011	`<a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-info">Puss 'n' Boots</a>`
		2012	`<a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-warning">Die With Your Boots On</a>`
		2013	`<a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-danger">Fairies Wear Boots</a>`
		2014	`<a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-light">Head Over Boots</a>`
		2015	`<a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-dark">Boot Scootin' Boogie</a>`
62	-	2016	`</div>`
		2017	`</div>`
65	-	2018	`</div>`
62	-	2019
65	-	2020	`<!-- Image thumbnails -->`
		2021	`<div class="container-fluid" data-category="image-thumbnails">`
		2022	`<h1>Image thumbnails </h1>`
62	-	2023
65	-	2024	`<div>`
		2025	`<img src="https://via.placeholder.com/100x100" class="rounded" alt="Sample image">`
		2026	`<img src="https://via.placeholder.com/100x100" class="rounded-circle" alt="Sample image">`
		2027	`<img src="https://via.placeholder.com/100x100" class="img-thumbnail" alt="Sample image">`
		2028	`<img src="https://via.placeholder.com/100x100" class="rounded-top" alt="Sample image">`
62	-	2029	`</div>`
65	-	2030	`</div>`
62	-	2031
65	-	2032	`<!-- Figures -->`
		2033	`<div class="container-fluid" data-category="figures">`
		2034	`<h1>Figures</h1>`
62	-	2035
65	-	2036	`<div>`
		2037	`<figure class="figure">`
		2038	`<img src="https://via.placeholder.com/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">`
		2039	`<figcaption class="figure-caption">A caption for the above image.</figcaption>`
		2040	`</figure>`
		2041	`</div>`
62	-	2042
65	-	2043	`<div>`
		2044	`<figure class="figure">`
		2045	`<img src="https://via.placeholder.com/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">`
		2046	`<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>`
		2047	`</figure>`
62	-	2048	`</div>`
65	-	2049	`</div>`
62	-	2050
65	-	2051	`<!-- Breadcrumbs -->`
		2052	`<div class="container-fluid" data-category="breadcrumbs">`
		2053	`<h1>Breadcrumbs</h1>`
62	-	2054
65	-	2055	`<div>`
		2056	`<ul class="breadcrumb">`
		2057	`<li class="breadcrumb-item">`
		2058	`<a href="javascript:void(0);">Home</a>`
		2059	`</li>`
		2060	`<li class="breadcrumb-item">`
		2061	`<a href="javascript:void(0);">Fruit</a>`
		2062	`</li>`
		2063	`<li class="breadcrumb-item active">Pears</li>`
		2064	`</ul>`
62	-	2065	`</div>`
65	-	2066	`</div>`
62	-	2067
65	-	2068	`<!-- Carousel -->`
		2069	`<div class="container-fluid" data-category="carousel">`
		2070	`<h1>Carousel</h1>`
62	-	2071
65	-	2072	`<div>`
		2073	`<div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel">`
		2074	`<ol class="carousel-indicators">`
		2075	`<li data-target="#myCarousel" data-slide-to="0" class="active"></li>`
		2076	`<li data-target="#myCarousel" data-slide-to="1"></li>`
		2077	`<li data-target="#myCarousel" data-slide-to="2"></li>`
		2078	`</ol>`
		2079	`<div class="carousel-inner" role="listbox">`
		2080	`<div class="carousel-item active">`
		2081	`<img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="First slide">`
		2082	`<div class="carousel-caption">`
		2083	`<h3>First slide</h3>`
		2084	`<p>This is the first slide.</p>`
62	-	2085	`</div>`
65	-	2086	`</div>`
		2087	`<div class="carousel-item">`
		2088	`<img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="Second slide">`
		2089	`<div class="carousel-caption">`
		2090	`<h3>Second slide</h3>`
		2091	`<p>This is the second slide.</p>`
62	-	2092	`</div>`
65	-	2093	`</div>`
		2094	`<div class="carousel-item">`
		2095	`<img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="Third slide">`
		2096	`<div class="carousel-caption">`
		2097	`<h3>Third slide</h3>`
		2098	`<p>This is the third slide.</p>`
62	-	2099	`</div>`
		2100	`</div>`
		2101	`</div>`
65	-	2102	`<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">`
		2103	`<span class="carousel-control-prev-icon" aria-hidden="true"></span>`
		2104	`<span class="sr-only">Previous</span>`
		2105	`</a>`
		2106	`<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">`
		2107	`<span class="carousel-control-next-icon" aria-hidden="true"></span>`
		2108	`<span class="sr-only">Next</span>`
		2109	`</a>`
62	-	2110	`</div>`
		2111	`</div>`
65	-	2112	`</div>`
62	-	2113
65	-	2114	`<!-- Close -->`
		2115	`<div class="container-fluid" data-category="close">`
		2116	`<h1>Close</h1>`
		2117	`<button type="button" class="close" aria-label="Close">`
		2118	`<span aria-hidden="true">×</span>`
		2119	`</button>`
		2120	`</div>`
		2121
		2122	`<!-- Code -->`
		2123	`<div class="container-fluid" data-category="code">`
		2124	`<h1>Code</h1>`
		2125	`<div class="mt-3 mb-5">`
		2126	`<h3>Default code</h3> For example,`
		2127	`<code><section></code> should be wrapped as inline.`
62	-	2128	`</div>`
		2129
65	-	2130	`<div class="mt-3 mb-5">`
		2131	`<h3>Code with pre tag</h3>`
		2132	`<pre>`
62	-	2133	`<code>`
		2134	`<p>Sample text here...</p>`
		2135	`<p>And another line of sample text here...</p>`
		2136	`</code>`
		2137	`</pre>`
65	-	2138	`</div>`
62	-	2139
		2140
		2141
65	-	2142	`<div class="mt-3 mb-5">`
		2143	`<h3>Var tag</h3>`
		2144	`<var>y</var> =`
		2145	`<var>m</var>`
		2146	`<var>x</var> +`
		2147	`<var>b</var>`
		2148	`</div>`
62	-	2149
65	-	2150	`<div class="mt-3 mb-5">`
		2151	`<h3>Kbd tag</h3> To switch directories, type`
		2152	`<kbd>cd</kbd> followed by the name of the directory.`
		2153	`<br> To edit settings, press`
		2154	`<kbd>`
62	-	2155	`<kbd>ctrl</kbd> +`
65	-	2156	`<kbd>,</kbd>`
		2157	`</kbd>`
		2158	`</div>`
62	-	2159
65	-	2160	`<div class="mt-3 mb-5">`
		2161	`<h3>Samp tag</h3>`
		2162	`<samp>This text is meant to be treated as sample output from a computer program.</samp>`
		2163	`</div>`
62	-	2164
65	-	2165	`<div class="mt-3 mb-5 youtube">`
		2166	`<h3>Youtube list</h3>`
		2167	`<ul>`
		2168	`<li>Video 1</li>`
		2169	`<li>Video 2</li>`
		2170	`<li>Video 3</li>`
		2171	`<li>Video 4</li>`
		2172	`</ul>`
		2173	`</div>`
62	-	2174
		2175	`</div>`
		2176	`</div>`
65	-	2177	`</div>`
		2178	`<script>`
		2179	`$(document).ready(function() {`
		2180	`$('[data-toggle="tooltip"]').tooltip({`
		2181	`trigger: 'hover'`
		2182	`});`
		2183	`$('[rel="tooltip"]').on('click', function() {`
		2184	`$(this).tooltip('hide');`
		2185	`});`
		2186	`$('[data-toggle="popover"]').popover();`
		2187	`});`
		2188	`</script>`
62	-	2189
		2190	`</body>`
65	-	2191
62	-	2192	`</html>`

Subversion Repositories cheapmusic

(root)/www/tests/color-theme.html – Rev 65