With Bootstrap 4 navigation bar, once a container is added, the elements will automatically align to the right

Greetings! I am a newcomer to the world of bootstrap, so please bear with me if my question seems too basic. My current challenge involves creating a navbar using bootstrap. However, I have encountered an issue where the logo remains on the left side while the links align to the right. What I want is for the links to be beside the logo on the right side, with only "Sign In" and "Sign Up" aligning to the far right. Below is the code I have written: Here is what the desired layout looks like

<nav class="navbar bg-dark navbar-expand-md py-0">
    <div class="container">
        <a class="navbar-brand" href="index.html">
            <img src="https://www.w3schools.com/bootstrap4/bird.jpg" alt="logo" style="width:40px;">
        </a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Subscriptions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">FAQs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                </li>
                <li class="nav-item ml-auto">
                    <a class="nav-link" href="#">Sign Up</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Sign In</a>
                </li>
            </ul>
    </div>
</nav>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Take a look at the code snippet below that I have added for you. You can view it in full screen to see the result.

 <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 <nav class="navbar bg-dark navbar-expand-md py-0">
    <div class="container">
        <a class="navbar-brand" href="index.html">
            <img src="https://www.w3schools.com/bootstrap4/bird.jpg" alt="logo" style="width:40px;">
        </a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Subscriptions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">FAQs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Sign Up</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Sign In</a>
                </li>
            </ul>
  </div>
     </div>
</nav>

Answer №2

To ensure proper alignment, modify the HTML code by adding the classes signup and signin to the respective nav-item. Afterwards, include the following CSS code.

<li class="nav-item signup">
<li class="nav-item signin">

.nav-item.signup {
  position: absolute;
  right: 70px;
}

.nav-item.signin {
  position: absolute;
  right: 0;
}

