ml-auto is not pushing navbar links to the right

css reactjs flexbox bootstrap-4 reactstrap
cjones picture cjones · Feb 28, 2018 · Viewed 17.2k times · Source

I'm using reactstrap and have been following this link:

https://reactstrap.github.io/components/navbar/

In the example, the <nav className='ml-auto' navbar> is pushing the <NavItem> to the right. However, what I am trying to implement (which is really similar to the example) the <NavItem> is rendering right next to the <NavbarBrand>.

I've checked the syntax like 100 times and it looks correct. The custom CSS I have, which is very little, does not seem to be overriding anything. The CSS in the console looks pretty similar and it appears to be affected by the:

.ml-auto, .mx-auto {
    margin-left: auto!important;
}

At least toggling it off in the console in the example, moves the <NavItem> right next to the <NavbarBrand> like it is in my app (which I don't want). Here is what I am looking at:

Reactstrap Example (correct spacing):

Correct spacing enter image description here

Console for my app (incorrect spacing): enter image description here enter image description here

How do I get the spacing right in my app?

It really isn't clear to me what is affecting margin-left: auto !important to work in one and not the other.

Answer

Nithin Kumar picture Nithin Kumar · Jan 4, 2021

For Bootstrap-5 we have to use ms-auto instead of ml-auto

Related questions

React native text going off my screen, refusing to wrap. What to do?

The following code can be found in this live example I've got the following react native element: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.…

Read More
Simulate display: inline in React Native

React Native doesn't support the CSS display property, and by default all elements use the behavior of display: flex (no inline-flex either). Most non-flex layouts can be simulated with flex properties, but I'm flustered with inline text. My app has …

Read More
What is the meaning of xs, md, lg in CSS Flexbox system?

I'm developing an application using React and wanted to style components, I found https://roylee0704.github.io/react-flexbox-grid/ which talks about a fluid grid system. The example looks like: <Row> <Col xs={12} sm={3} md={2} lg={1} /> <…

Read More