Guide to shifting an image to the right within a Bootstrap 4 card header

Question

Guide to shifting an image to the right within a Bootstrap 4 card header

When working on my website with Bootstrap, I ran into an issue with aligning a text to the left side of the header and an image to the right side. I attempted to use a row container along with justify-content-end, but they did not line up at the same height as the header. My goal is to have both elements aligned at the same height.

This is what I tried:

<div class="card" style="margin-bottom: 25px;">
  <div class="card-header">
  <h4 class="card-title Anton"><?php echo($thread['title']); ?>
    <span class="row justify-content-end">
        <img height="32" width="32" src="assets/img/edit.png" href="/test" style="padding: none; margin: none;">
    </span>
  </h4>

<hr />
...

However, the result looked like this: The Image is more on the bottom than the header!

html css bootstrap-4

Answer 1

Answer №1

I have replicated the scenario you described by utilizing Flex Box. I set up a container div with two child divs (left and right) both with a flex value of 1 to give them equal width. The image in the right div has justify-content: flex-end applied, which aligns it to the far right within the div.

HTML

<html>
  <body>
    <div class="header">
      <div class="title">
        <p>Text</p>
      </div>
      <div class="img">
        <img src="smiley.gif">
      </div>
    </div>
  </body>
</html>

CSS

.header {
  display: flex;
  width: 100%;
  height: 45px;
  background: red;
}

.title {
  flex: 1;
  background-color: green;
}

.img {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  background-color: yellow;
}

Here are some quick references:

justify-content: flex-start aligns content to the left
justify-content: center centers content horizontally
justify-content: flex-end pushes content to the right

You can view the implementation on this fiddle: http://jsfiddle.net/k5uj04dt/6/

Answer 2

I have replicated the scenario you described by utilizing Flex Box. I set up a container div with two child divs (left and right) both with a flex value of 1 to give them equal width. The image in the right div has justify-content: flex-end applied, which aligns it to the far right within the div.

HTML

<html>
  <body>
    <div class="header">
      <div class="title">
        <p>Text</p>
      </div>
      <div class="img">
        <img src="smiley.gif">
      </div>
    </div>
  </body>
</html>

CSS

.header {
  display: flex;
  width: 100%;
  height: 45px;
  background: red;
}

.title {
  flex: 1;
  background-color: green;
}

.img {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  background-color: yellow;
}

Here are some quick references:

justify-content: flex-start aligns content to the left
justify-content: center centers content horizontally
justify-content: flex-end pushes content to the right

You can view the implementation on this fiddle: http://jsfiddle.net/k5uj04dt/6/

Guide to shifting an image to the right within a Bootstrap 4 card header

Answer №1

Similar questions

Easily accessible button and span located on the right side

What is the best way to organize my defaultdict for optimal structure?

magnificPopup experiencing difficulties when attempting to invoke a class that is dynamically generated within the HTML document

Error displayed inline

Visuals Divide the Text

Is there a way to modify the margin of items in my table affected by the Angular Material ng-tns class without encountering a different variant of ng-tns when using CSS for the adjustment?

After implementing jQuery, media queries may not function as intended

Successfully bypassed Captcha by using inspect element

My HTML document is not displaying the JavaScript variable as expected

Is it possible to convert nested CSS into Material-UI's CSS in JS method?

When a media query is activated, the Flex item mysteriously vanishes from

Tips on aligning a button next to an image

What is the technique for causing this element to move in reverse?

The background color is failing to respond to the padding of the adjacent image

Submitting values in URI through an HTML form

jQuery wrapAll issue

The CSS of the Sendgrid template is being overlooked

Center text vertically within a div using CSS

Quickly Alter Background Image when Hovered Over

Update information on the page seamlessly with user-friendly URLs, no need for hashtags or question marks!