Utilizing Bootstrap 4 for a responsive layout: positioning a <div> element adjacent to a centered image

I am currently working on a project involving an image gallery. My goal is to showcase the images in a specific layout:

https://i.sstatic.net/cXcql.png

Essentially, the image should always be centered. If there is sufficient space to the right, I want to place a <div> that contains additional information next to the image. However, if the screen size decreases, the information box should shift below the image.

I came across a similar inquiry where the solution involved positioning the information box to the right of the image regardless of screen size. Here is the code snippet from that post: Link

How can I modify this approach so that the information box aligns below the image on smaller screens? I am utilizing Bootstrap 4 for this project.

Edit I attempted to implement Zim's solution, but encountered issues with vertical images: https://i.sstatic.net/CWfGM.png Ideally, I would like the metadata box to appear beside the image... Here is the HTML markup:

<div class="container-fluid">
<div class="row align-items-md-end">

    <div class="px-1 col-xl-6 offset-xl-3 text-center">
        <div class="photoboxTest">
             <div class="text-center">
                <img class="img-fluid" src="https://res.cloudinary.com/ddofbxz8d/image/upload/v1543814237/nwzv41b8gddr1uf873ki.jpg">
            </div>
            <div class="my-navigation d-flex justify-content-between">
                <a class="icon"><i class="fas fa-info-circle mx-2" style="color: transparent"></i></a>
                <div class="d-flex justify-content-center">
                    <a class="icon" href="#"><i class="fas fa-chevron-left"></i></a>
                    <a class="icon" href="/photos"><i class="fas fa-th mx-3"></i></a>
                    <a class="icon" href="#"><i class="fas fa-chevron-right"></i></a>
                </div>
                <a class="icon" href="#"><i class="fas fa-info-circle mx-2"></i></a>
            </div>
        </div>

    </div>
    <div class="px-1 col-xl-3">
        <div class="metabox ">
            <div class="my-title text-center">
                <h4>Metadata</h4>
            </div>
            <div class="my-metadata">
                <table style="width:100%">
                    <tr>
                        <td>Date</td>
                        <td>10.12.1992</td>
                    </tr>
                    <tr>
                        <td>Time</td>
                        <td>12:14</td>
                    </tr>
                    <tr>
                        <td>Location</td>
                        <td>This 1 nice location</td> 
                    </tr>
                    <tr>
                        <td>Focal length</td>
                        <td>80 mm</td>
                    </tr>
                    <tr>
                        <td>Aperture</td>
                        <td>f/10</td>
                    </tr>
                    <tr>
                        <td>Exposuse time</td>
                        <td>10 s</td>
                    </tr>
                    <tr>
                        <td>ISO</td>
                        <td>200</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

i don't need bootstrap. i guess that's what you're looking for.

body {
  padding:10px;
}

.flex {
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  margin:0 auto;
  justify-content:center;
}


.picture {
  margin-right:10px;
  align-content:center;
 
}
  
.text {
  max-width:calc((100% - 300px)/2);
  position:absolute;
  bottom:0;
  right:0;
}

.cont {
  position:relative;
}


