Drawing a line between a logo and text

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="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="navbar-brand">
        <img src="images/logo.png" />
      </a>
      <h2 class="my-auto font-size-medium">Zombie Testing</h2>
    </div>
  </div>
<nav>

How can i achieve this?

Contents hide

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="navbar-brand">
        <img src="https://picsum.photos/100" />
      </a>
      <hr>
      <h2 class="my-auto font-size-medium">Zombie Testing</h2>
    </div>
  </div>
</nav>

Method 2

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="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="navbar-brand">
        <img src="images/logo.png" />
      </a>
      <h2 class="my-auto font-size-medium border-top">Zombie Testing</h2>
    </div>
  </div>
</nav>

Method 3

This will do :

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffdf0f0ebecebedfeefdfaab1afb1ad">[email protected]</a>/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/

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating