bootstrap_tutorial

CHAPTER 9Bootstrap ButtonsThis chapter will discuss about how to use Bootstrap button with examples. Anything that is given a classof .btn will inherit the default look of a gray button with rounded corners. However Bootstrap provides someoptions to style buttons, which are summarized in the following table:Class DescriptionBtn Default/ Standard button.btn-primary Provides extra visual weight and identifies the primary action in a set of buttons.btn-success Indicates a successful or positive action.btn-info Contextual button for informational alert messages.btn-warning Indicates caution should be taken with this action.btn-danger Indicates a dangerous or potentially negative action.btn-link Deemphasize a button by making it look like a link while maintaining button behavior.Following example demonstrates all the above button classes: <!-- Standard button --> <button type=\"button\" class=\"btn btn-default\">Default Button</button><!-- Provides extra visual weight and identifies the primary action in a set ofbuttons --><button type=\"button\" class=\"btn btn-primary\">Primary Button</button><!-- Indicates a successful or positive action --><button type=\"button\" class=\"btn btn-success\">Success Button</button><!-- Contextual button for informational alert messages --><button type=\"button\" class=\"btn btn-info\">Info Button</button><!-- Indicates caution should be taken with this action --><button type=\"button\" class=\"btn btn-warning\">Warning Button</button><!-- Indicates a dangerous or potentially negative action --><button type=\"button\" class=\"btn btn-danger\">Danger Button</button>TUTORIALS POINTSimply Easy Learning

<!-- Deemphasize a button by making it look like a link while maintaining buttonbehavior --><button type=\"button\" class=\"btn btn-link\">Link Button</button>Button SizeThe following table summarizes classes used to get buttons of various sizes:Class Description.btn-lg This makes button size large..btn-sm This makes button size small..btn-xs This makes button size with extra small..btn-block This creates block level buttons—those that span the full width of a parent.The following example demonstrates this: <p> <button type=\"button\" class=\"btn btn-primary btn-lg\"> Large Primary button </button> <button type=\"button\" class=\"btn btn-default btn-lg\" >Large button </button> </p> <p> <button type=\"button\" class=\"btn btn-primary\"> Default size Primary button </button> <button type=\"button\" class=\"btn btn-default\"> Default size button </button> </p> <p> <button type=\"button\" class=\"btn btn-primary btn-sm\"> Small Primary button </button> <button type=\"button\" class=\"btn btn-default btn-sm\"> Small button </button> </p> <p> <button type=\"button\" class=\"btn btn-primary btn-xs\"> Extra small Primary button </button> <button type=\"button\" class=\"btn btn-default btn-xs\"> Extra small button </button> </p> <p> <button type=\"button\" class=\"btn btn-primary btn-lg btn-block\"> Block level Primary button </button>TUTORIALS POINTSimply Easy Learning

<button type=\"button\" class=\"btn btn-default btn-lg btn-block\"> Block level button </button></p>Button StateBootstrap provides classes which allow you change the state of buttons say active, disabled etc each of these arediscussed in the following sections:ACTIVE STATEButtons will appear pressed (with a darker background, darker border, and inset shadow) when active. Thefollowing table summarizes classes used to make button element and anchor element active:Element ClassButton element Use .active class to show that it is activated..Anchor element Use .active class to <a> buttons to show that it is activated.The following example demonstrates this:<p> <button type=\"button\" class=\"btn btn-default btn-lg \"> Default Button </button> <button type=\"button\" class=\"btn btn-default btn-lg active\"> Active Button </button></p><p> <button type=\"button\" class=\"btn btn-primary btn-lg \"> Primary button </button> <button type=\"button\" class=\"btn btn-primary btn-lg active\"> Active Primary button </button></p>TUTORIALS POINTSimply Easy Learning

DISABLED STATEWhen you disable a button, it will fade in color by 50%, and lose the gradient.The following table summarizes classes used to make button element and anchor element disabled:Element ClassButton element Add the disabled attribute to <button> buttons.Anchor element Add the disabled class to <a> buttons. Note: This class will only change the <a>'s appearance, not its functionality. You need to use custom JavaScript to disable links here.The following example demonstrates this: <p> <button type=\"button\" class=\"btn btn-default btn-lg\"> Default Button </button> <button type=\"button\" class=\"btn btn-default btn-lg\" disabled=\"disabled\"> Disabled Button </button> </p> <p> <button type=\"button\" class=\"btn btn-primary btn-lg \"> Primary button </button> <button type=\"button\" class=\"btn btn-primary btn-lg\" disabled=\"disabled\"> Disabled Primary button </button> </p> <p> <a href=\"#\" class=\"btn btn-default btn-lg\" role=\"button\"> Link </a> <a href=\"#\" class=\"btn btn-default btn-lg disabled\" role=\"button\"> Disabled Link </a> </p> <p> <a href=\"#\" class=\"btn btn-primary btn-lg\" role=\"button\"> Primary link </a> <a href=\"#\" class=\"btn btn-primary btn-lg disabled\" role=\"button\"> Disabled Primary linkTUTORIALS POINTSimply Easy Learning

</a> </p>Button TagsYou may use button classes with <a>, <button>, or <input> element. But it is recommended that you use it with<button> elements mostly to avoid cross browser inconsistency issues.The following example demonstrates this: <a class=\"btn btn-default\" href=\"#\" role=\"button\">Link</a> <button class=\"btn btn-default\" type=\"submit\">Button</button> <input class=\"btn btn-default\" type=\"button\" value=\"Input\"> <input class=\"btn btn-default\" type=\"submit\" value=\"Submit\"> TUTORIALS POINT Simply Easy Learning

CHAPTER 10Bootstrap ImagesIn this chapter we will learn Bootstrap support for images. Bootstrap provides three classes that can be used to apply some simple styles to images:  .img-rounded: adds border-radius:6px to give the image rounded corners.  .img-circle: makes the entire image round by adding border-radius:500px.  .img-thumbnail: adds a bit of padding and a gray border: The following example demonstrates this: <img src=\"/bootstrap/images/download.png\" class=\"img-rounded\"> <img src=\"/bootstrap/images/download.png\" class=\"img-circle\"> <img src=\"/bootstrap/images/download.png\" class=\"img-thumbnail\"> TUTORIALS POINT Simply Easy Learning

CHAPTER 11Bootstrap Helper ClassesThis chapter discusses some of the helper classes in Bootstrap that might come in handy.Close icon Use the generic close icon for dismissing content like modals and alerts. Use the class close to get the close icon. <p>Close Icon Example <button type=\"button\" class=\"close\" aria-hidden=\"true\"> &times; </button> </p>Carets Use carets to indicate dropdown functionality and direction. To get this functionality use the class caretwith a <span> element. <p>Caret Example <span class=\"caret\"></span> </p>Quick floats You can float an element to the left or right with class pull-left or pull-right respectively. Following example demonstrates this. <div class=\"pull-left\"> Quick Float to left </div> <div class=\"pull-right\"> Quick Float to right </div> TUTORIALS POINT Simply Easy Learning

