Bootstrap Pagination

Basic Pagination If you have a web site with lots of pages, you may wish to add some sort of pagination to each page. A basic pagination in Bootstrap looks like this: 1 2 3 4 5 To create a basic pagination, add the .pagination class to an <ul> element: Example <ul class=”pagination”> <li><a href=”#”>1</a></li> …

Bootstrap Progress Bars

Basic Progress Bar A progress bar can be used to show a user how far along he/she is in a process. Bootstrap provides several types of progress bars. A default progress bar in Bootstrap looks like this: 70% Complete To create a default progress bar, add a .progress class to a <div> element: Example <div …

Bootstrap Badges and Labels

Badges Badges are numerical indicators of how many items are associated with a link: News 5 Comments 10 Updates 2 The numbers (5, 10, and 2) are the badges. Use the .badge class within <span> elements to create badges: Example <a href=”#”>News <span class=”badge”>5</span></a><br> <a href=”#”>Comments <span class=”badge”>10</span></a><br> <a href=”#”>Updates <span class=”badge”>2</span></a>   Badges can …

Bootstrap Glyphicons

Glyphicons Bootstrap provides 260 glyphicons from the Glyphicons Halflings set. Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc. Here are some examples of glyphicons: Envelope glyphicon: Print glyphicon: Search glyphicon: Download glyphicon: Glyphicon Syntax A glyphicon is inserted with the following syntax: <span class=”glyphicon glyphicon-name“></span> The name part in the syntax above …

Bootstrap Buttons

Button Styles Bootstrap provides seven styles of buttons: Default Primary Success Info Warning Danger Link To achieve the button styles above, Bootstrap has the following classes: .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link The following example shows the code for the different button styles: Example <button type=”button” class=”btn btn-default”>Default</button> <button type=”button” class=”btn btn-primary”>Primary</button> <button type=”button” …

Bootstrap Alerts

Alerts Bootstrap provides an easy way to create predefined alert messages: ×Success! This alert box indicates a successful or positive action. ×Info! This alert box indicates a neutral informative change or action. ×Warning! This alert box indicates a warning that might need attention. ×Danger! This alert box indicates a dangerous or potentially negative action. Alerts …

Bootstrap Wells

Wells The .well class adds a rounded border around an element with a gray background color and some padding: Basic Well Example <div class=”well”>Basic Well</div>   Well Size Small Well Normal Well Large Well Change the size of the well by adding the .well-sm class for small wells or  .well-lg class for large wells: Example …

Bootstrap Jumbotron and Page Header

Creating a Jumbotron A jumbotron indicates a big box for calling extra attention to some special content or information. A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it. Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap …

Bootstrap Jumbotron and Page Header

Creating a Jumbotron A jumbotron indicates a big box for calling extra attention to some special content or information. A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it. Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap …

Bootstrap Images

Bootstrap Image Shapes Rounded Corners: Circle: Thumbnail: Rounded Corners The .img-rounded class adds rounded corners to an image (IE8 does not support rounded corners): Example <img src=”cinqueterre.jpg” class=”img-rounded” alt=”Cinque Terre” width=”304″ height=”236″>   Circle   The .img-circle class shapes the image to a circle (IE8 does not support rounded corners): Example <img src=”cinqueterre.jpg” class=”img-circle” alt=”Cinque …