Category «Bootstrap»

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 Collapse

Basic Collapsible Collapsibles are useful when you want to hide and show large amount of content: Click Me Example <button data-toggle=”collapse” data-target=”#demo”>Collapsible</button> <div id=”demo” class=”collapse”> Lorem ipsum dolor text…. </div>   Example Explained The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden …

Bootstrap Tabs and Pills

Menus Most web pages have some kind of a menu. In HTML, a menu is often defined in an unordered list <ul> (and styled afterwards), like this: <ul> <li><a href=”#”>Home</a></li> <li><a href=”#”>Menu 1</a></li> <li><a href=”#”>Menu 2</a></li> <li><a href=”#”>Menu 3</a></li> </ul> If you want to create a horizontal menu of the list above, add the .list-inline …

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 Navigation Bar

Navigation Bars A navigation bar is a navigation header that is placed at the top of the page: WebSiteName Home Page 1 Page 2 Page 3 With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class=”navbar navbar-default”>. The following example shows how …

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 Forms

Bootstrap’s Default Settings Form controls automatically receive some global styling with Bootstrap: All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%. Bootstrap Form Layouts Bootstrap provides three types of form layouts: Vertical form (this is default) Horizontal form Inline form Standard rules for all three form layouts: Wrap labels …

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 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 CSS Buttons Reference

Button Colors Default Primary Success Info Warning Danger Link Button Sizes Large Small XSmall Active/Disabled Buttons Info Button Active Info Button Disabled Info Button Block-level Button Block-level Button Button Classes The classes below can be used to style any <a>, <button>, or <input> element: Class Description Example .btn Adds basic styling to any button .btn-default …