├── LICENSE
├── custom.css
├── images
    ├── feature-1.jpg
    ├── feature-2.jpg
    ├── feature-3.jpg
    ├── slider-1.jpg
    ├── slider-2.jpg
    └── slider-3.jpg
├── index.html
├── lesson-1.html
├── lesson-10.html
├── lesson-11.html
├── lesson-2.html
├── lesson-3.html
├── lesson-4.html
├── lesson-5.html
├── lesson-6.html
├── lesson-7.html
├── lesson-8.html
├── lesson-9.html
└── readme.md


/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2015, Tuts+
 2 | All rights reserved.
 3 | 
 4 | Redistribution and use in source and binary forms, with or without
 5 | modification, are permitted provided that the following conditions are met:
 6 | 
 7 | * Redistributions of source code must retain the above copyright notice, this
 8 |   list of conditions and the following disclaimer.
 9 | 
10 | * Redistributions in binary form must reproduce the above copyright notice,
11 |   this list of conditions and the following disclaimer in the documentation
12 |   and/or other materials provided with the distribution.
13 | 
14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
15 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
16 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
17 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
18 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
19 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
20 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
21 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
22 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24 | 
25 | 


--------------------------------------------------------------------------------
/custom.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * ----------------------------------------------------------------------------------------
 3 |  * Demo styles.
 4 |  * ----------------------------------------------------------------------------------------
 5 |  */
 6 | 
 7 | .demo-area [class^='col-'] {
 8 | 	background-color: #434d55;
 9 | 
10 | 	color: #fff;
11 | }


--------------------------------------------------------------------------------
/images/feature-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/bootstrap-3-for-web-design/1c655c3b3b59c11b93668348ea69282a7d8fef40/images/feature-1.jpg


--------------------------------------------------------------------------------
/images/feature-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/bootstrap-3-for-web-design/1c655c3b3b59c11b93668348ea69282a7d8fef40/images/feature-2.jpg


--------------------------------------------------------------------------------
/images/feature-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/bootstrap-3-for-web-design/1c655c3b3b59c11b93668348ea69282a7d8fef40/images/feature-3.jpg


--------------------------------------------------------------------------------
/images/slider-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/bootstrap-3-for-web-design/1c655c3b3b59c11b93668348ea69282a7d8fef40/images/slider-1.jpg


--------------------------------------------------------------------------------
/images/slider-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/bootstrap-3-for-web-design/1c655c3b3b59c11b93668348ea69282a7d8fef40/images/slider-2.jpg


--------------------------------------------------------------------------------
/images/slider-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/bootstrap-3-for-web-design/1c655c3b3b59c11b93668348ea69282a7d8fef40/images/slider-3.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8">
  6 | 	<title>Product page :: Built with Twitter Bootstrap</title>
  7 | 	<meta name="description" content="A product presentation page built for a Tuts+ course">
  8 | 	<meta name="author" content="Adi Purdila">
  9 | 
 10 | 	<!-- Mobile Specific Meta -->
 11 | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 12 | 
 13 | 	<!-- Bootstrap files -->
 14 | 	<!-- Latest compiled and minified CSS -->
 15 | 	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 16 | 
 17 | 	<!-- Optional theme -->
 18 | 	<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> -->
 19 | 
 20 | 	<style>
 21 | 		body {
 22 | 			padding-top: 50px;
 23 | 		}
 24 | 	</style>
 25 | </head>
 26 | <body data-spy="scroll" data-target="#main-navbar">
 27 | 
 28 | 	<!-- NAVBAR -->
 29 | 	<nav class="navbar navbar-inverse navbar-fixed-top" id="main-navbar" role="navigation">
 30 | 		<div class="container">
 31 | 			<div class="navbar-header">
 32 | 				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
 33 | 					<span class="sr-only">Toggle navigation</span>
 34 | 					<span class="icon-bar"></span>
 35 | 					<span class="icon-bar"></span>
 36 | 					<span class="icon-bar"></span>
 37 | 				</button>
 38 | 
 39 | 				<a href="index.html" class="navbar-brand">Product Name</a>
 40 | 			</div> <!-- end navbar-header -->
 41 | 
 42 | 			<div class="collapse navbar-collapse" id="navbar-collapse">
 43 | 				<a href="#" class="btn btn-success navbar-btn navbar-right">Buy Now</a>
 44 | 
 45 | 				<ul class="nav navbar-nav">
 46 | 					<li><a href="#section-testimonials">Testimonials</a></li>
 47 | 					<li><a href="#section-features">Features</a></li>
 48 | 					<li><a href="#section-gallery">Gallery</a></li>
 49 | 					<li><a href="#section-faq">F.A.Q.</a></li>
 50 | 					<li><a href="#section-contact">Contact</a></li>
 51 | 				</ul>
 52 | 			</div> <!-- end collapse -->
 53 | 		</div> <!-- end container -->
 54 | 	</nav>
 55 | 
 56 | 
 57 | 
 58 | 	<!-- BANNER -->
 59 | 	<div class="jumbotron">
 60 | 		<div class="container text-center">
 61 | 			<h1>Great product title</h1>
 62 | 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, numquam.</p>
 63 | 
 64 | 			<div class="btn-group">
 65 | 				<a href="#" class="btn btn-lg btn-success">Buy Now!</a>
 66 | 				<a href="#" class="btn btn-lg btn-default">Try it Free</a>
 67 | 			</div> <!-- end btn-group -->
 68 | 		</div> <!-- end container -->
 69 | 	</div> <!-- end jumbotron -->
 70 | 
 71 | 
 72 | 
 73 | 	<div class="container">
 74 | 		<!-- TESTIMONIALS -->
 75 | 		<section>
 76 | 			<div class="page-header" id="section-testimonials">
 77 | 				<h2>Testimonials. <small>This is what our customers are saying about us.</small></h2>
 78 | 			</div> <!-- end page-header -->
 79 | 
 80 | 			<div class="row">
 81 | 				<div class="col-md-4">
 82 | 					<blockquote>
 83 | 						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, sit accusamus excepturi labore nihil cumque iusto voluptatem. Porro, possimus, harum.</p>
 84 | 						<footer>Cite author</footer>
 85 | 					</blockquote>
 86 | 				</div>
 87 | 				<div class="col-md-4">
 88 | 					<blockquote>
 89 | 						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, sit accusamus excepturi labore nihil cumque iusto voluptatem. Porro, possimus, harum.</p>
 90 | 						<footer>Cite author</footer>
 91 | 					</blockquote>
 92 | 				</div>
 93 | 				<div class="col-md-4">
 94 | 					<blockquote>
 95 | 						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, sit accusamus excepturi labore nihil cumque iusto voluptatem. Porro, possimus, harum.</p>
 96 | 						<footer>Cite author</footer>
 97 | 					</blockquote>
 98 | 				</div>
 99 | 			</div> <!-- end row -->
