8

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?

TimothyAURA
  • 1,329
  • 5
  • 21
  • 44

2 Answers2

20

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    Brilliant. Exactly what I needed, and so easy. And as a follow up how would I swap the image as well, in the mobile center view the image is a bit small when sitting in the center - can I swap in a larger image? – TimothyAURA Sep 01 '17 at 16:54
  • 1
    The only way to show a different image would require having multiple images (small and big) and use the [Bootstrap 4 visibilty classes](https://stackoverflow.com/a/45844579/171456) to swap their display: https://www.codeply.com/go/MOEQeWb6bP – Carol Skelly Sep 01 '17 at 17:10
  • I've tried every single combination to achieve this, and only this answer seems to work properly! Kudos+++ – Ælex Nov 17 '18 at 14:02
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>
Jade Cowan
  • 2,543
  • 1
  • 18
  • 32
  • I'm confused, why have you removed my other elements like the rows and columns etc? I just want a class that kicks in on smaller display and justifies things in that column to center. I tried adding the two classes to my row and it did nothing. – TimothyAURA Sep 01 '17 at 16:41
  • I misunderstood you then. I thought you were trying to have your elements centered horizontally on smaller displays. – Jade Cowan Sep 01 '17 at 16:46