CSS Issue: Vertical line is short after heading-CodePudding

I have a simple issue in my CSS code I want to create a Vertical line after my heading using bootstrap utilities but I faced an issue.

Here is a live example of my code:

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

  <title>Bootstrap</title>
</head>

<body >
  <div >
    <h3 >
      My Title Here
      <hr style="height: 2px;"  />
    </h3>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Expected Result:

thanks!

CodePudding user response：

Close <h3> before the hr, and add display: inline-block; to hr. Remove the top and bottom margin set at 0 (my-0), as well as left: 100%; (start-100), and translate-middle-y. Your position absolute along with the margin-left and w-100 is making the hr appear to overflow. You can easily fix this by using w-75.

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

  <title>Bootstrap</title>
</head>

<body >
  <div >
    <h3 >My Title Here</h3>
      <hr style="height: 3px;" >
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

CodePudding user response：

Simple flex will do what you need

<div style="display: flex;align-items: center;">
  <h3>
    My Title Here
  </h3>
  <hr style="height: 2px;flex: 1;margin-left: 8px;">
</div>

CodePudding user response：

You can try adding a CSS class and place it into a div-class to display. Feel free to edit the css to suit your style.

CSS -

<style>
  .vertical-line {
    border-left: 6px solid green;
    height: 500px;
  }
</style>

HTML -

Vertical Line

  <div ></div>