Covering the heading of a collection of Bootstrap 4 card components

I currently have a bootstrap card group set up with a title that is contained within each individual card. However, I would like the title to span across the entire card group. Is there a way to achieve this?

        <div class="card-group">
            <div class="card border-right-0 border-top-0">
                <div class="card-header bg-white border-bottom-0 h5 font-weight-light">Project Status Overview</div>
                <div class="card-body">
                    <h1 class="card-text text-primary text-center">@ViewBag.ActiveProjects</h1>
                    <p class="card-title text-center font-weight-bold">Active Projects</p>
                </div>
            </div>
            <div class="card border-right-0 border-top-0">
                <div class="card-header bg-white border-bottom-0 h5 font-weight-light">&nbsp;</div>
                <div class="card-body">
                    <h1 class="card-text text-secondary text-center">@ViewBag.ArchivedProjects</h1>
                    <p class="card-title text-center font-weight-bold">Archived Projects</p>
                </div>
            </div>
            <div class="card border-right-0 border-top-0">
                <div class="card-header bg-white border-bottom-0 h5 font-weight-light">&nbsp;</div>
                <div class="card-body">
                    <h1 class="card-text text-warning text-center">3</h1>
                    <p class="card-title text-center font-weight-bold">Pending Dimensions</p>
                </div>
            </div>
            <div class="card border-top-0">
                <div class="card-header bg-white border-bottom-0 h5 font-weight-light">&nbsp;</div>
                <div class="card-body">
                    <h1 class="card-text text-success text-center">32</h1>
                    <p class="card-title text-center font-weight-bold">Estimates Available</p>
                </div>
            </div>
        </div>

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

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer №1

To address this issue, utilize the power of Flexbox. Enclose the .card-group division within a flexbox container and then relocate the title division outside of the .card-group section.

Here is an illustration:

<div class="d-flex flex-column">
  <div class="bg-white border-bottom-0 h5 font-weight-light">Title</div>
  <div class="card-group"><!-- insert cards --></div>
</div>

When employing display: flex; with .d-flex, the title division will align seamlessly with the .card-group section.

Resolution:

<div class="d-flex flex-column">
    <div class="bg-white border-bottom-0 h5 font-weight-light">Project Overview Status</div>
    <div class="card-group">
      <div class="card border-right-0 border-top-0">
        <div class="card-body">
          <h1 class="card-text text-primary text-center">23</h1>
          <p class="card-title text-center font-weight-bold">Active Projects</p>
        </div>
      </div>
      <div class="card border-right-0 border-top-0">
        <div class="card-body">
          <h1 class="card-text text-secondary text-center">5</h1>
          <p class="card-title text-center font-weight-bold">Archived Projects</p>
        </div>
      </div>
      <div class="card border-right-0 border-top-0">
        <div class="card-body">
          <h1 class="card-text text-warning text-center">3</h1>
          <p class="card-title text-center font-weight-bold">Pending Dimensions</p>
        </div>
      </div>
      <div class="card border-top-0">
        <div class="card-body">
          <h1 class="card-text text-success text-center">32</h1>
          <p class="card-title text-center font-weight-bold">Estimates Available</p>
        </div>
      </div>
    </div>
  </div>

For a demonstration on JSBin, click here: https://jsbin.com/xeyiroyasa/edit?html,output

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

Positioning Images with CSS Backgrounds

I am looking to create a fluid background that stretches widthwise, while adjusting its height based on the content. If the content is smaller, I want the background to be truncated. However, if there is a lot of information, I would like the background to ...

htmlcss

Tips for swapping out the content within a "li" element

I am dealing with a situation where I have approximately 100 pages, all containing an <ul> tag, but the issue is that I need to enclose each list item within a <span> tag. Below is the code snippet I have tried: <ul style="list-style-type: ...

htmljavascriptjquery

Tips for utilizing jQuery to identify an image that is being hovered on?

Concept My goal is to create an effect where a user hovers over an image and a transparent overlay div appears on top of it. This overlay div starts with a height of 0px and should increase to half of the image height upon hover. The hover functionality ...

javascriptjqueryhtmlcss

Why is the footer appearing in the sidebar section?

I have a question that I believe may be common and already answered, but I can't seem to find the solution. codepen Currently, I am working on creating a simple 2 column layout. While the columns are displaying correctly, the footer ends up in the s ...

htmlcss

Discover the steps to incorporate a glowing effect into your custom progress bar using JavaFX

