Issues with the proper functioning of the mr-auto class in Bootstrap 4

I am currently working with a code snippet:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

      <header>
        <div class="container">
          <div class="row">
            <div class="col-lg-3">
              <div class="logo">
                <img src="#" alt=" logotype">
              </div>
            </div>
            <div class="col-lg-9">
              <div class="head-buttons mr-auto">
                <a href="">Русский</a>
                <div class="auth-buttons">
                  <button>Войти</button>
                  <button>Регистрация</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

I am facing an issue where I want all content within the col-lg-9 div to align to the right. However, using mr-auto is not working as expected. I have also tried using justify-content-end on the row, but that didn't work either. How can I fix this alignment problem?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To implement alignment in bootstrap 5, opt for ms-auto in place of ml-auto and me-auto instead of mr-auto.

<ul className="navbar-nav ms-auto">
<ul className="navbar-nav me-auto">

Answer №2

For flexbox containers, auto-margins work seamlessly. However, if col-lg-9 is not a flexbox container, you can simply add d-flex to convert it into one. Then, use ml-auto to shift the content to the right.

 <div class="row">
    <div class="col-lg-3">
        <div class="logo">
            <img src="#" alt="logotype">
        </div>
    </div>
    <div class="col-lg-9 d-flex">
        <div class="head-buttons ml-auto">
            <a href="">Русский</a>
            <div class="auth-buttons">
                <button>Войти</button>
                <button>Регистрация</button>
            </div>
        </div>
    </div>
 </div>

Alternatively, you can use col-lg-auto to shrink the width of the right column to fit its content. Then, applying ml-auto on the column will achieve the desired result.

  <div class="row">
      <div class="col-lg-3">
            <div class="logo">
                <img src="#" alt=" logotype">
            </div>
        </div>
        <div class="col-lg-auto ml-auto">
            <div class="head-buttons">
                <a href="">Русский</a>
                <div class="auth-buttons">
                    <button>Войти</button>
                    <button>Регистрация</button>
                </div>
            </div>
       </div>
  </div>

Answer №3

The mr-auto class is specifically used to set the right margin to auto, not to align content to the right.

If you want to align content to the right within a col-lg-9 column, you should add the text-right class along with col-lg-9.

Thank you for the clarification.

Answer №4

For better alignment, consider utilizing the float-right class and incorporating d-flex instead of relying solely on mr-auto.

Answer №5

There are occasions when using the style tag with the property style="margin-left: auto" is the most effective solution to achieve the desired outcome.

Answer №6

<Nav className="ms-auto"> used for aligning items to the right
<Nav className="me-auto"> used for aligning items to the left

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

Discover the complete compilation of CSS class regulations (derived from various stylesheets) along with their currently active properties for the chosen element

Is there a way to retrieve all the matched CSS Selectors for a selected element and access the properties of each active class applied to that element? I have researched methods like using getMatchedCSSRules and checking out However, I am hesitant to use ...

javascriptjqueryhtmlcss

Could someone assist me with rearranging blocks in Squarespace by utilizing CSS?

Greetings, fellow readers! After a period of silent observation, I am finally making my presence known. My wife and I are in the process of creating her freelance services website. However, we have encountered a troublesome issue that has left me quite pe ...

cssbootstrap-4squarespace

What is causing JS to malfunction and preventing App Scripts from running `doGet()` when using either `e` or `event` as parameters?

Following a Basic Web App video last night, I meticulously followed every step until the very end where things started to go wrong. Today, I decided to start from scratch and recreate it all. Despite weeks of coding practice, I can't seem to figure ou ...

javascripthtmlgoogle-apps-script

Encountering challenges with Angular in creating a dynamically responsive background

I'm struggling to make this website fully responsive and adapt to various screen resolutions. The background images I'm using are high-resolution, but they don't seem to cover the entire page. CSS : @media screen and (max-width: 600px) { ...

htmlcssangularbootstrap-4

Extend and retract within a row of a table

I need help with modifying a dynamically generated table to meet specific requirements. The table currently looks like this. The task involves hiding all columns related to Category B, eliminating duplicate rows for Category A, and displaying entries from ...

javascriptjquerycss

Ensuring the Selection with jQuery

I've successfully implemented jQuery validation on a text field, but when I try to apply it to a radio button, it doesn't seem to work. I'm not sure what I'm doing wrong. Here is my HTML and jQuery code: <input type="text" placehol ...

