Utilize Bootstrap 4 to create a full screen desktop layout with columns that automatically adjust to

I am struggling to create a full-screen layout using Bootstrap 4, similar to the one shown in this image. I'm facing issues with the left and right columns not taking up the remaining space between the navigation and footer sections. Additionally, I need to align the content within these columns to the center. While I've tried giving fixed heights of (90vh) to these sections, it's resulting in a lot of workaround code for mobile and tablet devices. Is there a simple solution that I might be overlooking?

Any assistance would be greatly appreciated. Thank you!


    body {
        font-family: 'Montserrat', sans-serif;
        background-color: #fcfcfc;
    }

    .navbar-colored{
        background-color: rgba(255,255,255,0.9) !important; /*#94a7b7*/
        box-shadow: 1px 1px 10px rgba(0,0,0,0.15);
        opacity: 1;
        animation-name: fadeInOpacity;
        animation-iteration-count: 1;
        animation-timing-function: linear;
        animation-duration: 1.0s;
    }
    
    // CSS rules continue...
htmlcssflexboxbootstrap-4

Answer №1

Here is a simple explanation to help you with your column height issue in the code. It seems that your columns are too short, causing extra space even after adding the review bar underneath them.

To address this issue, I suggest using the calc() function in CSS. By subtracting the height of the review bar from 100vh or 100%, you can ensure proper display regardless of screen size. In my example below, I assume the review bar height is 50px.

This solution adapts to varying screen sizes. When testing the snippet in full-screen mode and resizing the window, you'll notice the top-content adjusts accordingly to maintain the desired layout.

Please try implementing this approach in your code and let me know if it resolves the problem. If not, feel free to reach out for further assistance. Welcome to Stack Overflow as a new user!

* {
 margin: 0;
 padding: 0;
}

.top-content {
  width: 100%;
  height: calc(100vh - 50px);
  background-color: blue;
}

.review-bar {
  width: 100%;
  height: 50px;
  background-color: green;
}
 <div class='top-content'>
   This content here would be your two columns
 </div>

 <div class='review-bar'>
   This, of course, would be your review bar
 </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 on linking a condition-reaction to document.querySelector

I am struggling to connect the condition-reactions to the input id of passid. I am unsure where to place the document.querySelector() method in order to link the indexed conditions correctly. Below is the code snippet: <!doctype html> <html> ...

javascripthtmlmethodsconditional-statements

Issues with Pagination in a Dynamic Grid System when using Bootstrap DataTables

