Strategically stacking two Bootstrap columns for perfect alignment

I'm currently having trouble with aligning Bootstrap columns. Can someone assist me, please?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <p style="background-color: #C3C3C3">
                DIV 1 - content should be on the left.<br />
                This content is higher than the right (DIV 2) content.
            </p>
        </div>
        <div class="col-md-8">
            <p style="background-color: #D1D1D1">
                DIV 2 - content should be on the right.
            </p>
        </div>
        <div class="col-md-8">
            <p style="background-color: #F1F1F1">
                DIV 3 - Content should be on the desktop right. And mobile below both DIVs.
            </p>
        </div>
    </div>
</div>

The desired outcome should resemble this:

Mobile View Image Desktop View Image

htmlcssbootstrap-4

Answer №1

Your layout consists of a row with 20 columns (4 + 8 + 8), which doesn't align well with Bootstrap's 12 column model.

To position the third column below the first two, you should insert a new row using 

<div class="row"></div>
.

Arranging content so that div1 is above div2 may be tricky in your current setup. div1, div2, and div3 are all aligned at the top of the row. One solution could be to add some styling, such as margin-top, to div2.

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

Ways to extract image URLs from HTML and use them in Java

Hi there, I am trying to retrieve the URLs for images on Bing. For example, this link returns cat images. How can I specifically obtain the .png URLs? ...

androidhtml

What could be the reason for an ASP.NET Core application not loading within an iframe on the same domain?

I am facing an issue with my ASP.NET Core MVC website, which is embedded as the src of an IFRAME within a portal. Both the portal and the .NETCore application share the same domain (e.g., site.portal.domain / portal.domain). Upon entering the portal, I en ...

htmlasp.net-mvcasp.net-coreiframe

I find it confusing how certain styles are applied, while others are not

Working on my portfolio website and almost done, but running into issues with Tailwind CSS. Applied styling works mostly, but some disappear at certain breakpoints without explanation. It's mainly affecting overflow effects, hover states, and list sty ...

cssreactjstypescriptnext.jstailwind-css

The hidden DIV containing an ASP.NET CheckBox consistently yields a value of false

I have a group of form elements located within a hidden div which looks like this: <div id="jDivUpdateFolder" style="display:none;"> <asp:TextBox ID="txtEditFolderName" runat="server"></asp:TextBox><br /> <asp:TextBox ID ...

javascriptasp.netcssvb.netwebforms

Javascript does not have the capability to interact directly with HTML code

I am facing an issue with my JSP code that is supposed to validate password and confirm password before submitting the form to a Java servlet. The problem is, even though I have written the validation script, it does not show alert messages or focus on t ...

javascriptjavahtmljsp

jQuery: Managing and modifying values for dynamically generated input elements

Hello, I am currently working with the latest version of jQuery and have a table set up where clicking on the "Add" button appends a row of inputs. My goal is to calculate the total price for each particular product based on keyup events (i.e., qty * price ...

javascriptphphtmljqueryajax

retrieve the value of an HTML element once it has been modified

When I am working in a view, I encounter an issue where I need to retrieve the value of an HTML input box after it has been changed. Initially, the page loads with the following code: <input id="input_one" type="text" value = "apple" /> Upon loadin ...

javascriptjqueryhtml

Is it possible to simultaneously employ two asynchronous functions while handling two separate .json files?

Is it possible to work with 2 .json files simultaneously? My attempt did not succeed, so I am looking for an alternative method. If you have a suggestion or know the correct syntax to make this work, please share. And most importantly, does the second .j ...

javascripthtmlcssjsonrequest

Issue with Selenium WebDriver: Expectation failure while waiting for element visibility at specified location(..)

I'm facing a little issue with my automated test. Whenever the test encounters an error like this: Expected condition failed: waiting for visibility of element located by(...) I find it difficult to pinpoint the exact problem. @BeforeMethod pub ...

javacssseleniumselenium-webdriver

Utilizing Google Maps to generate outcomes for an online platform

My approach with Google Maps is a bit unconventional. Instead of rendering images, I aim to execute JavaScript code that processes data and returns a text response. However, I soon realized that running JavaScript as a remote web service might not be pos ...

phpjavascripthtmlweb-servicesgoogle-maps-api-3

Radio buttons in 'Block Style' functioning perfectly on all devices except for iPad

I am facing an issue with a group of radio buttons that I have styled to display as block elements, making them look like buttons while hiding the actual radio button itself. This setup works perfectly on Chrome and Firefox on desktops and Android tablets, ...

htmliosipadcss

Is it possible to adjust the default zoom level of my website by utilizing HTML or CSS?

After creating my website with a 50% zoom setting, I've encountered an issue where it appears too zoomed in for users whose browser default is set at 100%. How can I fix this problem? I attempted to use *{zoom:50%} in CSS to set the default zoom leve ...

htmlcss

Steps for splitting a numbered list and adding an image above each item:

I have a challenge I'm trying to tackle with my list: My goal is to create a long, numbered list that is divided into different sections I also want to include an image within each list item and have it display above the numbered title of the sectio ...

htmlcss

Separate the selected option in the TEXTAREA by commas to make it easier to

Can you assist me with integrating this example? I have the following elements: When adding a textarea, I require an option to be selected and separated by a comma. For instance: Here I will select an option: Subsequently, this chosen option must be ad ...

javascriptjqueryhtmlselecttextarea

Transforming functions with dependencies into asynchronous operations with the help of promises

Can I convert both of my functions into asynchronous functions, even though one function relies on the other? Is it feasible for function b to execute only after function a? ...

javascripthtml

I prefer the jumbotron to be uninterrupted by the navbar

I'm facing an issue where my jumbotron is ending up under the navbar, but I want to position it just below with some padding in between. Here's the code snippet: Take a look at the current appearance here: This is how it looks like ...

htmlcssnavbar

Submission handling with JQuery forms is not functioning

Currently troubleshooting my jQuery contact form submission handler. For some reason, the code isn't working as expected and I'm not sure where the issue lies. Upon form submission, there should be a success or error alert displayed, but nothing ...

htmljquery

Using the download attribute with anchor tags in React components

I utilize cloud storage to store my files, and during the upload process, they receive unique prefixes in their names. For instance, if I upload a file called test.txt, it will be saved as 7ea205f01ae5_test.txt. It's worth mentioning that I also captu ...

htmlreactjs

Incorporating .txt files into a static webpage using only HTML and JavaScript

Exploring the realm of web page creation for the first time has left me in need of some guidance. I have successfully added an upload feature for text files on my web page, but I am struggling to embed a text file directly into the page source. With Java s ...

javascripthtml

Content displayed above a slideshow of images in a stunning gallery on Squarespace platform

Currently working on a one-page landing page using Squarespace and running into some issues with creating a slideshow. You can check out my website here (the slideshow is located at the bottom of the page): Squarespace provides default options for text p ...

jquerycsspositionslideshowsquarespace