Maintaining the balance between image and text size with Bootstrap until the image seamlessly aligns on top of the text

On larger screens, I am trying to align text vertically next to an image. Below is the code and attached image for reference:

<div class="container-fluid">
<?php add_revslider('homepage'); ?>

<div id="front-page-1" class="row h-100">
<div class="col-lg-6">
<img src="https://via.placeholder.com/1500x1500?text=1500px+by+1500px" class="img-fluid" alt="temp" />
</div>
<div class="col-lg-6 my-auto">
<span>WHAT WE DO</span>
<h2>Defending Information Rights</h2>

<p>The BC Freedom of Information and Privacy Association (FIPA) is a non-partisan,
non-profit society that was established in 1991 to promote and defend freedom
of information and privacy rights in Canada. Our goal is to empower citizens by
increasing their access to information and their control over their own personal
information. We serve a wide variety of individuals and organizations through
programs of public education, public assistance, research, and law reform. We
are one of very few public interest groups in Canada devoted solely to the
advancement of freedom of information (FOI) and privacy rights.</p>

<p>We were the major force in getting BC’s Freedom of Information and Protection
of Privacy Act passed, and we are its main defender. This act has been called the
most progressive legislation of its kind in the world.</p>
<ul>
<li>We seek to empower citizens by increasing their right of access to
government-held information</li>
<li>We seek to empower citizens by promoting and defending the principle of
universal and affordable access to the basic information channels of our time</li>
<li>We seek to empower citizens by limiting the surveillance activities of the state,
and by increasing our right of access to our own personal information and our
ability to control the collection, use and sharing of our personal information,
wherever it is stored</li>
</ul>
</div>
</div>
</div> <!--end container-fluid-->

My objective is to maintain equal column heights until the screen width reaches 992px (Bootstrap breakpoint for large), at which point I want the image to stack on top of the text. How can I achieve this using Bootstrap 4? Also, as the screen size decreases, how can I reduce the text size to fit next to the image without affecting the layout?

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

Answer №1

By applying the h-100 class to all col elements, you can ensure that they will adhere to the height of the parent row element:

<main><div class="row">
  <div class="col-lg-6 h-100 border border-danger">
    <!-- content on the left -->
  </div>
  <div class="col-lg-6 h-100 border border-danger">
    <!-- content on the right -->
  </div>
</div></main>

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

Challenges experienced during the process of uploading a website to the server

I seem to have encountered an issue where the Navigation background image is missing after uploading my website onto the server. Surprisingly, everything else seems to be working perfectly. What could possibly be the cause of this discrepancy? navbar-de ...

Having an issue with HTML and JavaScript where the button won't open when pressed. Any help is appreciated

https://jsbin.com/haluhifuqe/edit?html,js,output I'm facing an issue with my HTML & JavaScript code - when I click the button, it doesn't open. Can anyone help me out? <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

Looking to adjust the background-image size of a table cell (td) upon clicking a specific

I have a website where I would like to display logos of different games with links attached to them. I have managed to adjust the size of the image on hover, but now I am looking for a way to keep the size bigger after clicking on the link. Is there a simp ...

Tips for addressing style issues within innerText

I am trying to use PrismJS to highlight HTML code, but the inner text function doesn't recognize line breaks (\n). <pre class="language-markup background-code"><code [innerText]="getHtmlCode()""></code> I have been working wi ...

Clear all CSS styles applied to a targeted division

My website built on Wordpress links to several CSS files. One specific div has its own unique style that is separate from the main Wordpress styles. Unfortunately, the Wordpress CSS ends up interfering with my custom div's layout. Is there a way in HT ...

Collapsed navbar icon unresponsive exclusively on extremely compact displays

I designed my own responsive navbar using Bootstrap 4, complete with the "hamburger" icon in the top right corner. It was inspired by one of the Bootstrap examples. However, I encountered an issue where the collapsing and clickable icon functionality worke ...

