Achieving Right Alignment of Items in Navigation Bar using Bootstrap

I'm facing a challenge aligning elements to the right in my navbar using Bootstrap. Despite trying an external CSS file, I couldn't get the desired alignment. My goal is to keep the logo and brand name on the left while right-aligning the other items. Even the 'ml-auto' class from Bootstrap didn't work as expected.

HTML:

.navbar-nav {
    margin-left: auto;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="index.css">

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="navbar" width="100%">
            <nav class="navbar navbar-expand-lg navbar-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">
                        <img
                        src="/com_connect_font.png"
                        class="me-2"
                        height="70"
                        alt=""
                        loading="lazy"
                        />
                        <medium>Community Connector</medium>
                    </a>
                    <button
                        class="navbar-toggler"
                        type="button"
                        data-mdb-toggle="collapse"
                        data-mdb-target="#navbarNav"
                        aria-controls="navbarNav"
                        aria-expanded="false"
                        aria-label="Toggle navigation"
                    >
                        <i class="fas fa-bars"></i>
                    </button>
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                              About
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                              Contacts
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                              Settings
                            </a>
                        </li>
                    </ul>
                    </div>
            </nav>
        </div>


       
    </body>
</html>

Can anyone advise on what might be causing this issue? Your assistance is greatly appreciated.

htmlcssbootstrap-4

Answer №1

Here is a simple example using only bootstrap classes without any extra CSS. If the first div in your example is not 100% wide, it can disrupt the navigation bar. Additionally, the mobile view of your navbar may be broken. The code snippet below works well on both desktop and mobile devices.

Hopefully this solution will work for you :)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="index.css">

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>

    <body>

           <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="d-flex flex-grow-1">
        <span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
        <a class="navbar-brand" href="#">
            Navbar 7
        </a>
        <div class="w-100 text-right">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar7">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
    <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar7">
        <ul class="navbar-nav ml-auto flex-nowrap">
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
        </ul>
    </div>
</nav>


       
    </body>
</html>

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

I have always wondered about the meaning of " + i + " in Javascript. Can you explain it to

<script> var x,xmlhttp,xmlDoc xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "cd_catalog.xml", false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; x = xmlDoc.getElementsByTagName("CD"); table="<tr><th>Artist</th><th>Ti ...

javascripthtmlajax

Strange behavior exhibited by the HTML DataList component within an Angular application

I have created a simple component that displays a list of data and allows users to add new entries. <h6 *ngIf="withHeader"><label for="select"> {{title}} </label></h6> <label *ngIf="!withHeader" [ngClass]="{'required&apos ...

javascripthtmlangulardomhtml-datalist

I am looking to modify the highlighted table cell whenever the value within it changes

I am currently working on a small project related to the Stock Market. In this project, I need to dynamically change the style of the td element based on data fluctuations - green highlight for an increase and red highlight for a decrease. In the provid ...

javascriptphpjqueryhtmlcss

Determine whether to deliver compressed or uncompressed js and css files by utilizing url parameters in AngularJs and Grunt

Exploring the world of AngularJS and Grunt is a new adventure for me. I am currently in the process of setting up the front-end environment and am looking for a way to serve either compressed or uncompressed js and css files based on specific url parameter ...

javascriptcssnode.jsangularjsgruntjs

Displaying data from a PostgreSQL database to users based on their login username in Flask

I am struggling with displaying specific data from a database table based on a user-entered username. The goal is for a user to enter their ID and access a page showcasing their corresponding data from the table. While I can show the username, I'm fac ...

pythonhtmlpostgresqlflask

What is causing the tabs to not update the navigation in nav-tabs?

I recently implemented a tab list using Bootstrap, similar to the one shown in the image below: https://i.sstatic.net/KEy7F.png However, I encountered an issue where clicking on "Profile" or "Contact" tabs does not change anything. Even though I inclu ...

htmlbootstrap-4bootstrap-5

Utilize page variables to activate audio clips upon clicking

