<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-1"> <p> <!-- Standard button --> <button type="button" class="btn btn-default">Default</button> </p> <p> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">Primary</button> </p> <p> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">Success</button> </p> <p> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">Info</button> </p> <p> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">Warning</button> </p> <p> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">Danger</button> </p> <p> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">Link</button> </p> </div> <div class="col-md-10 bigger"> <p> btn btn-default </p> <p> btn btn-primary </p> <p> btn btn-success </p> <p> btn btn-info </p> <p> btn btn-warning </p> <p> btn btn-danger </p> <p> btn btn-link </p> </div> </div> </div>

body{ padding-top: 50px; } .bigger p { padding-top: 13px; }