100 | 
101 | 			<p class="text-center"><em>Wanna tell us about the product? Head over to the contact form.</em></p>
102 | 			<p class="text-center"><a href="#section-contact" class="btn btn-default">Contact Us</a></p>
103 | 		</section>
104 | 
105 | 
106 | 		<!-- FEATURES -->
107 | 		<section>
108 | 			<div class="page-header" id="section-features">
109 | 				<h2>Features. <small>What it's all about.</small></h2>
110 | 			</div> <!-- end page-header -->
111 | 
112 | 			<div class="row">
113 | 				<div class="col-sm-8">
114 | 					<h3>This is a feature title</h3>
115 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, dolorem debitis laboriosam fuga repellat impedit consequuntur ipsam inventore voluptas iure.</p>
116 | 				</div>
117 | 				<div class="col-sm-4">
118 | 					<img src="images/feature-1.jpg" alt="Feature image" class="img-responsive">
119 | 				</div>
120 | 			</div> <!-- end row -->
121 | 
122 | 			<div class="row">
123 | 				<div class="col-sm-8">
124 | 					<h3>This is a feature title</h3>
125 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, dolorem debitis laboriosam fuga repellat impedit consequuntur ipsam inventore voluptas iure.</p>
126 | 				</div>
127 | 				<div class="col-sm-4">
128 | 					<img src="images/feature-2.jpg" alt="Feature image" class="img-responsive">
129 | 				</div>
130 | 			</div> <!-- end row -->
131 | 
132 | 			<div class="row">
133 | 				<div class="col-sm-8">
134 | 					<h3>This is a feature title</h3>
135 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, dolorem debitis laboriosam fuga repellat impedit consequuntur ipsam inventore voluptas iure.</p>
136 | 				</div>
137 | 				<div class="col-sm-4">
138 | 					<img src="images/feature-3.jpg" alt="Feature image" class="img-responsive">
139 | 				</div>
140 | 			</div> <!-- end row -->
141 | 
142 | 			<hr>
143 | 
144 | 			<div class="row">
145 | 				<div class="col-sm-4">
146 | 					<div class="panel panel-default text-center">
147 | 						<div class="panel-body">
148 | 							<span class="glyphicon glyphicon-search"></span>
149 | 
150 | 							<h4>This is a smaller feature</h4>
151 | 							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, aliquam.</p>
152 | 						</div>
153 | 					</div>
154 | 				</div>
155 | 				<div class="col-sm-4">
156 | 					<div class="panel panel-default text-center">
157 | 						<div class="panel-body">
158 | 							<span class="glyphicon glyphicon-ok"></span>
159 | 
160 | 							<h4>This is a smaller feature</h4>
161 | 							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, aliquam.</p>
162 | 						</div>
163 | 					</div>
164 | 				</div>
165 | 				<div class="col-sm-4">
166 | 					<div class="panel panel-default text-center">
167 | 						<div class="panel-body">
168 | 							<span class="glyphicon glyphicon-time"></span>
169 | 
170 | 							<h4>This is a smaller feature</h4>
171 | 							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, aliquam.</p>
172 | 						</div>
173 | 					</div>
174 | 				</div>
175 | 			</div> <!-- end row -->
176 | 		</section>
177 | 	</div> <!-- end container -->
178 | 
179 | 
180 | 
181 | 	<!-- TRIAL -->
182 | 	<section>
183 | 		<div class="well">
184 | 			<div class="container text-center">
185 | 				<h3>Subscribe now for a 30-day free trial!</h3>
186 | 				<p>Enter your name and email below</p>
187 | 
188 | 				<form action="#" class="form-inline" role="form">
189 | 					<div class="form-group">
190 | 						<label for="subscribe-name" class="sr-only">Name</label>
191 | 						<input type="text" class="form-control" id="subscribe-name" placeholder="Name">
192 | 					</div> <!-- end form-group -->
193 | 					<div class="form-group">
194 | 						<label for="subscribe-email" class="sr-only">Email address</label>
195 | 						<input type="text" class="form-control" id="subscribe-email" placeholder="Email address">
196 | 					</div> <!-- end form-group -->
197 | 
198 | 					<button type="submit" class="btn btn-default">Subscribe</button>
199 | 
200 | 					<p><small><em>We will only use your email address for sending the download link.</em></small></p>
201 | 				</form>
202 | 			</div> <!-- end container -->
203 | 		</div> <!-- end well -->
204 | 	</section>
205 | 
206 | 
207 | 	<div class="container">
208 | 		<!-- GALLERY -->
209 | 		<section>
210 | 			<div class="page-header" id="section-gallery">
211 | 				<h2>Gallery. <small>Take a look at some application screenshots.</small></h2>
212 | 			</div> <!-- end page-header -->
213 | 
214 | 			<div class="carousel slide" id="gallery-carousel" data-ride="carousel">
215 | 				<ol class="carousel-indicators">
216 | 					<li data-target="#gallery-carousel" data-slide-to="0" class="active"></li>
217 | 					<li data-target="#gallery-carousel" data-slide-to="1"></li>
218 | 					<li data-target="#gallery-carousel" data-slide-to="2"></li>
219 | 				</ol>
220 | 
221 | 				<div class="carousel-inner">
222 | 					<div class="item active">
223 | 						<img src="images/slider-1.jpg" alt="Slider image">
224 | 						<div class="carousel-caption">This is a caption.</div>
225 | 					</div>
226 | 					<div class="item">
227 | 						<img src="images/slider-2.jpg" alt="Slider image">
228 | 						<div class="carousel-caption">This is a caption.</div>
229 | 					</div>
230 | 					<div class="item">
231 | 						<img src="images/slider-3.jpg" alt="Slider image">
232 | 						<div class="carousel-caption">This is a caption.</div>
233 | 					</div>
234 | 				</div> <!-- end carousel-inner -->
235 | 
236 | 				<a href="#gallery-carousel" class="left carousel-control" data-slide="prev">
237 | 					<span class="glyphicon glyphicon-chevron-left"></span>
238 | 				</a>
239 | 				<a href="#gallery-carousel" class="right carousel-control" data-slide="next">
240 | 					<span class="glyphicon glyphicon-chevron-right"></span>
241 | 				</a>
242 | 			</div> <!-- end carousel -->
243 | 		</section>
244 | 
245 | 
246 | 		<!-- F.A.Q. -->
247 | 		<section>
248 | 			<div class="page-header" id="section-faq">
249 | 				<h2>Frequently Asked Questions. <small>A little Q&amp;A to get you started.</small></h2>
250 | 			</div> <!-- end page-header -->
251 | 
252 | 			<div class="panel-group" id="accordion-qa">
253 | 				<div class="panel panel-default">
254 | 					<div class="panel-heading">
255 | 						<h4 class="panel-title"><a href="#qa-1" data-toggle="collapse" data-parent="#accordion-qa">Question 1</a></h4>
256 | 					</div>
257 | 					<div class="panel-collapse collapse in" id="qa-1">
258 | 						<div class="panel-body">
259 | 							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, voluptates, sint, doloremque porro corporis atque ullam sapiente placeat iusto repellendus et dicta ut architecto! Cupiditate, facilis itaque pariatur accusamus odit.
260 | 						</div> <!-- end panel-body -->
261 | 					</div> <!-- end collapse -->
262 | 				</div> <!-- end panel -->
263 | 
264 | 				<div class="panel panel-default">
265 | 					<div class="panel-heading">
266 | 						<h4 class="panel-title"><a href="#qa-2" data-toggle="collapse" data-parent="#accordion-qa">Question 2</a></h4>
267 | 					</div>
268 | 					<div class="panel-collapse collapse" id="qa-2">
269 | 						<div class="panel-body">
270 | 							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, voluptates, sint, doloremque porro corporis atque ullam sapiente placeat iusto repellendus et dicta ut architecto! Cupiditate, facilis itaque pariatur accusamus odit.
271 | 						</div> <!-- end panel-body -->
272 | 					</div> <!-- end collapse -->
273 | 				</div> <!-- end panel -->
274 | 
275 | 				<div class="panel panel-default">
276 | 					<div class="panel-heading">
277 | 						<h4 class="panel-title"><a href="#qa-3" data-toggle="collapse" data-parent="#accordion-qa">Question 3</a></h4>
278 | 					</div>
279 | 					<div class="panel-collapse collapse" id="qa-3">
280 | 						<div class="panel-body">
281 | 							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, voluptates, sint, doloremque porro corporis atque ullam sapiente placeat iusto repellendus et dicta ut architecto! Cupiditate, facilis itaque pariatur accusamus odit.
282 | 						</div> <!-- end panel-body -->
283 | 					</div> <!-- end collapse -->
284 | 				</div> <!-- end panel -->
285 | 			</div> <!-- end panel-group -->
286 | 		</section>
287 | 
288 | 
289 | 		<!-- CONTACT -->
290 | 		<section>
291 | 			<div class="page-header" id="section-contact">
292 | 				<h2>Contact Us. <small>Let's get in touch.</small></h2>
293 | 			</div> <!-- end page-header -->
294 | 
295 | 			<div class="row">
296 | 				<div class="col-lg-4">
297 | 					<p>To send us a message, use the contact form or the information below.</p>
298 | 
299 | 					<address>
300 | 						<strong>Envato Pty Ltd</strong><br>
301 | 						121 King Street, Melbourne<br>
302 | 						Victoria 3000 Australia<br>
303 | 						<abbr title="Phone">P: </abbr> +61 3 8376 6284
304 | 					</address>
305 | 				</div>
306 | 				<div class="col-lg-8">
307 | 					<form action="#" class="form-horizontal" role="form">
308 | 						<div class="form-group">
309 | 							<label for="contact-name" class="col-lg-2 control-label">Name</label>
310 | 
311 | 							<div class="col-lg-10">
312 | 								<input type="text" class="form-control" id="contact-name" placeholder="Name">
313 | 							</div>
314 | 						</div>
315 | 						<div class="form-group">
316 | 							<label for="contact-email" class="col-lg-2 control-label">Email address</label>
317 | 
318 | 							<div class="col-lg-10">
319 | 								<input type="email" class="form-control" id="contact-email" placeholder="Email address">
320 | 							</div>
321 | 						</div>
322 | 						<div class="form-group">
323 | 							<label for="contact-website" class="col-lg-2 control-label">Website</label>
324 | 
325 | 							<div class="col-lg-10">
326 | 								<input type="url" class="form-control" id="contact-website" placeholder="Website">
327 | 							</div>
328 | 						</div>
329 | 						<div class="form-group">
330 | 							<label for="contact-message" class="col-lg-2 control-label">Message</label>
331 | 
332 | 							<div class="col-lg-10">
333 | 								<textarea name="contact-message" id="contact-message" class="form-control" cols="30" rows="10" placeholder="Message"></textarea>
334 | 							</div>
335 | 						</div>
336 | 						<div class="form-group">
337 | 							<div class="col-lg-10 col-lg-offset-2">
338 | 								<button type="submit" class="btn btn-primary">Send Message</button>
339 | 							</div>
340 | 						</div>
341 | 					</form>
342 | 				</div>
343 | 			</div> <!-- end row -->
344 | 		</section>
345 | 
346 | 
347 | 		<!-- FOOTER -->
348 | 		<footer>
349 | 			<hr>
350 | 
351 | 			<div class="container text-center">
352 | 				<h3>Subscribe now for a 30-day free trial!</h3>
353 | 				<p>Enter your name and email below</p>
354 | 
355 | 				<form action="#" class="form-inline" role="form">
356 | 					<div class="form-group">
357 | 						<label for="subscribe-name" class="sr-only">Name</label>
358 | 						<input type="text" class="form-control" id="subscribe-name" placeholder="Name">
359 | 					</div> <!-- end form-group -->
360 | 					<div class="form-group">
361 | 						<label for="subscribe-email" class="sr-only">Email address</label>
362 | 						<input type="text" class="form-control" id="subscribe-email" placeholder="Email address">
363 | 					</div> <!-- end form-group -->
364 | 
365 | 					<button type="submit" class="btn btn-default">Subscribe</button>
366 | 
367 | 					<p><small><em>We will only use your email address for sending the download link.</em></small></p>
368 | 				</form>
369 | 
370 | 				<hr>
371 | 
372 | 				<ul class="list-inline">
373 | 					<li><a href="#">Twitter</a></li>
374 | 					<li><a href="#">Facebook</a></li>
375 | 				</ul>
376 | 
377 | 				<p>&copy; Copyright 2014.</p>
378 | 			</div> <!-- end container -->
379 | 
380 | 		</footer>
381 | 	</div> <!-- end container -->
382 | 
383 | 
384 | 
385 | 	<!-- Latest compiled and minified JavaScript -->
386 | 	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
387 | 	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
388 | 
389 | </body>
390 | </html>


