Explain the components of Bootstrap - GeeksforGeeks

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.
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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script>  </head>     <!-- A nav code-->  <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>     <!-- A nav code-->   <!-- A small alert code-->  <h3>Alert:</h3>  <div class="alert alert-info"       role="alert">       A simple alert!  </div>     <!-- A small alert code-->  <h3>Modal:</h3>   <!-- Button trigger modal-->  <button    type="button"    class="btn btn-success"    data-toggle="modal"    data-target="#exampleModal">    geeksforgeeks  </button>   <!-- Modal -->  <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>     <!-- A button trigger modal--></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="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />  </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">    </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
kashishsoda
Bootstrap-4
Bootstrap-Questions
HTML-Questions
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?