Bootstrap3 UI parts
UI parts list
Text
text-left, text-center, text-right
<div class="text-right"><a href="#">Right</a></div>
Button
Add btn class in your input, or button tag.
<input type="submit" value="OK" class="btn"> <input type="reset" value="Reset" class="btn"> <button class="btn">Delete</button>
Other button classes
- btn-default
- btn-primary
- btn-success
- btn-info
- btn-warning
- btn-danger
Size
- btn-xs
- btn-sm
- btn-lg
- btn-block
Page Header
Add page-header class in an element.
<h1 class="page-header">Title</h1>
Under line is added under an element.
Panel
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
<h1 class="panel-title">Title</h1>
</div>
<div class="panel-body">
Body
</div>
<div class="panel-footer">
Footer
</div>
</div>
</div>
Sign-in like with panel
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">Signin</h1>
</div>
<div class="panel-body">
<form>
<div class-"form-group">
<label for="username">Name</label>
<input type="text" class="form-control" id="username">
</div>
<div class-"form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<br>
<button type="submit" class="btn btn-default">Sign in</button
</form>
</div>
</div>
Well
Well is rect round sheet with color.
Use well class in div.
<div class="container"> <div class="well">Well</div> <div class="well well-lg">Large</div> <div class="well well-sm">Small</div> </div>
Badge
Add badge class to span
<li class="list-group-item"><span class="badge">10</span>A</li>
Progressbar
<div class="progress">
<div class="progress-bar"
role="progressbar"
aria-voluenow="70"
aria-voluemin="0"
aria-voluemax="100"
style="width:70%">
Label
</div>
</div>
Color
- progress-bar-success
- progress-bar-info
- progress-bar-warning
- progress-bar-danger
stripe
progress-striped
animation
Add progress-striped and active