Placing two texts alongside a logo in a Bootstrap Navbar: Step-by-step guide

As I venture into the world of Bootstrap, I am on a quest to create a Navbar Component similar to this design:

https://i.stack.imgur.com/NidKQ.png

I attempted to use the Navbar Image and Text code, but encountered an issue where the text would only display in a single line. I tried inserting a line break, but then the text went below the logo resulting in a layout like this:

https://i.stack.imgur.com/Wy0jE.png

Here is the snippet of code that I referenced:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98c978b9789">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="    https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo-shadow.png" alt="" width="70" height="70" class="d-inline-block align-text-top">
      Bootstrap <br> subheading
    </a>
  </div>
</nav>

htmlcssbootstrap-4bootstrap-5nav

Answer №1

Here is a suggestion for you:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84d6dbdbe0e7e0e6f5e4d4a1baa6baa4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<nav>
  <div class="container-fluid">
    <div class="d-flex flex-row">
      <a class="navbar-brand navbar" href="#">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTi65_HIy_en0R9pg-vjBsO3Fi2CFbJ96MtKdGIGjrlXw&s" alt="" width="100">
        <div class="d-flex flex-column p-2 pt-0 pb-0">
          <h1 class="mb-1">Title</h1>
          <p class="mb-1">Subheading</p>
        </div>
      </a>
    </div>
  </div>
</nav>

Answer №2

Insert subheading inside a span element and apply position:relative to control its position from the left and top

nav .navbar-brand span{
  position:relative;
  top:30px;
  left:-90px;
  color:red;
 }
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a393e6fde1fde3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
  
    <nav class="navbar bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img src="    https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo-shadow.png" alt="" width="70" height="70" class="d-inline-block align-text-top">
          Bootstrap <span> subheading </span>
        </a>
      </div>
  </nav>

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

Error: The value being evaluated in document.getElementById(x).style is not an object and is not supported

Desired Outcome for my Javascript: I am working with a div that includes an "onmouseover='getPosition(x)'" attribute which can be dynamically added and removed through my javascript by clicking a specific button. The function 'getPosition() ...

javascriptjqueryhtmlcsstypeerror

Specify the CSS bundle during the compilation of a Vue application

I am faced with the challenge of using a single code-base for my Vue application, but needing to compile it with different styles depending on the end user. Each end user (which in this case refers to a group or organization) has their own specific CSS fil ...

cssvue.jsnpm

Why doesn't the background color display properly when the div height is set to auto?

When I set the height of #container to auto, the background-color does not display. However, when I set it to a fixed height like 1000px, it shows up. I've attempted using "overflow:auto", but that did not solve the issue. How can I fix this? I want # ...

csshtmlheight

Achieving Dynamic Alignment in CSS: How to Responsively Align a Div to the Width of its Parent Using Padding and Margins

My dilemma could not be clearer - I am struggling to properly align 4 divs within a width of 1150px (the maximum width of the content div). When resizing the screen, I want them to adjust accordingly: 4 in a row when possible, then 3 in the center, and so ...

cssresizeresponsive-designcss-float

Implementing a Popover Notification When Clicked

I'm a beginner at this. I came across an example of a popover message box in the link provided below. I attempted to implement it, but for some reason, it's not working. Could I be overlooking something? Alternatively, is there a simpler way to ...

javascriptjqueryhtmlcsstwitter-bootstrap

How to apply a series of spaces using span/tspan with jquery/javascript

Check out this fiddle: http://jsfiddle.net/jzLu4toe/3/ <span id='tghj'></span> $('#tghj').text('Hey There'); I'm facing an issue where I need to insert multiple spaces inside a span element. ...

javascriptjqueryhtml

Using jQuery to extract the value of an object from an <li> element and updating the class attribute of the <li> element

