Skip to content
geeksforgeeks
  • Tutorials
    • Python
    • Java
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
    • Practice Coding Problems
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • BS5 Tutorial
  • BS5 Interview Questions
  • BS5 Layout
  • BS5 Content
  • BS5 Components
  • BS5 Helpers
  • BS5 Utilities
  • BS4 Tutorial
  • BS Tutorial
  • Bootstrap Cheatsheet
  • Tailwind
  • CSS Frameworks
  • HTML Formatter
Open In App
Next Article:
Bootstrap 5 Navbar Brand
Next article icon

Bootstrap 5 Modal

Last Updated : 20 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Modals are used to add dialogs to your site for lightboxes, user notifications, or completely custom content. Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

Syntax:

<div class="modal"> Contents... <div>

Example: This example uses shows the working of a modal in Bootstrap 5.

HTML 
<!DOCTYPE html> <html> <head>     <!-- Load Bootstrap -->     <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"         integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"          crossorigin="anonymous">     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"         integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"         crossorigin="anonymous">     </script>     <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"         integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"         crossorigin="anonymous">     </script> </head> <body style="text-align: center;">     <div class="container mt-3" style="width: 700px;">         <h1 style="color: green;">             GeeksforGeeks         </h1>         <!-- Button trigger modal -->         <button type="button" class="btn btn-primary"              data-toggle="modal" data-target="#exampleModal">             Launch demo modal         </button>         <!-- Modal -->         <div class="modal fade" id="exampleModal">             <div class="modal-dialog">                 <div class="modal-content">                     <div class="modal-header">                         <h5 class="modal-title">                             Modal title                         </h5>                         <button type="button" class="close"                              data-dismiss="modal" aria-label="Close">                             <span aria-hidden="true">                                 ×                             </span>                         </button>                     </div>                     <div class="modal-body">                         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 changes                         </button>                     </div>                 </div>             </div>         </div>     </div> </body> </html>

Output :

Tooltips: can be added inside the modal. When modals are closed, tooltips within are also automatically dismissed. 

Example: 

HTML 
<!DOCTYPE html> <html> <head>     <!-- Load Bootstrap -->     <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"         integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"          crossorigin="anonymous" >     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"         integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"         crossorigin="anonymous">     </script>     <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"         integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"         crossorigin="anonymous">     </script> </head> <body style="text-align: center;">     <div class="container mt-3" style="width: 700px;">         <h1 style="color: green;">             GeeksforGeeks         </h1>         <!-- Button trigger modal -->         <button type="button" class="btn btn-primary"              data-toggle="modal" data-target="#exampleModal">             Launch demo modal         </button>         <!-- Modal -->         <div class="modal fade" id="exampleModal">             <div class="modal-dialog">                 <div class="modal-content">                     <div class="modal-header">                         <h5 class="modal-title">Modal title</h5>                         <button type="button" class="close"                              data-dismiss="modal" aria-label="Close">                             <span aria-hidden="true">                                 ×                             </span>                         </button>                     </div>                     <div class="modal-body">                         <h5>Tooltips in a modal</h5>                         <a href="#" data-toggle="tooltip"                              title="GeeksforGeeks" data-placement="right">                             Hover over me                         </a>                     </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 changes                         </button>                     </div>                 </div>             </div>         </div>     </div>     <script>         // Enable tooltips         var tooltipTriggerList =             [].slice.call(                 document.querySelectorAll('[data-toggle="tooltip"]'));         var tooltipList =             tooltipTriggerList.map(function (tooltipTriggerEl) {                 return new bootstrap.Tooltip(tooltipTriggerEl);             });     </script> </body> </html>

Output:

Popovers: can be added inside the modal. When modals are closed, popovers within are also automatically dismissed. 

Example: 

