I've been struggling to implement the HTML5 structure within Bootstrap 4 grid system to match the design shown in the attached images. The layout should resemble the top image when viewed on a phone, phablet, or tablet in portrait mode, and the bottom image in landscape mode.
Images
View Image 1
View Image 2
<footer><!-- The code is too lengthy to post here, please refer to the jsfiddle link --></footer>
The footer provides a versatile space where you can incorporate divs just as easily as anywhere else on your HTML page. Whether it's creating rows, implementing a columnar system, or even pushing the limits with numerous three-dimensional tables (although that may not be advisable), the possibilities within the footer are endless. Ultimately, the footer is nothing more than a div with a specific name.
I have successfully implemented the solution according to your requirements, you can view the jsfiddle here:
https://jsfiddle.net/o6uf9hq4/
<footer class="footer__wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-6">
<h5 class="footer__contact-us-header footer__text--underline">
CONTACT OUR <br>
EXCLUSIVE AGENTS AT
</h5>
<div class="footer__line footer__line--pl10"></div>
<h3 class="footer__contact-us-number">646-846-0954</h3>
</div>
<div class="footer__name-wrapper col-sm-6 col-md-2">
<h3 class="footer__name footer__text--underline">BRAD COHEN</h3>
<div class="footer__line"></div>
<p class="footer__name-title">
Senior Director<br>
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1e1f3c191f0e19081d1510521f1311">[email protected]</a>" class="footer__name-link">
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e2e3c0e5e3f2e5f4e1e9ecaee3efed">[email protected]</a>
</a>
</p>
</div>
<div class="footer__name-wrapper col-sm-6 col-md-2">
<h3 class="footer__name footer__text--underline">JACOB TZFANYA</h3>
<div class="footer__line"></div>
<p class="footer__name-title">Senior Director<br>
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d77695d787e6f78697c7471337e7270">[email protected]</a>" class="footer__name-link">
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="244e50644147564150454d480a474b49">[email protected]</a>
</a>
</p>
</div>
<div class="footer__name-wrapper col-sm-6 col-md-2">
<h3 class="footer__name footer__text--underline">JON KAMALI</h3>
<div class="footer__line"></div>
<p class="footer__name-title">Director<br>
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b61604b6e68796e7f6a626725686466">[email protected]</a>" class="footer__name-link">
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="234948634640514657424a4f0d404c4e">[email protected]</a>
</a>
</p>
</div>
</div>
<div class="row justify-content-end">
<div class="col-sm-6 col-md-3">
<div class="footer__sponsor-logo-wrapper">
<img class="footer__sponsor-logo" src="img/terreno-logo.png" alt="#">
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer__address-wrapper">
<img src="img/ec-logo-footer.svg" alt="" class="footer__logo">
<p class="footer__ec-contact">
355 Lexington Avenue,<br>
New York, NY 10017<br>
easternconsolidated.com<br>
T: 212.499.7700; <br>
F: 212.499.7718
</p>
</div>
</div>
</div>
</div>
</footer>
<html>
For additional assistance on utilizing the grid system effectively, refer to the information extracted from the Bootstrap documentation:
.container for a responsive pixel width or .container-fluid for full-width responsiveness across all viewport sizes.Encountering an issue on a current Firefox browser running on Win7 while utilizing SVG (although the details may not be directly related to the problem): ` <head> <!-- base href="http://127.0.0.1/package/index.php" /--> < ...
I am encountering an issue with a DataTable from datatables.net. Each row can be selected by clicking on a checkbox, which triggers a click event. In response to the event, I add or remove a CSS class to change the appearance of the selected rows. $(".cbD ...
Looking for help with creating an animation like the one shown here: Incorporating this into my current site at: dageniusmarketer.com/DigitalWonderland/ I want the window displaying text content to open and close as users navigate through the links, ess ...
Imagine a scenario where multiple boxes are stacked on top of each other: <div style="width: 100%; height: 100px; background-color: red"> stuff </div> By clicking or touching them, the background color can be easily changed using CSS (:hover, ...
After attempting to search on Google, I am struggling to find the right keywords. I'm trying to apply a pseudo-selector only to a specific class. In this scenario, if we remove the specified class, the last Hi should appear in blue. However, my expe ...
Is it possible to repeat a table multiple times with each set of three tables in the same line using AngularJS and Bootstrap? I am unsure how this can be achieved with ng-repeat. table 1 | table 2 | table 3 table 4 | table 5 | ... <div ng-repeat="zo ...
Upon the user's click on <a href="#slide-nav" class="slide-nav-trigger">, a full-page navigation smoothly slides into view. This animation is triggered by CSS and uses jQuery for event delegation. The Dilemma Instead of abruptly turning on and ...
After retrieving an array of items from the database, my list is constantly changing, causing the HTML display to update dynamically. However, I am struggling with highlighting only the selected item in the list, as the entire list gets highlighted upon se ...
I am looking to create a search box that pops up when a button is clicked and disappears when clicked outside. My approach involves using CSS to achieve this functionality. Here is the HTML structure I am working with: <div tabindex="0" class="search" ...
In my coding dilemma, the "outerDIV" contains an "innerDIV", with Chrome displaying the "innerDIV" at 491px while IE shows it as 425px (matching outerDIV). This discrepancy causes issues in viewing child elements within "innerDIV": Chrome shows the first t ...
If you want to understand better, it would be helpful if you could check out my website first at: The main part of the website is a stream from Own3D.tv displayed through an iframe (line 342). My objective is to have the ability to click on a specific str ...
Is there a way to change the color of a link to orange when it's hovered over? On mobile devices, the link should turn orange when touched and stay that way until the user clicks away. I'd like to manually trigger the mouseout event to remove th ...
When making an ajax call to "updateUser," the following code is executed: puts session[:user_id] user = User.find(params[:user_id]) if user session[:user_id] = user.id session[:user_name] = user.first_name + " " + user.last_name puts session[:user_i ...
I am working with an array object and need to dynamically create a table where each tablerow (tr) pulls values from the array object. After creating the table, I want to store it in a variable so that I can pass it to a rest call, triggering an email with ...
My issue involves the display of tab names in two lines within multiple tabs. You can view the demonstration here. I attempted to use the \n character while setting the tab name but it was not recognized. Any suggestions on how to achieve this? Here ...
Greetings, I am currently trying to locate a missing number within an xml file but seem to be encountering some challenges. Any suggestions or ideas would be greatly appreciated. Example The file contains an <a> tag with various ids such as page-1, ...
Seeking to showcase a vast array of data in HTML (over 10,000 columns with approximately 200-300 rows) to present a schedule. The information will be structured as movable blocks containing text and background colors. Is it feasible to exhibit such a mas ...
I am currently working on a layout that involves an inner div with a text div. My goal is to center the inner text div vertically and increase the size of the text div equally from both the top and bottom based on the content size. Below is the approach ...
I am working on creating an HTML table with numerous text input areas (textarea) that expand downwards when clicked. Currently, the textarea element expands properly but disrupts the layout of the table. My goal is to achieve a design like this Instead o ...
My current programming project involves using selenium webdriver with Twitter for fun, but I've run into a frustrating issue. The problem arises when I attempt to input text into the tweet box: https://i.stack.imgur.com/Zxwvg.png To activate the ele ...