To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar chapter for details.Center content blocksUse class center-block to set an element to center. <div class=\"row\"> <div class=\"center-block\" style=\"width:200px;background-color:#ccc;\"> This is an example for center-block </div> </div>ClearfixTo clear the float of any element, use the .clearfix class. <div class=\"clearfix\" style=\"background: #D8D8D8;border: 1px solid #000;padding: 10px;\"> <div class=\"pull-left\" style=\"background:#58D3F7;\"> Quick Float to left </div> <div class=\"pull-right\" style=\"background: #DA81F5;\"> Quick Float to right </div> </div>Showing and hiding contentYou can force an element to be shown or hidden (including for screen readers) with the use ofclasses.show and .hidden. <div class=\"row\" style=\"padding: 91px 100px 19px 50px;\"> <div class=\"show\" style=\"left-margin:10px;width:300px;background-color:#ccc;\"> This is an example for show class </div> <div class=\"hidden\" style=\"width:200px;background-color:#ccc;\"> This is an example for hide class </div> </div>Screen reader contentYou can hide an element to all devices except screen readers with class .sr-only. TUTORIALS POINT Simply Easy Learning

<div class=\"row\" style=\"padding: 91px 100px 19px 50px;\"> <form class=\"form-inline\" role=\"form\"> <div class=\"form-group\"> <label class=\"sr-only\" for=\"email\">Email address</label> <input type=\"email\" class=\"form-control\" placeholder=\"Enter email\"> </div> <div class=\"form-group\"> <label class=\"sr-only\" for=\"pass\">Password</label> <input type=\"password\" class=\"form-control\" placeholder=\"Password\"> </div> </div>Here we can see that the label of both the input types is assigned the class sr-only, hence labels will be visible toonly screen readers. TUTORIALS POINT Simply Easy Learning

CHAPTER 12Bootstarp ResponsiveUtilitiesBootstrap provides some handful helper classes, for faster mobile-friendly development. These can beused for showing and hiding content by device via media query combined with large, small, and medium devices.Use these sparingly and avoid creating entirely different versions of the same site. Responsive utilities arecurrently only available for block and table toggling.Classes Devices.visible-xs Extra small (less than 768px) visible.visible-sm Small (up to 768 px) visible.visible-md Medium (768 px to 991 px) visible.visible-lg Larger (992 px and above) visible.hidden-xs Extra small (less than 768px) hidden.hidden-sm Small (up to 768 px) hidden.hidden-md Medium (768 px to 991 px) hidden.hidden-lg Larger (992 px and above) hiddenPrint classesFollowing table lists the print classes. Use these for toggling content for print.Classes Print.visible-print Yes Visible.hidden-print Visible only to browser not to print.TUTORIALS POINTSimply Easy Learning

Example Following example demonstrates the use of above listed helper classes. Resize your browser or load the example on different devices to test the responsive utility classes. <div class=\"container\" style=\"padding: 40px;\"> <div class=\"row visible-on\"> <div class=\"col-xs-6 col-sm-3\" style=\"background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;\"> <span class=\"hidden-xs\">Extra small</span> <span class=\"visible-xs\">✔ Visible on x-small</span> </div> <div class=\"col-xs-6 col-sm-3\" style=\"background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;\"> <span class=\"hidden-sm\">Small</span> <span class=\"visible-sm\">✔ Visible on small</span> </div> <div class=\"clearfix visible-xs\"></div> <div class=\"col-xs-6 col-sm-3\" style=\"background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;\"> <span class=\"hidden-md\">Medium</span> <span class=\"visible-md\">✔ Visible on medium</span> </div> <div class=\"col-xs-6 col-sm-3\" style=\"background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;\"> <span class=\"hidden-lg\">Large</span> <span class=\"visible-lg\">✔ Visible on large</span> </div> </div>Checkmarks indicate the element is visible in your current viewport. TUTORIALS POINT Simply Easy Learning

CHAPTER 13Bootstrap GlyphiconsThis chapter will discuss about Glyphicons, its use and some examples. Bootstrap bundles 200 glyphs in font format. First let us understand what are Glyphicons.What are Glyphicons? Glyphicons are icon fonts which you can use in your web projects. Glyphicons Halflings are not free and require licensing, however their creator has made them available for Bootstrap projects free of cost. It is recommended, as a thank you, we ask you to include an optional link back to GLYPHICONS whenever practical. — Bootstrap DocumentationWhere to find Glyphicons? Now that we have downloaded Bootstrap 3.x version and understand its directory structure from chapter Environment Setup, glyphicons can be found within the fonts folder. This contains following files:  glyphicons-halflings-regular.eot  glyphicons-halflings-regular.svg  glyphicons-halflings-regular.ttf  glyphicons-halflings-regular.woff Associated CSS rules are present within bootstrap.css and bootstrap-min.css files within css folder ofdist folder. You can see the available glyphicons at this link : Glyphicons ListUsage To use the icons, simply use the following code just about anywhere in your code. Leave a space between the icon and text for proper padding. <span class=\"glyphicon glyphicon-search\"></span> Following example demonstrates this: <p> <button type=\"button\" class=\"btn btn-default\"> TUTORIALS POINT Simply Easy Learning

<span class=\"glyphicon glyphicon-sort-by-attributes\"></span> </button> <button type=\"button\" class=\"btn btn-default\"> <span class=\"glyphicon glyphicon-sort-by-attributes-alt\"></span> </button> <button type=\"button\" class=\"btn btn-default\"> <span class=\"glyphicon glyphicon-sort-by-order\"></span> </button> <button type=\"button\" class=\"btn btn-default\"> <span class=\"glyphicon glyphicon-sort-by-order-alt\"></span> </button></p><button type=\"button\" class=\"btn btn-default btn-lg\"> <span class=\"glyphicon glyphicon-user\"></span> User</button><button type=\"button\" class=\"btn btn-default btn-sm\"> <span class=\"glyphicon glyphicon-user\"></span> User</button><button type=\"button\" class=\"btn btn-default btn-xs\"> <span class=\"glyphicon glyphicon-user\"></span> User</button>TUTORIALS POINTSimply Easy Learning

CHAPTER 14Bootstrap DropdownsThis chapter will highlight about Bootstrap dropdown menus. Dropdown menus are toggleable, contextual menus for displaying links in a list format. This can be made interactive with the dropdown JavaScript plugin. To use dropdown, just wrap the dropdown menu within the class .dropdown. Following example demonstrates a basic dropdown menu: <div class=\"dropdown\"> <button type=\"button\" class=\"btn dropdown-toggle\" id=\"dropdownMenu1\" data-toggle=\"dropdown\"> Topics <span class=\"caret\"></span> </button> <ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dropdownMenu1\"> <li role=\"presentation\"> <a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Java</a> </li> <li role=\"presentation\"> <a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Data Mining</a> </li> <li role=\"presentation\"> <a role=\"menuitem\" tabindex=\"-1\" href=\"#\"> Data Communication/Networking </a> </li> <li role=\"presentation\" class=\"divider\"></li> <li role=\"presentation\"> <a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Separated link</a> </li> </ul> </div> TUTORIALS POINT Simply Easy Learning

