What is the method for positioning a logo image, phone number, and location above the navbar using bootstrap?

I just started learning Bootstrap and I am trying to add a logo image, location image with address, and phone number with text above the navigation bar. I want all these elements to be centered on the page. However, my current attempt is not achieving the desired alignment:

<header >
            
        <div class="container ">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <img class="img-fluid" style="max-width: 50%;" src="images/logo.png" alt="logo">
                    <img class="img-fluid" style="max-width: 5%" src="images/header-address.png" alt="logo">
                 <span class="span-text">1234 Abcd Efg  <br> HI jk Lm,123466 </span> 
                 <img class="img-fluid" style="max-width: 5%;" src="images/header-phone.png" alt="logo">
                <span class="span_text">(123) 456 7890 <br> Call Us </span> 
                </div>
                <div class="col-md-6">
                    
                </div>
            </div>

            </div>  
            </header>
        
        <section >
            <div class="container mx-auto">
                <div class="row">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <div class="container-fluid">    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">GALLERY</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT US</a>
        </li>     
        
      </ul>
      
    </div>
  </div>
</nav></div>
            </div>
        </section>

How can I properly align the logo, location, and phone number on the page?

htmlcssclassbootstrap-4navigation

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

Prevent background element from being selected with a double-click

Whenever I double-click on the background, the first element gets selected. How can I prevent this from happening? Here is a fiddle to demonstrate: https://jsfiddle.net/cb6fjr7n/1/ <input style="text" value="lala"/> If you double-click outside of ...

javascripthtmlfocusdouble-click

Ways to access an element with CSS or Xpath by excluding a particular text

Is it possible to retrieve an element using CSS or XPath by searching for its text within a list? Each element in the list includes the Project Name, Status, and Country, separated by a "|" character. The challenge lies in obtaining an element based solel ...

htmlcssxpathcss-selectors

"JavaScript code for creating a dynamic switching effect in HTML

I currently have 4 divs on my webpage that can be hidden or shown using JavaScript when clicking the menu at the top of the page. Here is my current script: <script type="text/javascript"> function showHide(d) { var onediv = document.get ...

javascriptjqueryhtml

Design a square confined within an adjustable rectangular container

Looking to fill a rectangular area on my page with a square positioned in the center, regardless of whether the rectangle is horizontal or vertical. Many existing solutions focus solely on creating a square from the width of a containing box, which doesn&a ...

cssautoresize

What is the best way to personalize Material UI elements, such as getting rid of the blue outline on the Select component?

Embarking on my journey of developing a React app, I made the decision to incorporate Material UI for its array of pre-built components. However, delving into the customization of these components and their styles has proven to be quite challenging for me ...

javascriptcssreactjsmaterial-ui

Incorporate text inside the border of a Material UI chip

https://i.stack.imgur.com/VATrD.png I'm looking to replicate this design using a pre-built Chip component from MaterialUI While the solution might involve Some Text using html and css, it still may not achieve an identical result. I've come acr ...

cssreactjsmaterial-ui

One limitation in Python is the inability to utilize the constructor of a class that has been imported from a separate Python

In my Python project, I created a Tree class in a file called "tree.py" with the following code: class Tree(object): """ A representation of a non-null tree with a root node and child subtrees that are instances of Tree """ d ...

pythonclassoopimport

What are some ways to utilize CSS variables for enhancing component styles within Svelte?

Presented here is a straightforward component called Text.svelte. It utilizes a CSS variable to prevent unnecessary duplication: <div> <span class="t1">t1</span> <span class="t2">t2</span> </div> ...

csssveltevite

Issue with exporting data from Datatables

I followed the instructions, and the Datatables export function worked perfectly in localhost, but when I tried it in Google Apps script, it didn't work. For more information about the issue, you can visit this link: DataTables TableTools buttons not ...

jqueryhtmlgoogle-apps-scriptdatatables

Create an instance of a class and assign values to variables before using them to

I am faced with the following scenario: QuadMesh.h: #include "StructureIpsim.h" // defining a struct class QuadMesh { public: QuadMesh(StructureIpsim s) {//perform tasks} }; SEMPotential.h: #include "QuadMesh.h" #include "SpecialFuncs.h" class SEM ...

c++class

Issue encountered while implementing async functionality in AngularFireObject

I'm encountering difficulties with the async feature in AngularFireObject. Is there a solution available? Snippet from HomePage.ts: import { AngularFireObject } from 'angularfire2/database'; export class HomePage { profileData: Angu ...

htmlangulartypescriptfirebaseionic3

Circular images display corners during the transition before returning to their rounded shape

While working with Bootstrap 5.3, I encountered an issue where the corners of my carousel display as rounded, then sharp, and back to rounded during transitions. The problem is quite literally in the title. What is shown right after transition: https://i ...

htmlcsstwittercarouselbootstrap-5

Utilize jQuery to generate a dynamic table within a Razor view

I am trying to implement a table in a razor view. <div class="row" style="margin-left:80%"> @if (ViewBag.IsGlobal == 1) { <script> $(document).ready(function () { $("#btnViewLocal").prop("disabled",t ...

jqueryhtmljsonasp.net-mvcrazor

What is the best way to remove a class from an element upon successful completion?

How can I make an image disappear when the user clicks a button in the associated form? I'm struggling to implement this feature. Any suggestions? <script type="text/javascript"> $(document).ready(function() { $(".removebutton").s ...

javascriptjqueryhtmlcss

Are there specific mathematical algorithms that lend themselves well to creating responsive HTML designs?

Tired of constantly guessing the percentage values to use with a specific number of divs and other elements in my design. I am looking to understand the mathematical calculations that determine the scaling required for different elements in order to main ...

javascripthtmlcsstwitter-bootstrapweb

After the rendering of the HTML, the value of the jQuery input does not change

Here we have a function that loads HTML onto the form class in a file. The quest[q] locates the appropriate HTML template to load from an array of templates. The HTML being loaded contains an input with an id of "p". I am attempting to set the value of th ...

javascriptjqueryhtmlhandlebars.js

Testing the Limits of CSS Hover

I'm having trouble figuring out how to implement this. When hovering, a yellow square/background should appear with an offset similar to the one in the image below. I am utilizing bootstrap for this project. Any assistance or guidance would be greatl ...

javascripthtmlcssuser-interfacebootstrap-4

Extracting text from HTML elements using BeautifulSoup

I'm working with the following html code and I want to extract the text that comes after <b>Name in Thai</b>, specifically : this is what I want content = """ <html><body><b>Name of Bangkok Bus station:</b> <spa ...

pythonhtmlbeautifulsoup

Angular animations do not seem to be functioning properly with ng-show when changing the class using ng-class

I need assistance in creating a slider for a list of objects using ng-show and animations. The current setup works smoothly when the objects slide in one direction. However, I am facing issues when trying to implement the functionality for users to slide ...

cssangularjscss-transitionsng-animateng-show

How can I adjust my settings so that my image resizes from the center rather than the top left corner?

I'm having an issue with my code for resizing images on rollover - the image is currently resizing from the top left corner instead of from the center. How can I adjust it to resize from the center of the image? <script> $('i ...

jqueryhtml