--------------------------------------------------------------------------------
/lesson-1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<title>Bootstrap for Web Design</title>
 7 | 	<meta name="description" content="A Tuts+ course">
 8 | 	<meta name="author" content="Adi Purdila">
 9 | 
10 | 	<!-- Mobile Specific Meta -->
11 | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
12 | 
13 | 	<!-- Latest compiled and minified CSS -->
14 | 	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
15 | 
16 | 	<!-- Optional theme -->
17 | 	<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> -->
18 | 
19 | 	<!-- Custom CSS -->
20 | 	<link rel="stylesheet" href="custom.css">
21 | </head>
22 | <body>
23 | 
24 | 	<header>
25 | 		<div class="jumbotron">
26 | 			<div class="container">
27 | 				<h1>Bootstrap for Web Design</h1>
28 | 				<h3>Lesson 1: Bootstrap Overview and Installation</h3>
29 | 			</div> <!-- end container -->
30 | 		</div> <!-- end jumbotron -->
31 | 
32 | 		<div class="container">
33 | 			<div class="row">
34 | 				<div class="col-sm-6 text-left">
35 | 				</div> <!-- end col-sm-6 -->
36 | 				<div class="col-sm-6 text-right">
37 | 					<a href="lesson-2.html">Next Lesson &rarr;</a>
38 | 				</div> <!-- end col-sm-6 -->
39 | 			</div> <!-- end row -->
40 | 
41 | 			<hr>
42 | 		</div> <!-- end container -->
43 | 	</header>
44 | 
45 | 	<div class="demo-area">
46 | 		<div class="container">
47 | 			<p>In this lesson I'll show you how to install Bootstrap.</p>
48 | 		</div> <!-- end container -->
49 | 	</div> <!-- end demo-area -->
50 | 
51 | 	<footer>
52 | 		<div class="container">
53 | 			<hr>
54 | 
55 | 			<p>
56 | 				<small>a <a href="https://tutsplus.com/">Tuts+</a> course by Adi Purdila</small>
57 | 			</p>
58 | 		</div> <!-- end container -->
59 | 	</footer>
60 | 
61 | 
62 | 
63 | 	<!-- Latest compiled and minified JavaScript -->
64 | 	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
65 | 	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>	
66 | 
67 | </body>
68 | </html>


--------------------------------------------------------------------------------
/lesson-10.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<title>Bootstrap for Web Design</title>
 7 | 	<meta name="description" content="A Tuts+ course">
 8 | 	<meta name="author" content="Adi Purdila">
 9 | 
10 | 	<!-- Mobile Specific Meta -->
11 | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
12 | 
13 | 	<!-- Latest compiled and minified CSS -->
14 | 	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
15 | 
16 | 	<!-- Optional theme -->
17 | 	<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> -->
18 | 
19 | 	<!-- Custom CSS -->
20 | 	<link rel="stylesheet" href="custom.css">
21 | </head>
22 | <body>
23 | 
24 | 	<header>
25 | 		<div class="jumbotron">
26 | 			<div class="container">
27 | 				<h1>Bootstrap for Web Design</h1>
28 | 				<h3>Lesson 10: Modal Windows</h3>
29 | 			</div> <!-- end container -->
30 | 		</div> <!-- end jumbotron -->
31 | 
32 | 		<div class="container">
33 | 			<div class="row">
34 | 				<div class="col-sm-6 text-left">
35 | 					<a href="lesson-9.html">&larr; Previous Lesson</a>
36 | 				</div> <!-- end col-sm-6 -->
37 | 				<div class="col-sm-6 text-right">
38 | 					<a href="lesson-11.html">Next Lesson &rarr;</a>
39 | 				</div> <!-- end col-sm-6 -->
40 | 			</div> <!-- end row -->
41 | 
42 | 			<hr>
43 | 		</div> <!-- end container -->
44 | 	</header>
45 | 
46 | 	<div class="demo-area">
47 | 		<div class="container">
48 | 			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-1">Demo modal</button>
49 | 
50 | 			<div class="modal fade" id="modal-1" tabindex="-1" role="dialog">
51 | 				<div class="modal-dialog">
52 | 					<div class="modal-content">
53 | 						<div class="modal-header">
54 | 							<button type="button" class="close" data-dismiss="modal">&times;</button>
55 | 							<h4 class="modal-title">Modal title</h4>
56 | 						</div>
57 | 
58 | 						<div class="modal-body">
59 | 							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo deserunt corporis esse qui. Eaque atque aliquam quisquam excepturi cum suscipit voluptatibus recusandae natus at sapiente! Ad beatae atque modi natus!
60 | 						</div>
61 | 
62 | 						<div class="modal-footer">
63 | 							<a href="#" class="btn btn-default" data-dismiss="modal">Close</a>
64 | 							<a href="" class="btn btn-primary">Save</a>
65 | 						</div>
66 | 					</div>
67 | 				</div>
68 | 			</div>
69 | 		</div>
70 | 	</div> <!-- end demo-area -->
71 | 
72 | 	<footer>
73 | 		<div class="container">
74 | 			<hr>
75 | 
76 | 			<p>
77 | 				<small>a <a href="https://tutsplus.com/">Tuts+</a> course by Adi Purdila</small>
78 | 			</p>
79 | 		</div> <!-- end container -->
80 | 	</footer>
81 | 
82 | 
83 | 
84 | 	<!-- Latest compiled and minified JavaScript -->
85 | 	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
86 | 	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>	
87 | 
88 | </body>
89 | </html>