OPTIONSALIGNMENTAlign the dropdown menu to right by adding the class .pull-right to .dropdown-menu. Following exampledemonstrates this: <div class=\"dropdown\"> <button type=\"button\" class=\"btn dropdown-toggle\" id=\"dropdownMenu1\" data-toggle=\"dropdown\">Topics <span class=\"caret\"></span> </button> <ul class=\"dropdown-menu pull-right\" role=\"menu\" aria-labelledby=\"dropdownMenu1\"> <li role=\"presentation\"> <a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Java</a> </li> <li role=\"presentation\"> <a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Data Mining</a> </li> <li role=\"presentation\"> <a role=\"menuitem\" tabindex=\"-1\" href=\"#\"> Data Communication/Networking </a> </li> <li role=\"presentation\" class=\"divider\"></li> <li role=\"presentation\"> <a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Separated link</a> </li> </ul> </div>HEADERSYou can add a header to label sections of actions in any dropdown menu by using the classdropdown-header.Following example demonstrates this: TUTORIALS POINT Simply Easy Learning

<div class=\"dropdown\"> <button type=\"button\" class=\"btn dropdown-toggle\" id=\"dropdownMenu1\" data-toggle=\"dropdown\"> Topics <span class=\"caret\"></span> </button> <ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dropdownMenu1\"> <li role=\"presentation\" class=\"dropdown-header\">Dropdown header</li> <li role=\"presentation\" > <a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Java</a> </li> <li role=\"presentation\"> <a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Data Mining</a> </li> <li role=\"presentation\"> <a role=\"menuitem\" tabindex=\"-1\" href=\"#\"> Data Communication/Networking </a> </li> <li role=\"presentation\" class=\"divider\"></li> <li role=\"presentation\" class=\"dropdown-header\">Dropdown header</li> <li role=\"presentation\"> <a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Separated link</a> </li> </ul></div>TUTORIALS POINTSimply Easy Learning

CHAPTER 15Bootstrap Button GroupsButton groups allow multiple buttons to be stacked together on a single line. This is useful when you wantto place items like alignment buttons together. You can add on optional JavaScript radio and checkbox stylebehavior with Bootstrap Button Plugin.Following table summarizes the important classes Bootstrap provides to use button groups:Class Description Code Sample.btn-group This class is used form a basic button group. <div class=\"btn-group\"> Wrap a series of buttons with <button type=\"button\" class=\"btn class .btn in.btn-group. btn-default\">Button1</button> <button type=\"button\" class=\"btn btn-default\">Button2</button> </div>.btn-toolbar This helps to combine sets of <div class=\"btn- <div class=\"btn-toolbar\" group\"> into a <div class=\"btn-toolbar\"> for role=\"toolbar\"> more complex components. <div class=\"btn-group\">...</div> <div class=\"btn-group\">...</div> </div>.btn-group-lg, These classes can be applied to button group <div class=\"btn-group btn-group-.btn-group-sm, instead of resizing each button. lg\">...</div>.btn-group-xs <div class=\"btn-group btn-group- sm\">...</div> <div class=\"btn-group btn-group- xs\">...</div>.btn-group- This class make a set of buttons appear <div class=\"btn-group-vertical\">vertical vertically stacked rather than horizontally. ... </div>Basic Button GroupFollowing examples demonstrates the use of class .btn-group discussed in the above table: <div class=\"btn-group\">TUTORIALS POINTSimply Easy Learning

<button type=\"button\" class=\"btn btn-default\">Button 1</button> <button type=\"button\" class=\"btn btn-default\">Button 2</button> <button type=\"button\" class=\"btn btn-default\">Button 3</button> </div>Button ToolbarFollowing examples demonstrates the use of class .btn-toolbar discussed in the above table: <div class=\"btn-toolbar\" role=\"toolbar\"> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-default\">Button 1</button> <button type=\"button\" class=\"btn btn-default\">Button 2</button> <button type=\"button\" class=\"btn btn-default\">Button 3</button> </div> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-default\">Button 4</button> <button type=\"button\" class=\"btn btn-default\">Button 5</button> <button type=\"button\" class=\"btn btn-default\">Button 6</button> </div> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-default\">Button 7</button> <button type=\"button\" class=\"btn btn-default\">Button 8</button> <button type=\"button\" class=\"btn btn-default\">Button 9</button> </div> </div>Button SizeFollowing examples demonstrates the use of class .btn-group-* discussed in the above table: <div class=\"btn-group btn-group-lg\"> <button type=\"button\" class=\"btn btn-default\">Button 1</button> <button type=\"button\" class=\"btn btn-default\">Button 2</button> <button type=\"button\" class=\"btn btn-default\">Button 3</button> </div> <div class=\"btn-group btn-group-sm\"> <button type=\"button\" class=\"btn btn-default\">Button 4</button> <button type=\"button\" class=\"btn btn-default\">Button 5</button> <button type=\"button\" class=\"btn btn-default\">Button 6</button> </div> <div class=\"btn-group btn-group-xs\"> <button type=\"button\" class=\"btn btn-default\">Button 7</button> <button type=\"button\" class=\"btn btn-default\">Button 8</button> <button type=\"button\" class=\"btn btn-default\">Button 9</button> </div> TUTORIALS POINT Simply Easy Learning

NestingYou can nest button groups within another button group i.e, place a .btn-group within another .btn-group . This isdone when you want dropdown menus mixed with a series of buttons. <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-default\">Button 1</button> <button type=\"button\" class=\"btn btn-default\">Button 2</button> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\"> Dropdown <span class=\"caret\"></span> </button> <ul class=\"dropdown-menu\"> <li><a href=\"#\">Dropdown link 1</a></li> <li><a href=\"#\">Dropdown link 2</a></li> </ul> </div> </div>Vertical ButtongroupFollowing examples demonstrates the use of class .btn-group-vertical discussed in the above table: <div class=\"btn-group-vertical\"> <button type=\"button\" class=\"btn btn-default\">Button 1</button> <button type=\"button\" class=\"btn btn-default\">Button 2</button> <div class=\"btn-group-vertical\"> <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\"> Dropdown <span class=\"caret\"></span> </button> <ul class=\"dropdown-menu\"> <li><a href=\"#\">Dropdown link 1</a></li> <li><a href=\"#\">Dropdown link 2</a></li> </ul> </div> </div> TUTORIALS POINT Simply Easy Learning

TUTORIALS POINTSimply Easy Learning

CHAPTER 16Bootstrap Button DropdownsThis chapter will discuss about how to add dropdown menu to buttons using Bootstrap classes. To add a dropdown to a button, simply wrap the button and dropdown menu in a .btn-group. You can also use <span class=\"caret\"></span> to act as an indicator that the button is a dropdown. The following example demonstrates a basic single button dropdowns: <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\"> Default <span class=\"caret\"></span> </button> <ul class=\"dropdown-menu\" role=\"menu\"> <li><a href=\"#\">Action</a></li> <li><a href=\"#\">Another action</a></li> <li><a href=\"#\">Something else here</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> </div> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\"> Primary <span class=\"caret\"></span> </button> <ul class=\"dropdown-menu\" role=\"menu\"> <li><a href=\"#\">Action</a></li> <li><a href=\"#\">Another action</a></li> <li><a href=\"#\">Something else here</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> </div> TUTORIALS POINT Simply Easy Learning

