Bootstrap (Basics)

<!-- ***** The grid --> The grid layout is divided into rows <div class="row"></div> and one or multiple columns (max: 12). Since the grid is mobile-first, having the class <div class="col-xs-6"></div> on a column will target all devices unless a bigger device class is added <div class="col-md-9"></div> <!-- ***** The container --> The container element usually wraps either the entire page or sections of the page. It also add some padding so that the content does not touch the border of the browser window. <!-- ***** Offset --> Sometimes you need more space between your columns, the way to achieve that is with the offset class <div class="col-lg-offset-1"></div> Things to remember when using the offset class: 1. The number of offsets together with the column number should equal 12 2. The offset is always added to the left. <!-- ***** Change column order --> You can change the column order (right column first, left column follows) (useful on mobile devices where you want the main content first) by using the pull and push classes Example: <div class="col-lg-push-3"></div> will push the left column to the right <div class="col-lg-pull-9"></div> will pull the right column to the left. <!-- ***** Visibility --> You can set visibility according to device width <div class="visible-lg"></div> : Large (min-width 1200px) <div class="visible-md"></div> : Medium (min-width 992px) <div class="visible-sm"></div> : Small (min-width 768px) <div class="visible-xs"></div> : Extra small (Less than 768px) The same way, you can also have hidden classes. <div class="hidden-xs"></div> for example will hide the element on phone screens. <!-- ***** Formatting Easily change background colors, use text-muted, text-primary, etc to change text color. --> <p class="bg-primary">...</p> <p class="bg-success">...</p> <p class="bg-info">...</p> <p class="bg-warning">...</p> <p class="bg-danger">...</p> <!-- Use <small> in h tags for secondary content --> <h2>Title <small>Secondary text</small></h2> <!-- *** Use class="lead" in the first paragraph to make that paragraph bigger. *** <s>No longer valid line</s> *** <u>Underlined text</u> *** <small>This line of text is meant to be treated as fine print.</small> *** <strong>rendered as bold text</strong> *** <em>rendered as italicized text</em> *** There also some self-explained classes you can use for text formatting: text-left, text-center, text-right, text-justify, text-nowrap, text-lowercase, text-uppercase, text-capitalize *** Blockquotes. Easily create blockquotes or reverse blockquotes (right aligned) --> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> <blockquote class="blockquote-reverse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> <!-- ***** Align images to content --> Use the class <img class="pull-right" /> or <img class="pull-left" /> to align images to content. <!-- ***** Thumbnail --> <div class="thumbnail"></div> or <img class="thumbnail" /> Creates a box with grey border, padding and rounded borders <!-- ***** Breadcrumps --> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Category</a></li> <li class="active">Page</li> </ol> <!-- ***** Glyphicons --> <span class="glyphicon glyphicon-heart"></span> Love <!-- ***** Caret (Small triangle that indicates a dropdown) --> Caret <span class="caret"></span> <!-- ***** Tooltip --> <a href="#" data-toggle="tooltip" data-original-title="Tooltip content">Link</a> <script> $("[data-toggle='tooltip']").tooltip({ animation: true }); </script> <!-- ***** Buttons --> <a href="#" class="btn">Go</a> <!-- Text only --> <a href="#" class="btn btn-primary">Go</a> <!-- Primary button --> <a href="#" class="btn btn-warning btn-lg">Go</a> <!-- Large --> <a href="#" class="btn btn-success btn-xs">Go</a> <!-- Small --> <a href="#" class="btn btn-danger btn-block">Go</a> <!-- Full width --> <!-- Buttons with glyphicons --> <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button> <!-- ***** The jumbotron --> <div class="jumbotron"> The is a big full width hero area! </div> <!-- ***** Tables --> <div class="table-responsive"><!-- Adds a scrollbar if width is not enough --> <table class="table table-striped table-hover"> <thead> <tr> <th>Title 1</th> <th>Title 2</th> <th>Title 3</th> </tr> </thead> <tbody> <tr> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> </tr> </tbody> </table> </div> <!-- table-striped adds a slightly darker background to the odd row. table-hover changes row background color on mouse over <tr> can have other background classes like active, success, success etc --> <!-- ************************************* Navigation --> <!-- ***** Horizontal menu --> <div class="row"> <!-- navbar-fixed-top : Full width, sticks on top navbar-inverse : Black menubar instead of white --> <nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> <div class="navbar-header"> <!-- data-toggle="collapse" data-target="#collapse" is what triggers the menu on mobile devices, you can add them to navbar-header to make the whole bar clickable --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> <span class="sr-only">Toggle navigation</span><!-- For screen readers --> <!-- <span class="glyphicon glyphicon-arrow-down"></span> MENU Use the line above if you don't like the 3 line icon --> <span class="icon-bar"></span><!-- Known as the hamburger icon --> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li class="dropdown"><a href="#" data-toggle="dropdown">About <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">About 1</a></li> <li><a href="#">About 2</a></li> <li><a href="#">About 3</a></li> </ul> </li> <li class="active"><a href="#">Services</a></li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </div> <!-- ***** Vertical menu --> <aside> <h3>Services</h3> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Service 1</a></li> <li><a href="#">Service 2</a></li> <li><a href="#">Service 3</a></li> </ul> </aside> <!-- ***** Tabbed menu --> <!-- Tab buttons --> <ul class="nav nav-tabs"> <li><a href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star"></span> Tab 1</a></li> <li><a href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-star"></span> Tab 2</a></li> <li><a href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-star"></span> Tab 3</a></li> <li><a href="#tab4" data-toggle="tab"><span class="glyphicon glyphicon-star"></span> Tab 4</a></li> </ul> <!-- Tab content --> <div class="tab-pane fade active" id="tab1"> <p>Content 1</p> </div> <div class="tab-pane fade" id="tab2"> <p>Content 2</p> </div> <div class="tab-pane fade" id="tab3"> <p>Content 3</p> </div> <div class="tab-pane fade" id="tab4"> <p>Content 4</p> </div> <script> $(function () { // Show first tab on load $(".nav-tabs a:first").tab("show"); }); </script>