--------------------------------------------------------------------------------
/lesson-11.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8">
  6 | 	<title>Bootstrap for Web Design</title>
  7 | 	<meta name="description" content="A Tuts+ course">
  8 | 	<meta name="author" content="Adi Purdila">
  9 | 
 10 | 	<!-- Mobile Specific Meta -->
 11 | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 12 | 
 13 | 	<!-- Latest compiled and minified CSS -->
 14 | 	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 15 | 
 16 | 	<!-- Optional theme -->
 17 | 	<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> -->
 18 | 
 19 | 	<!-- Custom CSS -->
 20 | 	<link rel="stylesheet" href="custom.css">
 21 | </head>
 22 | <body>
 23 | 
 24 | 	<header>
 25 | 		<div class="jumbotron">
 26 | 			<div class="container">
 27 | 				<h1>Bootstrap for Web Design</h1>
 28 | 				<h3>Lesson 11: Collapse and Carousels</h3>
 29 | 			</div> <!-- end container -->
 30 | 		</div> <!-- end jumbotron -->
 31 | 
 32 | 		<div class="container">
 33 | 			<div class="row">
 34 | 				<div class="col-sm-6 text-left">
 35 | 					<a href="lesson-10.html">&larr; Previous Lesson</a>
 36 | 				</div> <!-- end col-sm-6 -->
 37 | 				<div class="col-sm-6 text-right">
 38 | 					<a href="index.html">Exercise &rarr;</a>
 39 | 				</div> <!-- end col-sm-6 -->
 40 | 			</div> <!-- end row -->
 41 | 
 42 | 			<hr>
 43 | 		</div> <!-- end container -->
 44 | 	</header>
 45 | 
 46 | 	<div class="demo-area">
 47 | 		<div class="container">
 48 | 			<div class="panel-group" id="accordion">
 49 | 				<div class="panel panel-default">
 50 | 					<div class="panel-heading">
 51 | 						<h4 class="panel-title">
 52 | 							<a href="#content-1" data-toggle="collapse" data-parent="#accordion">Collapse 1</a>
 53 | 						</h4>
 54 | 					</div>
 55 | 					<div class="panel-collapse collapse in" id="content-1">
 56 | 						<div class="panel-body">
 57 | 							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, facilis, tempore, modi fugit minus libero recusandae laborum sed enim expedita reiciendis magni quisquam nihil vero molestias. Quasi ipsa culpa autem.</p>
 58 | 						</div>
 59 | 					</div>
 60 | 				</div>
 61 | 				<div class="panel panel-default">
 62 | 					<div class="panel-heading">
 63 | 						<h4 class="panel-title">
 64 | 							<a href="#content-2" data-toggle="collapse" data-parent="#accordion">Collapse 2</a>
 65 | 						</h4>
 66 | 					</div>
 67 | 					<div class="panel-collapse collapse" id="content-2">
 68 | 						<div class="panel-body">
 69 | 							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, facilis, tempore, modi fugit minus libero recusandae laborum sed enim expedita reiciendis magni quisquam nihil vero molestias. Quasi ipsa culpa autem.</p>
 70 | 						</div>
 71 | 					</div>
 72 | 				</div>
 73 | 				<div class="panel panel-default">
 74 | 					<div class="panel-heading">
 75 | 						<h4 class="panel-title">
 76 | 							<a href="#content-3" data-toggle="collapse" data-parent="#accordion">Collapse 3</a>
 77 | 						</h4>
 78 | 					</div>
 79 | 					<div class="panel-collapse collapse" id="content-3">
 80 | 						<div class="panel-body">
 81 | 							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, facilis, tempore, modi fugit minus libero recusandae laborum sed enim expedita reiciendis magni quisquam nihil vero molestias. Quasi ipsa culpa autem.</p>
 82 | 						</div>
 83 | 					</div>
 84 | 				</div>
 85 | 			</div>
 86 | 
 87 | 			<hr>
 88 | 
 89 | 			<div class="carousel slide" data-ride="carousel" id="carousel-example">
 90 | 				<ol class="carousel-indicators">
 91 | 					<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
 92 | 					<li data-target="#carousel-example" data-slide-to="1"></li>
 93 | 					<li data-target="#carousel-example" data-slide-to="2"></li>
 94 | 				</ol>
 95 | 
 96 | 				<div class="carousel-inner">
 97 | 					<div class="item active">
 98 | 						<img src="images/slider-1.jpg" alt="Slide">
 99 | 
100 | 						<div class="carousel-caption">
101 | 							<h3>This is a caption</h3>
102 | 							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, necessitatibus.</p>
103 | 						</div>
104 | 					</div>
105 | 					<div class="item">
106 | 						<img src="images/slider-2.jpg" alt="Slide">
107 | 
108 | 						<div class="carousel-caption">
109 | 							<h3>This is a caption</h3>
110 | 							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, necessitatibus.</p>
111 | 						</div>
112 | 					</div>
113 | 					<div class="item">
114 | 						<img src="images/slider-3.jpg" alt="Slide">
115 | 
116 | 						<div class="carousel-caption">
117 | 							<h3>This is a caption</h3>
118 | 							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, necessitatibus.</p>
119 | 						</div>
120 | 					</div>
121 | 				</div>
122 | 
123 | 				<a href="#carousel-example" class="left carousel-control" data-slide="prev">
124 | 					<span class="glyphicon glyphicon-chevron-left"></span>
125 | 				</a>
126 | 				<a href="#carousel-example" class="right carousel-control" data-slide="next">
127 | 					<span class="glyphicon glyphicon-chevron-right"></span>
128 | 				</a>
129 | 			</div>
130 | 		</div>
131 | 	</div> <!-- end demo-area -->
132 | 
133 | 	<footer>
134 | 		<div class="container">
135 | 			<hr>
136 | 
137 | 			<p>
138 | 				<small>a <a href="https://tutsplus.com/">Tuts+</a> course by Adi Purdila</small>
139 | 			</p>
140 | 		</div> <!-- end container -->
141 | 	</footer>
142 | 
143 | 
144 | 
145 | 	<!-- Latest compiled and minified JavaScript -->
146 | 	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
147 | 	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>	
148 | 
149 | </body>
150 | </html>


--------------------------------------------------------------------------------
/lesson-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<title>Bootstrap for Web Design</title>
 7 | 	<meta name="description" content="A Tuts+ course">
 8 | 	<meta name="author" content="Adi Purdila">
 9 | 
