Having trouble positioning items to the right in bootstrap

    <div id="unique-content-wrapper">
      <nav class="navbar navbar-expand-lg navbar-light bg-light" id="">
        <button class="navbar-toggler" id="menu-toggle"><span class="material-icons iconColor">notes</span></button>
        <div class="row">
          <div class="input-group col-8 searchBarMain">
              <input class="form-control py-2 border-right-0 border" placeholder="Enter text to search" id="unique-search-input">
              <span class="input-group-append">
                  <button class="btn btn-outline-secondary border-left-0 border" type="button">
                      <i class="fa fa-search"></i>
                  </button>
                </span>
          </div>
          <div class="col-4 user-info float-right">
            <span>John Doe</span>
            <span class="material-icons iconColor">account_circle</span>
          </div>
      </div>
      </nav>
  </div>

I need help aligning items to the far right side of the screen. Despite using the 12 column layout and the far-right class, the items remain centered on the screen. Any assistance would be appreciated. Thank you.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you are working with Bootstrap, remember to stick to its template and make minimal alterations. Avoid using the grid layout to control the appearance of Bootstrap navbar. To align all nav-items to the right, use the class "ml-auto" for Bootstrap 4 and "me-auto" for Bootstrap 5.

If you're struggling with the Bootstrap navbar code, here is a clean and functional code snippet for you to use. Simply copy and paste your elements into this layout. Take note that I've applied "mr-auto" to move the logo to the left and "ml-auto" to move all nav links to the right.

If this solution works for you, please mark it as the accepted answer by clicking on the green tick icon.

<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
           <a class="navbar-brand mr-auto" href="./index.html"> <img src="#" height="50" width="50"> </a> 
           <div class="collapse navbar-collapse" id="Navbar">
               <ul class="navbar-nav ml-auto">
                    <li class="navbar-item active"><a class="nav-link" href="./index.html"> Home</a></li>
                    <li class="navbar-item"><a class="nav-link" href="./aboutus.html">About</a></li>
                    <li class="navbar-item"><a class="nav-link" href="#">Menu</a></li>
                    <li class="navbar-item"><a class="nav-link" href="./contactus.html"> Contact</a></li>
                </ul>
            </div>
        </div>         
    </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

What is the method for displaying a div adjacent to a password input field?

I am attempting to display a password verification box next to an input field. The current logic is functioning properly, but the box containing all password requirements is not appearing in the correct position. Instead of being positioned adjacent to the ...

javascriptjqueryhtmlcsstwitter-bootstrap

Does the input password typically submit on its own?

When attempting to create a form, I encountered an unexpected behavior. <form> <input type="text" autocomplete="username" style="display:none;"> <label for="password">password:</label><input type="password" autocomplete="c ...

html

Unable to create a responsive design for this box

I've been attempting to place text and a button inside a box, but I'm encountering issues with fitting them on medium and small screens. So far, the methods I've tried have not been successful. Below is the code I am currently using: * { ...

htmlcssresponsive-designbootstrap-4

Retrieve a specific HTML fragment from an HTML document using the Html Agility Pack

Is there a way to extract an html "fragment" using the html agility pack from a full html document? In this case, I define an html "fragment" as all content enclosed within the <body> tags. For instance: Input Sample: <html> <head> ...

c#htmlhtml-agility-pack

Could somebody please clarify the purpose of Bootstrap's `_root.scss` file?

After reading through the Bootstrap introduction [1], I added the following code snippet to my .html file: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384- ...

cssbootstrap-4sassgoogle-chrome-devtools

Lower the placement of Glyphicons

I have recently implemented a custom font on my website. Unfortunately, this font is not standard and its alignment is off. As a result, when I use this font with Twitter Bootstrap glyphicon, they do not appear in the same line. Is there a way to adjust t ...

htmlcsstwitter-bootstrapglyphicons

Saving HTML form data to a text file

I have a form on my website's index.html that looks like this: <form id="demo" action='submit.php' method='post' enctype='text/plain'> link: <input type='text' name='web'></br> <i ...

