Bootstrap 4 center header elements on mobile

Question

Here is my header setup (bootstrap 4):

<div class="container">
<div class="row">
<div class="col-md-6">
  <div class="navbar-brand"><img src="..."></div>
</div>
<div class="col-md-6 text-right">
  <div class="header-btn-grp">
  <div class="header-call-us">Get a Quote, Call Today!</div>
  <a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
  <div class="header-address">XXX</div>
</div>
</div>
</div>

As expected on desktop the logo sits on the left and the button sits on the right.

When on smaller devices I would like the logo and button to align in the center.

I have tried to add a .text-md-center class to both columns but this caused both elements to center in there columns at all widths (desktop and mobile).

What is the correct way to do this?

Answer 1

An alternate to @cwanjt answer is using the text-center. You just then need to use text-md-left and text-md-right to keep the desired alignment on larger widths.

<div class="container">
    <div class="row">
        <div class="col-md-6 text-md-left text-center">
            <div class="navbar-brand"><img src="//placehold.it/140x30"></div>
        </div>
        <div class="col-md-6 text-md-right text-center">
            <div class="header-btn-grp">
                <div class="header-call-us">Get a Quote, Call Today!</div>
                <a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
                <div class="header-address">XXX</div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/Ijl31XHfRT

Answer 2

@TimothyAURA, if I'm understanding you question correctly, it's how to center the content of your header on smaller screens. If that's the case, you can look at the code in this codeply project to get an idea of how to do that. It seems like you have some familiarity with Bootstrap, but here's a reference to Bootstraps utilities for justifying content.

It uses a justify-content-center class for device sized medium and below, and a justify-content-lg-between on larger displays.

<header class="d-flex justify-content-center justify-content-lg-between">
    <a class="navbar-brand" href="#">
        <img src="http://via.placeholder.com/65x65"  alt="">
    </a>
    <div class="header-btn-grp">
        <div class="header-call-us">Get a Quote, Call Today!</div>
        <a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
        <div class="header-address">XXX</div>
    </div>
</header>