Form act as a container for form elements. All textual input, textarea, and select elements with class .form-control have a width of 10 Bootstrap provides following three types of form layouts: • Vertical form (this is default) • Horizontal form • Inline form Standard rules for Vertical form layouts: • Wrap labels and form controls … Read more
The .collapse class is used for bootstrap collapse functionality. It is used to hide and show large amount of content. Bootstrap Simple Collapsible Example: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap Simple Collapsible Example</h2> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button> … Read more
Dropdown menu is a graphical control element like a list box that allows the user to choose one value from a predefined list. It is a toggleable menu. Bootstrap provides the following classes to create a dropdown. .dropdown: class is used to create a dropdown menu. .dropdown-toggle: class is used to make dropdown toggleable. .caret: … Read more
Glyphicons are the icon fonts which we can use in web projects. Bootstrap provides the following Glyphicons from the Glyphicons Halflings set. Glyphicons Halflings are normally not available for free but their creator has made them available for Bootstrap free of cost. glyphicon glyphicon-asterisk glyphicon glyphicon-plus glyphicon glyphicon-minus glyphicon glyphicon-eur glyphicon glyphicon-euro glyphicon glyphicon-cloud glyphicon … Read more
Panel refers to a bordered box with some padding around its content. Bootstrap provides the .panel class to create the panel. The .panel-body class is used for the content inside the panel. Bootstrap Basic Panel Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Basic Panel Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script … Read more
Bootstrap provide the facility to create a group of list with list items. The most basic list group is an unordered list with list items. Use an ul element with class .list-group, and li elements with class .list-group-item to create a basic list group. Bootstrap Basic List Group Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap … Read more
Pager is also a form of pagination. Pager provides previous and next buttons (links). Add the .pager class to an ul element to create previous/next buttons. Bootstrap Pager Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Pager Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> … Read more
Pagination is the process of separating print or digital content into discrete pages. Basic pagination is created by adding the .pagination class to an ul element. Bootstrap Pagination Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Pagination Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> … Read more
A progress bar is a graphical control element used to visualize the progression of an extended computer operation. Bootstrap provides several types of progress bars. The .progress class is used with div element to create default progress bar. Bootstrap Basic Progress Bar Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Basic Progress Bar Example</title> <meta charset="utf-8"> … Read more
Labels are used to provide additional information about something. The .label class one of the six contextual classes .label-default, .label-primary, .label-success, .label-info, .label-warning or .label-danger, within a element is used to create a label. Bootstrap Labels Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Labels Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script … Read more