Header with Bootstrap 4 cards layout

I need help creating a simple layout with 3 cards and a header. The 3 cards should be in one row, with the middle card being larger (both in height and width) and overlapping the header. By default, Bootstrap 4 creates all cards to be equal in size. Should I set properties for each card individually? Can someone assist me with this? Thank you.

Check out the plunker link for reference.


    <header role="banner" class="header-test">
      <h1>Test layout</h1>
    </header>

    <div class="row">
      <div class="col-3">
        <div class="card custom-card-style">
          <div class="card-block">
            <h4 class="card-title">Card title</h4>
            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card custom-center-card-style">
          <div class="card-block">
            <h4 class="card-title">Card title</h4>
            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
          </div>
        </div>
      </div>
      <div class="col-3">
        <div class="card custom-card-style">
          <div class="card-block">
            <h4 class="card-title">Card title</h4>
            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
          </div>
        </div>
      </div>
    </div>
htmltwitter-bootstrapcsstwitter-bootstrap-4

Answer №1

This particular function has proven to be highly effective.

$(window).on('load resize', function(){
     function adjustHeight(card) {
        var tallest = 0;
        card = $(card);
        card.css('height', 'auto');
        card.each(function() {       
            if($(this).height() > tallest) {
                tallest = $(this).height();
            }
        });
        card.height(tallest);
    }
     adjustHeight('.panel');
    });

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

The mysterious button that reveals its text only when graced by the presence of a

The text on the button (Remove in this case) will only show up when the mouse is hovered over it. This issue is occurring in an angular project and despite trying to apply CSS for .btn, it does not get overridden. background-color: blue; Button's ...

htmlcssangularbootstrap-5

Overlaying content in a strategic and effective manner is key to maximizing

<div id="container"> <div>HEADER</div> <div>CONTENT</div> <div>FOOTER</div> <div><textarea></textarea></div> </div> <button>activate overlay</button> #cont ...

javascriptjqueryhtmlcss

HTML sends a request prior to the loading of AngularJS

When including an HTTP request in the HTML, I encountered this issue: <img src="/api/profilepic/user/{{user.id}}"> The actual request URL is: Request URL:https://example.com/api/profilepic/user/%7B%7Buser.id%7D%7D As a result, the request keeps b ...

javascripthtmlangularjsdom

How to easily toggle multiple elements using jQuery

I'm having trouble getting this block of code to function properly: $("a.expand_all").on("click",function(){ $(this).text('Hide'); $('.answer').each(function () { $(this).slideDown(150, function () { $( ...

javascripthtmljquerytoggle

Tips for sending images as properties in an array of objects in React

I've been experimenting with various methods to display a background image underneath the "box" in styled components. How can I pass an image as a prop into the background image of the box with the image stored in the array of objects? I'm unsure ...

javascripthtmlcssreactjs

Alignment of inputs remains stubbornly off-center despite floating left

My main goal is to have all my inputs aligned to the left for a clean and organized look, similar to the image provided below: https://i.sstatic.net/5c0mX.png Despite my efforts to float the inputs and paragraphs to the left, I am facing an issue where t ...

htmlcss

What is the best way to automate the stylus pen for a static web page?

I am currently using Stylus to generate my CSS file. To take advantage of the CSS3 vendor prefix and other features, I have incorporated the nib package. My website is static and does not rely on Express or any server. Now, I need to automatically run the ...

jquerycssstylus

How can you update the options within a select tag depending on the selected index of another select tag using AngularJS?

Consider the following code snippet: $scope.letters = ['A', 'B', 'C', 'D']; $scope.numbers = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]]; $scope.selectedLetter = 0; There are two select tags in t ...

javascripthtmlangularjs

Tips for invoking a url with JavaScript and retrieving the response back to JavaScript

I am trying to make a URL call from JavaScript with a single parameter, and the URL should respond to that specific request. Here is an example of the response format: {"success":true, "result": {"token":"4fc5ef2bd77a3","serverTime":1338371883,"expireT ...

javascriptajaxhtml

Tips for extending hover duration in CSS

a:hover + #menu { display: block; position: fixed; } My CSS for a hover effect is causing the menu to disappear quickly once I move the mouse away. What steps can I take to fix this issue? Would utilizing JavaScript provide a better solution, and if so, ...

javascripthtmlcssmenuhover

How can I use CSS in Next.js to style a child element when its parent is being hovered over?

Here is the CSS code that specifically targets the child element "#overlay" when its parent, ".collection", is being hovered over: .collection { position: relative; overflow: hidden; } .collection:hover #overlay { position: absolute; opa ...

cssreactjsnext.js

Insert notes into the div employing only vanilla JavaScript

Is there a way to dynamically add comments to a div element using JavaScript or jQuery without reloading the page? Here is an example scenario: Suppose I have a form: <form action="#" id="create" method="post"> <fieldset> <legend ...

javascriptjqueryhtmlcss

Issues with WebDriverWait Syntax

Currently using OS X and Python version 3.5.1. I am curious about the correct way to use WebDriverWait to locate an xpath element and then click on it once the webpage has fully loaded. WebDriverWait(driver, 10000).until(EC.presence_of_element_located(dr ...

pythonhtmlseleniumxpath

How to horizontally center a div between two floated elements

Check out this JSFiddle example. I'm facing a challenge in horizontally centering the div class="filter-group" between two floated buttons within the given example. I've tried various methods but haven't been successful so far. Any assistan ...

htmlcsstwitter-bootstrap-3

Bootstrap 4.0. When it comes to buttons, they seem to have trouble cooperating with other DIV elements

Today is my first time seeking help on StackOverflow: I'm encountering an issue with my website where the floating arrow at the bottom of the page is obstructing my ability to click on buttons. Whether it's a Bootstrap button or HTML button, non ...

htmlcsstwitter-bootstrapbuttonbootstrap-4

Column-count can result in the flex div dividing the element into two parts

Whenever I utilize column-count with nested divs that have display: flex set, I encounter a problem where elements are cut in half. The suggestion from this answer is to use display: inline-block to prevent this issue. However, when I implement that soluti ...

htmlcssflexboxvuetify.jscolumn-count

Having trouble positioning grouped buttons in jQuery Mobile?

In the controlgroup container, I have included the data-type="horizontal" attribute. This container contains a select menu and a plus icon, giving the user the option to select an existing category or add a new one. I am looking to position the "+" icon in ...

jquerycssjquery-uijquery-mobile

Troubles with Angular2 template parser when parsing HTML fragment that is W3C validated

The online W3C validator successfully parses the following document: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>test</title> </head&g ...

htmlangulartypescriptangular2-routingangular2-template

Learn how to simulate the pressing of the enter key in AngularJS by clicking a button after entering text into a text box

I have a text box and button. Upon clicking the button, I am calling a function after entering some text in the text box. I also need to call the same function when the Enter key is pressed. Below is the code: HTML <script src="https://ajax.googleap ...

javascripthtmlangularjs

Tips for Creating a Fixed-Width Element

I am struggling with creating text wrapping around a box inside a full width page template on Wordpress. The plugin developer suggested wrapping the text inside a fixed width element, but I am unsure how to do this. Any assistance would be greatly apprecia ...

phpcsswordpressthemes