jqueryhtml

An automatic selection in my AngularJS drop-down menu

I am currently utilizing AngularJS to develop a basic web application. My goal is to have the values of city A displayed as the default choice in my select dropdown. index.html <body ng-controller="MainCtrl"> <select ng-model="selectedCity" ...

javascripthtmlangularjs

JavaScript Issue: Unable to Update or Delete Table Row Data

Presently, I am involved in developing a project titled : Tennis Club Management using a blend of Javascript, HTML, CSS, and Bootstrap. This project encompasses several HTML pages and a JS file such as index.html, profile.html, manageFees.html, index.js, e ...

javascripthtmlcssbootstrap-4

Alter the background shade of an item as it is added or removed from a multi-select list and transferred to another list

Is there a way to visually represent the movement of items between two multi-select lists? I have one list on the right and one on the left, and when objects move from right to left, I want them to have a red background (indicating removal) and if they mov ...

htmlcssangularjsmulti-select

What are the drawbacks of utilizing CSS word-wrap across all elements on a website?

Is there a downside to utilizing the CSS property word-wrap:break-word in this manner? body { word-wrap: break-word; } The definitions for the values of this property are as follows: normal: Breaks words only at allowed breakpoints break-word: Perm ...

css

Ways to dynamically insert a new row into a table based on user input in a Postman-like reactive table

Is there a way to dynamically insert a row when a single character is entered into an input field in the header tab, similar to how Postman functions? 1) If a user types any single character in the td of the first row, then a new row should be added below ...

javascripthtmlangular

When the button is clicked, redirect to a new page and submit a form using AJAX with data obtained from the click event

I have a page called 2.html where inputting an ID number results in some output being displayed. This functionality is achieved using Ajax post method, sending data along with the data parameter. I also have another page named 1.html that contains a list o ...

javascriptjqueryhtmlajaxflask

Tips for choosing the class=" * " using jQuery's .html() function

Is there a way to target the string "class" or any other specified string within code retrieved from .html()? If we have an element's HTML content stored in another element (similar to a snippet with preview) <div class="myClass">1</div> ...

jqueryhtmlregexhighlight

What is the best way to align the elements to the beginning and place the flexbox container in the center

I posted this plunker instead of the previous one. My goal is to align the flex container horizontally while keeping its items aligned at the start. I want to use align-content: flex-start along with justify-content: center. Currently, if the last row h ...

cssflexbox

Understanding how to sum the values of two separate dropdown selections using jQuery

Is it possible to combine and total up two different selections to display on the "Total" button below? I have added calculations to each selection. When a user selects a quantity, it should automatically sum up and display on the "Total" button, but I am ...

javascriptphpjqueryhtmlstyles

Unable to save cookies using AngularJs

Currently, I am immersed in a small project utilizing AngularJs. The main objective of this project is to save a user's username and password within browser cookies. Here is my snippet from app.js where you can observe ngCookies being injected as a d ...

javascripthtmlangularjs

Fluid centering of DIV content both vertically and horizontally

Check out this example: When dealing with fluid divs, line height won't work as expected. My current code relies on line-height which doesn't work when the box sizes change. How can I ensure that a link (content) always appears perfectly centere ...

htmlcssxhtmlmarginfluid-layout

Is there a specific code repository available that can verify and transform blog comments into XHTML strict format?

I'm currently developing a PHP website that allows users to make comments similar to a blog, and I am specifically interested in restricting the use of certain HTML tags. Is there any existing library that can process user comments and output valid XH ...

phpjavascripthtmlxhtmlcomments

The Wordpress block template is inhibiting Bootstrap from managing responsiveness

In the process of creating a custom WordPress block theme, I encountered a styling dilemma. While I wanted to maintain WordPress styling for its built-in blocks, I aimed to have Bootstrap exclusively style the blocks created within my theme. With Bootstrap ...

jquerytwitter-bootstrapbootstrap-5wordpress-gutenberg

Achieving 100% height with Flexbox in CSS

In my layout, I have a column on the right with <IndustryList />, and I want everything in the other <div> that contains <ParameterAndPostSearch /> and <SocialPostList /> to extend to the bottom. However, no matter what I try, setti ...

cssreactjsflexbox