Align columns responsively with Bootstrap and center overlay image

Experiencing issues with aligning responsive divs using Bootstrap. Here is the code in question:

<div class="container-fluid">
    <div class="row">
        <div class="col-xl-5">
            <img src="/images/big_img.jpg}"/>
        </div>
        <div class="col-xl-2 vs">
            <img src="/images/small_img.jpg}"/>
        </div>
        <div class="col-xl-5">
            <img src="/images/big_img.jpg}"/>
        </div>

    </div>
</div>

The CSS applied to this code is as follows:

.row {
    text-align: center;
}
.col-xl-5 {
    display:inline-block;
}

.col-xl-2 {
    display:inline-block;
}

.vs img {
    display: block;
    height: auto;
    width: 100%;
}

When viewed on full screen, the layout appears like this:

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

However, when viewed on a smaller screen, it looks like this:

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

I would like the layout to be like this on full screen:

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

And on small resolutions, I expect it to look like this:

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

Answer №1

Experimenting with the flexible margin utilities like mx-xl-n5, mx-0, my-xl-0, my-n5, and more can produce a unique overlay effect at the center.

<div class="container-fluid">
    <div class="row align-items-center no-gutters">
        <div class="col-xl text-center text-xl-right my-2">
            <img src="//placehold.it/300"/>
        </div>
        <div class="col-xl-auto text-center mx-xl-n5 px-1 mx-0 my-xl-0 my-n5 vs">
            <img src="//placehold.it/100/22cc22"/>
        </div>
        <div class="col-xl text-center text-xl-left my-2">
            <img src="//placehold.it/300"/>
        </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

When the overflow is set to visible, the background color vanishes

Here is the CSS code I have written; #container { width: 1300px; background-color:green; margin:0 auto; overflow:hidden; } #menu { float:left; width:20%; background-color: yellow; } Even after extensive searching on Google, I ...

Is there a bug causing the Admin LTE content height issue? Looking for solutions to fix it

What's the reason behind the oversized footer? The footer appears normal when I resize or zoom the page, why is that? How can this be resolved? ...

CSS3 List Style Floating Challenge

I have encountered a seemingly simple question, but I am struggling to find a solution. In my HTML code, I have two ul elements. Each li within these lists is styled with float:left in my CSS. The reason behind this styling choice is that I am working on ...

Issue with toggleClass functionality (potential coding glitch)

I am attempting to display my div once the button is clicked. Below is the code snippet: <div class="post-menu"> <button class="button"> <i class="uil uil-ellipsis-h"></i> </button> ...

Steps to create a fixed pattern background image with a customizable background color based on the content within a div element

I am seeking guidance on how to create a single page application using Angular that features a fixed background image (such as a white pattern) in the BODY tag. However, I would like the ability to change the color behind this image depending on the conten ...

Customizing a unique dropdown navigation experience

I have very limited experience with using jQuery and CSS. I recently came across the DropIt jQuery plugin files (accessible at ) and decided to integrate it into my Ruby on Rails project. Unfortunately, I am struggling with implementing the "Hover Me" exa ...

Collapse the accordion by sliding it back to the top position

I have successfully implemented the Flexible Slide-to-top Accordion on my webpage. Initially, I struggled with the functionality to have only one accordion open at a time due to my limited knowledge of jQuery. However, after overcoming this challenge, I n ...

The Opera browser displays a horizontal orientation for vertical menus

Having some trouble with my vertical menu rendering correctly in different browsers. It's appearing horizontal in Opera, but looks good in Firefox and Chrome. I'm pretty sure it's just a small tweak needed in the code, but I can't quite ...

Expanding on the specific properties of a parent component to its child, using SASS's extend feature

Can selected or specific properties be shared/extended from the parent to the child without the need to create a variable? .main-container { padding: 20px; margin: 20px; ul { padding:$parentPadding(); margin: 0; } ...

Is it possible to align the second "navbar" div inline with the first "navbar" div?

I am struggling to align the div "nav2" on the same line as "nav1", but it just won't move up. I've tried using float, but it's not working. * { padding: 0; margin: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; } #navb ...

Resizing the Vue page to fit the viewport and using Flexbox to anchor the footer to the bottom

My Vue.js page structure consists of a navigation bar, main body content, and a footer: <template> <div class="flex_container"> <div class="container_navigation"> <nav-bar /> </div> < ...

What is the best way to navigate around and close this modal?

Hey everyone, I've been experimenting with the JavaScript on this codepen and I'm trying to make it so that when you click the background, the modal closes. However, I've run into two issues: The .modal is contained within .modal-backgroun ...

Trouble Arising from the Lack of Coordination Between CSS Transition and JavaScript Update Triggered by Element

I'm currently working on a web development project that involves a list of clickable elements. When one of these elements is clicked, it should become active and trigger a CSS transition (such as a transform) with a duration of 200ms. Additionally, I ...

Various colored backgrounds in a random arrangement on a grid post layout

I'm looking to implement this plugin for displaying blog posts, but instead of using an image as the background, my client wants different colored images. I have managed to figure out the code to achieve this based on a post I found here, but unfortun ...

Adjust the size of fonts for elements that are added dynamically

My goal is to dynamically add elements with decreasing font sizes to a fixed-width/height container until they no longer fit. I've managed to scale the font based on the browser window size, but that's not the intended solution. Is it possible t ...

The parent is relatively positioned and its child is absolutely positioned and floated to the left

I'm currently working on a design where I have a group of parent containers with the float left property applied. Inside each parent container, there is a child div with position absolute defined within them. Here's an example: <div class="wr ...

What is the best way to center align an element while having another element situated directly below it?

I want to create a grid of "clock" elements, with five clocks in each row. Below each clock, I'd like to display the DAY and DATE centered with the clock (day on top line, date below). Since I'm new to html/css, I appreciate your patience. Here&a ...

Is there a way I can add opacity to a div without impacting the other elements contained in it?

When I set the opacity of a div, it seems to affect all the other elements inside that div by making them transparent too. However, I am looking for a solution where the child elements do not inherit the opacity of their parent. Any assistance on this is ...

Dynamic SVG positioning

Looking for a way to make this svg shape relative to its containing div? Fiddle: http://jsfiddle.net/8421w8hc/20/ <div> <svg viewBox="0 0 1000 2112" style="" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="ma" st ...

Exploring the process of setting a background image within a div tag

My goal was to design a clickable box that would redirect users to "#". I initially thought about using area maps within div or p tags, but unfortunately that wouldn't work. Does anyone have any suggestions for alternative solutions? ...