Combining two divs in Bootstrap to create a new layout

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

The image above represents my ideal design. The white space acts as a Bootstrap container, containing two divs with full width within that container. The specific widths, such as col-md-7 or col-md-5, are not important.

I have experimented with the following code:

<div class="container">

     <div class="row">
          <div class="col-md-6">
               <div class="FirstDIV">
                    abcd
                </div>
          </div>
          
          <div class="col-md-6 overlay-text">
              <img src="#" height="auto" class="w-100"/>
              <button>Abc</button>
          </div>

     </div>
</div>

.overlay-text {
  align-self: flex-start;
  padding:20px;
  margin-top: 5%;
}

.FirstDIV {
  background-color: #FDC9B3;
  transform: translateX(15%); 
  height: 200px;
}


.overlay-text {
  align-self: flex-start;
  padding:20px;
  margin-top: 5%;
}

.FirstDIV {
  background-color: #FDC9B3;
  transform: translateX(15%); 
  height: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>

<div class="container">

     <div class="row">
          <div class="col-md-6">
               <div class="FirstDIV">
                    abcd
                </div>
          </div>

          <div class="col-md-6 overlay-text">
              <img src="https://d1v3slut4s2mfy.cloudfront.net/4febbf2819ab561801f175b47cf75b3413985518/assets/images/quote-video-placeholder.jpg" height="auto" class="w-100"/>
              <button>Abc</button>
          </div>

     </div>
</div>

https://jsfiddle.net/n8cj4o3d/

The issue mostly lies in transform: translateX(15%);.

csstwitter-bootstrapbootstrap-4

Answer №1

To achieve the desired layout, apply position: relative to the main container element. Next, assign position: absolute to the individual child divs. By utilizing the top, left, right, bottom properties, you have the flexibility to precisely position each child div as needed.

Answer №2

Avoid placing both of them side by side on the same line.

<div class="overlay-text">
     <img src="#" height="auto" class="w-100"/>
     <button>Abc</button>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="FirstDIV">
             abcd
        </div>
    </div>
</div>


.overlay-text {
  position: absolute;
  padding:20px;
  right: 0;
  bottom: 0;
  top: 10%;
  width: 60%;
}

https://jsfiddle.net/41v5Lde8/

Answer №3

You could also achieve this by adding position: relative to the parent div 

.overlay-text {
  position: absolute;
  right: 0;
  transform: translate(50%, 20%);
  width: 500px;
  height: 500px;
  z-index: 9999;
}

.FirstDIV {
  position: relative;
  background-color: #FDC9B3;
  height: 500px;
  width: 500px;
}

img {
  object-fit: cover;
  background-color: #FDC9B3;
  height: 500px;
  width: 500px;
}
<div class="container">

  <div class="row">
    <div class="col-md-6">
      <div class="FirstDIV">
        abcd
        <div class="overlay-text">
          <img src="https://d1v3slut4s2mfy.cloudfront.net/4febbf2819ab561801f175b47cf75b3413985518/assets/images/quote-video-placeholder.jpg" height="auto" class="w-100" />
          <button>Abc</button>
        </div>
      </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

There seems to be a problem in Safari with the use of `:after` and `:before` when applying

I've been facing an issue with Safari not properly box-sizing after the "load" function. It functions perfectly on Chrome, Firefox, and IE, but not on Safari. You can view the specific page with the problem here: goo.gl/HKJy4g The problem lies with ...

htmlcsssafari

Curious about the level of responsiveness?

I have a project for my school where I need to create a website. I have completed most of it, but I am unsure how to make everything responsive as our teacher specified that we cannot use bootstrap. Unfortunately, I missed the only lesson about it. The ma ...

htmlcss

All elements on my webpage are enhanced with a CSS filter

I have a button centered on my page, but the CSS filter I applied to the HTML tag is also affecting the button. How can I prevent this from happening? HTML <body> <div class="button"> <a href="#">START EXPERIENCE</a> ...

htmlcss

Tips for incorporating transitions into CSS styling

After successfully adding a picture over an element when hovering over it, I decided to include a transition: 0.2s; property but unfortunately the transition effect is not working as expected. Why is this happening? My intention is for the picture to smoot ...

csscss-transitionstransition

Tips for concealing a div when clicking on an element solely with CSS

I am currently working on creating a CSS Main Menu in Vue. The functionality is such that it pops up when the mouse hovers over it, and hides when the mouse moves out. However, I am facing an issue with hiding the menu when clicking on a hyperlink a. Any s ...

cssvue.js

Introduction to Grid Layout Using Bootstrap - Rows

Encountering an issue with the vertical alignment of items in the code snippet below when using Bootstrap 4. Initially, the items are stacked vertically, but they align horizontally when either the "row" or "row align-items-start" classes are applied. &l ...

htmlcsstwitter-bootstrapbootstrap-4

Dynamically linking tabbable tabs is a useful technique that allows for

I have been working on an app that organizes websites into groups displayed as tabs in a tabbable navigator using Twitter Bootstrap. The idea is that each time a new group is added, a new tab should appear. Currently, this is how it looks: The functionali ...

javascripthtmlcsstwitter-bootstrapangularjs

What is the best way to switch back and forth between two div elements?

I've been attempting to switch between displaying div .cam1 and div .cam2, however, I can't seem to get it to work. Here's the code snippet in question: HTML: <div class="cam1"></div> <div class="cam2"></div> CS ...

javascriptjqueryhtmlcss

jQuery SlideOver - Arranging Divs in a horizontal layout

Currently, I am working on an application wizard that is designed to slide panels in order to display different sections of the resume application. You can view my site here: . The issue I am having is that when you click anywhere on the form, the panels a ...

jqueryhtmlcss

Click event on a Bootstrap select box with jQuery does not fire on iOS devices

I am facing an issue with my Bootstrap select box on iOS devices. The problem is that I have an option inside the select box triggering a jQuery action on click, but it doesn't work on iOS. Html: <div class="form-group"> <label for="sel ...

jqueryhtmliostwitter-bootstrapresponsive-design

Arrangement of HTML divs and styling classes

I have been experimenting with divs and classes in order to achieve proper alignment of text on my website. Currently, I am working with 2 classes that I would like to display side by side to create 2 columns. However, the right column containing the text ...

htmlcss

Use CodeMirror on an existing div element

My div named "content_editable" is the center of my code editing application. I need it to adhere to specific CSS dimensions, but I also want to integrate CodeMirror syntax highlighting into it. However, following the documentation's instructions does ...

javascriptjquerycsscontenteditablecodemirror

What can I do to remove the hidden <p> tags that Wordpress is inserting into my HTML code?

There seems to be some extra space appearing between my divs (inside a main div) that is possibly due to unexpected <p> and </p> tags being added by WordPress. This issue is quite common with WP, but the problematic tags are hidden so I am unab ...

htmlcsswordpress

What could be causing my navigation bar to malfunction?

Being fairly new to HTML and CSS, I have been struggling with my nav bar. Despite multiple attempts to fix it, the dropdown items do not appear when hovered over. Changing display: none; to display:block; only results in the items dropping down to the next ...

htmlcsshoveruinavigationbarnav

What is the best method for creating interactive carousel indicators that will seamlessly navigate to the corresponding carousel item when pressed?

Today I completed my first carousel and ran into an issue. The next and previous buttons are working fine, so I believe my scripts are in order. Thank you in advance for taking a look. Below is the code I used: <div id="myCarousel" class="description- ...

bootstrap-4

The columns in the table are hidden when resizing

There are three tables in my code. The first table does not have any margin set, while the next two tables have a margin-left property to slightly move them to the left side. However, when I resize the window, I'm unable to see the last column in the ...

htmlcsscss-float

How to Maintain Spacing Between Two Elements While Ensuring the Right Element Stays to the Right Even if the First One is Hidden in CSS

Presently, I have two icons being displayed with a space between them using the flex-box property justify-content and value space-between. The issue arises when only one icon is displayed, as I need the V-icon to always remain on the left and the urgent-ic ...

htmlcssangularflexbox

What steps should I take to ensure proper rendering of CSS in Django?

Hey there! I'm new to Django and I'm struggling to get my css to display properly. I'm trying to create a red notification, similar to Facebook, for my unread messages. But for some reason, my css isn't rendering. Can anyone point out w ...

cssdjango

Maximizing the Potential of Icons and Colors in the Native User Interface for WebApps

Recently, I've started working on a WebApp project with the goal of mimicking the functionality of a native application. To achieve this, I've decided to utilize the theme of the user interface (such as Unity [Ubuntu], Explorer [Windows], Gnome [ ...

htmlweb-applicationsuser-interfacecss

Can we guarantee that all buttons in a button group are identical?

How can I make sure that two radio buttons in a button group have the same width? <div class="d-flex btn-group" role="group" aria-label="Basic radio toggle button group"> <input type="radio" class=" ...

htmlcssbootstrap-5