Troubleshooting problems with navbar list alignment using Bootstrap

        <div class="container"> <!--main div-->
            <div>
                <nav class="navbar navbar-light bg-light">
                    <a href="https://wwww.kidsedge.in" class="navbar-brand"><img id="logo" src="logo_white_background.jpg"></img></a>
                    <ul class="navbar-nav list-unstyled justify-content-end">
                        <li class="nav-item ml-2">
                            <button><a href="#" class="nav-link">Login</a></button><!--Login Link-->
                        </li>
                        <li class="nav-item ml-2">
                            <button><a href="#" class="nav-link">Explore Live Experiments</a></button><!--Current Available Live Courses Link--></li>
                  </ul>
              </nav>
          </div>
      </div>
  </body>

This code functions properly to display the desired navbar. However, I am struggling with aligning the login and explore experiments button to the right. Despite attempting to use mr-auto and mr-right in the ul, as well as custom CSS for alignment, I have not achieved the desired result. How can I make the two buttons go to the right of the nav bar?

htmlcssbootstrap-4

Answer №1

Could you kindly review the code below? It should work for you. If you include Bootstrap 4, it will function correctly. If you wish to align the button in the same line, you need to add flex-direction in the .navbar-nav class so that it meets your requirements.

For reference, please visit this link: https://jsfiddle.net/yudizsolutions/syakr3j5/

