What is the best way to align the navbar-brand to the right using Bootstrap 4?

I am working with Bootstrap 4 and I have a specific requirement for the navbar-brand item to be positioned on the far right side. By default, the menu appears on the left side.

I have attempted to use classes like ml-auto, mx-auto, mr-auto, pull-right, but none of them are giving me the desired outcome.

Although mx-auto worked well for small screens, centering the navbar-brand when the hamburger menu is visible, I need a solution that also works when the regular menu is displayed.

Below is the code I am currently using:

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
  <a href="#" class="navbar-brand navbar-right">BSB Feedback</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
    aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse collapse" id="mainNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item homeLink">
        <a class="nav-link" href="/">
          <span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
        </a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="/">Give Feedback</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="/managefeedback/">Manage Feedback</a>
      </li>
    </ul>
  </div>
</nav>
csstwitter-bootstrapbootstrap-4

Answer №1

If you want to ensure that the brand remains at the top on mobile screens, you can utilize the order-last class. However, you can also use responsive ordering by adding the navbar-brand order-md-last class like this...

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
  <a href="#" class="navbar-brand order-md-last">BSB Feedback</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
    aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="mainNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item homeLink">
        <a class="nav-link" href="/">
          <span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
        </a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="/">Give Feedback</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="/managefeedback/">Manage Feedback</a>
      </li>
    </ul>
  </div>
</nav>

Learn more about Bootstrap ordering

Another option is to use flex-row-reverse responsively on the parent navbar to change the order of the brand and nav links on desktop screens only.

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu flex-md-row-reverse">
 ...
</nav>

To center the brand and toggler on mobile, you can wrap them in a div and use mx-auto for centering:

Related:
How to align navbar items to the right in Bootstrap 4

Answer №2

Try using .justify-content-md-end class

<nav class="navbar navbar-expand navbar-dark bg-info">
 <div class="container justify-content-md-end">
  <a class="navbar-brand" href="#">Brand</a>
 </div>
</nav>

Answer №3

Is there a way to align the navbar-brand to the right side?

To position the navbar-brand on the right side, you can add the order-md-last class. This will work in conjunction with the mx-auto class that you previously tried.

The order-md-last class is responsible for re-ordering the element on medium-sized screens (md) or larger. On smaller screens, the re-ordering won't take effect, and the mx-auto class will be applied as intended.

Below is the updated code snippet with the addition of the order class:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
    <a href="#" class="navbar-brand mx-auto order-md-last">BSB Feedback</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="navbar-collapse collapse" id="mainNav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item homeLink">
                <a class="nav-link" href="/">
                    <span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
                </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="/">Give Feedback</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/managefeedback/">Manage Feedback</a>
            </li>
        </ul>
    </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 are the best practices for utilizing intro.js effectively on mobile devices?

Description When using introjs on mobile devices with a screen width of less than 600px, the tooltip ends up covering the element. When I hold the device horizontally, the tooltip adjusts its position accordingly. I attempted to apply custom CSS to the too ...

javascriptcssintro.js

Tailwindcss's responsive design suffers from sluggish performance

Currently, I am working on creating a blog using Next.js and I am looking for a way to display or hide the Table of Contents (TOC) based on responsiveness requirements. Although I am utilizing Tailwind CSS for styling, I am experiencing slow reactions. I ...

cssreactjsnext.jsresponsive-designtailwind-css

Placing an exit button beside an image for easy navigation

Here is a snippet of my code: <style type="text/css"> .containerdiv { position:relative;width:100%;display:inline-block;} .image1 { position: absolute; top: 20px; left: 10px; } </style> <div class="containerdiv"> <ima ...

javascripthtmlcss

Can you explain the meaning of 1__qem?

