Category «Bootstrap»

Bootstrap List Groups

Basic List Groups The most basic list group is an unordered list with list items: First item Second item Third item To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item: Example <ul class=”list-group”> <li class=”list-group-item”>First item</li> <li class=”list-group-item”>Second item</li> <li class=”list-group-item”>Third item</li> </ul>   List …

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 Panels

Panels A panel in bootstrap is a bordered box with some padding around its content: A Basic Panel Panels are created with the .panel class, and content inside the panel has a .panel-body class: Example <div class=”panel panel-default”> <div class=”panel-body”>A Basic Panel</div> </div>   The .panel-default class is used to style the color of the …

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

Tabs and Pills Class Description Example .nav nav-tabs Creates navigation tabs .nav nav-pills Creates navigation pills .nav nav-pills nav-stacked Creates vertical navigation pills .nav-justified Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs/pills are stacked .disabled Indicates a disabled (unclickable) tab/pill Navigation tabs with dropdown …