Bootstrap5 sidebar icons on the left chatgpt

sidebar.slim

doctype html
html lang="en"
  head
    meta charset="UTF-8"
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1E9xRUaYjS4d4L/kWVd4tpq3Jkc/kWVd4tpq3Jkc" crossorigin="anonymous"
    link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous"
    title Bootstrap 5 Sidebar
    style
      | /* customize the sidebar */
      | .sidebar {
      |     width: 50px; /* make the sidebar narrower */
      |     height: 100vh; /* make the sidebar the full height of the page */
      |     background-color: #343a40; /* set the background color to dark */
      | }
      | .nav-link {
      |     text-align: center; /* center the text */
      |     color: white; /* set the text color to white */
      | }
      | .nav-link i {
      |     font-size: 1.5em; /* increase the icon size */
      | }
  body
    .container-fluid
      .row
        nav.col-md-2.d-md-block.sidebar
          .sidebar-sticky
            ul.nav.flex-column
              li.nav-item
                a.nav-link href="#"
                  i.fas.fa-home
              li.nav-item
                a.nav-link href="#"
                  i.fas.fa-user
              li.nav-item
                a.nav-link href="#"
                  i.fas.fa-envelope
              li.nav-item
                a.nav-link href="#"
                  i.fas.fa-cog
        main.col-md-9.ml-sm-auto.col-lg-10.px-4 role="main"
          .d-flex.justify-content-between.flex-wrap.flex-md-nowrap.align-items-center
            h1.h2 Bootstrap 5 Sidebar
          p Content goes here