Image alignment

Currently, I am designing a website that requires an image to be centered in the left side of a div, aligned with the right div which has a background. I attempted a common solution, but unfortunately it is not functioning properly. The design must also be responsive, adding to my confusion. Please refer to the example in my fiddle for clarification.

<div class="container-fluid">
 <div class="row">
<div class="col-12 col-sm-6">
  <div class="leftSide">
    <img src="https://images.pexels.com/photos/3755760/pexels-photo-3755760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid imgLeft">
  </div>
</div>
<div class="col-12 col-sm-6">
  <div class="rightSide">
    <h3>
    Some text
    </h3>
    <p>
    Some more text 
    </p>
   <button type="button" class="btn btn-primary">Some text</button>
  </div>
</div>

https://jsfiddle.net/Onno0297/grvwxby2/1/

htmlcssimagebootstrap-4

Answer №1

After carefully reviewing your query, the code provided below should meet your requirements.

Feel free to take a look at the demo on this link!

.leftSide {
  height: 100%;
  display: flex;
  align-items: center;
}

.rightSide {
  background: #313131;
  height: 546px;
  color: #fff;
}

.rightSide h3 {
  text-align: center;
  padding-top: 200px;
}

.rightSide p {
  text-align: center;
}
.btn.btn-primary {
  margin: 0 auto;
  display: block;
}

.imgLeft {
  max-height: 400px;
  max-width: 300px;
  margin: 0 auto;
  width: 100%;
}
<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-6">
      <div class="leftSide">
        <img src="https://images.pexels.com/photos/3755760/pexels-photo-3755760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid imgLeft">
      </div>
    </div>
    <div class="col-12 col-sm-6">
      <div class="rightSide">
        <h3>
        Some text
        </h3>
        <p>
        Some more text 
        </p>
       <button type="button" class="btn btn-primary">Some text</button>
      </div>
    </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

Carousel Image Alignment Issue on iPhone SE Portrait Mode: All Images Centered Except One

Check out this website: It functions perfectly on Desktop browsers at all scales and works on Mobile devices in Landscape mode. However, I noticed that when using Portrait mode on my iPhone SE, the first image in the carousel appears off center in Chrome ...

jqueryhtmlcssiphonetwitter-bootstrap

Before the page finishes loading, execute onbeforeunload actions

I wonder if it's possible to implement this scenario: Can an onbeforeunload-like dialog be displayed while a web page is still loading, if a user tries to navigate to another page or close the browser? ...

phpjqueryhtmlajaxonbeforeunload

Strategies for adjusting text size to fit within a resizable div container

I'm facing an issue with a resizable div that has text inside. When I resize the div, the last line of the text goes beyond the boundaries of the div. How can I ensure that all the text fits within the resizable div while maintaining the appropriate f ...

jquerycssjquery-uiresizefont-size

What is the best method to update the content of a bootstrap-5 popover using only pure JavaScript?

Having trouble changing the content of a Bootstrap popover using vanilla JavaScript? The code seems to be updating, but the changes are not reflecting on the site. Any suggestions or alternative methods would be greatly appreciated! Maybe there's a di ...

javascripthtmlbootstrap-5popover

THREE.js: dual scenes sharing identical camera positions

I'm currently working on a project where I have two overlapping scenes. The top scene can be faded in and out using a slider, and users can rotate objects within the scene for a better view. My challenge is to keep the camera position consistent betw ...

javascripthtmlthree.js

Checkbox's checked attribute fails to toggle

Encountered a peculiar issue while trying to implement jQuery functionality triggered by a checkbox. The checkbox seems to be toggling the check mark visually on click, but the "checked" attribute remains unchanged. For a demo of the problem, check out: h ...

jqueryhtmlcheckboxchecked

Ways to retrieve various data elements from ajax using PHP

Can you help me with my AJAX code that retrieves data from a PHP script? I want to know how to set multiple echo variables in PHP and display them separately using AJAX without reloading the page. AJAX Code $(document).ready(function() { //el ...

phphtmlajaxoutput

What is the process for retrieving content from an HTML page and displaying it using Python?

I am looking to retrieve the current 'max' forecast value from the following page: and display that value using Python. Could someone guide me in accomplishing this task? (I am new to programming so apologize if this is a basic question!) Plea ...

pythonhtml

Using the .load() function to import an HTML file from the directory above

I am trying to achieve the following structure: folder1 index folder2 page to load Can I dynamically load the 'page to load' in a div within the 'index' page using DIV.load()? I have attempted various paths (../folder2/page, ./, ...

javascriptjqueryhtmlajax

Integrate bootstrap into an ASP.NET Core project using Visual Studio on a Mac operating system

Figuring out how to incorporate Bootstrap 4 into my asp.net core 2.2 project on my Mac operating system has been a challenge. Despite adding it through Nuget, I'm not seeing the desired results. Furthermore, missing options like "manage client-side l ...

bootstrap-4asp.net-core-mvcvisual-studio-mac

Adjusting the margin on an element causes a shift in the entire page's

Why is the margin of an h2 element on my page displacing the entire body downward? This seems abnormal since the h2 element is within a div container. Is there a way to address this issue? https://i.sstatic.net/E3CLW.png ...

htmlcss

Different methods for dynamically altering the style attribute

Here's some code I wrote: <html> <head> <style> .containerTitle { background-color:silver; text-align:center; font-family:'Segoe UI'; font-size:18px; font-weight:bold; height:30px; } ...

javascriptjqueryhtml

Is it possible to extract my current location from one website and then access another website based on that location?

I am currently experimenting with an HTML5 script that loads a globe requiring users to click on it to determine the location. Once a location is clicked, another site opens displaying a map of the chosen location. Here is an example of the site with the i ...

javascriptjqueryhtml

Having trouble getting the header div to span the entire screen

I'm currently working on a project where I have set the header div to 100% width and the main container to also be 100% width. However, I am facing an issue where the right and left sides of the header are not filling the entire space. I managed to fi ...

htmlcssheightwidth

having trouble with changing the button's background color via toggle

I've been experimenting with toggling the background color of a button, similar to how changing the margin works. For some reason, the margin toggles correctly but the button's color doesn't. <script> let myBtn = document.querySele ...

javascripthtmlcss

`The background video is not being displayed on the transparent PNG`

I have created a transparent PNG image featuring a theater setup and I am attempting to overlay a 1-second video as a background element, similar to a GIF. However, when I try to display the video, instead of seeing it, the background color appears. Additi ...

htmlcssvideoalpha

Is it possible to utilize window.location.replace function within an iframe?

Is it possible to use window.location.replace to bypass history and target on-page anchors without page reloads, but encounter issues when working within iframes? The main problem seems to be a CSP (content security policy) violation for script-src ' ...

javascripthtmliframebrowser-historycontent-security-policy

Is there a method to categorize distinct "continuing" numbered list items in order to show that they are interconnected?

There is HTML code that I am currently dealing with, and it looks like this: <ol> <li>...</li> </ol> ... content <ol start="2"> <li>...</li> </ol> ... more content <ol start="3"> <li&g ...

html

Picture failing to adjust to the designated width

I am struggling with an issue on my website where the images in a section are not scaling properly in two columns. Even though I have set the margins and widths in my media query for a viewport of 640px or less, the images do not adjust in size when draggi ...

imagecss

Issues with Vue-select dropdown functionality are causing inefficiencies

I am utilizing vue-select to generate a standard drop-down menu. However, it comes with a search bar by default that I do not need and prefer to keep it simple. I attempted to hide the search bar by using "display: none" which made it disappear. This is t ...

htmlvue.js