Split Button DropdownsSplit button dropdowns use the same general style as the dropdown button but add a primary action along with thedropdown. Split buttons have the primary action on the left and a toggle on the right that displays the dropdown. <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-default\">Default</button> <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\"> <span class=\"caret\"></span> <span class=\"sr-only\">Toggle Dropdown</span> </button> <ul class=\"dropdown-menu\" role=\"menu\"> <li><a href=\"#\">Action</a></li> <li><a href=\"#\">Another action</a></li> <li><a href=\"#\">Something else here</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> </div> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-primary\">Primary</button> <button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\"> <span class=\"caret\"></span> <span class=\"sr-only\">Toggle Dropdown</span> </button> <ul class=\"dropdown-menu\" role=\"menu\"> <li><a href=\"#\">Action</a></li> <li><a href=\"#\">Another action</a></li> <li><a href=\"#\">Something else here</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> </div>Button Dropdown SizeYou can use the dropdowns with any button size: .btn-large, .btn-sm, or .btn-xs. <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-default dropdown-toggle btn-lg\" data-toggle=\"dropdown\"> Default <span class=\"caret\"></span> </button> <ul class=\"dropdown-menu\" role=\"menu\"> <li><a href=\"#\">Action</a></li> <li><a href=\"#\">Another action</a></li> <li><a href=\"#\">Something else here</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> </div> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-primary dropdown-toggle btn-sm\" TUTORIALS POINT Simply Easy Learning

data-toggle=\"dropdown\"> Primary <span class=\"caret\"></span> </button> <ul class=\"dropdown-menu\" role=\"menu\"> <li><a href=\"#\">Action</a></li> <li><a href=\"#\">Another action</a></li> <li><a href=\"#\">Something else here</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> </div> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-success dropdown-toggle btn-xs\" data-toggle=\"dropdown\"> Success <span class=\"caret\"></span> </button> <ul class=\"dropdown-menu\" role=\"menu\"> <li><a href=\"#\">Action</a></li> <li><a href=\"#\">Another action</a></li> <li><a href=\"#\">Something else here</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> </div>Dropup variationMenus can also be built to drop up rather than down. To achieve this, simply add .dropup to the parent.btn-group container. <div class=\"row\" style=\"margin-left:50px; margin-top:200px\"> <div class=\"btn-group dropup\"> <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\"> Default <span class=\"caret\"></span> </button> <ul class=\"dropdown-menu\" role=\"menu\"> <li><a href=\"#\">Action</a></li> <li><a href=\"#\">Another action</a></li> <li><a href=\"#\">Something else here</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> </div> <div class=\"btn-group dropup\"> <button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\"> Primary <span class=\"caret\"></span> </button> <ul class=\"dropdown-menu\" role=\"menu\"> <li><a href=\"#\">Action</a></li> <li><a href=\"#\">Another action</a></li> <li><a href=\"#\">Something else here</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> TUTORIALS POINT Simply Easy Learning

</div></div>TUTORIALS POINTSimply Easy Learning

CHAPTER 17Bootstrap Input GroupsThis chapter explains about one more feature Bootstrap supports, the Input Groups. Input groups are extended Form Controls. Using input groups you can easily prepend and append text or buttons to text-based inputs. By adding prepended and appended content to an input field, you can add common elements to the user’s input. For example, you can add the dollar symbol, the @ for a Twitter username, or anything else that might be common for your application interface. To prepend or append elements to a .form-control:  Wrap it in a <div> with class .input-group  As a next step, within that same <div> , place your extra content inside a <span> with class.input-group- addon.  Now place this <span> either before or after the <input> element. For cross browser compatibility, avoid using <select> elements here as they cannot be fully styled in WebKit browsers. Also do not apply input group classes directly to form groups. An input group is an isolated component.Basic Input Group Following examples demonstrates basic input group: <div style=\"padding: 100px 100px 10px;\"> <form class=\"bs-example bs-example-form\" role=\"form\"> <div class=\"input-group\"> <span class=\"input-group-addon\">@</span> <input type=\"text\" class=\"form-control\" placeholder=\"twitterhandle\"> </div> <br> <div class=\"input-group\"> <input type=\"text\" class=\"form-control\"> <span class=\"input-group-addon\">.00</span> </div> <br> <div class=\"input-group\"> <span class=\"input-group-addon\">$</span> <input type=\"text\" class=\"form-control\"> <span class=\"input-group-addon\">.00</span> TUTORIALS POINT Simply Easy Learning

</div> </form> </div>Input Group SizingYou can change the size of the input groups, by adding the relative form sizing classes like .input-group-lg, input-group-sm, input-group-xs to the .input-group itself. The contents within will automatically resize.Following examples demonstrates this: <div style=\"padding: 100px 100px 10px;\"> <form class=\"bs-example bs-example-form\" role=\"form\"> <div class=\"input-group input-group-lg\"> <span class=\"input-group-addon\">@</span> <input type=\"text\" class=\"form-control\" placeholder=\"Twitterhandle\"> </div><br> <div class=\"input-group\"> <span class=\"input-group-addon\">@</span> <input type=\"text\" class=\"form-control\" placeholder=\"Twitterhandle\"> </div><br> <div class=\"input-group input-group-sm\"> <span class=\"input-group-addon\">@</span> <input type=\"text\" class=\"form-control\" placeholder=\"Twitterhandle\"> </div> </form> </div>Checkboxes and radio addonsYou can preappend or append radio buttons and checkboxes instead of text as demonstrated in the followingexample: <div style=\"padding: 100px 100px 10px;\"> <form class=\"bs-example bs-example-form\" role=\"form\"> <div class=\"row\"> <div class=\"col-lg-6\"> TUTORIALS POINT Simply Easy Learning

<div class=\"input-group\"> <span class=\"input-group-addon\"> <input type=\"checkbox\"> </span> <input type=\"text\" class=\"form-control\"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --><br> <div class=\"col-lg-6\"> <div class=\"input-group\"> <span class=\"input-group-addon\"> <input type=\"radio\"> </span> <input type=\"text\" class=\"form-control\"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </form> </div>Button addonsYou can even preappend or append buttons in input groups. Instead of .input-group-addon class, you'll need touse class .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot beoverridden. Following examples demonstrates this: <div style=\"padding: 100px 100px 10px;\"> <form class=\"bs-example bs-example-form\" role=\"form\"> <div class=\"row\"> <div class=\"col-lg-6\"> <div class=\"input-group\"> <span class=\"input-group-btn\"> <button class=\"btn btn-default\" type=\"button\"> Go! </button> </span> <input type=\"text\" class=\"form-control\"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --><br> <div class=\"col-lg-6\"> <div class=\"input-group\"> <input type=\"text\" class=\"form-control\"> <span class=\"input-group-btn\"> <button class=\"btn btn-default\" type=\"button\"> Go! </button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </form> </div> TUTORIALS POINT Simply Easy Learning