.navbar-nav {
  flex-direction: row !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <!--main div-->
  <div>
    <nav class="navbar navbar-light bg-light">
      <a href="https://wwww.kidsedge.in" class="navbar-brand"><img id="logo" src="logo_white_background.jpg"></a>
      <ul class="navbar-nav list-unstyled d-flex">
        <li class="nav-item">
          <button><a href="#" class="nav-link">Login</a></button>
          <!--Login Link-->
        </li>
        <li class="nav-item ml-2">
          <button><a href="#" class="nav-link">Explore Live Experiments</a></button>
          <!--Current Available Live Courses Link-->
        </li>
      </ul>
    </nav>
  </div>
</div>

Answer №2

<nav class="navbar navbar-light bg-light d-flex">
                    <a href="https://wwww.kidsedge.in" class="navbar-brand"><img id="logo" src="logo_white_background.jpg"></img></a>
                    <ul class="navbar-nav list-unstyled ml-auto">
                        <li class="nav-item">
                            <button><a href="#" class="nav-link">Login</a></button><!--Login Link-->
                        </li>
                        <li class="nav-item ml-2">
                            <button><a href="#" class="nav-link">Explore Live Experiments</a></button><!--Current Available Live Courses Link-->
                        </li>
                    </ul>
                </nav>

apply the d-flex class to <nav> and add ml-auto to <ul>

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

Tips for optimizing text retrieval in headless mode with Selenium to avoid unnecessary duplicate runs

My current task involves scraping specific parts of the materials listed on the Zara website. The process I am following includes the following steps: step#1 - opening the website in headless mode step#2 - clicking the "see more" button to reveal the p ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Is it time to ditch Internet Explorer for EDGE?

Have you ever noticed that when attempting to access the stackoverflow website on Internet Explorer, the tab mysteriously closes and Microsoft Edge opens with stackoverflow loaded? What is the secret behind this strange phenomenon on stackoverflow's ...

javascripthtml

Struggling to include a CSS link to the file, but encountering failure due to a space within the path

The path to the stylesheet is located at C:\Users\abc xyz\Downloads\link-to-a-stylesheet\css. The editor highlights the section after abc in green, but unfortunately, it is not functioning as expected. ...

htmlcss

Customize the size of innerWidth and innerHeight in your THREEjs project

Is there a way to customize the size of the window where this function launches instead of it automatically calculating the height and width? I've attempted to modify this section of the code, but haven't had any success so far: renderer.setSiz ...

javascripthtmlthree.js

Is there a way to mix up the sequence of information when replying?

There have been numerous instances where this question has been raised and addressed, such as here, here, and here. However, those discussions pertained to Bootstrap 4, which is approaching its End of Life as of today, 2021-10-20. Given that Bootstrap 5 i ...

csstwitter-bootstrapbootstrap-5

Unusual manifestation of the Array

I defined a list array as: list: string[] = []; and added elements to it like this: let infoFile: string = fileReader.result; this.list.push(infoFile); After checking the console log, I noticed something strange [] 0 : "data:image/jpeg;base ...

javascripthtmlarraysangulartypescript

Step-by-step guide on programmatically activating a radio button

I am working with a radio button and input field. I need the ability to programmatically toggle the radio button so that when this.iAreaOfCoverageForThresholdPasser.average-height is set to true, the radio button appears highlighted. Snippet of HTML: < ...

javascripthtmlangulartypescript

Step horizontally to scroll varying amounts

On my webpage, I have implemented two buttons to scroll left and right. When these buttons are clicked, the page should move left or right by the width of each individual div (since they all have different widths). I am unsure if this functionality can b ...

jqueryhtmlscroll

How can Angular be used to show text without the accompanying HTML tags?

I have a string saved in localStorage that includes HTML tags because I am using ngx-quill (Angular Rich Text Editor) which saves the data in HTML format. Here is a preview of my localStorage: https://i.sstatic.net/NCSgJ.png As shown in the image above, ...

htmlangular

Guide to displaying toast notifications in the upper right corner using Bootstrap 5.2 and Angular 14

I am looking to implement toast notifications using Bootstrap 5.2 and Angular 14. The toast notification must be a separate component with custom styles, utilizing toast.services.ts. My goal is to be able to call the toast component from any other compon ...

angularbootstrap-4bootstrap-5toast

Tips for integrating properties into the class in jQuery

My goal is to assign properties to a class and then inherit them into individual DIV IDs. However, something seems to be off with my code. What could it be? var startItem1X = randomRange(50,100); var startItem1Y = randomRange(50,100); var startItem2X = ra ...

jquerycss

Exploring the benefits of incorporating margin and padding variables in custom class Bootstrap 4 with Sass integration

Is there a way to make spacer variables more generic while using Bootstrap in a custom class? I have a class called .box and I would like to apply the pl-3 class from Bootstrap 4 without adding it directly in the HTML, but rather styling it in sass. I ai ...

htmlcsssassbootstrap-4padding

Activate the button to effortlessly load pages with a visually engaging animation

I have been facing a problem for the past couple of days. I need help with achieving a specific functionality on my website. When button1 is clicked, I want to load the page in a div class named "loadpage" with an animation coming from the left. Similarl ...

jquerycssajaxhtml

Challenges arise with CSS alignment when adding d3.js charts to a webpage

I'm puzzled by the empty space that appears between the left column (highlighted in the image) and the header. This peculiar gap only seems to occur when the middle column is filled with a chart. I've scrutinized the code using Chrome Developer t ...

javascripthtmlcssd3.js

How to export HTML table information to Excel using JQuery and display a Save As dialog box

This script has been an absolute lifesaver for my web application. Huge thanks to sampopes for providing the solution on this specific thread. function exportToExcel() { var tab_text="<table border='2px'><tr bgcolor='#87AFC6& ...

javascriptjqueryhtmlmysqlexcel

Only the box that I click on will receive the applied color

I am facing an issue with applying colors to the label colorCheckBox, each with a unique data-id that is derived from the variable colorBoxId, which is globally accessible using colorBoxId = $(this).closest('tr').data('id');. The proble ...

jqueryhtmlcss

Interactive tables created using Google Visualization

I have a Google visualization data table that works well, but I am facing an issue with the width of the table. When I click as shown in the image, I call the function drawTable(); and then I encounter this: As you can see, the table does not have a width ...

javascriptjqueryhtmlcssgoogle-visualization

Differentiating between CSS layouts for mobile and desktop devices

Is there a way to create this specific layout using CSS? It's important to note that the order of elements should change on mobile compared to desktop! https://i.sstatic.net/GRIxV.png Currently I'm working with bootstrap 4. The code below "wor ...

csstwitter-bootstrapflexboxbootstrap-4

What is the best way to align elements within a row/column layout in Angular Material when working with divs?

To set up two div blocks in a row, I'm utilizing the code below: <div layout="column" layout-gt-xs="row" layout-align="center center" id="row"> <div id="a">a</div> <div id="b">b</div> </div> The CSS for this ...

cssangularjsangular-material

HTML5 enables the creation of an imperceptible scrollbar

I am looking to make my scrollbar invisible without it being visible however, I still want it to function when hovering over the box Also, I need it to work smoothly on both tablets and computers, which is why I have opted for using html5 I would great ...

javascriptjquerycsshtml