Add image to a menu item in bootstrap for ASP.NET

Question

0.00/5 (No votes)

See more:

I am making a personal web page from ASP.net with Bootstrap with what appears to be v3. I have a Top menu with a handfull of links. I am trying to add images to the menu, but the alignment is not lined up. The image is showing up below the bottom of the menu into the Content.

ASP.NET

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">



            </button>
            <div class="navbar-brand" runat="server" >
                  <image src="http://ourteam.myvnc.com/teamsite/images/finksburg_logo.png" height="40" width="40"></image>
            </div>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a runat="server" href="~/">Home</a></li>
                <li><a runat="server" href="~/About">About</a></li>
                <li>          <a class="glyphicon glyphicon-user" data-toggle="dropdown" href="#"> Welcome, Dude </a></li>
            </ul>
        </div>
    </div>
</nav>

You can view the result here

And is there a way to alter the Nav bar default settings for:
Color, Size, background color, hover color, etc. I have reviewed the CSS, but it is extension, too much for me.

What I have tried:

I tried wrapping the IMG tag in tags, and in div tags. Nothing seems to work.

TIA

Posted 21-Mar-24 13:54pm

Dino the Sink

Add a Solution

Comments

Graeme_Grant 21-Mar-24 22:34pm

Why are you using a discontinued version of Bootstrap? Bootstrap 3 is 10 years old in August this year!!!

Bootstrap version 5.3[^] is the current version.

Dino the Sink 21-Mar-24 22:58pm

I was only guessing. It was automatically loaded when i created my project in VS2019. I know VB.net, and that seems like the last version of VS that supports VB.net. Only C# for Webapps after that free version.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andre Oosthuizen · Accepted Answer · 2024-03-21T22:01:00

If you are using such an old version, you will be in for a few repairs as it will constantly give you unexpected results - How do I identify my Bootstrap version?[^]

To align your image properly within the top menu, you can use the 'grid' system or 'flexbox' to control the alignment -

HTML

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"></button>
            <a class="navbar-brand" href="#">
                <img src="http://ourteam.myvnc.com/teamsite/images/finksburg_logo.png" alt="Logo" height="40" width="40">
            </a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="~/">Home</a></li>
                <li><a href="~/About">About</a></li>
                <li><a class="glyphicon glyphicon-user" data-toggle="dropdown" href="#"> Welcome, Dude </a></li>
            </ul>
        </div>
    </div>
</nav>

Albeit using older versions as well as it was posted in 2015, there is a very comprehensive guide on how to use Bootstrap with ASP.NET in CodeProject - Create an ASP.NET Web Forms Application using Bootstrap and Web API [^]