Buttons with dropdownsAdding button with dropdown menus in input groups can be done by simply wrapping the button and dropdownmenu in a .input-group-btn class as demonstrated in the following example: <div style=\"padding: 100px 100px 10px;\"> <form class=\"bs-example bs-example-form\" role=\"form\"> <div class=\"row\"> <div class=\"col-lg-6\"> <div class=\"input-group\"> <div class=\"input-group-btn\"> <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\"> DropdownMenu <span class=\"caret\"></span> </button> <ul class=\"dropdown-menu\"> <li><a href=\"#\">Action</a></li> <li><a href=\"#\">Another action</a></li> <li><a href=\"#\">Something else here</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> </div><!-- /btn-group --> <input type=\"text\" class=\"form-control\"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --><br> <div class=\"col-lg-6\"> <div class=\"input-group\"> <input type=\"text\" class=\"form-control\"> <div class=\"input-group-btn\"> <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\"> DropdownMenu <span class=\"caret\"></span> </button> <ul class=\"dropdown-menu pull-right\"> <li><a href=\"#\">Action</a></li> <li><a href=\"#\">Another action</a></li> <li><a href=\"#\">Something else here</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </form> </div> TUTORIALS POINT Simply Easy Learning

Segmented buttonsTo segment button dropdowns in input groups, use the same general style as the dropdown button but add aprimary action along with the dropdown as can be seen in the following example: <div style=\"padding: 100px 100px 10px;\"> <form class=\"bs-example bs-example-form\" role=\"form\"> <div class=\"row\"> <div class=\"col-lg-6\"> <div class=\"input-group\"> <div class=\"input-group-btn\"> <button type=\"button\" class=\"btn btn-default\" tabindex=\"-1\">Dropdwon Menu </button> <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" tabindex=\"-1\"> <span class=\"caret\"></span> <span class=\"sr-only\">Toggle Dropdown</span> </button> <ul class=\"dropdown-menu\"> <li><a href=\"#\">Action</a></li> <li><a href=\"#\">Another action</a></li> <li><a href=\"#\">Something else here</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> </div><!-- /btn-group --> <input type=\"text\" class=\"form-control\"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --><br> <div class=\"col-lg-6\"> <div class=\"input-group\"> <input type=\"text\" class=\"form-control\"> <div class=\"input-group-btn\"> <button type=\"button\" class=\"btn btn-default\" tabindex=\"-1\">Dropdwon Menu </button> <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" tabindex=\"-1\"> <span class=\"caret\"></span> <span class=\"sr-only\">Toggle Dropdown</span> </button> <ul class=\"dropdown-menu pull-right\"> <li><a href=\"#\">Action</a></li> <li><a href=\"#\">Another action</a></li> <li><a href=\"#\">Something else here</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> TUTORIALS POINT Simply Easy Learning

</div><!-- /.row --> </form></div>TUTORIALS POINTSimply Easy Learning

CHAPTER 18Bootstrap Navigation ElementsIn this chapter we will discuss about how Bootstrap provides a few different options for styling navigation elements. All of them share the same markup and base class, .nav. Bootstrap also provides a helper class, to share markup and states. Swap modifier classes to switch between each style. Tabular Navigation or Tabs To create a tabbed navigation menu:  Start with a basic unordered list with the base class of .nav  Add class .nav-tabs. Following example demonstrates this: <p>Tabs Example</p> <ul class=\"nav nav-tabs\"> <li class=\"active\"><a href=\"#\">Home</a></li> <li><a href=\"#\">SVN</a></li> <li><a href=\"#\">iOS</a></li> <li><a href=\"#\">VB.Net</a></li> <li><a href=\"#\">Java</a></li> <li><a href=\"#\">PHP</a></li> </ul> Pills Navigation BASIC PILLS To turn the tabs into pills, follow the same steps as above, use the class .nav-pills instead of .nav-tabs. Following example demonstrates this: <p>Pills Example</p> TUTORIALS POINT Simply Easy Learning

<ul class=\"nav nav-pills\"> <li class=\"active\"><a href=\"#\">Home</a></li> <li><a href=\"#\">SVN</a></li> <li><a href=\"#\">iOS</a></li> <li><a href=\"#\">VB.Net</a></li> <li><a href=\"#\">Java</a></li> <li><a href=\"#\">PHP</a></li> </ul>VERTICLE PILLSYou can stack the pills vertically using the class .nav-stacked alongwith classes .nav, .nav-pills.Following example demonstrates this: <p>Vertical Pills Example</p> <ul class=\"nav nav-pills nav-stacked\"> <li class=\"active\"><a href=\"#\">Home</a></li> <li><a href=\"#\">SVN</a></li> <li><a href=\"#\">iOS</a></li> <li><a href=\"#\">VB.Net</a></li> <li><a href=\"#\">Java</a></li> <li><a href=\"#\">PHP</a></li> </ul>Justified NavYou can make tabs or pills equal widths of their parent at screens wider than 768px using class .nav-justified alongwith .nav, .nav-tabs or .nav, .nav-pills respectively. On smaller screens, the nav links are stacked.Following example demonstrates this: <p>Justified Nav Elements Example</p> <ul class=\"nav nav-pills nav-justified\"> <li class=\"active\"><a href=\"#\">Home</a></li> TUTORIALS POINT Simply Easy Learning

<li><a href=\"#\">SVN</a></li> <li><a href=\"#\">iOS</a></li> <li><a href=\"#\">VB.Net</a></li> <li><a href=\"#\">Java</a></li> <li><a href=\"#\">PHP</a></li> </ul><br><br><br> <ul class=\"nav nav-tabs nav-justified\"> <li class=\"active\"><a href=\"#\">Home</a></li> <li><a href=\"#\">SVN</a></li> <li><a href=\"#\">iOS</a></li> <li><a href=\"#\">VB.Net</a></li> <li><a href=\"#\">Java</a></li> <li><a href=\"#\">PHP</a></li> </ul>Disabled LinksFor each of the .nav classes, if you add the .disabled class, it will create a gray link that also disablesthe :hover state as shown in the following example: <p>Disabled Link Example</p> <ul class=\"nav nav-pills\"> <li class=\"active\"><a href=\"#\">Home</a></li> <li><a href=\"#\">SVN</a></li> <li class=\"disabled\"><a href=\"#\">iOS(disabled link)</a></li> <li><a href=\"#\">VB.Net</a></li> <li><a href=\"#\">Java</a></li> <li><a href=\"#\">PHP</a></li> </ul><br><br> <ul class=\"nav nav-tabs\"> <li class=\"active\"><a href=\"#\">Home</a></li> <li><a href=\"#\">SVN</a></li> <li><a href=\"#\">iOS</a></li> <li class=\"disabled\"><a href=\"#\">VB.Net(disabled link)</a></li> <li><a href=\"#\">Java</a></li> <li><a href=\"#\">PHP</a></li> </ul> TUTORIALS POINT Simply Easy Learning