Can someone assist me with a script that activates an audio clip when five icons on a page are clicked? The image of the icons can be found below: https://i.stack.imgur.com/mBC6o.png Here is the HTML code: <div class="slide overlay-container" id="int ...

jquerycsshtml5-audio

How to make a drop-down select list remain open even after selecting an option

In my current project, I have a dropdown box that holds a list of files which can be deleted. The user needs to select the file they want to delete from the dropdown each time and then the process repeats for every file. I would like to implement a feature ...

jqueryhtml

Getting Camera Access with getUserMedia

My HTML code was working fine until I added some additional lines to check if the camera is ready or available for the users. Here is how my HTML looks like: <div id="notes"> </div> <div id="video-container"> <video id="camera-stream" ...

javascripthtmlgetusermedia

Dynamic Connection

I'm having trouble with this code not resizing correctly when the screen size is reduced. Please note that this link will be placed on top of an image. <!--HTML--> <div class="link"> <a class="learn_more" href=&q ...

htmlcss

Why do identical elements show different scrollHeights when overflowed and how can this discrepancy be resolved?

I am using a plugin that generates a <p> element and continuously fills it with the content from a <textarea>. This plugin positions the <p> directly below the <textarea>, and styles them so that they appear identical in terms of th ...

javascriptjqueryhtml

Straining data in text input fields using bootstrap

Looking for a way to filter data with bootstrap/jquery without using tables, just div rows and columns. Check out an example of how my form looks Here's a snippet of my code: <div class="row"> <div class="col-md-4"> <input class= ...

javascriptjquerybootstrap-4

Having Trouble Aligning Text in HTML and CSS?

I am a beginner in the world of web markup languages and am currently taking an online course. I'm having trouble getting the .mainfooter-links to align in the center using CSS. I would greatly appreciate it if someone could take a look at my code and ...

htmlcss

Are there any alternative methods to refresh the Google Search Result for my website? (Meta tags are ineffective)

I'm facing an issue with the Google search result of my website where it's displaying old text instead of what I intended. I've tried using meta tags like nosnippet and description, but the problem persists. Can anyone suggest resources or ...

javascripthtmlreactjs

Creating a layered effect: Adding an image onto another image using HTML and CSS

Wondering if it's possible to create an overlaid effect with an image and text inside of an <img> element, similar to the example image below. Utilizing Bootstrap for this design. This is how I am attempting to achieve it: HTML <div class= ...

htmlcssimagetwitter-bootstrap

Displaying identical images in both the Carousel Card and Modal

I recently designed two separate modals, each containing different elements. However, I encountered an issue where both modals display the same photo even though they have different src values. How can I troubleshoot this problem? Despite updating all of ...

htmlimagecarouselbootstrap-5card

Need help displaying a file link from a server using the href attribute in a PHP echo statement?

Having some trouble creating a table with PHP. I managed to create the table, but I'm trying to link a file from an FTP server in a td tag. When I use href, it gives me an error. Can you please help me correct my code? echo "<a href = '../pub ...

phphtml

How to conceal the final "next" button using JQuery in Bootstrap Tabs

I utilized bootstrap tabs for displaying my content. Inside each tab, there are next and previous buttons for navigating through the tabs. Here is an example of my HTML code: <div class="nav nav-thumb" id="thumb-tabs" role="tabl ...

jquerybootstrap-4

Show and conceal columns in HTML with the help of JavaScript

I need help with a webpage where I want to display a table with 2 columns and two rows (header and body). My goal is to use JavaScript to control the visibility of these 2 columns. The decision to show or hide the columns should be based on the values ...

javascripthtml

What is the best way to retrieve a modified HTML input field in CodeIgniter PHP?

I am using a CodeIgniter PHP website with a form for users to add and edit products. The editing process is functioning correctly, here is the code for editing a product: View: <form action="" method="post" enctype="multipart/form-data"> < ...

phphtmlmysqlformscodeigniter