Bootstrap Tutorial

Bootstrap Fixed Navbar | Sticky Top | Sticky Header Bootstrap CDN 5.3, 5.2, 4.6, 4.3, 3.4, 3.3 (New Links) | Bootstrap CDN 5, 4, 3 File Download Bootstrap 5 Modal Disable Outside Click Bootstrap Horizontal and Vertical Divider Bootstrap Modal Pass data Dynamically Bootstrap Confirm Delete Modal | Popup Bootstrap Add Space Between Rows | Margin Bootstrap Remove Modal Background Bootstrap Make Table Row Clickable Bootstrap Change modal background color Bootstrap Center Align Form Bootstrap Show Image in Modal | Popup Bootstrap Button Icon with Text Bootstrap Scrollable Modal Bootstrap Image Center Align Bootstrap Dropdown with Icon Bootstrap Get Checkbox checked value Bootstrap Uncheck radio Button Bootstrap Set Radio button default checked or selected Bootstrap Radio Button Validation Bootstrap Enable Disable Radio Button Bootstrap Radio Button Checked Event Bootstrap get radio button checked or selected value Bootstrap Disable Enable Button on Click Bootstrap Tooltip on Input Field Elements Bootstrap Fixed Footer Bootstrap Image Upload | file Upload Bootstrap Modal on page load Bootstrap Login Form Template Bootstrap Add Search icon with Search bar Bootstrap button tooltip on hover Bootstrap Icons CDN Latest Version (1.11.3) Bootstrap Tabs Panel Pass dynamic content Bootstrap Change Dropdown Menu Background Color Bootstrap Avoid Dropdown Menu to close menu items on clicking inside Bootstrap Table Remove Border Bootstrap Modal Example Bootstrap Center Align Input Field Bootstrap Change Icon Color Bootstrap Text Align Center | Middle Bootstrap Remove all Rounded Corners Bootstrap Alerts Example Bootstrap Alert with Icons Bootstrap Scroll to Top Button Bootstrap Button Loading Spinner Bootstrap Check if Modal is Shown or Hidden Bootstrap Dropdown Button Change Text on Selection Bootstrap Remove offcanvas Backdrop Bootstrap Textarea Height Auto Resize Bootstrap selectpicker Get Selected Value Glyph Trash Icon

Bootstrap Alerts Example

Bootstrap Alerts:Bootstrap Alerts are user interface components that provide feedback to users based on their actions. A Simple Alert is a basic notification box with customizable content and styling. Dismiss Alerts Using Data Attributes allow users to close alerts by clicking an "X" button, enhancing user experience. Alerts with Icons include visual cues like icons to convey information effectively, making them more informative and engaging. These versatile Bootstrap features enhance web design by offering customizable, user-friendly alerts for better communication and user interaction.

written

reviewed

updated

How can I create a simple alert using Bootstrap?

To create a basic alert using Bootstrap, include the Bootstrap CSS and JavaScript libraries in your HTML file. Then, use the <div> element with the class "alert" and additional classes like "alert-success," "alert-warning," or "alert-danger" for different styles. Inside the div, place your message text. Example: <div class="alert alert-success">This is a success message.</div>. This code generates a simple, styled alert conveying information to users. Customize the classes and content to display success, warning, or error messages based on your needs.

Bootstrap Simple Alert Example

  <div class="container p-3 shadow-sm">
    <h1>Bootstrap Simple Alert</h1>
    <div class="alert alert-primary" role="alert">
      A simple primary alert—check it out!
    </div>
    <div class="alert alert-secondary" role="alert">
      A simple secondary alert—check it out!
    </div>
    <div class="alert alert-success" role="alert">
      A simple success alert—check it out!
    </div>
    <div class="alert alert-danger" role="alert">
      A simple danger alert—check it out!
    </div>
    <div class="alert alert-warning" role="alert">
      A simple warning alert—check it out!
    </div>
    <div class="alert alert-info" role="alert">
      A simple info alert—check it out!
    </div>
    <div class="alert alert-light" role="alert">
      A simple light alert—check it out!
    </div>
    <div class="alert alert-dark" role="alert">
      A simple dark alert—check it out!
    </div>
  </div>

Run

Output of Bootstrap Simple Alert

How can data attributes be used to implement Bootstrap dismissable alerts?

Data attributes can implement Bootstrap dismissable alerts by assigning them to alert elements. For example, using "data-dismiss" with the value "alert" on a button or link allows it to close the associated alert when clicked. Data attributes like "data-bs-toggle" and "data-bs-dismiss" are used to control Bootstrap's alert functionality, enabling users to dismiss alerts interactively by clicking designated elements, enhancing user experience.

Bootstrap Dismiss Alerts Using Data Attributes

  <div class="container p-3 shadow-sm">
    <h1>Bootstrap Dismiss Alerts</h1>
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Warning!</strong> This is Warning Dismiss Alerts..
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-secondary alert-dismissible fade show" role="alert">
      <strong>Secondary!</strong> This is Secondary Dismiss Alerts..
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <strong>Success!</strong> This is Success Dismiss Alerts..
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <strong>Danger!</strong> This is Danger Dismiss Alerts..
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-info alert-dismissible fade show" role="alert">
      <strong>Info!</strong> This is Info Dismiss Alerts..
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-light alert-dismissible fade show" role="alert">
      <strong>Light!</strong> This is Light Dismiss Alerts..
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-dark alert-dismissible fade show" role="alert">
      <strong>Dark</strong>This is Dark Dismiss Alerts..
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  </div>

Run

Output of Bootstrap Dismiss Alerts Using Data Attributes

How can I create a Bootstrap alert with an icon?

To create Bootstrap alerts with icons, use the alert and d-flex classes for styling, and include an SVG icon along with your alert message. The icon is placed using the flex-shrink-0 me-2 classes. Each alert has a different color class like alert-primary, alert-success, alert-warning, or alert-danger to define its style. The SVG element contains the icon while the accompanying <div> holds the alert message. This combination ensures that each alert displays an icon alongside its message. You can customize the icon and message content as needed for various types of alerts.

Bootstrap Alert with Icon

  <div class="container p-3 shadow-sm">
    <h1>Bootstrap Alert with Icons</h1>

    <div class="alert alert-primary d-flex align-items-center" role="alert">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
        class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Primary:">
        <path
          d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
      </svg>
      <div>
        Bootstap Primary Alert with Icon
      </div>
    </div>

    <div class="alert alert-success d-flex align-items-center" role="alert">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16"
        class="bi bi-check-circle-fill flex-shrink-0 me-2" role="img" aria-label="Success:">
        <path
          d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
      </svg>
      <div>
        Bootstrap Success Alert with Icon
      </div>
    </div>

    <div class="alert alert-warning d-flex align-items-center" role="alert">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16"
        class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" role="img" aria-label="Warning:">
        <path
          d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
      </svg>
      <div>
        Bootstrap Warning Alert with Icon
      </div>
    </div>

    <div class="alert alert-danger d-flex align-items-center" role="alert">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16"
        class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" role="img" aria-label="Danger:">
        <path
          d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />

      </svg>
      <div>
        An example danger alert with an icon
      </div>
    </div>
 </div>

Run