This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.DROPDOWNSNavigation menus share a similar syntax with dropdown menus. By default, you have a list item that has an anchorworking in conjunction with some data-attributes to trigger an unordered list with a.dropdown-menu class.TABS WITH DROPDOWNSTo add dropdowns to tab: Start with a basic unordered list with the base class of .nav Add class .nav-tabs. Now add an unordered list with a .dropdown-menu class. <p>Tabs With Dropdown Example</p> <ul class=\"nav nav-tabs\"> <li class=\"active\"><a href=\"#\">Home</a></li> <li><a href=\"#\">SVN</a></li> <li><a href=\"#\">iOS</a></li> <li><a href=\"#\">VB.Net</a></li> <li class=\"dropdown\"> <a class=\"dropdown-toggle\" data-toggle=\"dropdown\" href=\"#\"> Java <span class=\"caret\"></span> </a> <ul class=\"dropdown-menu\"> <li><a href=\"#\">Swing</a></li> <li><a href=\"#\">jMeter</a></li> <li><a href=\"#\">EJB</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> </li> <li><a href=\"#\">PHP</a></li> </ul> TUTORIALS POINT Simply Easy Learning

PILLS WITH DROPDOWNSTo do the same thing with pills, simply swap the .nav-tabs class with .nav-pills as shown in the following example. <p>Pills With Dropdown Example</p> <ul class=\"nav nav-pills\"> <li class=\"active\"><a href=\"#\">Home</a></li> <li><a href=\"#\">SVN</a></li> <li><a href=\"#\">iOS</a></li> <li><a href=\"#\">VB.Net</a></li> <li class=\"dropdown\"> <a class=\"dropdown-toggle\" data-toggle=\"dropdown\" href=\"#\"> Java <span class=\"caret\"></span> </a> <ul class=\"dropdown-menu\"> <li><a href=\"#\">Swing</a></li> <li><a href=\"#\">jMeter</a></li> <li><a href=\"#\">EJB</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> </ul> </li> <li><a href=\"#\">PHP</a></li> </ul> TUTORIALS POINT Simply Easy Learning

CHAPTER 19Bootstrap NavbarThe Navbar is a nice feature, and is one of the prominent features of Bootstrap sites. Navbars are responsive meta components that serve as navigation headers for your application or site. Navbars collapse in mobile views and become horizontal as the available viewport width increases. At its core, the navbar includes styling for site names and basic navigation.Default navbar To create a default navbar:  Add classes .navbar, .navbar-default to the <nav> tag.  Add role=\"navigation\" to the above element, to help with accessibility.  Add a header class .navbar-header to the <div> element. Include an <a> element with classnavbar-brand. This will give the text a slightly larger size.  To add links to the navbar, simply add an unordered list with a classes of .nav, .navbar-nav. Following example demonstrates this: <nav class=\"navbar navbar-default\" role=\"navigation\"> <div class=\"navbar-header\"> <a class=\"navbar-brand\" href=\"#\">TutorialsPoint</a> </div> <div> <ul class=\"nav navbar-nav\"> <li class=\"active\"><a href=\"#\">iOS</a></li> <li><a href=\"#\">SVN</a></li> <li class=\"dropdown\"> <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"> Java <b class=\"caret\"></b> </a> <ul class=\"dropdown-menu\"> <li><a href=\"#\">jmeter</a></li> <li><a href=\"#\">EJB</a></li> <li><a href=\"#\">Jasper Report</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> <li class=\"divider\"></li> <li><a href=\"#\">One more separated link</a></li> </ul> </li> TUTORIALS POINT Simply Easy Learning

</ul> </div> </nav>Responsive navbarTo add the responsive features to the navbar, the content that you want to be collapsed needs to be wrapped in a<div> with classes .collapse, .navbar-collapse. The collapsing nature is tripped by a button that has a the classof .navbar-toggle and then features two data- elements. The first, data-toggle, is used to tell the JavaScript whatto do with the button, and the second, data-target, indicates which element to toggle. Three with a class of .icon-bar create what I like to call the hamburger button. This will toggle the elements that are in the .nav-collapse <div>. For this feature to work, you need to include the Bootstrap Collapse Plugin.Following example demonstrates this: <nav class=\"navbar navbar-default\" role=\"navigation\"> <div class=\"navbar-header\"> <button type=\"button\" class=\"navbar-toggle\" data-toggle=\"collapse\" data-target=\"#example-navbar-collapse\"> <span class=\"sr-only\">Toggle navigation</span> <span class=\"icon-bar\"></span> <span class=\"icon-bar\"></span> <span class=\"icon-bar\"></span> </button> <a class=\"navbar-brand\" href=\"#\">TutorialsPoint</a> </div> <div class=\"collapse navbar-collapse\" id=\"example-navbar-collapse\"> <ul class=\"nav navbar-nav\"> <li class=\"active\"><a href=\"#\">iOS</a></li> <li><a href=\"#\">SVN</a></li> <li class=\"dropdown\"> <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"> Java <b class=\"caret\"></b> </a> <ul class=\"dropdown-menu\"> <li><a href=\"#\">jmeter</a></li> <li><a href=\"#\">EJB</a></li> <li><a href=\"#\">Jasper Report</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> <li class=\"divider\"></li> <li><a href=\"#\">One more separated link</a></li> </ul> </li> </ul> </div> </nav> TUTORIALS POINT Simply Easy Learning

Forms in navbarInstead of using the default class-based forms from Chapter Bootstrap Forms, forms that are in the navbar usethe .navbar-form class. This ensures that the form’s proper vertical alignment and collapsed behavior in narrowviewports. Use the alignment options (explained in Component alignment section) to decide where it resides withinthe navbar content.Following example demonstrates this: <nav class=\"navbar navbar-default\" role=\"navigation\"> <div class=\"navbar-header\"> <a class=\"navbar-brand\" href=\"#\">TutorialsPoint</a> </div> <div> <form class=\"navbar-form navbar-left\" role=\"search\"> <div class=\"form-group\"> <input type=\"text\" class=\"form-control\" placeholder=\"Search\"> </div> <button type=\"submit\" class=\"btn btn-default\">Submit</button> </form> </div> </nav>Buttons in navbarYou can add buttons using class .navbar-btn to <button> elements not residing in a <form> to vertically centerthem in the navbar. .navbar-btn can be used on <a> and <input> elements. TUTORIALS POINT Simply Easy Learning

