A pair of large screens side by side displaying centered text

Struggling with implementing Bootstrap 4 CSS, particularly in achieving uniform height and vertical alignment for two jumbotron elements in a row.

Here is the code snippet:

<div class="container">
     <div class="row">
          <div class="col-8">
              <div class="jumbotron greenback">
                   <h7>Welcome to the Project test Detail page</h7>
              </div>
          </div>
          <div class="col-4">
              <div class="jumbotron greenback">
                  <div class="inner-score">
                      <div class="score-title">
                          <h6>Team Score</h6>
                      </div>
                      <div class="score-value">
                           <h4>85</h4>
                      </div>    
                  </div>

              </div>

          </div>
      </div>      
</div>

To view the issue and see the current implementation, please refer to this JSFiddle link. The jumbotrons are vertically aligned but do not have equal heights across the row.

csstwitter-bootstrapbootstrap-4

Answer №1

Have you considered including height: 100% in the jumbotron elements?

.jumbotron.greenback {
  height: 100%;
}

By doing this, both elements will occupy the full height of the container (the .row in this scenario).

It's important to note that applying height: 100% might extend the bottom margin of the element beyond its container. To maintain cleanliness, adjust the jumbotron and its container's margin-bottom properties accordingly...

.container {
  margin-bottom: 32px /* Shifting the margin-bottom value of the 
  .jumbotron to its outer container. */
}

.jumbotron.greenback {
  height: 100%;
  margin-bottom: 0;
}

An alternative method using jQuery...

$(document).ready(function() {

  var jumboMaxHeight = 0

  $(".jumbotron").each(function(){
    if ($(this).height() > jumboMaxHeight) { 
      jumboMaxHeight = $(this).height() }
    })

  $(".jumbotron").height(jumboMaxHeight)

})

Edit: For centering the text elements within the .jumbotron, various approaches are possible, such as utilizing flexbox properties on the parent element (in combination with the jQuery solution)...

