2

I have a header using bootstrap 4 alpha

<div class="container">
    <div class="row">
        <div class="col-md-6 text-md-left text-center">
            <div class="navbar-brand"><img src="/wp-content/themes/tarps/assets/img/logo.png">
            </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:08XXXXXXX">Ph : <strong>(08) XXX XXXX</strong></a>
                <div class="header-address">XXXX</div>
            </div>
        </div>
    </div>
</div>

I want to optimize the way my logo is displayed on different screen sizes. We have a landscape version of the logo for desktop and a portrait version for mobile.

So the best way seems to be to have two versions of the logo (logo-land and logo-port). However I'm not sure how to incorporate both logos and let bootstrap classes decide which is displayed (I guess using xs md etc).

How would I do this?

Martin Lindgren
  • 374
  • 2
  • 14
TimothyAURA
  • 1,329
  • 5
  • 21
  • 44
  • 2
    Why are you using **alpha** version of `Bootstrap v4` instead of `Bootstrap v4` **beta**? A lot of classes and features are deprecated **from** v4 alpha **in** v4 beta and obviously a lot of bug fixes and new features are in `Bootstrap v4` **beta**. – Vladimir Jovanović Sep 03 '17 at 15:05
  • 1
    I'm not ready to migrate to beta just yet. Ive built my current sites with the alpha version and will need to stick with that for now. – TimothyAURA Sep 03 '17 at 15:18

2 Answers2

2

If you are looking for a bootstrap-4 solution this could be achived by having two navbar-brand elements, one hidden for smaller devices (.hidden-sm-down) and one hidden for larger devices (.hidden-md-up).

<div class="navbar-brand hidden-sm-down"><img src="logo-land.png"></div>
<div class="navbar-brand hidden-md-up"><img src="logo-port.png"></div>
Martin Lindgren
  • 374
  • 2
  • 14
  • If I wanted to change to bs4 beta - would this need to change at all? – TimothyAURA Sep 04 '17 at 08:58
  • OK this seems to be the way - so basically I will need two versions for any element/sections I want to display differently on mobile? – TimothyAURA Sep 04 '17 at 09:16
  • No, it depends. In bootstrap, often a class can change the element on each devices. This was the answer for the question "How can I show two different images on desktop and mobile with Bootstrap 4?" – Martin Lindgren Sep 04 '17 at 10:43
  • Hi @MartinLindgren, I noticed you are suggesting a lot of edits regarding the [bootstrap-4] tag. You might bring that up on [meta] instead of suggesting that many edits. There are easier ways to handle retags than editing them all manually. – Floern Sep 26 '17 at 13:02
0

https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes

shows you how to use Bootstrap classes to hide or show elements on certain size devices.

for Bootstrap v. 4:

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

L. Evans
  • 9
  • 2