10 | 	<!-- Mobile Specific Meta -->
11 | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
12 | 
13 | 	<!-- Latest compiled and minified CSS -->
14 | 	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
15 | 
16 | 	<!-- Optional theme -->
17 | 	<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> -->
18 | 
19 | 	<!-- Custom CSS -->
20 | 	<link rel="stylesheet" href="custom.css">
21 | </head>
22 | <body>
23 | 
24 | 	<header>
25 | 		<div class="jumbotron">
26 | 			<div class="container">
27 | 				<h1>Bootstrap for Web Design</h1>
28 | 				<h3>Lesson 2: The Grid System</h3>
29 | 			</div> <!-- end container -->
30 | 		</div> <!-- end jumbotron -->
31 | 
32 | 		<div class="container">
33 | 			<div class="row">
34 | 				<div class="col-sm-6 text-left">
35 | 					<a href="lesson-1.html">&larr; Previous Lesson</a>
36 | 				</div> <!-- end col-sm-6 -->
37 | 				<div class="col-sm-6 text-right">
38 | 					<a href="lesson-3.html">Next Lesson &rarr;</a>
39 | 				</div> <!-- end col-sm-6 -->
40 | 			</div> <!-- end row -->
41 | 
42 | 			<hr>
43 | 		</div> <!-- end container -->
44 | 	</header>
45 | 
46 | 	<div class="demo-area">
47 | 		<div class="container">
48 | 			<div class="row">
49 | 				<div class="col-xs-2">First</div>
50 | 				<div class="col-xs-6">Second</div>
51 | 				<div class="col-xs-4">Third</div>
52 | 			</div>
53 | 
54 | 			<div class="row">
55 | 				<div class="col-lg-2 col-lg-offset-2">Test offset</div>
56 | 				<div class="col-lg-8">Test offset 2</div>
57 | 			</div>
58 | 
59 | 			<div class="row">
60 | 				<div class="col-lg-6">
61 | 					Level 1
62 | 					<div class="row">
63 | 						<div class="col-lg-3">Level 2</div>
64 | 						<div class="col-lg-9">Level 2</div>
65 | 					</div>
66 | 				</div>
67 | 				<div class="col-lg-6">Level 1</div>
68 | 			</div>
69 | 		</div>
70 | 	</div> <!-- end demo-area -->
71 | 
72 | 	<footer>
73 | 		<div class="container">
74 | 			<hr>
75 | 
76 | 			<p>
77 | 				<small>a <a href="https://tutsplus.com/">Tuts+</a> course by Adi Purdila</small>
78 | 			</p>
79 | 		</div> <!-- end container -->
80 | 	</footer>
81 | 
82 | 
83 | 
84 | 	<!-- Latest compiled and minified JavaScript -->
85 | 	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
86 | 	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>	
87 | 
88 | </body>
89 | </html>


--------------------------------------------------------------------------------
/lesson-3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8">
  6 | 	<title>Bootstrap for Web Design</title>
  7 | 	<meta name="description" content="A Tuts+ course">
  8 | 	<meta name="author" content="Adi Purdila">
  9 | 
 10 | 	<!-- Mobile Specific Meta -->
 11 | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 12 | 
 13 | 	<!-- Latest compiled and minified CSS -->
 14 | 	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 15 | 
 16 | 	<!-- Optional theme -->
 17 | 	<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> -->
 18 | 
 19 | 	<!-- Custom CSS -->
 20 | 	<link rel="stylesheet" href="custom.css">
 21 | </head>
 22 | <body>
 23 | 
 24 | 	<header>
 25 | 		<div class="jumbotron">
 26 | 			<div class="container">
 27 | 				<h1>Bootstrap for Web Design</h1>
 28 | 				<h3>Lesson 3: Button and Icons</h3>
 29 | 			</div> <!-- end container -->
 30 | 		</div> <!-- end jumbotron -->
 31 | 
 32 | 		<div class="container">
 33 | 			<div class="row">
 34 | 				<div class="col-sm-6 text-left">
 35 | 					<a href="lesson-2.html">&larr; Previous Lesson</a>
 36 | 				</div> <!-- end col-sm-6 -->
 37 | 				<div class="col-sm-6 text-right">
 38 | 					<a href="lesson-4.html">Next Lesson &rarr;</a>
 39 | 				</div> <!-- end col-sm-6 -->
 40 | 			</div> <!-- end row -->
 41 | 
 42 | 			<hr>
 43 | 		</div> <!-- end container -->
 44 | 	</header>
 45 | 
 46 | 	<div class="demo-area">
 47 | 		<div class="container">
 48 | 			<a href="" class="btn btn-default">A simple button</a>
 49 | 			<a href="" class="btn btn-primary">A simple button</a>
 50 | 			<a href="" class="btn btn-success">A simple button</a>
 51 | 			<a href="" class="btn btn-info">A simple button</a>
 52 | 			<a href="" class="btn btn-warning">A simple button</a>
 53 | 			<a href="" class="btn btn-danger">A simple button</a>
 54 | 			<a href="" class="btn btn-link">A simple button</a>
 55 | 
 56 | 			<hr>
 57 | 
 58 | 			<a href="" class="btn btn-primary">Buy it Now!</a>
 59 | 			<a href="" class="btn btn-link">Get free trial!</a>
 60 | 
 61 | 			<hr>
 62 | 
 63 | 			<a href="" class="btn btn-info btn-lg">Button</a>
 64 | 			<a href="" class="btn btn-info">Button</a>
 65 | 			<a href="" class="btn btn-info btn-sm">Button</a>
 66 | 			<a href="" class="btn btn-info btn-xs btn-block">Button</a>
 67 | 
 68 | 			<hr>
 69 | 
 70 | 			<button type="button" class="btn btn-default">Button</button>
 71 | 			<input type="submit" class="btn btn-primary" value="Input">
 72 | 
 73 | 			<hr>
 74 | 
 75 | 			<span class="glyphicon glyphicon-search" style="font-size: 5em; color: red;"></span>
 76 | 			<span class="glyphicon glyphicon-search"></span>
 77 | 			<span class="glyphicon glyphicon-search"></span>
 78 | 
 79 | 			<a href="" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-search"></span></a>
 80 | 		</div>
 81 | 	</div> <!-- end demo-area -->
 82 | 
 83 | 	<footer>
 84 | 		<div class="container">
 85 | 			<hr>
 86 | 
 87 | 			<p>
 88 | 				<small>a <a href="https://tutsplus.com/">Tuts+</a> course by Adi Purdila</small>
 89 | 			</p>
 90 | 		</div> <!-- end container -->
 91 | 	</footer>
 92 | 
 93 | 
 94 | 
 95 | 	<!-- Latest compiled and minified JavaScript -->
 96 | 	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 97 | 	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>	
 98 | 
 99 | </body>
100 | </html>


