Arrange two images next to each other using Bootstrap grid system

Struggling to replicate the design of this website: Fister.
But unfortunately, my images are not aligning properly.

<html>
  <head>
    <meta charset="utf-8">
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04666b6b70777076657444312a352a37">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="icon" href="124010.png">
    <title>FacebookMusic</title>
  </head>
  <body>
<div class="container">

  <div class="row">
 
    <div class="col">
      <img class="img-responsive" src="dF5SId3UHWd.svg">
    </div>

    <div class="col">
      <img class="img-responsive" src="bg.png">
    </div>
 
  </div>
</div>
  </body>
</html>

Displayed below is the current state of my image alignment:

I am seeking assistance on positioning the girl picture to the right side. Can anyone offer guidance? I am still a novice in web development.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Here is the CSS code you need to use:

img {
    max-width: 100%;
}


img{
  max-width:100%;
}
<html>
  <head>
    <meta charset="utf-8">
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c9c878087819283b3c6ddc2ddc0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="icon" href="124010.png">
    <title>FacebookMusic</title>
  </head>
  <body>
<div class="container">

  <div class="row">

    <div class="col">
      <img class="img-responsive" src="https://i.sstatic.net/M9OxW.png" alt="image1">
    </div>

    <div class="col">
      <img class="img-responsive" src="https://i.sstatic.net/LgiGe.png" alt="image2">
    </div>

  </div>
</div>
  </body>
</html>

Answer №2

Make sure to add the img-fluid class to your images so they align properly within the grid system. If you were previously using Bootstrap 3, the class might have been different.

https://getbootstrap.com/docs/4.5/content/images/#responsive-images

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20424f4f54535452415060140e160e10">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <img class="img-fluid" src="https://i.sstatic.net/M9OxW.png" alt="image1">
    </div>

    <div class="col">
      <img class="img-fluid" src="https://i.sstatic.net/LgiGe.png" alt="image2">
    </div>
  </div>
</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

Steps to customize the error icon in Material-UI Stepper

I am faced with the task of changing the error icon of a default MUI Stepper, which currently looks like this: https://i.stack.imgur.com/jZlOn.png However, I need it to display the following icon instead: https://i.stack.imgur.com/uTGSw.png Although I am ...

cssreactjsmaterial-uistepper

I've been attempting to access the Marketo API, but unfortunately, I haven't had any luck

I've been attempting to make a Marketo API call, but I keep encountering this issue: net::ERR_NAME_NOT_RESOLVED Here is the code snippet I'm using for the function: var marketoAPIcallURL = 'https://182-EMG-811.mktorest.com/rest/v1/ ...

jqueryhtmlajaxapimarketo

Insert a triangle shape at the bottom of the material design tab with the class mat-ink-bar

I'm trying to update the appearance of the mat-ink-bar in the Angular material tab. My goal is to achieve a design similar to this: Jsfiddle example The issue I'm facing is that the mat-ink-bar is already positioned as absolute, making it diffi ...

htmlcssangularangular-materialmat-tab

Displaying elements side by side on larger screens and centered on smaller screens

Is there a way to arrange elements next to each other on wider screens, aligning them left and right, while also centering one above the other on narrower screens? Preferably without using media queries: ...

cssbootstrap-4

What is causing images to stretch unnecessarily in Flexbox on IE11?

I am encountering a problem with flexbox on IE11, and despite being aware of the numerous known issues, I am unable to find a solution... <div class="latest-posts"> <article class="post-grid"> <img src="http://lorempixel.com/ima ...

htmlcssflexboxinternet-explorer-11

The elimination of margin-right is not taking place

On mobile devices, I am experiencing an unwanted margin-right on my page. Despite trying various solutions found in this discussion thread, including using body, html {margin:0;} and margin-right:-8px; with !important, the default margin persists. https:/ ...

jqueryhtmlcsstwitter-bootstrap-3

Retrieve the concealed division element's HTML content along with its formatting

Help needed with appending a hidden div with its styles intact. Despite using the code provided below, the appended div does not retain its styles. Any suggestions for an alternative method? var warningMessage = $('#warningDiv').html() fun ...

javascriptjqueryhtmlcss

Tips for uncovering a concealed div within an iframe?

It's as if there's a mystery surrounding how to reach this elusive div... div#someId iframe html>head>body div.wrapper div.footer Naturally, my strategy: #someId iframe body .footer is proving to be ineffective. ...

csscss-selectors

Setting the height of a Bootstrap radio button

My Bootstrap radio buttons are set to a width of 200px. However, when the text inside the button exceeds this width, it wraps onto two lines leading to changes in button height. How can I ensure that all other buttons displayed scale to the same height? h ...

cssradio-buttonbootstrap-5

The button contains a clickable link inside it, however the button itself is not clickable

I am encountering an issue with a button that contains a link. Whenever I hover over the button, the cursor changes as expected, but clicking on the button itself does not trigger any action. Instead, I have to click on the link inside the button to redi ...

htmlcss

Tips for avoiding flickering in safari during @-webkit-keyframe animations

At times, Safari may experience flickering during the execution of a CSS animation. Despite extensive research and attempts to find a solution, the issue persists. The HTML code snippet is as follows (refer to jsfiddle for more details) <div class="do ...

csscss-animationskeyframe

What could be causing the malfunction of this setTimeout function? Another related question to consider

I recently implemented a script on one of my pages, but I noticed that the setTimeout function doesn't seem to be triggering. Currently, it's just set up to display an alert as a test. I suspect that the issue might be related to a meta refresh t ...

javascripthtmlsettimeout

Incorporate dynamic body color changes across all pages using AngularJS

On the home page, I want to change the color scheme so that it is consistent across all pages. The user should be able to choose a color from a list on the home page and have it apply to every page. Currently, the color selection only applies to the home p ...

htmlcssangularjs

What is the best way to add a button over an image using Tailwind CSS in Next.js?

I've been trying to display a button on top of an image using Tailwind CSS and Next.js, but I'm having trouble getting it to align properly. Here is the code snippet I've been working with: <div> <Image src={projectAiWrite ...

htmlcssnext.jstailwind-css

Can I increase the top margin by more than mt-5?

Seeking help to align elements on my website. I've applied mt-5 in the HTML, yet require additional margin space. Any suggestions on how to achieve this? ...

htmlcssbootstrap-4margin

Is there a way to execute a code snippet just once when focusing on a specific field?

<form id="myForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="mname">Middle name:</label> ...

javascripthtmltypescript

Using Javascript or jQuery to Enhance the Appearance of Text on a Website

Is there a way to automatically apply styling to specific phrases on our website by searching for instances of those phrases? For example: <div> This is what you get from <span class="comp">Company Name</span>. We do all kin ...

javascriptjquerycss

What can be done to prevent parallel images from getting displaced while using CSS3 transformation effects?

Currently facing an issue where three separate images are being transformed using CSS3 upon hover. Various attempts have been made, including placing them in divs, a table, or just plain images. Trying to float them all in one direction, with #1 left, #3 ...

css

Using JavaScript to convert the text within a div into negative HTML code

I am working with this specific div: <div class="signs" id="signs" onclick="toggle()">&#43;</div> It currently displays the positive sign. I have set up a JavaScript function that is triggered when the div is ...

javascripthtmlcssfunctiontemplates

Are there any methods to create a profile page that adjusts to different screens, such as mobile and desktop, ensuring a seamless user

After successfully installing WordPress on my server, I am pleased with how it looks. However, I am now searching for a profile/front page design that will be responsive and visually appealing on all devices - from phones and tablets to desktops. Despite ...

phphtml