@media screen and (max-width:600px) {
  .flex {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
  
  .picture {
    margin:0 auto;
  }
  
  .text {
    margin: 10px auto 0;  
    width:300px;
    top:310px;
    right:calc((100% - 300px)/2);
    transform:translateX(calc((100% - 300px)/2));
    max-width:300px;
  }
  
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="cont">
<div class="flex">
<div class="picture">
  <img src="https://picsum.photos/300/300" alt="">
</div>
</div>
<div class="text">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat veniam ipsum, placeat laboriosam dolor harum? Labore, sequi in. Modi aliquam, quae officiis quaerat mollitia magni incidunt nobis ipsa inventore autem.
</div>
</div>

Answer №2

With the designated title and tag of Bootstrap 4 for this question, the solution is straightforward without the need for additional CSS.

<div class="container">
    <div class="row justify-content-center align-items-center align-items-md-end text-center">
        <div class="col-md-3">
            <h2>Title</h2>
            <img src="//placehold.it/400x480" alt="" class="img-fluid">
        </div>
        <div class="col-md-3">
            Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. 
        </div>
    </div>
</div>

Take a look at the demo:

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

What are the best methods for utilizing scrollbars to navigate a virtual canvas?

I am interested in developing a unique jQuery plugin that can simulate a virtual HTML5 Canvas, where the canvas is not physically larger than its appearance on the page. However, the content intended for display on the canvas may be much larger and will ne ...

javascriptjqueryhtmlcanvas

Is it advisable to combine/minimize JS/CSS that have already been minimized? If the answer is yes, what is

Our app currently relies on multiple JS library dependencies that have already been minified. We are considering consolidating them into a single file to streamline the downloading process for the browser. After exploring options like Google Closure Compi ...

javascriptcssminifygoogle-closure-compileryui-compressor

How does Firefox still autocomplete even with a different input label?

How does Firefox decide where to autofill passwords and usernames? I've noticed that even after changing the name, id, title, or class of an input element, Firefox still automatically fills it with my password or email address. ...

htmlfirefoxautocomplete

<dt> and <dd> have not been added after the previous element

I can't seem to figure out why the dt and dd elements are not being added to the dl I created. Here's my initial attempt: // Dictionary list var words = [ { term: "Procrastination", definition: "Pathological tendency to s ...

javascripthtml

The camera continues to move smoothly after the static-body effect has been activated

I recently implemented A-Frame physics using this library, and encountered an issue where applying static-body to the a-mixin voxel in the Minecraft demo still allowed my character to move through the box. My camera is configured with universal-controls f ...

htmlaframe

Explore the hidden route of the input components

HTML: <div id="quiz"> <div id="question"> <p id="quiz-txt">What is your favorite color?</p> <ul id="quiz-opt"> <div id="ans"> <input type="checkbox" id="Red" value="Red" class="options"> ...

javascriptjqueryhtmlcheckbox

Keep label at the forefront once input field is completed

Is it possible to keep my label positioned on top of the input field even after filling in data? I attempted using the valid function in CSS, but did not achieve the desired functionality. .txt_field input { width: 100%; padding: 0 5px; height: 4 ...

htmlcss

Are you able to design a webpage with the following table layout:

Click here to see the design Assign a letter to each table cell and provide all dimensions in pixels. The assigned letters and dimensions should not be visible on the final web page. Make sure the external border of the table is 4 pixels wide, and interna ...

htmlhtml-tableweb-developer-toolbar

Separate the webpage into distinct sections for effective web design

I'm attempting to create a collapsible sidebar for mobile phones. However, after the first three images, the subsequent images on the next line appear below the sidebar instead of beside it. The top part looks fine, but as I scroll down to view the o ...

htmlcsstwitter-bootstrapbootstrap-5

Perform an AJAX request to an encrypted URL with an unverified certificate

I'm experiencing an issue with my site that makes AJAX JSONP calls to a secured (SSL) web server. Everything works smoothly when using an unsecured (HTTP) web server, but once I switch to the SSL version, the call never returns. After checking with Fi ...

javascriptjqueryhtmlsslhttps

Bootstrap 4's img-fluid class ensures images stretch to fit mobile resolutions

I have a challenge with making an image responsive to 100% width while still maintaining responsiveness overall. When I try using: <div class="container-fluid"> <div class="row"> <img src="images/centre-mob.jpg" alt="" class="i ...

bootstrap-4responsive

A step-by-step guide on how to display a specified amount of images in the center of

I'm currently working with a div that displays images dynamically loaded from a database, ranging from 1 to 5 images. The number of images may vary each time, and I need assistance in centering these images inside the div regardless of their quantity. ...

htmlasp.netcss

Are the navigation links at the bottom of the sidebar?

I've been experimenting with positioning three navigation links at the bottom of a sidebar I created, but I'm having trouble getting them there. Despite my attempts, I can't seem to figure out how to make it work. The background of the nav ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

JavaScript enables the deletion of a class

In HTML 2, I am able to show different statements based on the scenario. These statements are styled using the Bootstrap alert class. The goal is to ensure that when new data is sent, any old communication disappears without causing overload on the page. ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Developing a custom mixin to alert a banner at the top of the webpage

I currently have a feature on my website that triggers a pop-up notification whenever a message is received from another user. The pop-up consists of a div displaying the content of the message along with a close button. After exploring various methods to ...

htmlcsscss-transitions

Which tool is best for comparing and minimizing duplicated CSS style sheets?

In my current project, I am working with 2 CSS files. The first one serves as a "default" style sheet that is used in all websites created from the same templates. The second file contains the specific styles for our application. Both of these files are in ...

csscomparediff

What is the best way to keep fixed input at the bottom of the page?

Let me begin by stating that I struggled to come up with a more appropriate name for this question than the one above. My issue is not limited to a fixed input; it's much more complex. Let me delve into the details of my problem here. The Scenario I ...

htmlcsscss-position

Incorporating HTML 5 data attributes into the DOM using jQuery

I'm attempting to insert an HTML 5 data attribute into the DOM. According to the jQuery site, the format for data attributes is as follows: $('.pane-field-related-pages ul').data("role") === "listview"; However, it doesn't appear to b ...

jqueryhtmlcustom-data-attribute

H3 Tag Embraced by a Repetitive Image

As I'm developing a website, I've encountered an interesting challenge... I have an h3 tag that requires a repeating background on both sides. It's a bit difficult to describe, so I created this graphic to illustrate... Essentially, it&apo ...

htmlcss

Ways to establish communication between an iframe and its parent website

I have a website embedded in an iframe that is not on the same domain. Both websites belong to me, and I would like to establish communication between the iframe and the parent site. Is this achievable? ...

javascripthtmlajaxiframe