Vertical line on Bootstrap 5

user_14610361 0
Viewed 370

May I ask as to how to create a vertical line that extends all the way down the right side of the listed items on this website? since I'll place the main content after the vertical line I'm trying to figure out

.first a.nav-link {
  background-color: #ebe0dd;
}

a.nav-link {
  font-size: 23px;
  font-family: font-family: 'Times New Roman', Times, serif;
  color: black;
  font-weight: lighter;
  
  
}




<div class="container d-flex flex-column flex-md-row">
    <nav class="navbar navbar-expand-md navbar-light d-flex flex-md-column">
      <button
      class = "navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#sidebar"
      aria-controls="sidebar"
      aria-expanded="false"
      aria-label="Toggle Navigation">

      <span class = "navbar-toggler-icon"></span>
      </button>

      

      <div class = "collapse navbar-collapse sidebar" id = "sidebar">
        <ul class = "navbar-nav w-750 my-3 d-flex  flex-md-column text-center ">
          <li class = "first"><a href="#" class = "nav-link" aria-current = "page">All</a></li>
          <li><a href="#" class = "nav-link">To Pay</a></li>
          <li><a href="#" class = "nav-link" >To Ship</a></li>
          <li><a href="#" class = "nav-link" >To Receive</a></li>
          <li><a href="#" class = "nav-link" >Completed</a></li>
          <li><a href="#" class = "nav-link" >Cancelled</a></li>
        </ul>
        
      </div>

    </nav>

</div>
bootstrap-5 sass css html
1 Answers

Add the border-end class to the ul element:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div class="container d-flex flex-column flex-md-row">
    <nav class="navbar navbar-expand navbar-light flex-column" style="height: 100vh;">
      <button
      class = "navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#sidebar"
      aria-controls="sidebar"
      aria-expanded="false"
      aria-label="Toggle Navigation">

      <span class = "navbar-toggler-icon"></span>
      </button>

      

      <div class = "collapse navbar-collapse sidebar" id="sidebar">
        <ul class = "navbar-nav h-100 w-750 my-3 d-flex  flex-column text-center border-end">
          <li class = "first"><a href="#" class = "nav-link" aria-current = "page">All</a></li>
          <li><a href="#" class = "nav-link">To Pay</a></li>
          <li><a href="#" class = "nav-link" >To Ship</a></li>
          <li><a href="#" class = "nav-link" >To Receive</a></li>
          <li><a href="#" class = "nav-link" >Completed</a></li>
          <li><a href="#" class = "nav-link" >Cancelled</a></li>
        </ul>
        
      </div>

    </nav>

</div>

user_114934470
Related