1

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/bootstrap@5.0.2/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>

How can i achieve this?

tacoshy
  • 10,642
  • 5
  • 17
  • 34
Baba
  • 2,059
  • 8
  • 48
  • 81

3 Answers3

1

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

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
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" class="navbar-brand">
        <img src="https://picsum.photos/100" />
      </a>
      <hr>
      <h2 class="my-auto font-size-medium">Zombie Testing</h2>
    </div>
  </div>
</nav>
Lundstromski
  • 1,197
  • 2
  • 8
  • 17
0

This will do :

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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/

Nikhil S
  • 3,786
  • 4
  • 18
  • 32
  • There should be no space at the bottom of the image. The image should seat on the line and there should be no space on top of the text. Yours shows a lot of spaces – Baba Nov 02 '21 at 18:23
  • @Baba now its showing correct I have edited it.. – Nikhil S Nov 02 '21 at 18:39