"justify-content-md-end" and "justify-content-center" behaving opposite of eachother

Question

From my understanding, when I use "justify-content-md-end" it should position the content towards the right when the window is shrunk. And "justify-content-center" should position it in the center when the window is of full size. However, they are behaving quite the opposite in my case. Check the child of "ID: Menu". I have used justify-content-md-end justify-content-center for the classes and they behave the opposite.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-md navbar-light bg-light">
            <div class="container">
                <a href="#" class="navbar-brand">
                    Logo
                </a>
                <button class="navbar-toggler" data-toggle="collapse" type="buton" data-target="#menu">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="container collapse navbar-collapse" id="menu">
                    <div class="container d-flex justify-content-md-end justify-content-center">
                        <ul class="navbar-nav">
                            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
                            <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
                            <li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li>
                            <li class="nav-item"><a href="#" class="nav-link">About US</a></li>
                        </ul>
                    </div>
                </div>

            </div>
        </nav>

Carol Skelly · Answer 1 · 2019-04-05T10:31:39.820

1

"..when I use "justify-content-md-end" it should position the content towards the right when the window is shrunk. And "justify-content-center" should position it in the center when the window is of full size..."

The opposite of this is true. justify-content-center means xs and larger, which is the overriden by justify-content-md-end which mean medium and larger.

The larger breakpoint classes override the smaller breakpoint classes. In this way, Bootstrap is "mobile-first". It works the same way with grid col-* classes.

edited Apr 05 '19 at 10:31

answered Apr 05 '19 at 10:30

Carol Skelly

351,302
90
710
624

oh, I see. Yeah that makes sense. Thank you – Talha Munir Apr 05 '19 at 10:31

score 0 · Answer 2 · answered Apr 05 '19 at 10:31

That is not how that works

So, When you use justify-content-md-end, The content will be on the right from - full screen to 767px.

And when you use justify-content-center screen width below 767px ,content will be on the center.

So in case if you want the content to be the right on screens above 767px and center on screens below 767px then you need to use it like this:

justify-content-md-end justify-content-center

"justify-content-md-end" and "justify-content-center" behaving opposite of eachother

2 Answers2