Web Design Course - Lecture 19 - Bootstrap, Form, Button, Image, Helper class, Responsive

1. WEB DESIGN

2. WEB DESIGN
FORM1
2 BUTTON2
IMAGE3
2 HELPER CLASS4
2 RESPONSIVE5

3. Form
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

4. Form Inline
<form class="form-inline">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

5. BUTTON
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

6. IMAGES
.img-responsive
.img-rounded
.img-circle
.img-thumbnail
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque
Terre" width="304" height="236">
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"
width="304" height="236">
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque
Terre" width="304" height="236">

7. HELPER CLASS
TEXT:
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
Background:
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger

8. HELPER CLASS
.pull-left
.pull-right
.center-block
.clearfix
.show
.hidden
.text-hide
.close
.caret

9. RESPONSIVE
Visible:
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg
Hidden:
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

10. THANK YOU