phphtmlforms

Attach the footer to the bottom of the screen only if the main page text is limited in length

How can I ensure that my footer sticks to the bottom of the screen only when there is minimal content on the page? When there is a lot of content, I'd like the footer to appear after the content rather than being pinned at the bottom, especially since ...

cssbootstrap-4

Adjust the transparency of CSS elements using a jQuery selector

I am developing a grid of brand thumbnails with interactive icons. When one of the icons is hovered, I want all the icons to change opacity and become visible. Here is the current HTML structure: <div id="brands-wrapper"> <img class="brands" ...

jquerycssopacity

Calculating the Vertical Size of a Component within Django Template Design

Within a div element with a fixed width, I have a p element with the following CSS properties: height:100px; overflow:hidden; I am looking to implement a functionality where a MORE button is displayed if the text within the paragraph overflows and is hid ...

pythonhtmlcssdjango

Updating contact list to a database table structure

Currently, my code displays the data in address books, but I would like it to be shown in a table instead. I attempted to use document.write to create the table, but I'm unsure how to populate the table with the data rather than the address book forma ...

javascripthtmlcss

``Is it possible to adjust the style of an HTML element based on the style of another element?

Within my web application, I am dynamically changing the style of an HTML element using JavaScript. Below is the code snippet: function layout() { if(document.getElementById('sh1').getAttribute('src') == "abc.png") { docum ...

javascripthtmlcss

How can you employ moment.js to display the most recent update time of mongoDB/mongoose?

I am facing an issue with displaying the last date/time when any entry in my table was edited and updated using moment.js. It seems to be updating the date/time in real-time rather than only showing when a database entry was modified. How can I ensure tha ...

htmlnode.jsmongodbmongoosemomentjs

Use jsoup to locate an element followed by a specific tag within the document

I need help using jsoup to find an element that starts with a font tag, but returns the element with a ul tag. Can someone assist me with this? <font class="text-error">Error</font> <ul rel="open" stat="err" ... > ... </ul> I have ...

htmljsoup

What is the process for extracting content from CSS comments or annotations in a stylesheet?

Here's an interesting concept: allowing users to define a set of CSS rules with annotations. For example: /* @name Page style */ body { font: 16px/1.5 Arial; /* @editable */ background-color: #fff; /* @editable */ } /* @name Section header */ ...

javajavascriptcssparsingcomments

Leveraging an array of Elasticsearch documents using AngularJS

The query results are given below... { "took": 6, "timed_out": false, "_shards": { "total": 5, "successful": 5, "failed": 0 }, "hits": { "total": 45, "max_score": 0, "hits": [] }, "aggregations": { ...

htmlarraysangularjselasticsearchiteration

What is the best way to implement a 'box-shadow-right' that stops at the border?

How can I achieve a seamless shadow effect at the border-right of a small div that matches the shadow of a larger div, without cutting off at the border-bottom of the small div or the border-top of the large div? I am unable to use Z-index due to the compl ...

htmlcss

Executing a post request asynchronously and storing the retrieved data into a variable

Currently, I am in the process of learning AngularJS and attempting to upgrade my current method of fetching data from a web service and dynamically assigning it to a variable that is binded using ng-repeat. My main objective is to implement an asynchronou ...

jqueryhtmlangularjsajax

Tips for altering the color of an image using CSS attributes

I am looking to create a male Head component in this design draft and modify the CSS according to the skin prop. I have attempted to use filter and mix-blend-mode properties, but have not found a solution yet. Any guidance on how to achieve this would be ...

cssvue.jsfilterfigmamix-blend-mode

Perfectly aligning css tabs both vertically and horizontally with dead centering technique

Can you help me figure this out? Currently, the tabs in the HTML and CSS provided below are positioned close to the top of the screen. How can I adjust the markup so that the tabs are dead-centered (both vertically and horizontally) instead? Check out th ...

htmlcss