After successfully creating a custom progress Bar in JavaFX, my next step is to incorporate a glow effect into the progressBar. To achieve this, I have constructed an ellipse with a Gaussian blur effect and integrated the centerX of the ellipse into a tim ...

javacssjavafxprogress-bar

Applying a CSS class to a jeditable input field

Is there a way to apply a simple class tag to a jeditable input field? The developer's instructions on their website () suggest using the following code snippet under "How to style elements?": $('.editable').editable('http://www.exampl ...

cssjeditable

Can you explain the distinctions among <Div>, <StyledDiv>, and <Box sx={...}> within the MUI framework?

When exploring the MUI documentation, I came across a table of benchmark cases that can be found here. However, the differences between the various cases are not clear to me. Can someone please explain these variances with real examples for the following: ...

javascriptcssreactjsmaterial-ui

Is it feasible to utilize Sublime Editor for building SCSS/SASS files? Learn how to compile SCSS/SASS with Sublime Editor

Despite numerous attempts, I have been unable to figure out how to effectively use the Sublime Editor for creating scss/sass files. ...

htmlcsssass

Activate a Tab using JavaScript in Vue.js

Hello there, currently working with Vue and Bootstrap-Vue. The scenario is as follows: I have designed a registration page with 2 tabs. The user needs to complete the first tab before moving on to the second one by clicking a button. The second tab initia ...

javascripthtmlvue.jsbootstrap-vue

Developing a form using jQuery/ajax

Is there a way to update the Contact Us form in Div without redirecting to another thank you page after submission? I want to replace the contact form in that Div with a "Thank You" message upon successful validation. Any suggestions or demo/download code ...

phpjqueryhtmlajax

Looking to create a div in HTML with two columns and two rows for display

Query: I am facing issues adjusting these grids using HTML and CSS. I have attempted to place them in a single frame within a separate div, but it's not working as expected. I need help aligning the grids according to the provided image below. Can som ...

htmlcssbootstrap-4

What is the best way to align my navigation links with my navbar?

In an effort to align my navigation links with the bottom of the navbar, I am working on positioning them below the navbar. Here is the desired layout: https://i.sstatic.net/eFL5r.png The goal is for the red section to start from the bottom of the navbar. ...

htmlcss

Utilizing jQuery to modify the text output from an input form

Check out the preview site at . It's a test version before launching on a separate domain. Hello, I need to customize the error response for a CRM contact form integrated into Wordpress with the help of StackOverflow. The form is connected via JavaSc ...

javascriptphpjqueryhtmlwordpress

Ways to showcase a textbox input in different DIVs multiple times

I am struggling to showcase the content of a textarea within multiple div elements when a user inputs text. The value only appears in the first div, but I want it to display in every div. Here is my HTML and jQuery code: <input type="textarea" id="my ...

jqueryhtml

Can a universal Save File As button be created for all web browsers?

Currently, I am in the process of developing a music player on the client side and I am seeking a method to save playlists that include mp3 data. Concerns with localStorage The restriction of a 5mb limit for localStorage makes it impractical for my needs. ...

javascripthtmlstoragepersistent

Shrink image sizes using PHP

Currently I am trying to find a way to decrease the sizes of images using PHP when the page loads. Despite obtaining the dimensions, I am uncertain about how to proceed with reducing their sizes in PHP. Below is my existing code: <?php $stmt = $db-> ...

phphtml

To add an image, simply click on the designated area instead of using the traditional file input button. The image will then be displayed in the specified image container and resized on the client-side

Objective: I am aiming to enhance the image upload functionality by enabling users to click on an <img> element to initiate the file selection process, instead of using the traditional <input type="file"> button. There will be three placeholde ...

jquerycssimage

Issue with enabling drag behavior for JQuery resizable DIVs function in Wordpress

I'm attempting to create a layout with two divs positioned side by side, featuring a draggable center slider that can expand or contract the widths of these adjacent divs. To accomplish this, I've integrated the jQuery Resizable plugin. Although ...

jquerycsswordpress

Checkbox click event not triggering properly

I am facing challenges in triggering an onclick event for the "Elevation" checkboxes located at the URL provided above. <input type="checkbox" value="A" id="elevation_A" onclick="changeElevation(this.value);" /> For some reason, the "changeElevati ...

javascriptjqueryhtml

What is the best way to shift <p> slightly to the left using css?

I've created an HTML file structured like this. <html> <head> </head> <body> <div class="final_time"> <p class="final_time_text">some text here</p> </div> </b ...

htmlcss