Placement: fresh column in absolute position

Could someone please help me understand this situation? I have posted my code on jsfiddle. I am using Bootstrap 4. In my design, I have text placed over an image with the parent div having position:relative. The left div has position:absolute and left:2%, while the right div has position:absolute and right:2%. This setup works fine on larger screens, but it breaks on smaller or mobile screens, so I want to move it to a new column. You can see this behavior in the jsfiddle by resizing the screen. I have tried using Bootstrap classes like 

<div class="col-lg-6 col-md-6 col-sm-12">
.

<div class="col-md-12 col-sm-12 col-xs-12 nopadding" style="margin-bottom: 15px; position: relative;">
  <img src="assets/img/klupa_fontana.jpg" class="img-fluid">
  <div style="position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%);">
    <span style="color: #fff; font-size: 60px; line-height: 1.07143; font-weight:400;"> Lorem ipsum dolor</span><br><br>
  </div>
  <div class="col-md-6 col-sm-12 col-xs-12">
    <div style="position: absolute; top: 15%; left: 2%;">
      <span style="color: #fff; font-size: 50px; line-height: 1.07143; font-weight: 300;"> Lorem ipsum dolor.</span><br><br>
      <span style="color: #fff; font-size: 40px; line-height: 1.07143; font-weight: 300;"> Lorem ipsum dolor Lorem ipsum dolor<br> Lorem ipsum dolor Lorem ipsum dolor.</span>
    </div>
  </div>
  <div class="col-md-6 col-sm-12 col-xs-12">
    <div style="position: absolute; top: 15%; right: 2%; text-align: right">
      <span style="color: #fff; font-size: 50px; line-height: 1.07143; font-weight: 300;"> Lorem ipsum dolor Lorem ipsum dolor <br> fast and safe.</span><br><br>
      <span style="color: #fff; font-size: 40px; line-height: 1.07143; font-weight: 300;"> Lorem ipsum dolor Lorem ipsum dolor<br> Lorem ipsum dolor Lorem ipsum dolor<br> Lorem ipsum dolor Lorem ipsum dolor</span>
    </div>
  </div>
</div>

Thank you

htmlcsstwitter-bootstrap

Answer №1

Have you considered setting the image as a background image on the div and then utilizing col-6 for desktop and col-12 for mobile for both text sections?

<div style="background-image: url('image.jpg')" class="col-12">
  <p class="col-6-lg col-12-xs">Left text</p>
  <p class="col-6-lg col-12-xs">Right text</p>
</div>

Answer №2

In my region, Bootstrap v3 seems to be preferred over Bootstrap v4. For those looking for a solution with Bootstrap v4, here is a helpful snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container-fluid">
  <div class="row justify-content-between">
    <div class="col-lg-3" style="text-align: left; border: 1px solid #000000">
      One of two columns
    </div>
    <div class="col-lg-3" style="text-align: right; border: 1px solid #000000">
      One of two columns
    </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

Tips for rotating a responsive table on a mobile device's screen

I am currently managing a blogger website that features an HTML table on the homepage. I am struggling with making this table responsive for mobile devices, and I would like it to look similar to the image provided below. Can someone guide me on how to ach ...

htmlcssblogger

The styled horizontal list item has a background color that is not covering the entire

After setting up my CSS, I noticed a discrepancy in how the background color behaves when hovering over links in the navigation versus links in the footer. While the entire "button" area is filled with the background color in the nav, only the space behind ...

htmllistcoding-stylecss

javascript highchart image carousel

I am currently working on a visual chart project using the JavaScript library highchart. After setting up my chart with some dummy data, I am looking to incorporate functionality that allows for triggering an image slide based on the chart data. Specific ...

javascriptjqueryhtmlcsshighcharts

"Bootstrap is functioning properly on my local environment, but it seems to

Utilizing the MVC framework and bootstrap has been successful for optimizing my website locally. However, when I upload it to the server, none of the CSS is being rendered. Additionally, the front page, meant to be a carousel slider, appears as a vertical ...

javascriptjquerycssasp.net-mvctwitter-bootstrap

Switching from HTML to BBCode during the editing process

My issue lies in converting BBCode to HTML and then editing the code on a page with AJAX. When editing in a <textarea>, the HTML tags show up instead of the original BBCode. For instance, if I submit [b]bold text[/b] and save it to my database, the ...