--------------------------------------------------------------------------------
/lesson-4.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8">
  6 | 	<title>Bootstrap for Web Design</title>
  7 | 	<meta name="description" content="A Tuts+ course">
  8 | 	<meta name="author" content="Adi Purdila">
  9 | 
 10 | 	<!-- Mobile Specific Meta -->
 11 | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 12 | 
 13 | 	<!-- Latest compiled and minified CSS -->
 14 | 	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 15 | 
 16 | 	<!-- Optional theme -->
 17 | 	<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> -->
 18 | 
 19 | 	<!-- Custom CSS -->
 20 | 	<link rel="stylesheet" href="custom.css">
 21 | </head>
 22 | <body>
 23 | 
 24 | 	<header>
 25 | 		<div class="jumbotron">
 26 | 			<div class="container">
 27 | 				<h1>Bootstrap for Web Design</h1>
 28 | 				<h3>Lesson 4: Form Controls</h3>
 29 | 			</div> <!-- end container -->
 30 | 		</div> <!-- end jumbotron -->
 31 | 
 32 | 		<div class="container">
 33 | 			<div class="row">
 34 | 				<div class="col-sm-6 text-left">
 35 | 					<a href="lesson-3.html">&larr; Previous Lesson</a>
 36 | 				</div> <!-- end col-sm-6 -->
 37 | 				<div class="col-sm-6 text-right">
 38 | 					<a href="lesson-5.html">Next Lesson &rarr;</a>
 39 | 				</div> <!-- end col-sm-6 -->
 40 | 			</div> <!-- end row -->
 41 | 
 42 | 			<hr>
 43 | 		</div> <!-- end container -->
 44 | 	</header>
 45 | 
 46 | 	<div>
 47 | 		<div class="container">
 48 | 			<form action="" role="form">
 49 | 				<div class="form-group has-warning has-feedback">
 50 | 					<label for="form-elem-1" class="control-label">This is a label</label>
 51 | 					<input type="text" id="form-elem-1" class="form-control">
 52 | 					<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 53 | 				</div>
 54 | 				<div class="form-group has-error has-feedback">
 55 | 					<label for="form-elem-2" class="control-label">This is a label</label>
 56 | 					<input type="text" id="form-elem-2" class="form-control">
 57 | 					<p class="help-block">This is an example help text.</p>
 58 | 					<span class="glyphicon glyphicon-remove form-control-feedback"></span>
 59 | 				</div>
 60 | 				<div class="form-group has-success has-feedback">
 61 | 					<label for="form-elem-5" class="control-label">This is a label</label>
 62 | 					<input type="text" id="form-elem-5" class="form-control">
 63 | 					<p class="help-block">This is an example help text.</p>
 64 | 					<span class="glyphicon glyphicon-ok form-control-feedback"></span>
 65 | 				</div>
 66 | 			</form>
 67 | 
 68 | 			<hr>
 69 | 
 70 | 			<form action="" role="form" class="form-inline">
 71 | 				<div class="form-group">
 72 | 					<label for="form-elem-3" class="sr-only">This is a label</label>
 73 | 					<input type="text" id="form-elem-3" class="form-control input-lg" placeholder="Enter email">
 74 | 				</div>
 75 | 				<div class="form-group">
 76 | 					<label for="form-elem-4" class="sr-only">This is a label</label>
 77 | 					<input type="password" id="form-elem-4" class="form-control input-sm" placeholder="Password">
 78 | 				</div>
 79 | 
 80 | 				<div class="checkbox">
 81 | 					<label for=""><input type="checkbox"> Remember me</label>
 82 | 				</div>
 83 | 
 84 | 				<button type="submit" class="btn btn-default">Sign in</button>
 85 | 			</form>
 86 | 
 87 | 			<hr>
 88 | 
 89 | 			<form action="" role="form">
 90 | 				<div class="row">
 91 | 					<div class="col-lg-2">
 92 | 						<input type="text" class="form-control" placeholder=".col-lg-2">
 93 | 					</div>
 94 | 					<div class="col-lg-3">
 95 | 						<input type="text" class="form-control" placeholder=".col-lg-3">
 96 | 					</div>
 97 | 					<div class="col-lg-7">
 98 | 						<input type="text" class="form-control" placeholder=".col-lg-7">
 99 | 					</div>
100 | 				</div>
101 | 			</form>
102 | 		</div>
103 | 	</div> <!-- end demo-area -->
104 | 
105 | 	<footer>
106 | 		<div class="container">
107 | 			<hr>
108 | 
109 | 			<p>
110 | 				<small>a <a href="https://tutsplus.com/">Tuts+</a> course by Adi Purdila</small>
111 | 			</p>
112 | 		</div> <!-- end container -->
113 | 	</footer>
114 | 
115 | 
116 | 
117 | 	<!-- Latest compiled and minified JavaScript -->
118 | 	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
119 | 	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>	
120 | 
121 | </body>
122 | </html>


--------------------------------------------------------------------------------
/lesson-5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<title>Bootstrap for Web Design</title>
 7 | 	<meta name="description" content="A Tuts+ course">
 8 | 	<meta name="author" content="Adi Purdila">
 9 | 
10 | 	<!-- Mobile Specific Meta -->
11 | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
12 | 
13 | 	<!-- Latest compiled and minified CSS -->
14 | 	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
15 | 
16 | 	<!-- Optional theme -->
17 | 	<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> -->
18 | 
19 | 	<!-- Custom CSS -->
20 | 	<link rel="stylesheet" href="custom.css">
21 | </head>
22 | <body>
23 | 
24 | 	<header>
25 | 		<div class="jumbotron">
26 | 			<div class="container">
27 | 				<h1>Bootstrap for Web Design</h1>
28 | 				<h3>Lesson 5: Dropdowns</h3>
29 | 			</div> <!-- end container -->
30 | 		</div> <!-- end jumbotron -->
31 | 
32 | 		<div class="container">
33 | 			<div class="row">
34 | 				<div class="col-sm-6 text-left">
35 | 					<a href="lesson-4.html">&larr; Previous Lesson</a>
36 | 				</div> <!-- end col-sm-6 -->
37 | 				<div class="col-sm-6 text-right">
38 | 					<a href="lesson-6.html">Next Lesson &rarr;</a>
39 | 				</div> <!-- end col-sm-6 -->
40 | 			</div> <!-- end row -->
41 | 
42 | 			<hr>
43 | 		</div> <!-- end container -->
44 | 	</header>
45 | 
46 | 	<div class="demo-area">
47 | 		<div class="container">
48 | 			<div class="dropdown">
49 | 				<button class="btn btn-primary dropdown-toggle" type="button" id="dd-menu" data-toggle="dropdown">
50 | 					Dropdown <span class="caret"></span>
51 | 				</button>
52 | 
53 | 				<ul class="dropdown-menu" role="menu">
54 | 					<li role="presentation" class="dropdown-header">A header</li>
55 | 					<li role="presentation" class="disabled"><a href="#" role="menuitem" tabindex="-1">List item</a></li>
56 | 					<li role="presentation"><a href="#" role="menuitem" tabindex="-1">List item</a></li>
57 | 					<li role="presentation"><a href="#" role="menuitem" tabindex="-1">List item</a></li>
58 | 					<li role="presentation" class="divider"></li>
59 | 					<li role="presentation" class="dropdown-header">Another header</li>
60 | 					<li role="presentation"><a href="#" role="menuitem" tabindex="-1">List item</a></li>
61 | 				</ul>
62 | 			</div>
63 | 		</div>
64 | 	</div> <!-- end demo-area -->
65 | 
66 | 	<footer>
67 | 		<div class="container">
68 | 			<hr>
69 | 
70 | 			<p>
71 | 				<small>a <a href="https://tutsplus.com/">Tuts+</a> course by Adi Purdila</small>
72 | 			</p>
73 | 		</div> <!-- end container -->
74 | 	</footer>
75 | 
76 | 
77 | 
78 | 	<!-- Latest compiled and minified JavaScript -->
79 | 	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
80 | 	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>	
81 | 
82 | </body>
83 | </html>


--------------------------------------------------------------------------------
/lesson-6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<title>Bootstrap for Web Design</title>
 7 | 	<meta name="description" content="A Tuts+ course">
 8 | 	<meta name="author" content="Adi Purdila">
 9 | 