Do not use .navbar-btn nor the standard button classes on <a> elements within .navbar-nav.Following example demonstrates this: <nav class=\"navbar navbar-default\" role=\"navigation\"> <div class=\"navbar-header\"> <a class=\"navbar-brand\" href=\"#\">TutorialsPoint</a> </div> <div> <form class=\"navbar-form navbar-left\" role=\"search\"> <div class=\"form-group\"> <input type=\"text\" class=\"form-control\" placeholder=\"Search\"> </div> <button type=\"submit\" class=\"btn btn-default\">Submit Button</button> </form> <button type=\"button\" class=\"btn btn-default navbar-btn\"> Navbar Button </button> </div> </nav>Text in navbarTo wrap strings of text in an element use class .navbar-text. This is usually used with <p> tag for proper leadingand color. Following example demonstrates this: <nav class=\"navbar navbar-default\" role=\"navigation\"> <div class=\"navbar-header\"> <a class=\"navbar-brand\" href=\"#\">TutorialsPoint</a> </div> <div> <p class=\"navbar-text\">Signed in as Thomas</p> </div> </nav>Non-nav linksIf you want to use standard links that are not within the regular navbar navigation component, then useclass navbar-link to add the proper colors for the default and inverse navbar options as shown in the followingexample: <nav class=\"navbar navbar-default\" role=\"navigation\"> <div class=\"navbar-header\"> <a class=\"navbar-brand\" href=\"#\">TutorialsPoint</a> </div> <div> <p class=\"navbar-text navbar-right\">Signed in as <a href=\"#\" class=\"navbar-link\">Thomas</a> TUTORIALS POINT Simply Easy Learning

</p> </div> </div>Component alignmentYou can align the components like nav links, forms, buttons, or text to left or right in a navbar using the utilityclasses .navbar-left or .navbar-right. Both classes will add a CSS float in the specified direction. The followingexample demonstrates this: <nav class=\"navbar navbar-default\" role=\"navigation\"> <div class=\"navbar-header\"> <a class=\"navbar-brand\" href=\"#\">TutorialsPoint</a> </div> <div> <!--Left Align--> <ul class=\"nav navbar-nav navbar-left\"> <li class=\"dropdown\"> <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"> Java <b class=\"caret\"></b> </a> <ul class=\"dropdown-menu\"> <li><a href=\"#\">jmeter</a></li> <li><a href=\"#\">EJB</a></li> <li><a href=\"#\">Jasper Report</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> <li class=\"divider\"></li> <li><a href=\"#\">One more separated link</a></li> </ul> </li> </ul> <form class=\"navbar-form navbar-left\" role=\"search\"> <button type=\"submit\" class=\"btn btn-default\"> Left align-Submit Button </button> </form> <p class=\"navbar-text navbar-left\">Left align-Text</p> <!--Right Align--> <ul class=\"nav navbar-nav navbar-right\"> <li class=\"dropdown\"> <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"> Java <b class=\"caret\"></b> </a> <ul class=\"dropdown-menu\"> <li><a href=\"#\">jmeter</a></li> <li><a href=\"#\">EJB</a></li> <li><a href=\"#\">Jasper Report</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> <li class=\"divider\"></li> <li><a href=\"#\">One more separated link</a></li> </ul> TUTORIALS POINT Simply Easy Learning

</li> </ul> <form class=\"navbar-form navbar-right\" role=\"search\"> <button type=\"submit\" class=\"btn btn-default\"> Right align-Submit Button </button> </form> <p class=\"navbar-text navbar-right\">Right align-Text</p> </div> </nav>Fixed to topThe Bootstrap navbar can be dynamic in its positioning. By default, it is a block-level element that takes itspositioning based on its placement in the HTML. With a few helper classes, you can place it either on the top orbottom of the page, or you can make it scroll statically with the page.If you want the navbar fixed to the top, add class .navbar-fixed-top to the .navbar class. Following exampledemonstrates this:To prevent the navbar from sitting on top of other content in the body of the page, add at least 50 pixels of paddingto the <body> tag or try your own values. <nav class=\"navbar navbar-default navbar-fixed-top\" role=\"navigation\"> <div class=\"navbar-header\"> <a class=\"navbar-brand\" href=\"#\">TutorialsPoint</a> </div> <div> <ul class=\"nav navbar-nav\"> <li class=\"active\"><a href=\"#\">iOS</a></li> <li><a href=\"#\">SVN</a></li> <li class=\"dropdown\"> <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"> Java <b class=\"caret\"></b> </a> <ul class=\"dropdown-menu\"> <li><a href=\"#\">jmeter</a></li> <li><a href=\"#\">EJB</a></li> <li><a href=\"#\">Jasper Report</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> <li class=\"divider\"></li> <li><a href=\"#\">One more separated link</a></li> </ul> </li> </ul> </div> </nav> TUTORIALS POINT Simply Easy Learning

Fixed to bottomIf you want the navbar fixed to the bottom of the page, add class .navbar-fixed-bottom to the .navbar class.Following example demonstrates this: <nav class=\"navbar navbar-default navbar-fixed-bottom\" role=\"navigation\"> <div class=\"navbar-header\"> <a class=\"navbar-brand\" href=\"#\">TutorialsPoint</a> </div> <div> <ul class=\"nav navbar-nav\"> <li class=\"active\"><a href=\"#\">iOS</a></li> <li><a href=\"#\">SVN</a></li> <li class=\"dropdown\"> <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"> Java <b class=\"caret\"></b> </a> <ul class=\"dropdown-menu\"> <li><a href=\"#\">jmeter</a></li> <li><a href=\"#\">EJB</a></li> <li><a href=\"#\">Jasper Report</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> <li class=\"divider\"></li> <li><a href=\"#\">One more separated link</a></li> </ul> </li> </ul> </div> </nav>Static topTo create a navbar that scrolls with the page, add the .navbar-static-top class. This class does not require addingthe padding to the <body>. <nav class=\"navbar navbar-default navbar-static-top\" role=\"navigation\"> <div class=\"navbar-header\"> <a class=\"navbar-brand\" href=\"#\">TutorialsPoint</a> </div> <div> <ul class=\"nav navbar-nav\"> <li class=\"active\"><a href=\"#\">iOS</a></li> <li><a href=\"#\">SVN</a></li> <li class=\"dropdown\"> <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"> Java <b class=\"caret\"></b> </a> <ul class=\"dropdown-menu\"> <li><a href=\"#\">jmeter</a></li> <li><a href=\"#\">EJB</a></li> TUTORIALS POINT Simply Easy Learning

<li><a href=\"#\">Jasper Report</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> <li class=\"divider\"></li> <li><a href=\"#\">One more separated link</a></li> </ul> </li> </ul> </div> </nav>Inverted navbarTo create an inverted navbar with a black background and white text, simply add .navbar-inverse class tothe .navbar class as demonstrated in the following example:To prevent the navbar from sitting on top of other content in the body of the page, add at least 50 pixels of paddingto the <body> tag or try your own values. <nav class=\"navbar navbar-inverse\" role=\"navigation\"> <div class=\"navbar-header\"> <a class=\"navbar-brand\" href=\"#\">TutorialsPoint</a> </div> <div> <ul class=\"nav navbar-nav\"> <li class=\"active\"><a href=\"#\">iOS</a></li> <li><a href=\"#\">SVN</a></li> <li class=\"dropdown\"> <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"> Java <b class=\"caret\"></b> </a> <ul class=\"dropdown-menu\"> <li><a href=\"#\">jmeter</a></li> <li><a href=\"#\">EJB</a></li> <li><a href=\"#\">Jasper Report</a></li> <li class=\"divider\"></li> <li><a href=\"#\">Separated link</a></li> <li class=\"divider\"></li> <li><a href=\"#\">One more separated link</a></li> </ul> </li> </ul> </div> </nav> TUTORIALS POINT Simply Easy Learning

