Explain the components of Bootstrap
Last Updated :
10 Nov, 2021
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.
- Spinner: The spinner displays the loading state of websites or projects. They are built with HTML, CSS and don’t require any JavaScript.
- 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.
- Carousel: It is a slide show of image or text content built with CSS 3D and JavaScript.
- 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.
- Collapse: It is a JavaScript plugin that is used to show or hide the content.
- 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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Components of BootStrap 4</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<br />
<h3>Nav:</h3>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active"
href="#">Active link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#provide link url here">
First link
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#provide link url here">
second link
</a>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#provide link url here"
tabindex="-1"
aria-disabled="true"
>Disabled</a>
</li>
</ul>
<h3>Alert:</h3>
<div class="alert alert-info"
role="alert">
A simple alert!
</div>
<h3>Modal:</h3>
<button
type="button"
class="btn btn-success"
data-toggle="modal"
data-target="#exampleModal">
geeksforgeeks
</button>
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">
geeksforgeeks
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Hello, thanks for checking
out geeksforgeeks!
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-dismiss="modal">
Close
</button>
<button type="button"
class="btn btn-primary">
Save
</button>
</div>
</div>
</div>
</div>
</html>
|
Output:
Example 2: This example illustrates the use of Bootstrap jumbotron.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<link
rel="stylesheet" href=
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1 class="text-center text-success">
GeeksforGeeks
</h1>
<h3>Bootstrap Jumbotron Tutorial</h3>
<p>
Bootstrap is a free and open-source
tool collection for creating responsive
websites and web applications. It is
the most popular HTML, CSS, and
JavaScript framework for developing
responsive, mobile-first websites.
</p>
</div>
</div>
</body>
</html>
|
Output:
Bootstrap Jumbotron
Example 3: This example illustrates the use of Bootstrap toast.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Toast Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<h3 class="text-success">GeeksforGeeks</h3>
<h5>Toast Example</h5>
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">
GeeksforGeeks
</strong>
<button type="button"
class="ml-2 mb-1 close"
data-dismiss="toast">
×
</button>
</div>
<div class="toast-body">
A Computer Science portal for geeks.
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".toast").toast("show");
});
</script>
</body>
</html>
|
Output:
Bootstrap Toast
Share your thoughts in the comments
Please Login to comment...