10 | 	<!-- Mobile Specific Meta -->
11 | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
12 | 
13 | 	<!-- Latest compiled and minified CSS -->
14 | 	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
15 | 
16 | 	<!-- Optional theme -->
17 | 	<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> -->
18 | 
19 | 	<!-- Custom CSS -->
20 | 	<link rel="stylesheet" href="custom.css">
21 | </head>
22 | <body>
23 | 
24 | 	<header>
25 | 		<div class="jumbotron">
26 | 			<div class="container">
27 | 				<h1>Bootstrap for Web Design</h1>
28 | 				<h3>Lesson 6: Tabs</h3>
29 | 			</div> <!-- end container -->
30 | 		</div> <!-- end jumbotron -->
31 | 
32 | 		<div class="container">
33 | 			<div class="row">
34 | 				<div class="col-sm-6 text-left">
35 | 					<a href="lesson-5.html">&larr; Previous Lesson</a>
36 | 				</div> <!-- end col-sm-6 -->
37 | 				<div class="col-sm-6 text-right">
38 | 					<a href="lesson-7.html">Next Lesson &rarr;</a>
39 | 				</div> <!-- end col-sm-6 -->
40 | 			</div> <!-- end row -->
41 | 
42 | 			<hr>
43 | 		</div> <!-- end container -->
44 | 	</header>
45 | 
46 | 	<div class="demo-area">
47 | 		<div class="container">
48 | 			<ul class="nav nav-pills nav-justified">
49 | 				<li class="active"><a href="#section-1" data-toggle="tab">Section 1</a></li>
50 | 				<li><a href="#section-2" data-toggle="tab">Section 2</a></li>
51 | 				<li><a href="#section-3" data-toggle="tab">Section 3</a></li>
52 | 			</ul>
53 | 
54 | 			<div class="tab-content">
55 | 				<div class="tab-pane fade in active" id="section-1">
56 | 					<p>This is section 1 content</p>
57 | 				</div>
58 | 				<div class="tab-pane fade" id="section-2">
59 | 					<p>This is section 2 content</p>
60 | 				</div>
61 | 				<div class="tab-pane fade" id="section-3">
62 | 					<p>This is section 3 content</p>
63 | 				</div>
64 | 			</div>
65 | 		</div>
66 | 	</div> <!-- end demo-area -->
67 | 
68 | 	<footer>
69 | 		<div class="container">
70 | 			<hr>
71 | 
72 | 			<p>
73 | 				<small>a <a href="https://tutsplus.com/">Tuts+</a> course by Adi Purdila</small>
74 | 			</p>
75 | 		</div> <!-- end container -->
76 | 	</footer>
77 | 
78 | 
79 | 
80 | 	<!-- Latest compiled and minified JavaScript -->
81 | 	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
82 | 	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>	
83 | 
84 | </body>
85 | </html>


--------------------------------------------------------------------------------
/lesson-7.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8">
  6 | 	<title>Bootstrap for Web Design</title>
  7 | 	<meta name="description" content="A Tuts+ course">
  8 | 	<meta name="author" content="Adi Purdila">
  9 | 
 10 | 	<!-- Mobile Specific Meta -->
 11 | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 12 | 
 13 | 	<!-- Latest compiled and minified CSS -->
 14 | 	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 15 | 
 16 | 	<!-- Optional theme -->
 17 | 	<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> -->
 18 | 
 19 | 	<!-- Custom CSS -->
 20 | 	<link rel="stylesheet" href="custom.css">
 21 | </head>
 22 | <body>
 23 | 
 24 | 	<header>
 25 | 		<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
 26 | 			<div class="container">
 27 | 				<div class="navbar-header">
 28 | 					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-nav-collapse">
 29 | 						<span class="sr-only">Toggle navigation</span>
 30 | 						<span class="icon-bar"></span>
 31 | 						<span class="icon-bar"></span>
 32 | 						<span class="icon-bar"></span>
 33 | 					</button>
 34 | 					<a href="#" class="navbar-brand">Brand</a>
 35 | 				</div>
 36 | 
 37 | 				<div class="collapse navbar-collapse" id="example-nav-collapse">
 38 | 					<ul class="nav navbar-nav">
 39 | 						<li class="active"><a href="#">Link 1</a></li>
 40 | 						<li><a href="#">Link 2</a></li>
 41 | 					</ul>
 42 | 
 43 | 					<a href="#" class="btn btn-default navbar-btn">This is a button</a>
 44 | 
 45 | 					<p class="navbar-text">Hello!</p>
 46 | 
 47 | 					<form action="" class="navbar-form navbar-right" role="search">
 48 | 						<div class="form-group">
 49 | 							<input type="text" class="form-control" placeholder="Search">
 50 | 						</div>
 51 | 						<button type="submit" class="btn btn-default">Submit</button>
 52 | 					</form>
 53 | 				</div>
 54 | 			</div>	
 55 | 		</nav>
 56 | 
 57 | 		<div class="jumbotron">
 58 | 			<div class="container">
 59 | 				<h1>Bootstrap for Web Design</h1>
 60 | 				<h3>Lesson 7: The Navbar</h3>
 61 | 			</div> <!-- end container -->
 62 | 		</div> <!-- end jumbotron -->
 63 | 
 64 | 		<div class="container">
 65 | 			<div class="row">
 66 | 				<div class="col-sm-6 text-left">
 67 | 					<a href="lesson-6.html">&larr; Previous Lesson</a>
 68 | 				</div> <!-- end col-sm-6 -->
 69 | 				<div class="col-sm-6 text-right">
 70 | 					<a href="lesson-8.html">Next Lesson &rarr;</a>
 71 | 				</div> <!-- end col-sm-6 -->
 72 | 			</div> <!-- end row -->
 73 | 
 74 | 			<hr>
 75 | 		</div> <!-- end container -->
 76 | 	</header>
 77 | 
 78 | 	<div class="demo-area">
 79 | 		<div class="container">
 80 | 			<p>
 81 | 				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, delectus, sequi dolores totam laboriosam neque perspiciatis laborum modi voluptates ipsam fuga praesentium doloremque. Ex, harum labore dolorem ullam consequatur odit.
 82 | 			</p>
 83 | 			<p>
 84 | 				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, delectus, sequi dolores totam laboriosam neque perspiciatis laborum modi voluptates ipsam fuga praesentium doloremque. Ex, harum labore dolorem ullam consequatur odit.
 85 | 			</p>
 86 | 			<p>
 87 | 				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, delectus, sequi dolores totam laboriosam neque perspiciatis laborum modi voluptates ipsam fuga praesentium doloremque. Ex, harum labore dolorem ullam consequatur odit.
 88 | 			</p>
 89 | 			<p>
 90 | 				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, delectus, sequi dolores totam laboriosam neque perspiciatis laborum modi voluptates ipsam fuga praesentium doloremque. Ex, harum labore dolorem ullam consequatur odit.
 91 | 			</p>
 92 | 			<p>
 93 | 				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, delectus, sequi dolores totam laboriosam neque perspiciatis laborum modi voluptates ipsam fuga praesentium doloremque. Ex, harum labore dolorem ullam consequatur odit.
 94 | 			</p>
 95 | 			<p>
 96 | 				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, delectus, sequi dolores totam laboriosam neque perspiciatis laborum modi voluptates ipsam fuga praesentium doloremque. Ex, harum labore dolorem ullam consequatur odit.
 97 | 			</p>
 98 | 		</div>
 99 | 	</div> <!-- end demo-area -->
100 | 
101 | 	<footer>
102 | 		<div class="container">
103 | 			<hr>
104 | 
105 | 			<p>
106 | 				<small>a <a href="https://tutsplus.com/">Tuts+</a> course by Adi Purdila</small>
107 | 			</p>
108 | 		</div> <!-- end container -->
109 | 	</footer>
110 | 
111 | 
112 | 
113 | 	<!-- Latest compiled and minified JavaScript -->
114 | 	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
115 | 	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>	
116 | 
117 | </body>
118 | </html>