There is a div element: <div id="ddDistr" class="searchBoxSortDistrict" tabindex="1"> <ul id="ddd"> </ul> </div> I have inserted HTML from json into it: $("#ddd").html(" "), $.each(dis, function( index, value) { $("#dd ...

javascriptjqueryhtmlcss

Tips for creating a dynamic menu item that stands out with a highlighted style

I would like to add a colored square to highlight the active menu item. .main-menu ul { padding: 0; margin: 0; text-align: center; } .main-menu li { list-style-type: none; display: inline-block; padding: 40px 0; } .main-menu a { font-fam ...

javascriptjqueryhtmlcss

Struggling to figure out the ::before border trim issue

As I work on designing a banner for a webpage, I have added a sliced bottom right border using the ::before pseudo class. The code snippet I used includes: &::before { content: ""; position: absolute; bottom: 0; right: 0; ...

csspseudo-element

Creating consistent row spacing between Bootstrap 5 rows that matches the spacing in Bootstrap 4

Is it possible to adjust the site.css file in order to achieve a similar row spacing effect as Bootstrap 5 when working with existing HTML code? ...

cssbootstrap-4rowsbootstrap-5

Issue with Django app: Bootstrap 4 modal hidden behind background

Having exhaustively researched this issue, I am still unable to resolve it with the outdated Bootstrap solutions available. The problem arises when I click on the button - the modal appears behind the background instead of in front. Most suggestions indica ...

htmlcssdjangobootstrap-4bootstrap-modal

Ways to utilize the ::after pseudo class with ElementRef within Angular

Is it possible to manipulate the background-color of the ::after pseudo selector for the specified element using Angular? @ViewChild('infobubble', { read: ElementRef }) infoBubbleElement: ElementRef; ngAfterViewInit(): void { const el ...

cssangularcss-selectors

Create a bokeh plot and save it as an HTML file without displaying it

Currently, I am utilizing Bokeh to generate HTML code that contains figures by employing the show method. However, this method automatically opens the default browser with the HTML displayed in it. My goal now is to save the HTML code without displaying i ...

pythonhtmlplotsavebokeh

Tips for aligning words on a single line

Encountering an issue with long words being split up in the middle of a line, as shown in this photo: https://i.stack.imgur.com/IxQi6.png This is the code snippet causing the problem: ineligiblePointsTableRows() { return this.state[PointsTableType. ...

htmlcsssassstyling

The cube mesh is failing to render inside the designated div

I created a Torus and Cube Mesh in my scene, but I want the cube to be positioned at the bottom right corner of the screen. Here's what I tried: <div style="position: absolute; bottom: 0px; right:0px; width: 100px; text-align: center; "> & ...

javascriptcsshtmlthree.js

Issue with Laravel Blade template not linking CSS files in a subfolder

I am currently facing an issue where the CSS file path in my code is incorrect. The code I have is: {{HTML::style('css/bootstrap/bootstrap.min.css')}} When rendered in the source code, it displays as: http://www.view.local/laravel/css/bootstra ...

htmlcsslaravellaravel-4

"Utilizing JSON, jQuery, and HTML in web development

Is there a way to retrieve the index of a specific object from a JSON file? The following is an example of a JSON file content: [ { "time": "2017-04-11T22:31:50.3369265Z", "score": 0, "comment": "Meep meep! ", "handle ...

jqueryhtmljson

The latest version of npm Boostrap (4.1.0) is missing some important CSS properties for the `background` tag

I am currently working on an Angular 5.2.10 project that utilizes angular-cli and bootstrap version: 4.0.0-beta.2 with a specific css class called .en-icon-24: .en-icon-24 { background: url(../../../../assets/img/icons.png) -370px 0px; width: 24 ...

cssangularnpm

The code snippet 'onload='setInterval("function()",1000)' is not functioning as expected

I need to continuously load the contents of an XML file into a specific HTML div every second. Here is the JavaScript code that I am using to parse the XML file: function fetchEntries() { if (window.XMLHttpRequest) req = new XMLHttpRequest(); ...

javascriptxmlajaxhtml

Having trouble with the ".." shorthand not working in the HTML image directory path

My Website File Structure: -css - home.css -html - index.html -images - banner.png HTML Code: <!DOCTYPE html> <html lang="en"> <head> <title>myWebsite</title> <link rel="stylesheet" typ ...

htmlimagepath