'CSS Issue: Vertical line is short after heading

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 class="bg-dark text-white">
  <div class="container mt-5">
    <h3 class="position-relative d-inline-block fw-bold">
      My Title Here
      <hr style="height: 2px;" class="position-absolute top-50 start-100 translate-middle-y opacity-100 w-100 my-0 ms-4 bg-primary" />
    </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:

enter image description here

thanks!

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5


Solution 1:[1]

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 class="bg-dark text-white">
  <div class="container mt-5">
    <h3 class="position-relative d-inline-block fw-bold">My Title Here</h3>
      <hr style="height: 3px;" class="position-absolute opacity-100 w-75 ms-4 bg-primary d-inline-block">
  </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>

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Chamika Sandamal

Related Questions