Place a pair of images within a navigation bar, aligning one on the left side and the other on the right

For my project, I need to incorporate two images: one is the company's logo and the other is the app logo.

To achieve this, I have set up a navigation bar and my plan is to place the logos on opposite sides to visualize the overall look.

Unfortunately, I am facing difficulty in adjusting the position of the images within the navbar. Is there a way to accomplish this?

I attempted using text-right, but it did not yield the desired results.

<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <div class="row">
            <div class="col-md-6 text-center">
                <img src="~/Content/img/logo_1_v_.png" width="30" alt="">
            </div>
	    <div class="col-md-6 text-right ">
	        <img src="~/Content/img/logo_2_v_.png" width="30" alt="">
            </div>
	</div>
    </a>
</nav>
csstwitter-bootstrapbootstrap-4

Answer №1

To simplify your layout, consider nesting a row within a navbar-brand. Here's an example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="#" width="30" height="30" alt="Image Logo">
  </a>

  <a class="app-image float-right">
    <img src="#" width="30" height="30" alt="App Image">
  </a>
</nav>

If you're not using Bootstrap 4, simply add .app-image {float: right;}

This is just one way to approach it. You can achieve the same result in various ways depending on your preferences. Another option is to use flexbox:

.navbar {
  display: flex;
  justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="#" width="30" height="30" alt="Image Logo">
  </a>

  <a class="app-image">
    <img src="#" width="30" height="30" alt="App Image">
  </a>
</nav>

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

Prevent unnecessary image resizing during parallax scrolling animation

Check out my demonstration where the image scaling results in the margin-top of the parallax wrapper being unable to dynamically adjust. Demonstration: http://jsfiddle.net/KsdeX/12/ .wrapper-parallax { margin-top: 150px; margin-bottom: 60px; } W ...

javascripthtmlcssparallax

Tips on closing a ui-bootstrap modal by using the back button on an Android device

I have created a ui-bootstrap modal following the instructions in the ui-bootstrap document. angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', f ...

javascriptangularjstwitter-bootstrapbootstrap-modal

What is the best way to arrange three identical boxes next to each other, all of the same size

Imagine having a container with the following dimensions: .container { width: 960px; margin: 0 auto; height: 500px; } Now, envision wanting to add three boxes in the center aligned horizontally with these specifications: .box1 { background-color ...

htmlcssalignment

Is it possible to combine sass and css files within the bower_components directory using gulp?

Using gulp-compass and gulp-postcss has been quite a challenge for me. I have been struggling to find the most efficient way to locate CSS files and their dependencies within the public folder, specifically in webroot/css using gulp. Below is an excerpt fr ...

cssgulppostcss

Dimension of images within bootstrap column division

I have a layout with three columns using col-md-4 for a thumbnail design, and then I have another page with col-md-8. In both cases, I need to display an image. Should I use the same image for both layouts or would it be best to have two separate images, e ...

htmlcsstwitter-bootstrap

Determining the best CSS based on the user's preferred color scheme using media queries

Is it possible to separate my CSS into two files, one for dark mode and one for light mode, and conditionally load them using only HTML without the need for JavaScript? I haven't been able to find any examples on https://developer.mozilla.org. Could ...

htmlcss

Unique CSS animations that vary before and after

Looking to enhance a navbar with some interactive effects: Upon hovering over an item, I want it to disappear and be replaced by the same text in a different color. After the initial animation, I'm interested in adding another effect like a 360-degr ...

csstwitter-bootstrap-3

Positioning the Bootstrap 4 sidebar on the right side within a div container

Currently, I have incorporated a Bootstrap 4 sidebar within a div positioned on the right side. However, upon toggling it to hide the sidebar, an unwanted horizontal scroll bar appears. My goal is to toggle the sidebar without seeing the horizontal scroll ...

bootstrap-4sidebar

How can you use HTML and SVG to move just one endpoint of a line using a mouse click?

I have been exploring ways to selectively move one end of a line, but I am encountering difficulties as it keeps altering the container and ultimately redrawing the entire line. Here is a JSFiddle link for reference: https://jsfiddle.net/h2nwygu8/1/ < ...

javascriptcsshtml

Error in Angular 2 component when loading background images using relative URLs from an external CSS skin

In my angular2 component, I am utilizing a third-party JavaScript library. The skin CSS of the component attempts to load images using relative URL paths. Since I am following a component-based architecture, I prefer to have all component dependencies enca ...

csstypescriptangularcomponentsrelative-path

Mapping the Way: Innovative Controls for Navigation

Currently, I am utilizing the HERE maps API for JavaScript. However, I would like to customize the design of the map controls similar to this: Below is an example for reference: HERE EXAMPLE Is it feasible to achieve this customization? ...

javascriptcssmapshere-api

Hiding the author, category, and date information from displaying on WordPress posts

After creating a Wordpress blog site and adding the category widget to the right sidebar as a drop down, I realized that I needed to customize its layout in terms of colors and design. However, I am struggling to find out how it can be done, which .php fil ...

phpcsswordpress

Align the button vertically at the center of the div

I am currently working on the front page layout which you can see in the following link: https://i.sstatic.net/CBkFE.png. My goal is to adjust the position of the create, update, and delete buttons so that they align perfectly with the middle point betwee ...

csstwitter-bootstrapbootstrap-4

How to stop font-family and letter spacing from affecting the margin of div and ul elements in CSS

I'm facing a challenge with aligning a rotated div and an unordered list in a container. Adjusting the margin of either element does the trick, but changing font-family or letter-spacing globally affects the spacing between the two. Check out this JS ...

htmlcss

Apply a unique font to the gridview that is not universally available on all systems

Can I use a custom font for my gridview that is accessible to all users, even if it doesn't exist in all systems? Is there a way to include the font in the project folder so that it can be viewed by everyone? ...

c#asp.netcss

CSS Begin the background repeat from a specific origin

I am trying to achieve a specific background effect starting from the line shown in the screenshot below: I attempted to implement it using the following CSS code: background : ('path/to/image') 0 650px repeat-y However, the light part of the ...

htmlcss

Any tips on customizing the appearance of HTML5 input element dropdown menus?

Is there a way to customize the appearance of the HTML5 email input element? Are there any CSS selectors that can be used for styling this particular form field? ...

htmlcss

"Refine Your Grid with a Pinterest-Inspired

I've set up a grid of images in columns similar to Pinterest that I would like to filter. The images vary in height but all have the same width. The issue arises when a taller image is followed by a shorter one, causing the short image to float right ...

javascriptjqueryhtmlcss

Unable to align a 1px element with the primary border

Can you please assist me? I would like to modify the CSS markup below in order to remove the 1 pixel added extra on the active clicked tab from my UL LI Tabbed Menu. How can this be achieved? Here is a picture of the issue: HTML Markup: <div class=" ...

htmlcss

Is it possible to show only a snippet of the title on the main blog page of WordPress

Seeking assistance in displaying a condensed version of a blog post's title on the blog's main page along with a thumbnail image. While I've come across several resources on showcasing post excerpts, I have yet to find information on trimmin ...

phphtmlcsswordpress