Creating a clear distinction between a logo and accompanying text

I'm working with bootstrap 5 and I want to add a subtle line right after the logo.png below. The line should be directly connected to the logo with no spaces, and also no spaces between the text and the line.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04666b6b70777076657444312a342a36">[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" />
        <span style="border-bottom: 1px solid #000; margin-left: 5px;"></span>
      </a>
      <h2 class="my-auto font-size-medium">Zombie Testing</h2>
    </div>
  </div>
<nav>

How can I achieve this design?

htmlcssbootstrap-5

Answer №1

For eliminating the space between elements, utilize the margin: 0 CSS property

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>

Answer №2

To apply a border to the top of the text, include the border-top class.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7858888939493958697a7d2c9d7c9d5">[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" />
      </a>
      <h2 class="my-auto font-size-medium border-top">Zombie Testing</h2>
    </div>
  </div>
</nav>

Answer №3

Here is a simple way to achieve it:

<!-- Bootstrap 5 CDN -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c829c80">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- HTML -->
<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>

View the code in action here:https://jsfiddle.net/sugandhnikhil/t6p4dubo/12/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Selecting radio button does not update corresponding label

I am having an issue with setting a radio button as checked. In the example snippet, it works perfectly fine but on my localhost, it is not working. Even though the input gets checked, the label does not change. Surprisingly, if I set another radio button ...

javascriptjqueryhtmlcssradio-button

What is the default margin for Autocomplete in Material UI?

Having just started with material-ui, I'm having trouble figuring out the margins of the Autocomplete. My form includes both Autocomplete and TextInput elements, but their positioning seems off to me. Is there some predefined margin box around Autocom ...

htmlcssreactjsautocompletematerial-ui

Is there a way to undo the CSS rotate animation that has been applied?

Struggling with reversing a CSS animation based on a class being added to a DOM node? Take a look at the code I've been using: EXAMPLE // Closed state @-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } } @-webkit-keyfra ...

csscss-animations

How should text inputs be positioned?

I'm not very experienced with forms, so I'm a bit confused about what's happening here. I'm attempting to position a text input inline with a button, but it doesn't seem to be working. You can view the code I'm using here: htt ...

htmlcssforms

Is it time to delete a bootstrap attribute?

I have implemented a bootstrap class for ul/li items that adds a border around an li item when clicked. However, I am facing an issue where only the first list item is highlighted on all 4 sides when clicked, while the rest of the list items only have 3 ...

cssbootstrap-5

Tips for resolving issues with the carousel container in bootstrap?

Is there a way to adjust the carousel box container in Bootstrap so that it remains consistent even with images of varying sizes? Currently, the box size changes based on the image dimensions when sliding through the carousel. Sample Code: <h1>Caro ...

javascriptjqueryhtmltwitter-bootstrapcarousel

<dt> and <dd> have not been added after the previous element

I can't seem to figure out why the dt and dd elements are not being added to the dl I created. Here's my initial attempt: // Dictionary list var words = [ { term: "Procrastination", definition: "Pathological tendency to s ...

javascripthtml

The dimensions of images and text in HTML

I'm having trouble adjusting my page to fit the resolution of the screen. The image I'm using is 1920 pixels wide, but it's extending beyond the window. Click this link for the code and images: index1.html and style1.css are not needed. < ...

htmlcss

Is there a way to deactivate a tab when it's active and reactivate it upon clicking another tab in Angular?

<a class="nav-link" routerLink="/books" routerLinkActive="active (click)="bookTabIsClicked()" > Books </a> I am currently teaching myself Angular. I need help with disabling this tab when it is active ...

c#htmlangulartypescript

Extracting text from a JSON file and populating text fields: A step-by-step guide

Utilizing this JSFIDDLE to duplicate text fields has been quite helpful. I am now looking to create JSON data based on the input from all the text fields. When it comes to updating a page, I need to extract the JSON data and accurately populate the corresp ...

javascriptjqueryhtmljson

Make the HTML element expand to the remaining height of the viewport

Need help with creating a section that automatically fills the remaining viewport height below the navigation bar. The section includes a centered div and background image, along with a button at the bottom for scrolling down by one full viewport height. H ...

cssviewport

How to eliminate the gap below a CSS element by adjusting the top value

https://i.stack.imgur.com/Sn6Wx.png The three 'Replacement Options' sections are contained within a div with the class relative. The relevant CSS properties have been applied as shown below: .relative { top: -10rem; position: relative; ...

htmlcss

Seeking assistance to transfer div elements into a different div post an onclick event

I have a container that contains four separate divs. My goal is to append the remaining three divs to another specific div after clicking on one of them. Does anyone know how I can achieve this? <!DOCTYPE html> <html lang="en"> < ...

javascriptjqueryhtml

Alter the value of an input element using JavaScript

There are multiple hidden input fields on the page I'm currently working on: <input a1="2" a2="1" a3="3" name="Value" type="hidden" value="10"> <input a1="4" a2="2" a3="6" name="Value" type="hidden" value="12"> <input a1="6" a2="3" a3 ...

javascriptjqueryhtml

Enhance CSS delivery for the items listed below

Reduce the delay caused by rendering JavaScript and CSS above-the-fold. There are 16 CSS resources currently blocking the rendering of your page. This delay could be affecting the loading time of your content. To improve this issue, consider deferring or ...

javascriptphpjqueryhtmlcss

Trouble with .nextAll function not updating with dynamic content

Within the post request code block, the JSON response is assigned to the variable 'data' var a=data.Data.overview; var b=data.Data.extras; //summary var result=''; result+='<div class="extra-upper-block">'; result+=&apo ...

javascriptjqueryhtml

HTML - Toggle visibility of div using display property

I'm currently working on implementing a show and hide functionality for a div. I followed a tutorial from a website called w3schools, but the way they implemented it is different from what I'm looking to achieve. In their example, the div is init ...

htmlcssdisplay

Mobile Size Setting

Could someone please explain to me why when I test this code on Google Chrome using the mobile emulator for Galaxy S3, it displays the correct size (640x360), but when I try to load it on my actual Galaxy S5 or any other device, the size is different from ...

javascriptandroidhtmlmobileresponsive-design

What are the best ways to engage with a div element using keyboard shortcuts?

Is it possible to enable keyboard shortcuts for interacting with div elements? I am working on a project tailored for seniors who may have difficulty using a mouse. Is there a way to utilize keyboard shortcuts to click on divs and access their contents? H ...

javascriptjqueryhtmlcss

My HTML table is not printing at full width

Seeking assistance with creating a printable calendar using an HTML table. The calendar prints perfectly on a Mac, but when attempted on Windows in all browsers, it adds a 3" margin at the top regardless of CSS print settings. The client requires the cal ...

htmlcssprintinghtml-table