--------------------------------------------------------------------------------
/lesson-8.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8">
  6 | 	<title>Bootstrap for Web Design</title>
  7 | 	<meta name="description" content="A Tuts+ course">
  8 | 	<meta name="author" content="Adi Purdila">
  9 | 
 10 | 	<!-- Mobile Specific Meta -->
 11 | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 12 | 
 13 | 	<!-- Latest compiled and minified CSS -->
 14 | 	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 15 | 
 16 | 	<!-- Optional theme -->
 17 | 	<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> -->
 18 | 
 19 | 	<!-- Custom CSS -->
 20 | 	<link rel="stylesheet" href="custom.css">
 21 | </head>
 22 | <body>
 23 | 
 24 | 	<header>
 25 | 		<div class="jumbotron">
 26 | 			<div class="container">
 27 | 				<h1>Bootstrap for Web Design</h1>
 28 | 				<h3>Lesson 8: List Groups</h3>
 29 | 			</div> <!-- end container -->
 30 | 		</div> <!-- end jumbotron -->
 31 | 
 32 | 		<div class="container">
 33 | 			<div class="row">
 34 | 				<div class="col-sm-6 text-left">
 35 | 					<a href="lesson-7.html">&larr; Previous Lesson</a>
 36 | 				</div> <!-- end col-sm-6 -->
 37 | 				<div class="col-sm-6 text-right">
 38 | 					<a href="lesson-9.html">Next Lesson &rarr;</a>
 39 | 				</div> <!-- end col-sm-6 -->
 40 | 			</div> <!-- end row -->
 41 | 
 42 | 			<hr>
 43 | 		</div> <!-- end container -->
 44 | 	</header>
 45 | 
 46 | 	<div class="demo-area">
 47 | 		<div class="container">
 48 | 			<ul class="list-group">
 49 | 				<li class="list-group-item">Some content goes here<span class="badge">1</span></li>
 50 | 				<li class="list-group-item">Some content goes here<span class="badge">2</span></li>
 51 | 				<li class="list-group-item">Some content goes here<span class="badge">3</span></li>
 52 | 				<li class="list-group-item">Some content goes here<span class="badge">4</span></li>
 53 | 			</ul>
 54 | 
 55 | 			<hr>
 56 | 
 57 | 			<div class="list-group">
 58 | 				<a href="" class="list-group-item active">Item 1</a>
 59 | 				<a href="" class="list-group-item">Item 2</a>
 60 | 				<a href="" class="list-group-item">Item 3</a>
 61 | 				<a href="" class="list-group-item">Item 4</a>
 62 | 			</div>
 63 | 
 64 | 			<div class="list-group">
 65 | 				<a href="" class="list-group-item list-group-item-success">Item 1</a>
 66 | 				<a href="" class="list-group-item list-group-item-info">Item 2</a>
 67 | 				<a href="" class="list-group-item list-group-item-warning">Item 3</a>
 68 | 				<a href="" class="list-group-item list-group-item-danger">Item 4</a>
 69 | 			</div>
 70 | 
 71 | 			<hr>
 72 | 
 73 | 			<div class="list-group">
 74 | 				<a href="" class="list-group-item active">
 75 | 					<h4 class="list-group-item-heading">This is a heading</h4>
 76 | 					<p class="list-group-item-text">This is the content.</p>
 77 | 				</a>
 78 | 				<a href="" class="list-group-item">
 79 | 					<h4 class="list-group-item-heading">This is a heading</h4>
 80 | 					<p class="list-group-item-text">This is the content.</p>
 81 | 				</a>
 82 | 				<a href="" class="list-group-item">
 83 | 					<h4 class="list-group-item-heading">This is a heading</h4>
 84 | 					<p class="list-group-item-text">This is the content.</p>
 85 | 				</a>
 86 | 				<a href="" class="list-group-item">
 87 | 					<h4 class="list-group-item-heading">This is a heading</h4>
 88 | 					<p class="list-group-item-text">This is the content.</p>
 89 | 				</a>
 90 | 			</div>
 91 | 		</div>
 92 | 	</div> <!-- end demo-area -->
 93 | 
 94 | 	<footer>
 95 | 		<div class="container">
 96 | 			<hr>
 97 | 
 98 | 			<p>
 99 | 				<small>a <a href="https://tutsplus.com/">Tuts+</a> course by Adi Purdila</small>
100 | 			</p>
101 | 		</div> <!-- end container -->
102 | 	</footer>
103 | 
104 | 
105 | 
106 | 	<!-- Latest compiled and minified JavaScript -->
107 | 	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
108 | 	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>	
109 | 
110 | </body>
111 | </html>


--------------------------------------------------------------------------------
/lesson-9.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8">
  6 | 	<title>Bootstrap for Web Design</title>
  7 | 	<meta name="description" content="A Tuts+ course">
  8 | 	<meta name="author" content="Adi Purdila">
  9 | 
 10 | 	<!-- Mobile Specific Meta -->
 11 | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 12 | 
 13 | 	<!-- Latest compiled and minified CSS -->
 14 | 	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 15 | 
 16 | 	<!-- Optional theme -->
 17 | 	<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> -->
 18 | 
 19 | 	<!-- Custom CSS -->
 20 | 	<link rel="stylesheet" href="custom.css">
 21 | </head>
 22 | <body>
 23 | 
 24 | 	<header>
 25 | 		<div class="jumbotron">
 26 | 			<div class="container">
 27 | 				<h1>Bootstrap for Web Design</h1>
 28 | 				<h3>Lesson 9: Panels</h3>
 29 | 			</div> <!-- end container -->
 30 | 		</div> <!-- end jumbotron -->
 31 | 
 32 | 		<div class="container">
 33 | 			<div class="row">
 34 | 				<div class="col-sm-6 text-left">
 35 | 					<a href="lesson-8.html">&larr; Previous Lesson</a>
 36 | 				</div> <!-- end col-sm-6 -->
 37 | 				<div class="col-sm-6 text-right">
 38 | 					<a href="lesson-10.html">Next Lesson &rarr;</a>
 39 | 				</div> <!-- end col-sm-6 -->
 40 | 			</div> <!-- end row -->
 41 | 
 42 | 			<hr>
 43 | 		</div> <!-- end container -->
 44 | 	</header>
 45 | 
 46 | 	<div class="demo-area">
 47 | 		<div class="container">
 48 | 			<div class="panel panel-default panel-danger">
 49 | 				<div class="panel-heading"><h4 class="panel-title">This is a panel heading</h4></div>
 50 | 			
 51 | 				<table class="table">
 52 | 					<tr>
 53 | 						<th>Heading 1</th>
 54 | 						<th>Heading 1</th>
 55 | 						<th>Heading 1</th>
 56 | 					</tr>
 57 | 					<tr>
 58 | 						<td>Cell 1</td>
 59 | 						<td>Cell 2</td>
 60 | 						<td>Cell 3</td>
 61 | 					</tr>
 62 | 					<tr>
 63 | 						<td>Cell 1</td>
 64 | 						<td>Cell 2</td>
 65 | 						<td>Cell 3</td>
 66 | 					</tr>
 67 | 					<tr>
 68 | 						<td>Cell 1</td>
 69 | 						<td>Cell 2</td>
 70 | 						<td>Cell 3</td>
 71 | 					</tr>
 72 | 				</table>
 73 | 
 74 | 				<div class="panel-footer">Panel footer</div>
 75 | 			</div>
 76 | 
 77 | 			<hr>
 78 | 
 79 | 			<div class="panel panel-default panel-danger">
 80 | 				<div class="panel-heading"><h4 class="panel-title">This is a panel heading</h4></div>
 81 | 
 82 | 				<div class="panel-body">
 83 | 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, provident cumque exercitationem optio molestiae. Officia iusto incidunt asperiores reprehenderit ad.</p>
 84 | 				</div>
 85 | 			
 86 | 				<ul class="list-group">
 87 | 					<li class="list-group-item">List item 1</li>
 88 | 					<li class="list-group-item">List item 2</li>
 89 | 					<li class="list-group-item">List item 3</li>
 90 | 					<li class="list-group-item">List item 4</li>
 91 | 				</ul>
 92 | 
 93 | 				<div class="panel-footer">Panel footer</div>
 94 | 			</div>
 95 | 		</div>
 96 | 	</div> <!-- end demo-area -->
 97 | 
 98 | 	<footer>
 99 | 		<div class="container">
100 | 			<hr>
101 | 
102 | 			<p>
103 | 				<small>a <a href="https://tutsplus.com/">Tuts+</a> course by Adi Purdila</small>
104 | 			</p>
105 | 		</div> <!-- end container -->
106 | 	</footer>
107 | 
108 | 
109 | 
110 | 	<!-- Latest compiled and minified JavaScript -->
111 | 	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
112 | 	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>	
113 | 
114 | </body>
115 | </html>


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | 
2 | ###Bootstrap for Web Designers
3 | 
4 | ####Instructor: Adi Purdila
5 | 
6 | Twitter's Bootstrap is an excellent set of carefully crafted user interface elements, layouts and JavaScript tools, easily available to use in your next web design project. In this course you'll learn everything you need to know in order to get started with Bootstrap.
7 | 
8 | Source files for Tuts+ course: [Bootstrap 3 for Web Design](https://webdesign.tutsplus.com/courses/bootstrap-3-for-web-design)


--------------------------------------------------------------------------------