Update the logo for mobile, desktop, and tablet display using Bootstrap 4alpha

I am currently working on customizing a header with 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>

My goal is to optimize how the logo is displayed on various screen sizes. We have both a landscape and portrait version of the logo for desktop and mobile.

My idea is to have two versions of the logo (logo-land and logo-port). I'm uncertain how to implement both logos and use Bootstrap classes to determine which one is displayed based on screen size (e.g., xs, md, etc).

Can anyone provide guidance on how to achieve this?

csstwitter-bootstrapbootstrap-4

Answer №1

If you're on the lookout for a bootstrap-4 solution, you can achieve this by incorporating two navbar-brand elements. One would be hidden for smaller devices (.hidden-sm-down), while the other would be 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the layout of a webpage using CSS

I am facing a challenge where I need to adjust the layout of a webpage using CSS for mobile view. Currently, the desktop version has a sidebar floated to the left and a textbox floated to the right. The HTML structure is as follows: <div id="container" ...

csshtmlmobilemedia-queriespage-layout

What is the best way to align a bootstrap 5 iframe in the center?

<div class="ratio ratio-4x3 justify-content-center align-items-center mx-auto"> <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500& ...

cssbootstrap-5

Tips for ensuring a div stays centered while resizing the window

When I resize the window, the div tab on the right side of the screen moves to the bottom right. How can I make it stay in the middle regardless of screen size? I've tried using margin-left:auto and margin-right:auto but it didn't work. Changing ...

javascripthtmlcss

Close the overlay by clicking outside of it

I'm working on creating a unique pop-up window that appears when a customer adds a product to their cart. The design features red and green background divs with a darker overlay (#overlay-daddy) and a white child div (#overlay). My issue arises from ...

javascripthtmlcss

The anchor for the circular image is oversized

Currently, I have a PHP code that displays a user's profile picture, and when clicked, it takes them to their own profile. The image is displayed correctly, and the link works fine. However, there seems to be an issue with the area covered by the anch ...

cssimagebackgroundanchor

what is the best way to position a glyphicon next to a form?

Forgive me for asking such a basic question, but I struggle with aligning and positioning elements. Here is my issue: https://i.sstatic.net/Uy6XB.jpg https://i.sstatic.net/TTs6V.jpg All I want is for the glyphicon to be displayed next to the textfield, ...

htmlcsstwitter-bootstrap-3

Using a subheader in conjunction with a virtual repeater in markdown does not function correctly

Currently, I am utilizing angular 1 along with angular material. I am trying to incorporate md-subheader with multiple md-virtual-repeat-containers within an ng-repeat loop. The source code can be found on this codepen. The issue I am facing is slightly c ...

htmlcssangularjsangular-material

Implement a shadow effect on a customized image using Tailwind CSS

Can someone help me with this code snippet I have written: <script src="https://cdn.tailwindcss.com"></script> <div class="m-6 space-x-3"> <div v-for="m in media" class="w-[200px] h-[200px] inline-block"> <img class=" ...

csstailwind-css

Is there a mistake in the way I am creating a horizontal navigation bar?

Currently working on creating a simple navigation bar using HTML/CSS for a Java/Spring Boot project. Admittedly, my HTML/CSS skills are quite limited as you can see below. I'm aware that there might be some mistakes in my approach. Thank you in advanc ...

htmlcss

How can the seating arrangement be optimized for a seating chart and what is the most effective way to transition away from a traditional table structure?

Currently, I am attempting to create a dynamic seating chart on a webpage within an asp.net-mvc site using data retrieved from a database. Initially, I used a table to organize the grid layout of rows and columns, which resembled this structure: The datab ...

jqueryhtmlcssasp.net-mvchtml-table

CSS Trick: Applying first-of-type selector to specific instances of a div

I'm currently grappling with how to specify that a 'first-of-type' should only be present on specific instances of a div. For instance, suppose I have a class called ".maintext" and in some cases I want the first paragraph to feature a dropc ...

csscss-selectors

Struggling to solve these two CSS Animation issues

I am struggling to replicate a CSS animation similar to this example Currently, I am facing challenges with two specific aspects: #1 - The arrow of my triangle must consistently point towards the circle, but my attempts at rotating it only result in the ...

htmlcssanimationrotationcss-animations

Formatting an HTML table for mobile devices

Hi everyone, I'm struggling to understand why my table is displaying incorrectly when switching to the mobile version. I've attempted various CSS adjustments to correct it, but the issue persists when viewed on mobile devices. Mobile view of the ...

htmlcss

Enhancing dynamically generated elements with CSS styling

I have been working on developing my own jQuery Gallery Plugin. The crucial initial markup that is required to initialize the plugin includes: Initial HTML <div class="riGallery"> <ul> <li><a href="http://www.example.com" ...

jquerycssdynamicplugins

Ensure that the text box inside the div adjusts its size in accordance with the dimensions of the window, as the div is already designed

As a novice in HTML and jQuery, I am currently working on creating a portfolio site for a school project. One of the challenges I have encountered is designing a graphic that includes a text box within a resizable div element. My goal is to prevent excessi ...

htmlcsscss-position

Elements with fractional heights containing absolutely-positioned child elements

I've been experimenting with styling elements using absolutely positioned :before pseudo-elements. My current approach looks like this: .element:before { content: ""; display: block; height: 0; width: 0; border: 10px solid #ad ...

htmlcssabsolutepixel-perfect

When selecting filter options, the posts/images now overlap before transitioning into a masonry view upon resizing the window

I have implemented a filter on my posts to arrange them based on popularity, style, and country. Screenshots: Screenshot 1: Everything looks good when the page loads, displaying all posts/images properly in masonry layout. Screenshot 2: Issue occurs whe ...

phpcssajaxfiltermasonry

Tips for avoiding Bootstrap collapse overflow within a container that has overflow-y-scroll

I'm currently facing an issue with a container that has the overflow-y-scroll CSS property. Inside this container, there's a Bootstrap collapse button that expands to show more content when clicked. The problem arises when the expanded content ov ...

htmlcssscrollbaroverflowbootstrap-5

How about incorporating two subtly tilted SVGs for a creative twist on navigation backgrounds?

I am in the process of designing the navigation menu for my website and I have a specific vision in mind. I want to create a unique background using two rectangular SVGs that are slightly rotated off axis and overlapping each other, with their edges extend ...

htmlcsssvg

Fixed header in a table designed using HTML and Bootstrap framework

Currently, I am facing a challenge with an HTML bootstrap table that contains over 15 columns. I have enabled overflow auto to enable both vertical and horizontal scrolling. However, I am having difficulty fixing the header part because the table width exc ...

htmltwitter-bootstrap-3html-tablebootstrap-4