Bootstrap是否提供带侧边编号标题的表单/向导组件？

Bootstrap没有原生提供你截图中这种纵向带独立编号的表单/向导组件。

官方内置的步骤指示器（比如基于breadcrumb或nav组件实现的步骤条）均为顶部横向排列的样式，官方文档里也没有对应纵向编号标题的原生示例。

如果需要实现这类效果，有两种可行方案：

• 基于Bootstrap现有组件自定义
  可以利用list-group组件配合自定义样式来实现：

  1. 用list-group作为容器，每个步骤项使用list-group-item
  2. 通过badge组件或CSS伪元素（:before）添加自定义编号，同时用active类标记当前页面对应的步骤
     示例代码片段：

  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-active">
      <span class="badge bg-primary me-2">1</span> 第一步标题
    </a>
    <a href="#" class="list-group-item">
      <span class="badge bg-secondary me-2">2</span> 第二步标题
    </a>
    <a href="#" class="list-group-item">
      <span class="badge bg-secondary me-2">4</span> 第四步标题
    </a>
  </div>
  

  这种方式可以灵活控制编号（比如显示非连续的1、2、4），完全适配你的需求。

• 使用第三方Bootstrap兼容插件
  一些第三方插件基于Bootstrap构建，支持纵向布局的步骤向导，你可以根据项目需求选择合适的插件集成。

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