I am trying to display a user list in a grid format. Below are my PHP codes: Here is a simple PHP array: <?php $aso_arr = array( "1"=>"1", "2"=>"2", "3"=>"3", "4"=>"4", "5"=>"5", "6"=>"6", "7"= ...

phpjquerydatatablebootstrap-4

What is the best way to eliminate HTML unicode content from the final item in a continuously changing list?

li:after{ content:"\00b6"; } <ol> <li>banana</li> <li>orange</li> <li class="last-class">apple</li> </ol> I am currently working on a dynamic list where the number of <li> tags varies over t ...

htmlcssunicode

Jquery double-click Event Not Functioning Properly

I've been attempting to toggle the visibility of my footer navbar while also changing the chevron icon. When the navbar is hidden, I want the chevron pointing up to be displayed, and when the navbar is shown, I want the chevron pointing down to be dis ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the process for adding the multiple attribute to a select dropdown in a form?

I implemented the selectric plugin for dropdowns on my website. I included the multiple attribute in the select tag, but it doesn't seem to be functioning properly based on what is shown on the index page of the selectric plugin located at: This is t ...

jqueryhtmljquery-selectric

Copying and pasting seems to be causing issues with the functionality of modals and collapsing on Bootstrap

I'm encountering an issue with Bootstrap. After copying and pasting a page that had a modal and a collapse feature, the functionality no longer works on the copied page. However, it works perfectly on the original page. Any idea why this might be happ ...

phphtmltwitter-bootstrapbootstrap-modal

utilizing the scss random feature to assign a randomly generated background hue

Despite reading numerous articles on this topic, I am struggling to implement a feature where a random color from a list is applied as the background image every time the page is refreshed. $red: #fc5545; $pink: #FCCCD1; $green: #005E61; $greenLight: #42B ...

csssass

Adjust image size dynamically while keeping the original aspect ratio

Is there a way to scale variable portrait and landscape images dynamically to fit proportionally within a browser window? You can find my current image resizing attempt here: http://jsfiddle.net/6pnCH/4/ I would like the image to be already scaled vertic ...

javascripthtmlcssimage

"Enhance Your Webpage with Textual Links that Display Background

A div with a background image is causing issues when links are placed on top of it. The links do not display the underline when hovering over them, unlike other links on the page. Below is the code snippet causing the problem: <div style="min-height:2 ...

htmlcsshyperlinkhover

utilizing a wildcard to aggregate various components

I am working with HTML and have multiple input elements. I want to create an XPath query using a wildcard character to replace the numeric value in a specific attribute in order to select all input elements. I tested //div/input[contains(@name, "name")] an ...

htmlselenium

Dynamically remove the underline tag from a table cell

Within my HTML, I've inserted the code below for a cell: cell.innerHTML = "<u>View All</u>"; In my onclick event for the cell, I have this code (for example, it's based on a condition where I structure the content as shown below, no ...

jqueryhtml

Determine the vertical dimension of an element through a JavaScript event listener

I've been working on creating an Apple-style image sequence scroller from a codepen demo. Here's the link to the original: https://codepen.io/jasprit-singh/pen/LYxzQjB My goal is to modify the JavaScript so that the scroll height is based on a p ...

javascripthtmlcss

What could be causing my DIV anchor link to appear larger than the image it is supposed to be

Recently, I have rearranged my delete and like buttons within a DIV tag. Interestingly, even though I have meticulously set the width and height of the div tags to match that of the image, they still appear below the "Like" button. Additionally, I've ...

htmlcss

Using Regular Expressions for Customized Formatting

I'm faced with a challenge involving a highly organized HTML string that contains numerous hyperlinks. I need to transform all of these links into bold text containing the word "XX1". Is there a way to accomplish this in PHP without relying on jQuery ...

phphtmlregex

Unable to identify the source of the additional white space appearing below the footer

Click here to access a page with two Google maps embedded. Upon scrolling to the bottom of the page, an unusual amount of whitespace is visible below the footer that is not seen on any other pages. The issue seems to be related to the presence of the two ...

css

What is the process for fetching a specific image from a database folder by referencing its name?

We have a collection of images stored in the uploads folder within the root directory. Our goal is to display a single image for each user profile. Each user's profile image file name is saved in the database table called user under the field profile ...

phphtmlmysql

What is the proper way to incorporate an HTML inline tag within a string?

I am trying to incorporate an svg icon that symbolizes the Enter key in my design: <kbd class="DocSearch-Commands-Key"> <svg width="15" height="15" aria-label="Enter key" role="img"> ...

html

Solving the Angular form glitch: error message not displaying

I am facing an issue with my simple form where I am not able to display errors related to the fields. <html lang="en" ng-app="MyApp"> <head></head> <body ng-controller="AppCtrl"> <form name="myForm" id="myForm"& ...

javascripthtmlangularjs

How to align a child element in the center when the parent is not centered or taking up the full width

I am currently working on building a layout with Bootstrap 4.6, and I am facing an issue with centering the header, columns/cards, and buttons on the page width while the parent container is left-aligned and not full width. Additionally, I need help with ...

htmlcssbootstrap-4

Conceal only the anchor tag's text and include a class during the media query

In the anchor tag below, I have a text that says "Add to cart," but on mobile view, I want to change it to display the shopping cart icon (fa fa-cart). <a class="product"><?php echo $button_add_to_cart ?></a> Currently, the variable $bu ...

javascriptphpjqueryhtmlcss