javascriptphphtmlajax

What is the best way to ensure both landscape and portrait images are completely responsive and equal in height within a carousel?

I am currently working with a bootstrap carousel that contains both portrait and landscape images. On wide screens, the carousel height is automatically set to match the tallest image's height. However, this behavior results in white spaces on the top ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-carousel

Stop objects from shifting while easily applying a border

I have a code that adds a red border around elements when you mouseover them and removes it when you mouseout. However, the elements jump around when the border is added because it changes their dimensions. Is there a way to stop this jumping behavior? ...

javascripthtmlcss

Tips for displaying dynamic images using the combination of the base URL and file name in an *ngFor loop

I have a base URL which is http://www.example.com, and the file names are coming from an API stored in the dataSource array as shown below: [ { "bid": "2", "bnam": "ChickenChilli", "adds": "nsnnsnw, nnsnsnsn", "pdap": " ...

htmlangulartypescript

Using JavaScript to display a line using `document.write`

I'm having trouble displaying a line using the Document.Write function in JavaScript. When I submit the form, the line briefly appears and then disappears Any ideas on why this might be happening? <!DOCTYPE html> <html> <head& ...

javascripthtmlformsfunction

I am looking for two divs or table cells to float alongside each other, with one set to display:inline and the other expanding to fill the remaining space of the row

What I desire: My current accomplishment: I successfully floated both DIV tags side by side and also experimented with tables. My goal is to have the HR line fill the remaining horizontal space that the title does not occupy. However, I prefer not to us ...

htmlcss

Identifying collisions or contact between HTML elements with Angular 4

I've encountered an issue that I could use some help with. I am implementing CSS animations to move p elements horizontally inside a div at varying speeds. My goal is for them to change direction once they come into contact with each other. Any sugges ...

cssangulartypescriptanimation

FullCalendar fails to load in Bootstrap 4 tab

My current project involves utilizing Bootstrap 4 tabs, and I encountered an issue with displaying a FullCalendar on the second tab. Specifically, I am using version 5.2.0 of the FullCalendar library. While the calendar functions correctly when placed on t ...

javascripthtmlbootstrap-4

"(PHP)WordPress produces a dynamic menu that adapts to different screen sizes

I recently created a menu on my WordPress site [ and I'm facing an issue with making it display vertically in a responsive way. The code in header.php is as follows: <!-- header --> <header> <div class="overNavPanel"> ...

cssmenuwordpress

Choosing multiple images by clicking on their alternative text with jQuery

I am currently working on a project that involves clicking on a thumbnail to enlarge the image and display its name (alt) below it. I have made progress, but there seems to be an issue where only one image is displayed no matter which thumbnail I click on. ...

javascriptjqueryhtml

Display an image with HTML

My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across a similar example. .zoomin img { height: 200px; wi ...

javascriptjquerycsshtml

Lining Up Radio Buttons Horizontally Using CSS: Alignment Issues in Mozilla and Chrome

I have recently started learning CSS and am facing an issue with the alignment of radio buttons. They do not align properly in Chrome and Firefox, although they display correctly in Explorer. Any assistance on this matter would be greatly appreciated. Th ...

javascripthtmlcss

Attempting to imitate the hover effect of a scroll-down button

Looking for advice on creating a scroll down button with a hovering effect similar to the one found on this website - . Any tips or suggestions would be greatly appreciated. ...

jquerycss

How can a full-screen background image be created in Next.js?

To achieve a full height display in both the html and body tags, how can we do this within a next.js component? Check out [1]: https://i.stack.imgur.com/K1r9l.png [2] Visit: https://www.w3schools.com/howto/howto_css_full_page.asp "mainImage.jsx" import ...

htmlcssreactjsnext.js

How come the "colspan" attribute is not functioning properly in my table?

Check out the simple table form I created on jsfiddle. Here is the code snippet: <table> <tr> <td class="field_label">name</td> <td>*</td> <td> <input type="text"> ...

javascriptjqueryhtml

Wrapping a series of grids within a parent container to manage height effectively with grid960

Testing on the following browsers: Internet Explorer, Chrome, Firefox; Check out this example of an ideal layout in a PDF: Here is the link to the direct page: While Grid systems work well for width layout, I struggle with setting height constants. In ...

htmlcsslayout