Creating two columns with the content in the left column aligned with the padding of the container and the second column extending the full width can easily be

My design features a left-side column aligned with container padding, while the right side column spans full width and touches the scroll. Check out the design below:

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

I'm looking to achieve this design using Bootstrap. I've attempted to do so with the following code:

<div class='container me-0'>
  <div class='row align-items-center'>
    <div class='col-md-5'>
      <h1>Application Development</h1>
      <p className='mb-0'>
        Craft innovative applications tailored to clients with latest programming techniques.
      </p>
    </div>
    <div class='col-md-7'>
      <img src='/assets/images/services1.png' alt='Contact' style="width: 100%"/>
    </div>
  </div>
</div>

Responsive is key for my project, which is why I am working with Bootstrap 5.

htmlcssbootstrap-5

Answer №1

Here's a solution for your design challenge: ensuring full responsiveness while preventing text from overlapping images.

Good luck with implementing this approach!

.invisible-image {
  /** Hides the image to prevent overlap */
   visibility: hidden !important;
}

.section-container {
  position: relative;
}

.container {
  /** Positions the text over the image */
  position: relative;
  z-index: 2;
}

.image-right-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.image-right {
  max-width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4868b8b909790968594a4d1cad7cad4c98588948c85d7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="section-container">
<div class="container d-flex justify-content-between align-items-center">
    <div class="col-6">
        <h1>Application Development</h1>
        <p className="mb-0">
            Craft innovative applications tailored to clients with latest programming techniques.
        </p>
    </div>
    <div class="col-6">
      <img src="https://via.placeholder.com/300x300"
        alt="Contact" class="d-block invisible-image img-fluid" />
    </div>
</div>
  <div class="image-right-container d-flex align-items-center">
    <div class="d-flex justify-content-end w-100"><
       <div class="col-6 d-flex justify-content-end"><
         <img src="https://via.placeholder.com/300x300"
          alt="Contact" class="image-right d-block" />
       </div>
    </div>
  </div>
</div>

https://i.sstatic.net/3uFGv.png

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

https://i.sstatic.net/07sdg.png

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

Initiating a node request within an HTML document

I have recently started learning about node and have been practicing making http requests using the request module. In my current script, I am attempting to have a callback function execute a request that fetches HTML from a webpage and then filters it to ...

javascripthtmlnode.js

What are the steps to create a basic chrome extension that functions as a countdown clock?

I am a beginner in the world of coding and I am currently working on creating a chrome extension that serves as a timer. My goal is to include the timer within the HTML popup file, allowing users to customize the settings themselves. Do you have any advice ...

javascripthtmljsongoogle-chrome-extension

Creating a dynamic CSS hover animation for an input element with jQuery to ensure compatibility with Microsoft Edge

I am facing an issue where I have a row of six to nine switches with the <input type="checkbox"> element, and each switch animates when hovered over. In this animation, the knob slides down, and both the knob and track fill with colors or gradients. ...

jqueryhtmlcssmicrosoft-edgejquery-hover

Text will not be displayed when it is written on images

I'm currently facing a challenge with adding text onto two different images, one on the left and one on the right. I have included HTML and CSS code but it seems to be incorrect. Can someone please help me fix it? #container { width: 400px; hei ...

htmlcss

Issue with jquery_ujs: Font Awesome spinning icon animation functions properly in Chrome but not in Safari

I've integrated font-awesome-rails into my Rails project. When a user clicks the submit button on a form: The submit button should display an animated font-awesome spinner and change text to "Submitting...". The button must be disabled to prevent m ...

jquerycssruby-on-railsrubyfont-awesome

Stop an animation while it is in the hover state

Currently experimenting with CSS3 Animations to create a Panoramic view using only CSS and no JavaScript. I have managed to create a somewhat working demo: http://www.example.com/images/panoramic/ The concept is simple: when the user hovers over the blac ...

animationcss

Looping through two arrays simultaneously in Angular JS

Seeking help to display two arrays in a conversational manner using ng-repeat Let's say we have two arrays defined as follows: messages_send = ["hi","good, How about you?","cool","LOL","NFW"] messages_received = ["hey, How are you?","good, Thanks ...

htmlangularjsiteration

Error during compilation due to a missing parenthesis in the loop structure

I've been experimenting with creating a carousel using just html and css, without any Javascript. I've been exploring resources on the web and following tutorials to achieve this goal. However, I've encountered an issue. I created a mixin l ...

cssloopscompilationless

Styling with CSS based on the remaining width of the viewport relative to the height

If you're viewing this on a tablet browser, the dimensions are set relative to the viewport width and height. Let's assume a landscape orientation for simplicity. Inside a fullscreen container, there are two divs positioned absolutely, just like ...

htmlcsscss-positionviewport

Transform a Static Page into an Interactive Design

As a novice in web design, I have created a page using HTML and CSS. Now, I am looking to make my static page responsive, so that the styling remains consistent when the browser window is resized. Below are the dimensions of my body: body{ width:100%; ...

htmlcssresponsive

Can you explain the guidelines for overlapping CSS media queries?

When it comes to spacing out media queries accurately to prevent overlap, how should we approach it? Let's examine the following code as an example: @media (max-width: 20em) { /* styles for narrow viewport */ } @media (min-width: 20em) and (max ...

cssresponsive-designmedia-queries

Utilizing Bootstrap 4's nesting feature for optimal layout on an iPad in landscape

My nested content is functioning properly on all screen sizes except for ipad-landscape. Wouldn't it make more sense for the class triggered on ipad-landscape to be col-sm instead of col-lg? <div class="row"> <div class="col-lg-3 col-sm- ...

htmlcsstwitter-bootstrap-4

Set up two separate tables with sufficient space in between each other

Is there a way to align these two tables next to each other with some space between them? Currently, they appear one below the other. How can I make them sit beside each other with spacing in between? If anyone knows how to do this, please help me out. &l ...

htmlcsshtml-table

Rotating and scaling an image simultaneously using CSS3

I am feeling very puzzled. Why am I unable to simultaneously scale and rotate? Despite my attempts, it seems to be not working: .rotate-img{ -webkit-transform:scale(2,2); -webkit-transform:rotate(90deg); margin-left:20%; margin-top:10%; } ...

javascriptjquerycsscss-transforms

SimpleLightBox refuses to function

Having trouble getting SimpleLightBox to work properly? It seems like when you click on an image, it opens as a regular image on a blank page. I've added the JS and CSS files correctly (I double-checked in the source code) and included the HTML and JS ...

javascriptjqueryhtmlcssbootstrap-4

Discover the magic of gradients in tooltips with Bootstrap 5!

I recently encountered some challenges when attempting to apply a gradient color to bootstrap 5 tooltips CSS: .tooltip .tooltip-arrow::before { position: absolute; content: ""; border-color: transparent; border-style: solid; } .bs-toolt ...

htmlcsssasstooltipbootstrap-5

Showing one column fixed to the left and the other column scrollable to the right using CSS in Bootstrap 4

I have a bootstrap row with 2 cols inside. One col needs to be sticky on the left side, while the other col on the right side should contain multiple scrollable cards with text content. https://i.sstatic.net/ysYlP.png Looking at the image provided, the " ...

htmlcsstwitter-bootstrapbootstrap-4angular-material

How can you prevent PHP from continuing execution after receiving a false return value in Javascript?

I have implemented a JavaScript validator for phone numbers and it is functioning correctly. However, even after returning false, the PHP code continues to execute. How can I prevent this from happening? Below is my JavaScript function: function validate ...

javascriptphphtml

Modify an element upon clicking the mouse on an image

I am looking to dynamically change the paragraph element with className="details" to an editable input field when a user clicks on the image with className="edit-icon" within the same grid container. How can I achieve this functionality ...

javascripthtmlreactjsmaterial-ui

Display a particular frame upon the initial loading of a Lottie animation

I've successfully integrated a lottie animation into my code. On the initial load, I'd like to display a specific frame. When the user hovers over it, I want the animation to start from the beginning and play through in its entirety. Here's ...

htmljsonanimationlottiebodymovin