如何在Bootstrap 5模态弹窗头部显示错误提示信息

你现有代码无法实现预期效果的核心原因是：Bootstrap 5的.modal-header默认是横向排列的flex弹性容器，直接插入错误提示元素会和标题、关闭按钮挤在同一行，没法做出标题在上、错误提示在下、关闭按钮固定在右上角的布局。 #

修正代码 #

HTML 代码段 #

将标题和错误提示嵌套在同一个宽度100%的容器内，和关闭按钮做弹性布局分隔即可：

<div class="modal-header">
    <div class="w-100">
        <h5 class="modal-title">Add Email Group</h5>
        <div class="error">Invalid data, Please contact your administrator</div>
    </div>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

CSS 样式代码 #

调整错误提示样式，和Bootstrap默认视觉风格适配：

.error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 4px;
}

注意事项 #

• 代码里的w-100是Bootstrap内置工具类，作用是让标题+错误提示的容器占满除关闭按钮外的全部横向宽度
• 如果需要默认隐藏错误提示、表单校验出错时再展示，可以给.error元素默认加上d-none类，需要显示时移除该类即可
• 不需要额外修改.modal-header的默认flex属性，不会影响模态框原有组件的响应式表现

内容的提问来源于stack exchange，提问作者dhana