HTML 
<!DOCTYPE html> <html> <head>     <!-- Load Bootstrap -->     <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"         integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"          crossorigin="anonymous">     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"         integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"         crossorigin="anonymous">     </script>     <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"         integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"         crossorigin="anonymous">     </script> </head> <body style="text-align: center;">     <div class="container mt-3" style="width: 700px;">         <h1 style="color: green;">             GeeksforGeeks         </h1>         <!-- Button trigger modal -->         <button type="button" class="btn btn-primary"              data-toggle="modal" data-target="#exampleModal">             Launch demo modal         </button>         <!-- Modal -->         <div class="modal fade" id="exampleModal">             <div class="modal-dialog">                 <div class="modal-content">                     <div class="modal-header">                         <h5 class="modal-title">                             Modal title                         </h5>                         <button type="button" class="close"                              data-dismiss="modal" aria-label="Close">                             <span aria-hidden="true">                                 ×                             </span>                         </button>                     </div>                     <div class="modal-body">                         <h5>                           Popover in a modal                         </h5>                         <a href="#" data-toggle="popover"                              title="This is GeeksforGeeks"                             data-content="Portal for CS Geeks">                             Toggle popover                         </a>                     </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 changes                         </button>                     </div>                 </div>             </div>         </div>     </div>     <script>         // Enable popovers         var popoverTriggerList =             [].slice.call(                 document.querySelectorAll('[data-toggle="popover"]'))         var popoverList =             popoverTriggerList.map(function (popoverTriggerEl) {                 return new bootstrap.Popover(popoverTriggerEl);             });     </script> </body> </html>

Output:

Using Grids: We can utilize the Bootstrap grid system within a modal by nesting .container-fluid within the .modal-body. Then, use the normal grid system classes as you would anywhere else. 

Example: 

HTML 
<!DOCTYPE html> <html> <head>     <!-- Load Bootstrap -->     <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"         integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"          crossorigin="anonymous">     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"         integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"         crossorigin="anonymous">     </script>     <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"         integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"         crossorigin="anonymous">     </script> </head> <body style="text-align: center;">     <div class="container mt-3" style="width: 700px;">         <h1 style="color: green;">             GeeksforGeeks         </h1>         <!-- Button trigger modal -->         <button type="button" class="btn btn-primary"              data-toggle="modal" data-target="#exampleModal">             Launch demo modal         </button>         <!-- Modal -->         <div class="modal fade" id="exampleModal">             <div class="modal-dialog">                 <div class="modal-content">                     <div class="modal-header">                         <h5 class="modal-title">Modal title</h5>                         <button type="button" class="close"                              data-dismiss="modal" aria-label="Close">                             <span aria-hidden="true">                                 ×                             </span>                         </button>                     </div>                     <div class="modal-body">                         <div class="container-fluid">                             <div class="row">                                 <div class="col-md-4" style="background: red;                                                 color: white;">                                     This is 4 grids                                 </div>                                 <div class="col-md-8" style="background: green;                                                 color: white;">                                     This is 8 grids                                 </div>                             </div>                             <div class="row">                                 <div class="col-md-12" style="background: blue;                                                 color: white;">                                     This is 12 grids                                 </div>                             </div>                         </div>                     </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 changes                         </button>                     </div>                 </div>             </div>         </div>     </div> </body> </html>

Output:

Varying modal content: We can trigger the same modal with different data as given below. 

Example: 