The ElementNotInteractableException error occurred because the element cannot be interacted with as it is currently not visible, therefore it cannot be manipulated using robot framework

I am encountering an issue with a dropdown menu. When running the script, I receive the error message "ElementNotInteractableException: Message: element not interactable: Element is not currently visible and may not be manipulated." Upon inspecting the HT ...

JQuery is displaying HTML code instead of the expected value

I'm currently facing a JQuery issue. When we input test% in the textfield and call a function upon clicking the save button, something unexpected happens. The form data is serialized and sent via AJAX to the server side, but it's being received a ...

Setting a pivot point for a nested SVG element: A step-by-step guide

Today, I decided to delve into the world of CSS Transforms. With a desire to explore, I set out to create a mobile button using SVG and various transforms. The challenge at hand is to rotate the mobile button by 90 degrees with a transform origin right at ...

The spacing between lines has no impact on the functionality of my app

In my rails app, I have a form structured like the following: <p class='field'> <div class = "form-group"> <div class = "col-sm-3 mobile-label" > <%= form.label :loyalty%> <%=image_tag "qun1.png ...

What is the correct way to apply a concatenated element id when using the .click() function in

Having an issue with assigning buttons to input boxes in a loop. When using concatenated element IDs with the .click() method, the buttons won't click for some reason. The following code works: document.getElementById("streamInput1") .addEventLi ...

Tips for transferring an array between pug mixins?

My pug template features an array that I want to transfer to a mixin in order to populate JSON schema.org markup. Below is the code: profile.pug include ../components/bio-seo - var person = {} - person.title = "Name, title of person" - person.url = "ht ...

Steps for creating a herringbone design on an HTML canvas

Seeking Help to Create Herringbone Pattern Filled with Images on Canvas I am a beginner in canvas 2d drawing and need assistance with drawing mixed tiles in a cross pattern (Herringbone). var canvas = this.__canvas = new fabric.Canvas('canvas' ...

Is it possible to create this layout using Bootstrap 5? I want to stack spans, with one inside the container and one outside

Trying to achieve a specific design using Bootstrap 5.3. https://i.sstatic.net/STifm.jpg This design should be placed over the showcase, with the following code for the showcase displayed below: <div class="showcase d-flex flex-column"&g ...

Navigating a roster of users in JavaScript

I'm dealing with a collection of user data stored in an array accountsade: [ { id: 0.4387810413935975, name: "Adrian", password: "345", userName: "nathanael" }, { id: 0. ...

EventSource using HTTP Authorization Header for Secure Server Sent Events

Trying to add an Authorization header to an HTML5 EventSource, but struggling due to lack of documentation with Server Sent Events. Currently considering passing authorization data in the URL, although not a preferred method. Utilizing AngularJS and inter ...

JavaScript: Retrieving the following element from the parent container

Is there a way to prevent the next element within the parent tag from being enabled or disabled based on a certain condition? HTML: <span> <input type="checkbox" onchange="toggleInput(this)"> </span> <input type="text" ...

Discovering if a div element has children using Selenium IDE

As I begin to automate testing for our website with Selenium IDE, I must admit that I am still learning the ins and outs of it. We utilize highcharts to exhibit data on our site. The challenge arises from the fact that there are 3 div elements handling th ...

Adjust the appearance of the scrollbar with custom CSS, but be aware that the typical methods may not be effective in

I am interested in customizing the appearance of scrollbars on my website. After coming across this tutorial on W3Schools titled W3S: How TO - Custom Scrollbar, I successfully applied the changes on Chrome, but unfortunately, it did not work on Firefox. H ...

Creating pages or tabs within a table using HTML5 and Angular is a simple and effective way to organize

I have a REST response that returns around 500 records. These records are being displayed in an Angular table. I would like to add customization options for the user, allowing them to choose to display 10/20/30... records per page. Additionally, I want to ...