While looking at the default styles applied to HTML elements for Google Chrome, I came across this information on this page: p { display: block; -webkit-margin-before: 1__qem; -webkit-margin-after: 1__qem; -webkit-margin-start: 0; -web ...

cssgoogle-chromewebkit

Card columns with dropdown extending into adjacent column

Encountering a strange problem with the card-columns layout in Bootstrap when using dropdown menus within the cards. The issue arises when the dropdown-menu divs of the lower cards bleed into the next column, despite appearing in the correct position. Thi ...

htmlcsstwitter-bootstrapbootstrap-4

What is the purpose of the bold line down the left side of every HTML calendar?

Welcome to a calendar layout designed with flexbox: Check it out here Do you notice the thicker lines below the heading rows and want to remove them? Here is how you can modify the HTML & CSS code: #calendars-container { text-align: center; font-f ...

htmlcssflexboxoutline

Navigating with Angular router in a Bootstrap navigation bar

My link is not displaying as a tab (I'm using Bootstrap 4 and Angular 5). Instead, it shows up as just a plain link. This seems like it should be a simple issue, but this is my first time working with bootstrap... Thank you! <div> <nav cla ...

angularbootstrap-4angular-routerangular5

Angular 10: A guide to dynamically highlighting navbar elements based on scrolling position

I am currently working on a single-page application using Angular 10. I have a simple page layout and I want to implement a feature that will highlight the navbar based on the scroll position. How can I achieve this functionality in a single-page applicati ...

javascripthtmljquerycssangular

Enhancing the appearance of individual cells in jQuery DataTables

While working with jQuery DataTables, I have successfully managed to access row data and apply styling to the entire row. Below is the code snippet used to initialize the datatable: var $dataTable = $('#example1').DataTable({ "data": data, ...

javascriptjquerycssajaxdatatables

Attempting to create an OutlinedInput with a see-through border, however encountering strange artifacts

https://i.sstatic.net/PL30l.png Struggling to achieve a TextField select with outlined variant and a see-through border. Here's the current theme override I'm using: overrides: { MuiOutlinedInput: { root: { backgroundColor: &ap ...

cssmaterial-uijss

Box without a border wrapping around it

I can't seem to figure out why the border I applied to a child div is not completely enclosing the element. I created two boxes using div tags and added a border to one of them. #box { height: 500px; width: 500px; background-c ...

htmlcss

Is There a Glitch in IE9? Unexplained Expansion of DIV Element

Here is a small code sample that I have: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test</title> <style type="text/css"> table.Sample { width: 600px; table-layout: fixed; } table.Sample ...

csshtml

The inclusion of float: left disrupts the formatting of the list

My webpage features a visual element known as a "plan", which consists of a small table and an image. I want these two elements to appear side by side without any styling. Currently, they are displayed one below the other. You can view how it looks like he ...

htmlcsscss-float

The jQuery library fails to load on the webpage

I'm a beginner to jQuery, and I've put together a basic index.html file with a simple script. However, it seems like the jQuery library isn't loading properly because I'm seeing this error in my firebug console: TypeError: $ is not a ...

jquerytwitter-bootstrap

Image not found in PDF created from HTML to PDF conversion

I am currently utilizing the HTML-pdf library to convert an HTML page into a PDF format. While the dynamic content is being displayed in the generated PDF, there seems to be an issue with the image not appearing as expected. Despite trying various methods, ...

htmlcssnode.jsimagehtml-pdf

CSS: A guide to correctly setting an image URL for a checked checkbox

In my current situation, I have a list of checkboxes with corresponding images. When a checkbox is checked, I would like to add a black circle behind the image. Here is an example of the current output: https://i.sstatic.net/Pq4vP.png This is what I exp ...

htmlcssreactjscheckbox

My HTML gets rearranged by browsers, causing a change in appearance

UPDATE: I have discovered that the issue lies with Internet Explorer which alters the class attribute of an HTML element from: "<img class="blah".." to "<img class=blah..". This inconsistency only occurs in IE for me. It does not affect other attr ...

javascriptjqueryhtmlcss

What causes the select field value to be combined with the values of other fields in the form?

When I select a value from the dropdown menu, the selected value is being added to the other fields as well. Here is the code snippet that was causing the issue: import React, { Component } from 'react'; import './C.css'; import {But ...

cssreactjs

Date selection does not activate the onChange event

I've integrated Bootstrap 4 into my React JS project. To add the bootstrap datepicker, I simply linked it in my index.html file like this: <!doctype html> <html className="no-js" lang="zxx"> <head> <meta cha ...

reactjsbootstrap-4onchangebootstrap-datepicker

Creating PDFs using Puppeteer in the presence of `link` tags

On my website, students have the ability to create their own notes using a RichText editor where the content can be quite complex. I want to provide them with an option to download these notes as a PDF file. To achieve this, I am planning to use the "puppe ...

cssnext.jstailwind-csspuppeteer