What is the best way to make my Bootstrap card scale down exclusively?

I am currently working on a game using HTML and JS. The game involves collecting resources to unlock new "helpers" that appear in a div. Everything is functioning well, except that the alignment of the cards in the list is off. This is because the bootstrap card scales inconsistently, resulting in misaligned cards. How can I keep the cards aligned on the same x-axis?

The first image shows the alignment before the issue, while the second image displays the misaligned cards.

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

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

Below is the code snippet:

.buy-wisp-container {
  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top:10px
}

#buy-conjurer-container{

  display: none;
  width:100%;
  justify-content: space-between;
  align-items: center;
  margin-top:10px

}

#buy-excavator-container{

  display: none;
  width:100%;
  justify-content: space-between;
  align-items: center;
  margin-top:10px

}

#buy-sciencewisp-container{

  display: none;
  width:100%;
  justify-content: space-between;
  align-items: center;
  margin-top:10px

}

.left-side-div {
  flex: 1;
  text-align: left;
}

.right-side-div {
  flex: 1;
  text-align: right;
}


.container{

  height: 80vh;
  align-items: center;
  justify-content: center;
  display:flex;

}


#helpers-card{


  display:inline-block;
  min-height:138px;

}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e79289978995">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
    <div class="card text-center bg-dark text-light" style="width: 18rem;">
        <div class="card-body">
          <h3 class="card-title" id="item-name">Mana (<span id="total-mana-display" class="text-light-blue">0</span>)<span id="mana-increment-display"class="text-green" style="position: absolute; font-size: 1rem; display:none">+<span id="mana-increment-amount">1</span></span></h3>
          <p class="card-text" id="attributes-text">
  
          </p>
          <hr>
          <p class="card-text" id="req-text">
  
          </p>

          <button class="btn collect-btn" onclick="collectMana(player.mana.collectPower)">Collect</button>

        </div>

        
    </div>

    <div class="card text-center bg-dark text-light " id="helpers-card" style="width: 18rem;">
      
        <div class="card-body">
          <h3 class="card-title" id="item-name">Helpers</h3>
          <p class="card-text" id="attributes-text">
  
          </p>
          <hr>

          <div class="helper-container">

            <div class="buy-wisp-container" style="">
                <div class="left-side-div">
                    <p class="card-text font-weight-500" id="req-text">
                        Wisp (<span id="wisp-amount">0</span>)
                        
                    </p>
                </div>
    
                
                <div class="right-side-div" style="margin:0;float:right;width:50%">
                    
                    <button class="btn purchase-helper-btn font-weight-500" onclick="recruitHelper('wisp', 1)">Recruit (<span id="wisp-cost">5</span> mana)</button>
                </div>
            </div>
            
            <div id="buy-conjurer-container">
                <div class="left-side-div">
                    <p class="card-text font-weight-500" id="req-text">
                        Conjurer (<span id="conjurer-amount">0</span>)
                        
                    </p>
                </div>
    
                
                <div class="right-side-div" style="margin:0;float:right;width:50%">
                    
                    <button class="btn purchase-helper-btn font-weight-500" onclick="recruitHelper('conjurer', 1)">Recruit (<span id="conjurer-cost">15</span> mana)</button>
                </div>
            </div>

            <div id="buy-excavator-container" style="">
                <div class="left-side-div">
                    <p class="card-text font-weight-500" id="req-text">
                        Excavator (<span id="excavator-amount">0</span>)
                        
                    </p>
                </div>
    
                
                <div class="right-side-div" style="margin:0;float:right;width:50%">
                    
                    <button class="btn purchase-helper-btn font-weight-500" onclick="recruitHelper('excavator', 1)">Recruit (<span id="excavator-cost">10</span> mana)</button>
                </div>
            </div>

            <div id="buy-sciencewisp-container" style="">
                <div class="left-side-div">
                    <p class="card-text font-weight-500" id="req-text">
                        Science Wisp (<span id="excavator-amount">0</span>)
                        
                    </p>
                </div>
    
                
                <div class="right-side-div" style="margin:0;float:right;width:50%">
                    
                    <button class="btn purchase-helper-btn font-weight-500" onclick="recruitHelper('sciencewisp', 1)">Recruit (<span id="sciencewisp-cost">10</span> mana)</button>
                </div>
            </div>
            

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

htmlcssbootstrap-5

Answer №1

update align-items: center; to align-items: flex-start; within .container

My belief is that this alteration will be effective

Answer №2

To make those cards more visually appealing, place them inside a container with the class d-flex. Using flex display, both cards will expand equally in a vertical direction and will also be centered.

.buy-wisp-container {
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:10px
}

#buy-conjurer-container{
    display: none;
    width:100%;
    justify-content: space-between;
    align-items: center;
    margin-top:10px

}

#buy-excavator-container{
    display: none;
    width:100%;
    justify-content: space-between;
    align-items: center;
    margin-top:10px
}

#buy-sciencewisp-container{
    display: none;
    width:100%;
    justify-content: space-between;
    align-items: center;
    margin-top:10px
}

.left-side-div {
    flex: 1;
    text-align: left;
}

.right-side-div {
    flex: 1;
    text-align: right;
}

.container{
    height: 80vh;
    align-items: center;
    justify-content: center;
    display:flex;
}

#helpers-card{
    display:inline-block;
    min-height:138px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3818c8c979097918293a3d6cdd3cdd1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
    <div class="d-flex">
    <div class="card text-center bg-dark text-light" style="width: 18rem;">
        <div class="card-body">
          <h3 class="card-title" id="item-name">Mana (<span id="total-mana-display" class="text-light-blue">0</span>)<span id="mana-increment-display"class="text-green" style="position: absolute; font-size: 1rem; display:none">+<span id="mana-increment-amount">1</span></span></h3>
          <p class="card-text" id="attributes-text">
  
          </p>
          <hr>
          <p class="card-text" id="req-text">
  
          </p>

          <button class="btn collect-btn" onclick="collectMana(player.mana.collectPower)">Collect</button>

        </div>

        
    </div>

    <div class="card text-center bg-dark text-light " id="helpers-card" style="width: 18rem;">
      
        <div class="card-body">
          <h3 class="card-title" id="item-name">Helpers</h3>
          <p class="card-text" id="attributes-text">
  
          </p>
          <hr>

          <div class="helper-container">

            <div class="buy-wisp-container" style="">
                <div class="left-side-div">
                    <p class="card-text font-weight-500" id="req-text">
                        Wisp (<span id="wisp-amount">0</span>)

                        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dolore atque est ratione aliquam hic?</span>
                        
                    </p>
                </div>
    
                
                <div class="right-side-div" style="margin:0;float:right;width:50%">
                    
                    <button class="btn purchase-helper-btn font-weight-500" onclick="recruitHelper('wisp', 1)">Recruit (<span id="wisp-cost">5</span> mana)</button>
                </div>
            </div>
            
            <div id="buy-conjurer-container">
                <div class="left-side-div">
                    <p class="card-text font-weight-500" id="req-text">
                        Conjurer (<span id="conjurer-amount">0</span>)
                        
                    </p>
                </div>
    
                
                <div class="right-side-div" style="margin:0;float:right;width:50%">
                    
                    <button class="btn purchase-helper-btn font-weight-500" onclick="recruitHelper('conjurer', 1)">Recruit (<span id="conjurer-cost">15</span> mana)</button>
                </div>
            </div>

            <div id="buy-excavator-container" style="">
                <div class="left-side-div">
                    <p class="card-text font-weight-500" id="req-text">
                        Excavator (<span id="excavator-amount">0</span>)
                        
                    </p>
                </div>
    
                
                <div class="right-side-div" style="margin:0;float:right;width:50%">
                    
                    <button class="btn purchase-helper-btn font-weight-500" onclick="recruitHelper('excavator', 1)">Recruit (<span id="excavator-cost">10</span> mana)</button>
                </div>
            </div>

            <div id="buy-sciencewisp-container" style="">
                <div class="left-side-div">
                    <p class="card-text font-weight-500" id="req-text">
                        Science Wisp (<span id="excavator-amount">0</span>)
                        
                    </p>
                </div>
    
                
                <div class="right-side-div" style="margin:0;float:right;width:50%">
                    
                    <button class="btn purchase-helper-btn font-weight-500" onclick="recruitHelper('sciencewisp', 1)">Recruit (<span id="sciencewisp-cost">10</span> mana)</button>
                </div>
            </div>
            

          </div> 
          
        </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

Alter div elements with jQuery based on the particular link that was selected

I'm struggling with updating a nav bar that has different divs based on the link clicked. <script> $(document).ready(function (){ $("#content").load("content/index_content.php"); $('a').click(function(){ $ ...

jqueryhtmlcss

Display a section of the picture at maximum width

Can anyone help with displaying only a portion of an image at full width (100%) without any overflow issues? The code I've tried is not working: .intro_sea { position: absolute; width: 101%; clip-path: inset(30% 50% 0 0); margin: 0; paddi ...

htmlcss

The form contains an HTML table, but unfortunately, the buttons are not functioning as expected

I have encountered an issue with my form and table setup that I cannot seem to resolve. Despite researching similar problems, I have not been able to find a solution. In the code snippet provided below, you can see that when I click on the buttons for De ...

phphtmlformshtml-table

Click once to reveal, click twice to conceal the slider

I currently have a web page set up so that a single click on the text displays a slider for selecting a range of values. Now, I want to incorporate a feature where a double click will remove the slider. Below is the HTML code: <!DOCTYPE html> < ...

javascriptjqueryhtml

Leverage the power of JavaScript functions within the app.component.ts file of

I have a JavaScript file named action.js and I am trying to incorporate it into an Angular project. After doing some research, I found out that the js file should be placed in the assets folder and the path must be referenced in the scripts array within an ...

javascripthtmlnode.jsangulartypescript

Tips for displaying user data from a mongodb database on a webpage, making edits to the information, and then saving the updated data

I have a website where users can register, log in, and update their profile information. However, I am facing an issue where only the data of the first user in the database table is being retrieved. How can I get the data of the currently logged-in user? ...

javascripthtmlnode.jsajaxmongodb

Creating two separate divs that can scroll independently while also limiting each other's scroll depth can be achieved by utilizing

I am attempting to replicate the unique scrolling feature seen on this particular page. Essentially, there are two columns above the fold that can be scrolled independently, but I want their scroll depths to be linked. When a certain depth is reached whil ...

javascripthtmlcss

Tips for implementing the same autocomplete feature across multiple form fields

Struggling to add multiple products and provide auto-suggest for each product name? You're not alone. It seems like the auto suggest feature is only working for the first product. Can anyone point out what's going wrong here? Here's my HTML ...

javascriptjqueryhtml

Placing a Div element outside of a Flexible Grid Layout

I am currently in the process of developing a responsive website using HTML5, CSS3, jQuery, and Media Queries. One challenge I am facing involves a page containing a gallery of images within a 16-column grid that adjusts nicely for various screen sizes, i ...

jqueryhtmlcssresponsive-designposition

Attempting to sort through an array by leveraging VueJS and displaying solely the outcomes

Within a JSON file, I have an array of cars containing information such as model, year, brand, image, and description. When the page is loaded, this array populates using a v-for directive. Now, I'm exploring ways to enable users to filter these cars ...

javascripthtmlarraysvue.js

Ways to limit the extent of inline CSS styling?

I am working on a project where I need to apply unique CSS to each item in a list dynamically. Each item will have its own set of CSS rules specifically tailored to its elements. <div id="thing1" class="vegas"> <style> p { font-size: ...

javascriptjqueryhtmlcss

Utilize jQuery to dynamically assign classes to list items within a unordered list based on the length of an array

HTML: <ul class="tickboxes"> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i>< ...

javascripthtmljquery

I'm having trouble getting my .click method to work with the <div id=menuButton>. Can anyone help me figure out why this is happening?

Here is the HTML code I created for a dropdown menu. Initially, in the CSS file, the menu is set to display: none; <!doctype html> <html> <head> <title>DropDown Menu</title> <link rel="stylesheet" href="normalize ...

javascriptjqueryhtmlcss

Tips for transforming a scroll element into the viewport using Angular 2+

This is a sample Here is a component with a list of items: class HomeComponent { text = 'foo'; testObject = {fieldFirst:'foo'}; itemList = [ '1', '2', '3', & ...

javascripthtmlcssangularscroll

Creating an HTML table from a JSON string with AngularJS

I am completely new to angularjs and have been delving into it for the past few days. I now need to convert a JSON string from a REST endpoint into tabular data. Below is the code I've been working on. $scope.getDataCatalogue = function(){ $ ...

htmlangularjsjson

Troubleshooting the Gutter Problem in jQuery Isotope and Masonry

Currently, I am utilizing the Isotope jQuery plugin. While it is a fantastic tool, I am encountering a minor issue with aligning items in masonry mode. The width of my container is 960px, and I aim to have 4 items perfectly aligned as if they were adhering ...

javascriptjquerycssjquery-masonry

CSS Styling for Adjusting Table Cell Widths

In my HTML table, I am trying to set the overall width while ensuring that the label column does not become too wide. Although it functions correctly in Firefox 4, IE 9 seems to be completely ignoring the width property. <html> <head> <sty ...

htmlcssinternet-explorerfirefoxcross-browser

Stop the div from collapsing when hiding or deleting all child elements to maintain its structure

I have recently developed a Vuetify application that manages card items. To ensure security and accessibility, I have added a feature where the actions/buttons are displayed based on the User's permissions. In case of missing permissions, these button ...

htmlcssvue.jsvuetify.js

Accessing data in JSON format from a URL

I'm working on a website that analyzes data from the game Overwatch. There's this link () that, when visited, displays text in JSON format. Is there a way to use JavaScript to read this data and display it nicely within a <p> tag on my si ...

javascripthtmljson

Achieved anchoring an object to the top of the page while scrolling

Recently, I've been working on a piece of code to keep my div fixed at the top of the page while scrolling. However, it doesn't seem to be functioning as intended. Would anyone be able to point out where I might have gone wrong? The element in ...

javascriptjqueryhtmlcss