@media (max-width: 767.98px) {
  .nav-item.signup,
  .nav-item.signin {
    position: unset;
    right: unset;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar bg-dark navbar-expand-md py-0">

  <a class="navbar-brand" href="index.html">
    <img src="https://www.w3schools.com/bootstrap4/bird.jpg" alt="logo" style="width:40px;">
  </a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Subscriptions</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">FAQs</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact Us</a>
    </li>
    <li class="nav-item signup">
      <a class="nav-link" href="#">Sign Up</a>
    </li>
    <li class="nav-item signin">
      <a class="nav-link" href="#">Sign In</a>
    </li>
  </ul>
</nav>

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

Unable to use column formatting on a row using flexbox

I am working on creating a layout with rows and columns where the content in each column is vertically aligned. Here is an example of what I am trying to achieve: Currently, I am using react and have multiple components. The approach I believe will work ...

cssreactjsflexboxrowmultiple-columns

Create a path on the Google Map that follows the designated route

I am looking for a solution similar to one found here: Sample However, I have been unable to find a suitable solution anywhere. The main issue is being able to follow the route in order to draw a line between two points. Can anyone provide guidance on ho ...

javascripthtmlgoogle-mapslineroutes

What is the best way to avoid using ng-repeat for the last item being shown?

I currently have an ng-repeat loop that is dependent on an ng-if condition. Here is the specific code block: <div class="fav-prod-customised> <p ng-repeat="ingredient in product.options" ng-if="ingredient.default_quantity == 0 & ...

htmlcssangularjs

Displaying Child1 on hover in CSS is simple using the Parent > Child1:hover selector. But how can we display Child2 using

Is there a way to modify my CSS Combo Box to display the menu div when hovering over the button div instead of the dropdown div? I have a container div with a dropdown div containing a button and a hidden menu. Currently, the menu is displayed when hoveri ...

css

I noticed a significant space below the footer on my webpage. As a first-time website creator, are there any solutions to this

I'm currently in the process of working on my very first website for a study project using HTML and CSS. There's an issue where there is a large gap below the footer that I can't seem to eliminate. I've only completed 3 pages so far, bu ...

htmlcss

Styling Lists: How to Create a Second Line Indent with Counters

There seems to be an issue with the second line indent when using a custom counter. When attempting to use 'list-style-type: decimal', the numbering does not display as desired, for example: ol { counter-reset: ci-counter; list-style- ...

htmllistcsshtml-lists

Tagging photos - Displaying tagged box when hovering over a name

I am currently working on a feature where hovering over a tag name in the list will display a box at the tagged location (similar to Facebook). Below is the code I have: Viewtag.php <?php $sql = "SELECT * FROM image_tag ORDER BY `pic_id`"; $qry = mys ...

phpjqueryhtmlmysqlajax

Discover more in React about using ellipses (...) with dangerouslySetInnerHTML

What is the best method for limiting the number of HTML lines retrieved using dangerouslySetInnerHTML in a React application and creating a '... Read More' expander for it? I attempted to use react-lines-ellipsis, but unfortunately the 'tex ...

htmlcssreactjsnpmellipsis

Enhance the appearance of your responsive embedded video with a stylish border

I'm attempting to give a decorative border to a flexible embedded video. I've experimented with two different techniques to display the video: 1. <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsiv ...

htmlcssvideobootstrap-4

What's the reason for these bootstrap buttons being in such close proximity to one another

Why are these two bootstrap buttons so close together? Should I use some custom CSS to create space between them? On the documentation page here, they aren't touching. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.mi ...

bootstrap-4

Unspecified origins of Js in Chrome Extension

console.log(chrome.runtime.sendMessage({from:"script2",message:"hello!"})); However, attempting to send the message from a background script to a content script is proving to be unsuccessful. https://i.stack.imgur.com/ERgJB.png ...

javascripthtmljquerygoogle-chrome

Using the "unicode-range" property for numerical values

Having incorporated a custom font using @font-face, I am attempting to showcase text in two different languages on a webpage with distinct fonts utilizing the font-face at rule in CSS and employing the unicode-range property. While the text appears corre ...

htmlcsslocalizationfont-facenumber-formatting

Tips for spinning HTML5 Canvas's background image and adjusting the zoom with a slider

As someone who is new to the world of coding, I have a few goals in mind: First and foremost, I want to create a canvas. I also aim to add a background image to the canvas. Importantly, this background image should be separate from any foreground images ...

jquerycsshtml5-canvas

Delving Into the Mysteries of Bootstrap Modal Fading

After updating our Bootstrap plugins file to version 2.2.1, I encountered an issue with adding the 'fade' class to modals. Previously, we had been using data-* api references for modals but decided to switch over. However, when I tried to incorpo ...

javascripttwitter-bootstrap

Guide on Setting up Bootstrap Using NPM in Laravel Installation

After successfully adding Bootstrap to my package.json file using "bootstrap": "^4.3.1" and running npm install without errors, I'm now wondering how to actually integrate Bootstrap into my view. It appears that NPM has installed Bootstrap in the /nod ...

laravelnpmwebpackbootstrap-4laravel-mix

"Utilizing a Font Awesome icon within the dropdown list of a combobox in Ext JS

I have attempted multiple methods to add an icon in the displayfield when a combo box item is selected without success. Here is the fiddle link for anyone who would like to help me with this issue. Your assistance is greatly appreciated. View the example ...

cssextjscomboboxiconsfont-awesome

Unable to run JavaScript file fetched from cache API

For a web application built using pure vanilla JavaScript without utilizing service workers, I am looking to cache a JavaScript file hosted on an AWS S3 file server explicitly. The script below will be embedded in the index.html file of the application (UR ...

javascripthtmlcachingprogressive-web-apps

Achieving Centered Items with CSS Flexbox and Positioning

Struggling to arrange 3 elements using flexbox while keeping them centered both horizontally and vertically. Here is the desired layout: https://i.sstatic.net/Uo6WS.png This is my current attempt, but it's not working as expected. Can anyone spot t ...

htmlcssflexboxflexboxgrid

Ways to retrieve element(s) and delete a specific class located in the DOM structure

This is my first time using stackoverflow and posting a question here! :] Can someone guide me on the best way to write JQuery code for this particular task? Task: My goal is to remove the 'active' CLASS from a nav element when it is active: ...

javascriptjqueryhtmlcssdom

What causes two elements with display: inline-block; position: absolute; to overlap instead of appearing side by side?

It is recommended to use position: relative; in order to achieve inline block behavior for both elements and prevent them from overlapping. This positions the elements inline next to each other as they are recognized as blocks. When using position: absolu ...

htmlcsscss-position