TUTORIALS POINTSimply Easy Learning

CHAPTER 20Bootstrap BreadcrumbBreadcrumbs are a great way to show hierarchy-based information for a site. In the case of blogs, breadcrumbs can show the dates of publishing, categories, or tags. They indicate the current page's location within a navigational hierarchy. A breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb. The separator is automatically added by CSS (bootstrap.min.css) through the following class: .breadcrumb > li + li:before { color: #CCCCCC; content: \"/ \"; padding: 0 5px; } Following example demonstrates breadcrumbs: <ol class=\"breadcrumb\"> <li><a href=\"#\">Home</a></li> <li><a href=\"#\">2013</a></li> <li class=\"active\">November</li> </ol> TUTORIALS POINT Simply Easy Learning

CHAPTER 21Bootstrap PaginationThis chapter discusses about pagination feature Bootstrap supports. Pagination, an unordered list ishandled by Bootstrap like a lot of other interface elements.PaginationThe following table lists the classes Bootstrap provides to handle pagination.Class Description Sample code.pagination Add this class to get the <ul class=\"pagination\"> pagination on your page. <li><a href=\"#\">&laquo;</a></li> <li><a href=\"#\">1</a></li> ....... </ul>.disabled, You can customize links by <ul class=\"pagination\">.active using.disabled for unclickable <li class=\"disabled\"><a links and .activeto indicate the current page. href=\"#\">&laquo;</a></li> <li class=\"active\"><a href=\"#\">1<span class=\"sr- only\">(current)</span></a></li> ....... </ul>.pagination-lg, Use these classes to get <ul class=\"pagination pagination-.pagination- different size items. lg\">...</ul>sm <ul class=\"pagination\">...</ul> <ul class=\"pagination pagination- sm\">...</ul>DEFAULT PAGINATIONFollowing example demonstrates the use of class .pagination discussed in the above table: <ul class=\"pagination\"> <li><a href=\"#\">&laquo;</a></li> <li><a href=\"#\">1</a></li>TUTORIALS POINTSimply Easy Learning

<li><a href=\"#\">2</a></li> <li><a href=\"#\">3</a></li> <li><a href=\"#\">4</a></li> <li><a href=\"#\">5</a></li> <li><a href=\"#\">&raquo;</a></li> </ul>STATESFollowing example demonstrates the use of class .disabled, .active discussed in the above table: <ul class=\"pagination\"> <li><a href=\"#\">&laquo;</a></li> <li class=\"active\"><a href=\"#\">1</a></li> <li class=\"disabled\"><a href=\"#\">2</a></li> <li><a href=\"#\">3</a></li> <li><a href=\"#\">4</a></li> <li><a href=\"#\">5</a></li> <li><a href=\"#\">&raquo;</a></li> </ul>SIZINGFollowing example demonstrates the use of classes for sizing, .pagination-* discussed in the above table: <ul class=\"pagination pagination-lg\"> <li><a href=\"#\">&laquo;</a></li> <li><a href=\"#\">1</a></li> <li><a href=\"#\">2</a></li> <li><a href=\"#\">3</a></li> <li><a href=\"#\">4</a></li> <li><a href=\"#\">5</a></li> <li><a href=\"#\">&raquo;</a></li> </ul><br> <ul class=\"pagination\"> <li><a href=\"#\">&laquo;</a></li> <li><a href=\"#\">1</a></li> <li><a href=\"#\">2</a></li> <li><a href=\"#\">3</a></li> <li><a href=\"#\">4</a></li> <li><a href=\"#\">5</a></li> <li><a href=\"#\">&raquo;</a></li> </ul><br> <ul class=\"pagination pagination-sm\"> <li><a href=\"#\">&laquo;</a></li> <li><a href=\"#\">1</a></li> <li><a href=\"#\">2</a></li> <li><a href=\"#\">3</a></li> <li><a href=\"#\">4</a></li> TUTORIALS POINT Simply Easy Learning

<li><a href=\"#\">5</a></li> <li><a href=\"#\">&raquo;</a></li></ul>PagerIf you need to create simple pagination links that go beyond text, the pager can work quite well. Like the paginationlinks, the pager is an unordered list. By default the links are centered. The following table lists the classesBootstrap provides for pager.Class Description Sample code.pager Add this class to get the pager <ul class=\"pager\"> links. <li><a href=\"#\">Previous</a></li> <li><a href=\"#\">Next</a></li> </ul>.previous, Use class .previous to left align <ul class=\"pager\"> <li class=\"previous\"><a.next and.next to right-align the links. href=\"#\">&larr; Older</a></li> <li class=\"next\"><a href=\"#\">Newer &rarr;</a></li> </ul>.disabled Add this class to get a muted <ul class=\"pager\"> look. <li class=\"previous disabled\"><a href=\"#\">&larr; Older</a></li> <li class=\"next\"><a href=\"#\">Newer &rarr;</a></li> </ul>DEFAULT PAGERFollowing example demonstrates the use of class .pager discussed in the above table: <ul class=\"pager\"> <li><a href=\"#\">Previous</a></li> <li><a href=\"#\">Next</a></li> </ul>TUTORIALS POINTSimply Easy Learning

ALIGNED LINKSFollowing example demonstrates the use of classes for alignment, .previous, .next discussed in the above table: <ul class=\"pager\"> <li class=\"previous\"><a href=\"#\">&larr; Older</a></li> <li class=\"next\"><a href=\"#\">Newer &rarr;</a></li> </ul>STATESFollowing example demonstrates the use of class .disabled discussed in the above table: <ul class=\"pager\"> <li class=\"previous disabled\"><a href=\"#\">&larr; Older</a></li> <li class=\"next\"><a href=\"#\">Newer &rarr;</a></li> </ul> TUTORIALS POINT Simply Easy Learning

CHAPTER 22Bootstrap LabelsThis chapter will discuss about Bootstrap labels. Labels are great for offering counts, tips, or other markup for pages. Use class .label to display labels as shown in the following example: <h1>Example Heading <span class=\"label label-default\">Label</span></h1> <h2>Example Heading <span class=\"label label-default\">Label</span></h2> <h3>Example Heading <span class=\"label label-default\">Label</span></h3> <h4>Example Heading <span class=\"label label-default\">Label</span></h4> You can the appearance of the labels using the modifier classes label-default, label-primary, label-success, label-info, label-warning, label-danger as shown in the following example: <span class=\"label label-default\">Default Label</span> <span class=\"label label-primary\">Primary Label</span> <span class=\"label label-success\">Success Label</span> <span class=\"label label-info\">Info Label</span> <span class=\"label label-warning\">Warning Label</span> <span class=\"label label-danger\">Danger Label</span> TUTORIALS POINT Simply Easy Learning