Explain the components of Bootstrap
Bootstrap 4 provides a variety of customizable and reusable components which makes the development faster and easier. They are heavily based on the base modifier nomenclature i.e. the base class has many groups of shared properties together while the modifier class has a group of individual styles. For example, .btn is a base class and .btn-primary or .btn-success is a modifier class. The bootstrap components range from alerts, buttons, badges, cards to various other components.
List of components:
- Jumbotron: It simply put extra attention to particular content or information by making it larger and more eye-catching.
- Alerts: It is a popup with a predefined message that appears after a particular action.
- Buttons: It is customized buttons that are used to perform an action in the form, dialogue box, etc. They are in multiple states, sizes and have predefined styles.
- Button group: It is a group of buttons aligned in a single line and they can be arranged both vertically as well as horizontally.
- Badge: It Is a labeling component that is used to add additional information.
- Progress Bar: It is used to show the progress of a particular operation with a custom progress bar. They have text labels, stacked bars, and animated backgrounds.
- Scrollspy: It keeps updating the navigation bar to the currently active link based on the scroll position in the viewport.
- List group: It is used to display an unordered series of content in a proper way.
- Card: It provides a customizable, extensible, and flexible content container.
- Dropdown: It is used to drop the menu in the format of a list of links, they are contextual and toggleable overlays.
- Navs: It is used to create a basic and simple navigation menu with a .nav base class.
- Navbar: The navigation bar is the headers at the top of a website or webpage.
- Forms: Forms are used to take multiple inputs at once from the user. Bootstrap has two layouts available stacked and inline.
- Input groups: They have extended form controls by adding a button, button group or text on either side of inputs.
- Breadcrumb: It provides the location of the current page in a navigational hierarchy and also adds separators through CSS.
- Toast: It displays a message for a small amount of time, a few seconds. They are alert messages designed to imitate push notifications popular in desktop and mobile systems.
- Tooltip: It provides small information about the element/link when the mouse hovers over the element.
- Popovers: It displays extra information about the element/link when clicked on it.
- Modal: It is a small popup window positioned over the actual window.
- Pagination: It is used to easily navigate between different pages, a large block of connected links is used for making them accessible.
- Media Object: The Media object is used for repetitive and complex components like tweets or blogs. The images or videos are placed/aligned to the left or the right of the content.
Example 1: In this example, we will use a few of the components from the list.
Example 2: This example illustrates the use of Bootstrap jumbotron.
Example 3: This example illustrates the use of Bootstrap toast.