.jumbotron.greenback {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

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

"Engaging with the touchscreen inhibits the triggering of click

Within this div, I have implemented touch-action:pan-y;. Surrounding this div is an anchor tag. If you click on the div, the link will successfully redirect. However, if you swipe on the div and then click, the link won't work on the first attempt bu ...

javascriptcss

Prevent the insertion of HTML elements into the DIV using jQuery

Check out this code snippet: <div id="whatever"> /* Setting up a button to add HTML code in this div using jQuery */ /* Now looking to create another button that will prevent further additions to the div with the existing HTML intact */ </div> ...

javascriptjqueryhtmlcss

New navigation menu changes as user scrolls

I'm struggling to find a way to implement a different navigation menu that appears when the user scrolls down. I'm envisioning something similar to this example: My goal is to have #small-menu replace #big-menu once the user starts scrolling. C ...

javascriptjqueryhtmlcss

The fixed background attachment breaks when using translateX(0)

I'm facing an issue with a scrolling element that has a fixed background: .my-element { background: url(/foo.png) no-repeat right bottom; background-attachment: fixed; } Everything works perfectly, until I apply a translate transform (even a sl ...

cssbackground-attachment

Issue with Datepicker validation not functioning correctly following a BootStrap update

After submitting the form, the date-picker field correctly validates and highlights it as mandatory. However, even after selecting a date from the picker, the validation error does not disappear. The field continues to be highlighted in red, preventing the ...

javascriptjqueryhtmlbootstrap-4bootstrapvalidator

Execute function upon initial user interaction (click for desktop users / tap for mobile users) with the Document Object Model (DOM)

Looking to trigger a function only on the initial interaction with the DOM. Are there any vanilla JavaScript options available? I've brainstormed this approach. Is it on track? window.addEventListener("click", function onFirstTouch() { console.l ...

javascriptjqueryhtmlcss

Implement a cross-browser solution for setting the input width to adjust automatically based on the text content

Is there a way to create a text input box that automatically adjusts its width in all browsers, including IE6 and newer? In the example below, the textbox expands to fit the content "text." Are there any cross-browser solutions for this issue? See demo on ...

jqueryhtmlcss

The CSS star rating system is malfunctioning

I'm struggling to implement a rating star system in my project. I have experimented with various code snippets, but none seem to be functioning properly. Take a look at the outcome: https://i.sstatic.net/g3DvH.png ...

javascriptangularjstwitter-bootstrapcss

Firefox doesn't seem to support keyframes animation

I implemented keyframes to create a pulsating effect on text every 15 seconds. This effect works in Chrome but not in Firefox. I'm unsure how to introduce a 15-second delay between each pulse, so I experimented with using more percentages; however, I ...

csscss-transitionscss-animations

Creating a spinning Cube with separate fields for x, y, and z rotation speeds: a step-by-step guide

After dabbling in Java, Visual Basic, HTML, and CSS, I'm now looking to create an interface featuring a central spinning cube with 3 fields to control its x, y, and z rotation speeds. Can you suggest which language would be the best fit for this proje ...

javahtmlcssanimationrotation

Tips for fixing the position without affecting the width

I'm trying to figure out how to keep my #header fixed in position without it expanding in width. Despite checking my code multiple times, I can't seem to identify the factor causing my header to become wider and shift downwards unexpectedly. I in ...

htmlcss

Zebra lines overlooking unseen details

Imagine having a table where rows can be dynamically assigned classes such as .hidden, which hide those rows using CSS. The rows are styled with alternating colors, like this: tr:nth-child(even) { background-color: $light-grey; } But here's the ...

javascriptjquerycsscss-selectors

What is the best way to position the button in line with multiple dropdown menus that include labels?

My interface consists of 3 dropdowns and a submit button, each with a label. Initially, I struggled to align the button with the dropdowns themselves (not the labels), so I resorted to adding a placeholder label and matching its color with the background. ...

htmlcsstwitter-bootstrapbootstrap-4

Move a div element to the foreground while maintaining its fixed position

I had a situation where I used the fixed position for a div on a webpage to keep it stuck at the top like a header. However, when scrolling, it ended up getting hidden behind other elements such as divs, videos, and text! Here's how the div should al ...

javascriptjqueryhtmlcss

Tips for customizing the appearance of an HTML dropdown menu

Here is the code snippet: <select name="xyz" id="abc"> <option value="x">10/Page</option> <option value="y">20/Page</option> <option value="z">30/Pa ...

htmlcss

Header with a dropdown select option

In the process of developing a monitoring system, I am in need of a feature that allows users to select varying numbers of days. Here is the desired style: Previous [Dropdown Selection] Days https://i.sstatic.net/ysk6X.png Ideally, I do not want any bor ...

htmlcss

Tips for preventing the impact of angular mat-panel position changes on matdialog

In my Angular project, I utilized Matmenu and MatDialogModule. I needed to change the position of mat-menu, so I achieved this by adding the following snippet to my .scss file. ::ng-deep .cdk-overlay-pane { transform: translate(78%, 10%); } However, ...

cssangularsassangular-material

CSS Background Image Properties

I'm struggling to display a background image on my HTML page. The image is saved in the same folder as the HTML file. <html> <head> <link rel="stylesheet" type="text/css" href="style/indexstyle.css" > <meta charset="ISO-8859-1"& ...

htmlcssbackground-image

Retrieving & Refreshing Data with ajax and Jquery

I have been working on developing a forum system using jQuery, PHP, Bootstrap, and other technologies. The forum allows users to post, delete, and edit their posts. I have implemented an edit button for the author of the post, which triggers a modal wind ...

javascriptphpjqueryajaxtwitter-bootstrap

Assistance needed with transitioning background images on hover effect

Looking for recommendations on a plugin that can switch background images when hovering over different buttons. I have three buttons, each with a corresponding image. When I hover over the buttons, I want the background image to change accordingly. I&apos ...

jquerycsshtmltwitter-bootstrap-3