Category: 02. Examples

Bootstrap collapse is used when you want to hide and show large amount of content. The “.collapse” class is used to specify the collapsible element. Bootstrap Collapse Example Bootstrap Collapsible Panel You can also collapse a panel. See this example: Bootstrap Collapsible List Group You can also create a collapsible panel with a list group inside. See…

Dropdown menus are toggleable, contextual menus, used for displaying links in a list format. It facilitates users to choose one value from a predefined list. This can be made interactive with the dropdown JavaScript plugin. You have to wrap dropdown menu within the class .dropdown to create Bootstrap Dropdown. Bootstrap Dropdown Example Bootstrap Dropdown Divider…

Bootstrap list group is used to create a group of list with list items. The most basic list group is an unordered list containing list items. The class “.list-group” within the <ul> element and the class “.list-group-item” within the <li>element are used to create a basic list group. Bootstrap List Group Example Bootstrap List Group with Badges The badges…

The progress bar shows how far a user is in a process. In Bootstrap, there are several types of progress bars. The class .progress within a <div> element is used to create a default progress bar in bootstrap. Bootstrap Progress Bar Example Bootstrap 4 Basic Progress Bar Progress bar is used to show a user how far…

The Bootstrap carousel is a flexible, responsive way that is used to add a slider to your webpage. It is very responsive and flexible enough to allow, images, iframes, videos, or any other type of content that you want to add. The Carousel Plugin: The carousel plugin is a component for cycling through element, like…

Glyphicons are the icon fonts that are used in web projects. Bootstrap provides 260 Glyphicons from the Glyphicons Halflings set. Some examples of Glyphicons are: Glyphicons Syntax To create the desired Glyphicon, the “name” part of the syntax must be replaced accordingly. For example: If you want to create “envelope” glyphicon, then you must write the…

Bootstrap supports for images. There are three classes in Bootstrap that can be used to apply some simple style to the images. The following classes add style to the images: Classes Uses .img-rounded It adds border-radius:6px to give the image rounded corners. .img-circle It makes the entire image round by adding border-radius:500px. .img-thumbnail It adds…

Bootstrap pager is a form of pagination. It is used to create previous and next buttons (links). The “.pager” class is used within the <ul> element to create the previous / next buttons. Bootstrap Pager Example Bootstrap Pager Align Buttons You can align the previous and next buttons to each side of the page.The classes “.previous” and “.next” is used to…

Pagination is used to sort the web pages of your website in an organized manner. It becomes very necessary if your website has a lot of web pages. Following is a list of classes that Bootstrap provides to handle pagination.Table: Class Description .pagination Add this class to get the pagination on your page. .disabled,.active you…

In Bootstrap, a panel is a bordered box with some padding around its element. The panel components are used when you want to put your DOM component in a box. The class .panel is used within the <div> element to create Bootstrap panels. The content inside the panel has a .panel-body class. Generally a panel contains three parts:…