I am using bootstrap 5 and I need to draw a thin line after the logo.png below. There should be no spaces between the line and logo and still no spaces between the text and line.

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


<!-- Body -->
<nav class="navbar navbar-expand-sm  d-flex py-4">
  <div class="d-flex align-items-center">
    <div>
      <a href="index" class="navbar-brand">
        <img src="images/logo.png" />
      </a>
      <h2 class="my-auto font-size-medium">Zombie Testing</h2>
    </div>
  </div>
<nav>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

How can i achieve this?

CodePudding user response：

Use margin: 0 to get rid of the space between the elements

h2, hr {
  margin: 0;
}

<nav class="navbar navbar-expand-sm  d-flex py-4">
  <div class="d-flex align-items-center">
    <div>
      <a href="index" class="navbar-brand">
        <img src="https://picsum.photos/100" />
      </a>
      <hr>
      <h2 class="my-auto font-size-medium">Zombie Testing</h2>
    </div>
  </div>
</nav>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

simply add a border-top to the text by adding the border-top-class

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


<!-- Body -->
<nav class="navbar navbar-expand-sm  d-flex py-4">
  <div class="d-flex align-items-center">
    <div>
      <a href="index" class="navbar-brand">
        <img src="images/logo.png" />
      </a>
      <h2 class="my-auto font-size-medium border-top">Zombie Testing</h2>
    </div>
  </div>
</nav>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

This will do :

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


<!-- Body -->
<nav class="navbar navbar-expand-sm  d-flex py-4">
  <div class="d-flex align-items-center">
    <div>
      <a href="index" class="navbar-brand">
        <img src="images/logo.png" style="padding-bottom:0px;padding-top:0px;marin-bottom:0px;margin-top:0px;" />
      </a>
      <hr style="padding-bottom:0px;padding-top:0px;margin:0px;">
      <h2  style="padding-top:0px ;padding-bottom:0px ;margin-bottom:0px;margin-top:0px;">Zombie Testing</h2>
    </div>
  </div>
<nav>

check at this:https://jsfiddle.net/sugandhnikhil/t6p4dubo/12/