CODEWITHSUNDEEP
twitter-bootstrap
Kruthika
Kruthika

Reputation: 75

changing logo in mobile version of bootstrap page

In the mobile version of the website, How do I change the logo? I have tried reducing the image size of logo for mobile version. But i need to change the logo itself. Can anyone help in solving it? I am using media queries to set custom styles for mobile version in bootstrap

Upvotes: 2

Views: 4584

Answers (1)

iurii
iurii

Reputation: 4230

Bootstrap up to v3

You can use visible-xs and hidden-xs classes to show different logos depending on the device.

<img class="visible-xs" src="mobile-logo.jpg"> <!-- this one will be visible on mobile -->
<img class="hidden-xs" src="normal-logo.jpg"> <!-- this one will be visible on everything else -->

Bootstrap 4

<img class="d-xs-none" src="mobile-logo.jpg"> <!-- this one will be visible on mobile -->
<img class="d-none d-xs-block" src="normal-logo.jpg"> <!-- this one will be visible on everything else -->

or if you use a logo as a background image. Smth like this should work

@media (max-width: 767.98px) {
  .logo {
    background-image: url(mobile-logo.jpg);
  }
}
@media (min-width: 768px) {
  .logo {
    background-image: url(normal-logo.jpg);
  }
}

Upvotes: 11

Related Questions