HTML 
<!DOCTYPE html> <html>     <head>         <!-- Load Bootstrap -->         <link rel="stylesheet"             href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"             integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"             crossorigin="anonymous" />         <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"                 integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"                 crossorigin="anonymous">           </script>         <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"                 integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"                 crossorigin="anonymous">           </script>     </head>      <body style="text-align: center;">         <div class="container mt-3"             style="width: 700px;">             <h1 style="color: green;">                 GeeksforGeeks             </h1>             <!-- Button trigger modal -->             <button type="button"                     class="btn btn-primary"                     data-toggle="modal"                     data-target="#exampleModal"                     data-whatever="@geeksforgeeks">             Send email to @geeksforgeeks               </button>             <button type="button"                     class="btn btn-primary"                     data-toggle="modal"                     data-target="#exampleModal"                     data-whatever="@gurrrung">             Send email to author @gurrrung               </button>              <!-- Modal -->             <div class="modal fade" id="exampleModal">                 <div class="modal-dialog">                     <div class="modal-content">                         <div class="modal-header">                             <h5 class="modal-title">                             New message                               </h5>                             <button type="button"                                     class="close"                                     data-dismiss="modal"                                     aria-label="Close">                                 <span aria-hidden="true">                                     ×                                   </span>                             </button>                         </div>                         <div class="modal-body">                             <form>                                 <div class="mb-3">                                     <label for="recipient-name"                                         class="col-form-label">                                         Recipient:                                       </label>                                     <input type="text"                                         class="form-control"                                         id="recipient-name" />                                 </div>                                 <div class="mb-3">                                     <label for="message-text"                                         class="col-form-label">                                         Message:                                       </label>                                     <textarea class="form-control"                                             id="message-text">                                     </textarea>                                 </div>                             </form>                         </div>                         <div class="modal-footer">                             <button type="button"                                     class="btn btn-secondary"                                     data-dismiss="modal">                                 Close                               </button>                             <button type="button"                                     class="btn btn-primary">                                 Send message                               </button>                         </div>                     </div>                 </div>             </div>         </div>         <script>             var exampleModal =                 document.getElementById("exampleModal");             exampleModal.addEventListener(             "show.bs.modal", function (event) {                 // Button that triggered the modal                 var button = event.relatedTarget;                 // Extract info from data-* attributes                 var recipient =                     button.getAttribute("data-whatever");                 // Update the modal's content.                 var modalTitle =         exampleModal.querySelector(".modal-title");                 var modalBodyInput =         exampleModal.querySelector(".modal-body input");                 modalTitle.textContent =                 "New message to " + recipient;                 modalBodyInput.value = recipient;             });         </script>     </body> </html>

Output:

 Optional sizes:

Default max-width of a Bootstrap modal is 500px. Bootstrap provides the option to customize the size of the Modal by using certain classes as described below:

  • modal-xl
  • modal-lg
  • modal-sm

modal-xl: This provides the largest modal size with max-width of 1140px. 

Example: 

HTML 
<!DOCTYPE html> <html> <head>     <!-- Load Bootstrap -->     <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"         integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"          crossorigin="anonymous">     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"         integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"         crossorigin="anonymous">     </script>     <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"         integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"         crossorigin="anonymous">     </script> </head> <body style="text-align: center;">     <div class="container mt-3" style="width: 700px;">         <h1 style="color: green;">             GeeksforGeeks         </h1>         <!-- Button trigger modal -->         <button type="button" class="btn btn-primary"              data-toggle="modal" data-target="#exampleModal">             Launch demo modal         </button>         <!-- Modal -->         <div class="modal fade" id="exampleModal">             <div class="modal-dialog modal-xl">                 <div class="modal-content">                     <div class="modal-header">                         <h5 class="modal-title">                             Modal title                         </h5>                         <button type="button" class="close"                              data-dismiss="modal" aria-label="Close">                             <span aria-hidden="true">                                 ×                             </span>                         </button>                     </div>                     <div class="modal-body">                         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 changes                         </button>                     </div>                 </div>             </div>         </div>     </div> </body> </html>

Output:

modal-lg: This provides the large modal size with a max-width of 800px. 

Example: 

HTML 
<!DOCTYPE html> <html> <head>     <!-- Load Bootstrap -->     <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"         integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"          crossorigin="anonymous">     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"         integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"         crossorigin="anonymous">     </script>     <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"         integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"         crossorigin="anonymous">     </script> </head> <body style="text-align: center;">     <div class="container mt-3" style="width: 700px;">         <h1 style="color: green;">             GeeksforGeeks         </h1>         <!-- Button trigger modal -->         <button type="button" class="btn btn-primary"              data-toggle="modal" data-target="#exampleModal">             Launch demo modal         </button>         <!-- Modal -->         <div class="modal fade" id="exampleModal">             <div class="modal-dialog modal-lg">                 <div class="modal-content">                     <div class="modal-header">                         <h5 class="modal-title">                             Modal title                         </h5>                         <button type="button" class="close"                              data-dismiss="modal" aria-label="Close">                             <span aria-hidden="true">                                 ×                             </span>                         </button>                     </div>                     <div class="modal-body">                         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 changes                         </button>                     </div>                 </div>             </div>         </div>     </div> </body> </html>

Output:

modal-sm: This provides the largest modal size with a max-width of 300px. 

Example: 

HTML 
<!DOCTYPE html> <html> <head>     <!-- Load Bootstrap -->     <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"         integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"          crossorigin="anonymous">     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"         integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"         crossorigin="anonymous">     </script>     <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"         integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"         crossorigin="anonymous">     </script> </head> <body style="text-align: center;">     <div class="container mt-3" style="width: 700px;">         <h1 style="color: green;">             GeeksforGeeks         </h1>         <!-- Button trigger modal -->         <button type="button" class="btn btn-primary"              data-toggle="modal" data-target="#exampleModal">             Launch demo modal         </button>         <!-- Modal -->         <div class="modal fade" id="exampleModal">             <div class="modal-dialog modal-sm">                 <div class="modal-content">                     <div class="modal-header">                         <h5 class="modal-title">                             Modal title                         </h5>                         <button type="button" class="close"                              data-dismiss="modal" aria-label="Close">                             <span aria-hidden="true">                                 ×                             </span>                         </button>                     </div>                     <div class="modal-body">                         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 changes                         </button>                     </div>                 </div>             </div>         </div>     </div> </body> </html>

Output:


Next Article
Bootstrap 5 Navbar Brand

G
gurrrung
Improve
Article Tags :
  • Web Technologies
  • Bootstrap
  • Bootstrap-Misc

Similar Reads

    Bootstrap 5 Tutorial
    Bootstrap 5 is a front-end framework that helps developers create responsive and visually appealing websites quickly and efficiently. Bootstrap 5 simplifies the process of web development with its intuitive design system and extensive components. This version includes improved responsiveness, stream
    6 min read
    Bootstrap 5 Introduction
    Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes to
    4 min read

    Layout

    Bootstrap 5 Layout Breakpoints
    Bootstrap 5 layout breakpoints are specific screen widths at which the appearance and behavior of elements on a webpage change. These breakpoints enable responsive design, adjusting content layout and design for various devices, like mobile, tablet, and desktop.Core Concept:Breakpoints in responsive
    3 min read
    Bootstrap 5 Layout Containers
    Bootstrap5 Layout Containers are considered the most basic layout that can be used and they can be used to contain other layouts. Containers are basically used to add pad the contents inside or center the items inside the container. In this article, we'll see Bootstrap 5 Layout Containers.Layout Con
    3 min read
    BootStrap 5 Layout Grid System
    BootStrap5 Layout Grid system is responsive. It comes with a flexbox and allows up to 12 columns across the page. You can also group the columns together. The grid system is a powerful mobile-first responsive flexbox grid. How it works: Here’s how the grid system comes together: Its grid supports si
    3 min read
    Bootstrap 5 Columns
    Bootstrap 5 Columns facilitates the different option for the alignment, ordering, and offsetting of the Columns with the help of flexbox grid system. The different available column classes can be utilized to manage widths of non-grid elements. Bootstrap 5 Columns: The following components is used th
    2 min read
    Bootstrap 5 Gutters
    Bootstrap 5 Gutters are used to give padding between columns, responsively space, and align content to the grid system. How gutters works? Using the .padding-right and .padding-left classes, we can add padding to the right and left of each column. Gutters, which are produced by horizontal padding, a
    2 min read
    Bootstrap 5 Utilities
    Bootstrap 5 provides a lot of utilities to make a stylish, mobile-friendly, and responsive front-end website without using any CSS code. The utility layout is used for showing, hiding, aligning, and spacing content. Bootstrap 5 utilities for layout: Changing display: Bootstrap 5 provides some displa
    2 min read
    Bootstrap 5 Z-index
    In Bootstrap 5, the z-index property controls the stacking order of elements. It defines the depth of an element along the z-axis, determining which elements appear above others. Higher values place elements closer to the foreground, while lower values move them to the background. Bootstrap 5 z-inde
    2 min read

    Content

    Bootstrap Reboot
    Bootstrap Reboot is used to reboot all the styles of some specific elements. It normalizes HTML elements with opinionated styles, sets better defaults for <html> and <body> elements, optimizes text rendering with native font stacks, and resets margins, paddings, and other styles for cons
    2 min read
    Bootstrap 5 Typography
    Bootstrap 5 Typography styles and formats text, providing customized headings, subheadings, lists, paragraphs, and font styles. It supports global settings for font stack, headings, link styles, ensuring consistency across devices. Here's the information represented in a table format: TermDescriptio
    2 min read
    Bootstrap 5 Images
    Bootstrap 5 provides classes for responsive images, ensuring they scale appropriately within their parent elements, maintaining aspect ratio, and enhancing appearance across devices without overflowing.Types of Images:TermDescriptionResponsive imagesResize images according to parent element and scre
    1 min read
    Bootstrap 5 Tables
    Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive. Bootstrap 5 Tables:
    2 min read
    Bootstrap 5 Figures
    A Bootstrap5 Figures is a component that provides a way to display a piece of content along with an image. If we want to show the image with an optional component, the figure class in Bootstrap 5 is used. Bootstrap 5 Figures Classes: figure: used to display content, like any image with an optional c
    2 min read

    Forms

    Bootstrap-5 Forms
    Form controls: <input>, <select>, <textarea> are the tags used for general appearance like input field, select item and textareas.      Note: To make the user interface more presentable, use properties like padding, margins as per the need. Example:  HTML <!DOCTYPE html> <
    2 min read
    Bootstrap 5 Form Controls
    Form controls like <input>, <select>, <textarea> are the tags used to add custom styles, sizing, focus states to  input field, select item, and text-areas etc. Below are utilities of form control:Sizing: This utility is used to set the label of the form input field in different siz
    2 min read
    Bootstrap 5 Select
    Bootstrap 5 Select form is used to create customized select elements with custom CSS that changes the element’s initial appearance. Bootstrap 5 Select Options: Default: It is used to create a default list of options from which a single option can be selected. To create a select option, we use <se
    2 min read
    Bootstrap 5 Checks and Radios
    Bootstrap 5 provides us with utility Checks and radios. This utility is used for creating checkboxes and radio without using CSS.Bootstrap 5 Checks and Radios:Checks: The checkboxes are used for selecting one or several options in a list.Radios: The radios are for selecting one option from many opti
    2 min read
    Bootstrap 5 Range
    Bootstrap 5 Range is the limit slider between values that can vary. Bootstrap provides us with a custom range of inputs that provides consistent cross-browser styling. The value and background for the range slider are both styled to look the same across all other browsers. Disabled: It is grayed out
    2 min read
    Bootstrap 5 Input Group
    Bootstrap 5 Input Group allows extending the default form controls easily by incorporating text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. Bootstrap 5 facilitates several different components that can be utilized to create the basic Input gro
    3 min read
    Bootstrap 5 Floating labels
    Bootstrap 5 floating labels are form labels that float over input fields, improving UX. Wrap form controls like <input>, <label>, <textarea>, <select> inside <div> with class .form-floating. Ensure these elements precede <label> inside the floating <div>.Boo
    2 min read

    Forms Layout

    Bootstrap 5 Layout Forms
    Bootstrap 5 Layout forms provide control of the input field and custom positioning. All the fields should be placed inside the <form> tag. By default the form is aligned vertically as the default value for display is block and is set to 100%. We can use additional classes to change this defaul
    2 min read
    Bootstrap5 Layout Utilities
    Bootstrap 5 Layout Utilities facilitate mobile-friendly, responsive websites. They offer numerous utility classes for tasks like displaying, hiding, aligning, and spacing content, enabling versatile modifications tailored to different design requirements. NameDescriptionChanging displayBootstrap 5 p
    2 min read
    Bootstrap 5 Layout Form Grid
    Bootstrap 5 Layout Form Grid is used to create a complex form using grid classes. The form grid layout required multiple columns of different widths and alignments. To create a form grid, we use .row and .col classes. Form Grid Layout used Classes: .row: This class is used to create a row of a form
    2 min read
    Bootstrap 5 Layout Gutters
    Gutters are the gaps between the columns in bootstrap's grid layout. The gutter modifier classes can be used to change the widths of the gutters. There are 3 primary gutter modifier classes that are listed below: Bootstrap5 Layout Gutter Modifier Classes: g-*: This class is used to set the width of
    2 min read
    Bootstrap 5 Layout Horizontal form
    Bootstrap 5 Layout Horizontal form is used to create horizontal forms by using the .row class with .col-*-* classes to specify the width of your labels and controls. Also, use the .col-form-label class with <label> element to set the form label in vertically centered. Layout Horizontal form us
    2 min read
    Bootstrap 5 Layout Horizontal form label sizing
    Bootstrap 5 Layout Horizontal form label sizing is used to set the label of the form input field in different sizes. To set the label size, use the .col-form-label-sm or .col-form-label-lg class to <label> or <legend> tag with the size of .form-control-lg and .form-control-sm. Horizontal
    2 min read
    Bootstrap 5 Layout Column sizing
    Bootstrap 5 Layout Column sizing is used to set the width of the column element. To create equal widths columns, .col within .row classes are used. We can also use the subset of classes to set split the columns unequally. Layout Column sizing used Classes: .row: This class is used to create rows for
    2 min read
    Bootstrap 5 Layout Auto-sizing
    Bootstrap5 layout Auto-sizing dynamically calculates the size height, width, and positions of the elements can be adjusted automatically. It uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed.Bootstrap5 Lay
    2 min read
    Bootstrap 5 Layout Inline forms
    Bootstrap 5 Layout Inline forms consist of a responsive horizontal layout. All of the elements are inline and left-aligned, and labels are alongside, and only apply to forms within viewports. Bootstrap 5 Layout Inline forms used classes:row-cols-lg-auto: This class is used to create horizontal layou
    2 min read
    Bootstrap 5 Validation
    Bootstrap 5 Validation refers to the process of enhancing form input accuracy in web development. It utilizes HTML5 validation features, providing feedback to users regarding input correctness. This feature supports customization with custom styles and JavaScript for improved user experience.Bootstr
    4 min read

    Components

    Bootstrap 5 Accordion
    Bootstrap 5 Accordion organizes content into collapsible panels, enabling space-efficient presentation of information. It allows users to toggle between panel visibility, enhancing user experience, and content organization within web applications. iframe { width: 100%; height: 500px;} @media (max-wi
    3 min read
    Bootstrap 5 Alerts
    Bootstrap 5 Alerts are customizable components used to convey important information to users. They come in various styles such as success, warning, danger, and info, providing visual feedback to users based on different actions or states within a web application. iframe { width: 100%; height: 450px;
    2 min read
    Bootstrap 5 Badges
    Bootstrap 5 Badges are small components used to highlight specific information, typically in lists or inline with other content. They provide visual cues through colored backgrounds and customizable text, helping to draw attention to key details or status indicators within a webpage or application.
    2 min read
    Bootstrap Breadcrumb
    Bootstrap 5 Breadcrumb simplifies website navigation by displaying a sequential path to the current page. It enhances user experience by visually indicating the hierarchical structure of the site, facilitating easy navigation as per Bootstrap 5 documentation. Bootstrap 5 Breadcrumb TermDescriptionBr
    2 min read
    Bootstrap 5 Buttons
    Bootstrap 5 Buttons are pre-styled components in the Bootstrap framework, offering consistent design and functionality. They streamline development by providing ready-to-use button styles, sizes, and behaviors, ensuring a cohesive and responsive user interface across web applications with minimal CS
    3 min read
    Bootstrap 5 | Button group
    Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Button group is a component provided by Bootstrap 5 which helps to combine the buttons in a series in a single line. All types of buttons are supported by it. Syntax: <div class="btn-
    4 min read
    Bootstrap 5 | Card
    Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. The card is a component provided by Bootstrap 5 which provides a flexible and extensible content container with multiple variants and options. It includes options for headers and footers
    11 min read
    Bootstrap 5 Carousel
    Bootstrap 5 Carousel is a slideshow component for cycling through images or slides, allowing users to showcase multiple pieces of content in a visually appealing and interactive way. It offers various options for customization and responsive design.Bootstrap Carousel Classes:ClassDescriptioncarousel
    3 min read
    Bootstrap 5 | Close button
    Bootstrap 5 provides a new component which is a Close button which can be used for dismissing content like modals and alerts. It can be included in the webpage using bootstrap.js or bootstrap.min.js. This component can be combined with models, alerts, and popovers. Disabled close buttons have pointe
    1 min read
    Bootstrap 5 Collapse
    Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Collapse is used to toggle the visibility of content across your project with a few classes and the JavaScript plugins which comes with Bootstrap 5. The working of collapse component is
    3 min read
    Bootstrap 5 Dropdowns
    Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by
    9 min read
    Bootstrap 5 List group
    Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. List groups are a flexible and powerful component for displaying a series of content. These can be modified and extended to support just about any content within. Use .list-group and .li
    5 min read
    Bootstrap 5 Modal
    Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Modals are used to add dialogs to your site for lightboxes, user notifications, or completely custom content. Modals are built with HTML, CSS, and JavaScript. They’re positioned over eve
    7 min read

    Navbar

    Bootstrap 5 Navbar Brand
    Bootstrap 5 Navbar brand is applied to the typical branding logo that sees in the top navigation bar. It may contain an image logo or text, etc. A Navbar helps readers in selecting topics, links, or sub-topics of their interest. Bootstrap 5 Navbar Brand: Text: The text in the user interface is added
    3 min read
    Bootstrap 5 Navbar Brand Text
    A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. Navbar Brand Text is used to add text in place of the brand logo. We can write text or links using the nav
    2 min read
    Bootstrap Navbar Brand Image
    Bootstrap Navbar Brand Image is used to put the image inside of a navbar, a navigation bar component in the Bootstrap framework. It typically appears at the top of a webpage, serving as a visual identifier for the website or application and linking back to the homepage. Pre-requisite: To use images
    2 min read
    Bootstrap 5 Navbar Nav
    Bootstrap 5 Navbar Nav simplifies navigation creation by grouping navigation links within a container element with the nav class. Use nav-item for each link and nav-link for styling. Customize with optional classes like "active" for the current page. Bootstrap 5 Navbar Nav class: There is no specifi
    2 min read
    Bootstrap 5 Navbar Forms
    Bootstrap 5 Navbar Forms are used to create the components like a search bar, or login within a navbar. Bootstrap 5 Navbar Forms Classes: No special classes are used in Navbar Forms. You can customize the form using Navbar and Form classes Syntax: <nav class="navbar"> <form> <input cl
    2 min read
    Bootstrap 5 Navbar Text
    Navbar Text is used to put some text on the navbar. To do so Bootstrap 5 brings the Bootstrap 5 Navbar Text features. Creating a navbar is obvious when we are creating a website, and putting text on the navbar is required to guide the visitors to the right destination. Navbar Text Class: navbar-text
    2 min read
    Bootstrap 5 Offcanvas
    Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating responsive & dynamic websites layout and web applications. Offcanvas is one of the features of Bootstrap to make web pages more attractive, along with enhancing the user experience.Offcanvas is a s
    12 min read
    Bootstrap 5 Popovers
    Bootstrap 5 Popovers Provides directional placement options (top, bottom, left, right), dismiss on click, and support for disabled elements. Styled with Sass, they feature various methods, options, and events for dynamic interaction and customization. Bootstrap 5 Popovers: AspectDescriptionFour dire
    2 min read
    Bootstrap 5 Progress
    Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. A progress bar is used to display the progress of a process on a computer. A progress bar displays how much of the process is completed and how much is left. You can add a progress bar o
    5 min read
    Bootstrap 5 Scrollspy
    Bootstrap 5 Scrollspy is used to automatically update the navigation links based on the scroll position, highlighting the corresponding section in the viewport.To use scrollspy in Bootstrap 5, we need to add the data-bs-spy="scroll" attribute to the element that should be used for scrolling and spec
    4 min read
    Bootstrap 5 Spinners
    In this article, we will implement spinners in the website using Bootstrap & will also see the implementation of different types of spinners through the example. The spinners are used to specify the loading state of a component or webpage. Bootstrap facilitates the various classes for creating d
    3 min read
    Bootstrap 5 Toasts
    Bootstrap 5 Toasts are notifications or messages which the users receive whenever they perform certain actions. They can easily be customized. Overview: Toasts need to be initialized. Apply autohide: false so that the toasts don't automatically hide.Placement: You can place toasts as you want. The t
    3 min read
    Bootstrap 5 Tooltips
    A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. The tooltip is quite useful for displaying the description of different elements on the webpage. To create a tooltip, we need to add the data-bs-toggle="tooltip" attribute to an el
    3 min read

    Helpers

    Bootstrap 5 Clearfix
    Bootstrap 5 .clearfix helper class facilitates clearing and fixing the floated content in an element or container by adding the clearfix utility. Basically, without clearfix class, the floated content/elements act like they have a position set to absolute and to fix that, we use the clearfix helper
    2 min read
    Bootstrap 5 Colored links
    Bootstrap 5 Colored links are used to add colors to the link element. To set the colored links, we use the classes of utilities built on our theme colors. To make different color links, we will use .link-* class and add CSS styles to it. Colored links used Classes: link-primary: This class is used t
    2 min read
    Bootstrap 5 Ratios
    Bootstrap 5 provides ratios, which can be used to create fixed-ratio containers. These containers maintain a specific aspect ratio, regardless of the size of the screen or the content within them. Bootstrap 5 Ratios: Aspect ratio: The proportionality between an element's height and breadth is known
    2 min read
    Bootstrap 5 Position
    Bootstrap 5 Position offers utility classes to control the positioning of elements. It includes classes like "position-static," "position-relative," "position-absolute," etc., facilitating precise element positioning on web pages for improved layout and design control.NameDescriptionposition-staticD
    2 min read
    Bootstrap 5 Visually hidden
    Bootstrap 5  Visually hidden are used to visually hide an element so that it does not display on the page while still allowing it to be exposed to assistive technologies. .The visually-hidden class hides the element by default and the visually-hidden-focusable class visually hides an element but dis
    2 min read
    Bootstrap 5 Stretched link
    Bootstrap 5 Stretched link is used to make any component clickable. Multiple links are not recommended. The card in bootstrap has position:relative by default, so we can easily add .stretched-link class to a link. Bootstrap 5 Stretched link class: stretched-link: It is added to <a> tag to make
    2 min read
    Bootstrap 5 Text Truncation
    Bootstrap 5 is a catalog of UI components that enables developers to develop their websites and applications in less time by using the pre-built components and utility classes. This article will see Bootstrap 5 Text truncation.Text Truncation is used to truncate long statements and paragraphs using
    2 min read

    Extend

    Bootstrap 5 Approach
    Bootstrap 5 Approach simplifies customization and extension, providing principles and strategies for tailored development. It manages viewport behavior, ensuring optimal rendering on diverse devices. By setting viewport width and scale, enables responsive design, adjusting content for optimal viewin
    3 min read
    Bootstrap 5 Icons
    Bootstrap 5 has a growing collection of open-source, high-quality icons. You can use them within any element in your project with or without bootstrap. There are the following ways to include bootstrap icons: Install Bootstrap icons package manager.npm i bootstrap-iconsEmbed them within the HTML of
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences