tips for arranging the body of a card deck

I have a card-deck setup that looks like this https://i.sstatic.net/vuzlX.png

I am trying to arrange these boxes in such a way that the total width of the box equals the sum of the Amazon Cost width and the BOXI+ width: https://i.sstatic.net/3uNbe.png Here is the code I am using:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex flex-column  justify-content-center align-items-center h-100">
    <div class="card-deck w-55">
        <div class="card text-center">
            <div class="card-header">
                <h5 >Amazon Costs</h5>
            </div>
            <div class="card-body">
                <h5 id="amc" class="card-title"></h5>
            </div>
        </div>
        <div class="card text-center">
            <div class="card-header">
                <h5 >BOXI+</h5>
            </div>
            <div class="card-body">
                <h5 id="boxiP" class="card-title"></h5>
            </div>
        </div>
    </div>
        <div class="card text-center">
            <div class="card-header">
                <h5 >Total</h5>
            </div>
            <div class="card-body">
                <h5 id="tt" class="card-title"></h5>
            </div>
        </div>
</div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Insert a full-width DIV (

<div class="w-100"></div>
) right before the final card...

  <div class="d-flex flex-column justify-content-center align-items-center h-100">
        <div class="card-deck">
            <div class="card text-center">
                <div class="card-header">
                    <h5>Amazon Costs</h5>
                </div>
                <div class="card-body">
                    <h5 id="amc" class="card-title"></h5>
                </div>
            </div>
            <div class="card text-center">
                <div class="card-header">
                    <h5>BOXI+</h5>
                </div>
                <div class="card-body">
                    <h5 id="boxiP" class="card-title"></h5>
                </div>
            </div>
            <div class="w-100"></div>
            <div class="card text-center">
                <div class="card-header">
                    <h5>Total</h5>
               </div>
               <div class="card-body">
                   <h5 id="tt" class="card-title"></h5>
               </div>
           </div>
       </div>
  </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

Using routerLink for linking to multiple components

Below is the anchor tag provided: <a class="uppercase" routerLink="settings/pressure" routerLinkActive="text-success" (click)="closeModal()" > <div class="pad-btm"> PRESSURE </div> </a> I need to include another route ...

htmlangulartypescriptroutesangular-routing

Creating a visually appealing chart similar to Excel can be achieved using JavaScript with a whopping 64382 lines of JSON data. No need for Chart.js or any additional tools - simply rely on JavaScript, HTML, and CSS to

I have a project that is due in just a few hours and I need to create a detailed chart using a large set of 64382 lines of JSON data. My knowledge of javascript is limited, so I am struggling to come up with ideas on how to approach this task. While I have ...

javascripthtmlcss

Error in Angular 2: The app.component.html file triggered an exception at line 1, character 108 due to excessive recursion

After successfully setting up the Angular 2 quickstart and connecting to an express server, I encountered a problem when switching from using the template property to component templateUrl. I have created a Plunker to showcase this issue: Plunker Demo imp ...

javascriptangularjshtmlrecursion

Stop the execution of javascript code based on the screen width

On my website, I have two menus located in different sections of the page. One menu is shown when the screen width is greater than 555px, while the other menu appears when the screen width is less than or equal to 555px. Although the menus are essentially ...

javascriptcss

Creating glitchy dotted lines in an HTML Canvas with the help of translate and scale techniques

I'm working on creating a canvas where users can draw symmetrical lines with their mouse. However, when I use the transform and scale attributes in the draw function to achieve this effect, it creates small gaps in the line and makes it look less smoo ...

javascripthtmlcanvas

CSS Trick: Applying first-of-type selector to specific instances of a div

I'm currently grappling with how to specify that a 'first-of-type' should only be present on specific instances of a div. For instance, suppose I have a class called ".maintext" and in some cases I want the first paragraph to feature a dropc ...

csscss-selectors

Two-toned diagonal design featuring a lone character

I'm searching for a unique design featuring the letter "d" in two colors, arranged diagonally without any gradient effects. Here is the CSS code I am currently using: .gradient_text_class { font-size: 72px; background-image: linear-gradient(50de ...

htmlcss

Is there a way to adjust the size of the canvas element in HTML without compromising quality or resorting to zooming?

I'm currently working on a basic modeling application for the web. The main component of my app is a canvas element that I'm trying to size correctly. However, when I set the height and width using CSS, it scales the entire canvas and compromises ...

javascripthtmljquerycsscanvas

Static Header - Halts Animation on Downward Scroll, Resumes when Scrolling Ceases

I've implemented a fixed menu on my website. Everything seems to be working fine, but here's the issue: When I scroll down and the fixed menu starts animating, if I continue scrolling quickly, the animation pauses. It only continues when I stop ...

javascriptjqueryhtmlcss

jquery script that retrieves the href attribute of the anchor tag located near the button that is currently being clicked

Hello there! I am trying to extract the href of a link when the button next to it is clicked by the user. However, the challenge is that there are multiple buttons and links on the page. For example, if the first button is clicked, I want to display "www. ...

javascriptjquerycss

Ways to invoke a function in HTML aside from using the (click)="function()" syntax

How can I display data from a GET request to the WordPress API as the page loads in an Ionic app using Angular? I am able to retrieve my desired post list, but only when I use a button click event to call the method in the HTML. Since this is my first att ...

htmlangulartypescriptionic-framework

Launch a PowerPoint presentation in a separate tab on your web browser

If you have a link that leads to a .pdf file, it will open in a new tab like this: <a target="_blank" href="http://somePDF.pdf">Download</a> But what about a Powerpoint file, such as a .ppt? Is there a way to make it open in a new browser tab ...

javascriptjqueryhtmlpowerpoint

What is the best way to implement validation in a textarea to restrict the word count to a minimum of 250 and a maximum

I want to implement jQuery validation for a textarea field, with a requirement of 250 minimum words and 1000 maximum words. Additionally, I need to display the word count in a span tag next to the text area. How can I ensure that this validation works even ...

javascriptjqueryhtmlvalidation

Ensure that the element is positioned above other elements, yet below the clickable area

Currently, I am working on developing a notification system that will display a small box in the top right corner of the screen. However, I am facing an issue where the area underneath the notification is not clickable. Is there a way to make this part o ...

htmlcss

Merge the values of two select tags into a single textbox

There are two select Tags along with a text box included. <select name="select1"> <option>1</option> <option>2</option> </select> <select name="select2"> <option>1</option> <option>2 ...

javascripthtml

Angular HTTP event progress causing Bootstrap progress bar to not update automatically

I've been working on displaying the progress of my post request using HTTP Event and a bootstrap progress bar. The progress event is functioning correctly (I can see it in the console), but for some reason, the changes are not reflected in the progres ...

angularbootstrap-4angular-httpclient

Incorporating HTML elements within VBScript within a single document

Here is a code snippet that mixes VBScript and HTML: IF (x.name="name") THEN n=x.value response.write("<tr>") response.write("<th>Name:</th>") response.write("<td><input name=""n2"" value=" & n & ">< ...

htmlvbscriptasp-classic

The expected response from CSS3 animated images may not be fully realized

I've been working on this project with 4 images. While hovering over one image causes the others to change size as intended, I can't figure out why the ones on the left are not following the same pattern even though I have specified that they sho ...

htmlcsshovertransformscale

The Boostrap background is failing to display as expected in CSS, and the `position: fixed` property is

I am struggling to add an extra class within the div class= "container-fluid" in order to set a background with a fixed position, but it doesn't seem to work. The only way I can add a background-image is directly in the HTML. Why is that? Another is ...

htmlcss

Incorporating a URL into an HTML marquee

As a beginner in coding, I'm currently exploring how to incorporate a link into my marquee. My goal is to eliminate any color change or underline animation as well. Do you have any recommendations? .Marquee { color: #da6fe2; background-color: t ...

htmlcss