How can i put the <hr> closer with the content in header?-CodePudding

I want to put the <hr closer to the content in the header. I try to use position-absolute but the

disappears. This is my first project with bootstrap.

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


<!--Body -->
<header >
  <div >
    <div id="logo" >
      <img  src="assets/img/unknown.png">
      <a href="#"  id="menu-toggle">
        <i ></i>
      </a>
    </div>
    <div >
      <h2 >CHƯƠNG TRÌNH REBATE</h2>
      <div >
        <div >
          <i ></i>
          <div >
            <a href="#"  data-bs-toggle="dropdown">
              <img  src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
              <span >TuNTC23</span>
            </a>
            <div >
              <a href="#" >My Profile</a>
              <a href="#" >Settings</a>
              <a href="#" >Log Out</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr style="height:1px;color:#1968B2;">
</header>

CodePudding user response：

<hr style="height:1px;color:#1968B2; margin-top: -4px">

you can adjust the margin top according to your usage

CodePudding user response：

I suggest you do not use the <hr> tag but a new css class or ::after to do that.

<header >

.hr-bottom {
    border-bottom: 1px solid black;
}

.hr-bottom::after {
    border-bottom: 1px solid black;
}

CodePudding user response：

The fastest way add class to hr for example bar

<hr  style="height:1px;color:#1968B2;">

and in CSS add class:

 .bar {
   transform: translateY(-10px);
 }

Values up to you It may take px or procentage