Category «Bootstrap»

Bootstrap Dropdowns

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list: Dropdown Example Example <div class=”dropdown”> <button class=”btn btn-primary dropdown-toggle” type=”button” data-toggle=”dropdown”>Dropdown Example <span class=”caret”></span></button> <ul class=”dropdown-menu”> <li><a href=”#”>HTML</a></li> <li><a href=”#”>CSS</a></li> <li><a href=”#”>JavaScript</a></li> </ul> </div>   Example Explained The .dropdown class indicates a dropdown menu. To open …

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 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 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 …