Click here to Skip to main content
15,903,632 members
Please Sign up or sign in to vote.
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
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

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[^]
 
Share this answer
 
Comments
Dino the Sink 22-Mar-24 7:31am    
Dino the Sink 23-Mar-24 17:09pm    
Honestly, i am not a Web developer, and I didn't realize all the default configs that were imbedded into a default application in Visual Studio. Bootstrap 3 is what is bundled with it, probably because of the age, i was able to upgrade to bootstrap 4.5 and the image is centered appropriately. but a lot of other items are now oddly miss-aligned. I am going through and fixing things now! Thanks for the suggestions.
Andre Oosthuizen 24-Mar-24 7:27am    
You're welcome. Rather sit with the fixing/upgrading now that to try and re-write an entire app because of deprecated versions

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900