Bootstrap 4 cards continue to resize instead of adapting to the constraints of the designated space

I've been attempting to implement functionality with bootstrap 4 cards, but I'm running into issues where the card size expands based on the length of the text. Below is my code:

<div class="row row-container">
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">
                    Heading</h5>
                <p class="card-text">SomeText</p>
                <a href="#" class="btn btn-primary">View</a>
            </div>
        </div>
    </div>
<!-- More similar card structures -->

In the last card, it ends up taking an entire column and pushes all other elements. Is there a way to contain the content within the card itself?

Your help is greatly appreciated.

htmlcssbootstrap-4

Answer №1

To address the issue, consider applying a fixed height and width along with some Margin to your cards.

Alternatively, you can modify the bootstrap class from col to col-4, which will provide three columns of the exact same size.

 <div class="container ">
    <div class="row pt-5">
        <div class="col-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">
                        Heading</h5>
                    <p class="card-text">SomeText</p>
                    <a href="#" class="btn btn-primary">View</a>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">
                        Heading</h5>
                    <p class="card-text">SomeText</p>
                    <a href="#" class="btn btn-primary">View</a>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">
                        Heading</h5>
                    <p class="card-text">SomeText</p>
                    <a href="#" class="btn btn-primary">View</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row pt-5">
        <div class="col-4 offset-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">
                        Heading</h5>
                    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                        unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                        survived not only five centuries, but also the leap into electronic typesetting, remaining
                        essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
                        containing Lorem Ipsum passages, and more recently with desktop publishing software like
                        Aldus PageMaker including versions of Lorem Ipsum.

                    </p>
                    <a href="#" class="btn btn-primary">View</a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer №2

After reviewing your code, it appears that the card is continuously scaling because you have not specified a fixed width for it. To resolve this issue, I recommend utilizing the Bootstrap 4 grid system. You can learn more about dividing fixed widths to elements by visiting this link.

Here's an example:

<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

If you also want the card to be centered on the page, consider looking into Bootstrap 4 Flex at this resource.

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

Display a spinning wheel or progress bar while the website is in the process of loading

Looking to construct a treeview using the jquery-treeview plugin but noticing it's quite time-consuming (about 5-7 seconds). I'm interested in adding a spinning wheel or progress bar to indicate loading while the page is processing. Any suggestio ...

javascriptjqueryhtml

What are some tips to speed up image loading times?

Is there a way to optimize the loading speed of these images? In my loop that displays profile pictures, the photos take between 1 to 2.5 seconds to load all at once. I attempted resizing with PHP, but it had minimal impact on the load time. How can I prel ...

phphtmlimage

Differences in Cross-Browser Styling for ListView Item Templates

I'm following up on my previous query regarding ListView's ItemTemplate table styling. I am still working on achieving the desired look for the ItemTemplate: ______________________________________________ | |___________Title_______ ...

asp.nethtmlcsslistviewitem

Transitioning between javascript functions

Having some issues with a switch case statement, also tried using if-else but no luck. In the HTML code: <select onBlur="functionCalc()" id="art"> <option value="hours" id="hours">Hours</option> <option value="minutes" id="mins">M ...

javascripthtml

To ensure proper formatting, I must include a comma operator for numbers while typing and limit the decimal places to two

Could someone assist me in formatting a number to include commas and restrict the decimal places to two using regex? I have attempted the following, but need help making it work properly. Currently, when I enter a number it shows up as 1231244, however I ...

javascriptjqueryhtmlasp.net-mvctwitter-bootstrap

Responsive design involves ensuring that web elements such as divs are properly aligned

I am currently working on aligning 2 divs in a specific way that is responsive. I would like the right div to stack on top of the left div when the screen width reaches a certain point, as opposed to them both taking up 50% of the container's width. ...

javascriptjqueryhtmlcss

Tips for creating a scrollable section within a div row using clarity design instead of bootstrap formatting

My current project combines Angular with .NET Core, and I am encountering difficulties in styling one particular component. This component consists of a row with two columns. The first column is empty while the second column contains another row divided i ...

htmlcssbootstrap-4

BeautifulSoup - Struggling to retrieve tbody element

Having trouble accessing a table nested deep inside multiple layers? I'm relatively new to utilizing Beautifulsoup and have been practicing with some basic examples. However, I've hit a roadblock as I can't seem to locate the "div" tag with ...

pythonhtmlbeautifulsouphtml-tbody

Is it possible to combine two conditions using CSS?

Hello, I have a question about CSS. In my navigation bar, I have 3 links with different styles: #p1 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 45px; font-weight: bolder; color: #999999; text-dec ...

htmlcsscss-selectors

Retrieve several values with a limit of 1 in SQL

Consider the following table structure: ID | ident | product 1 | cucu1 | 99867 | 2 | kkju7 | 88987 | 3 | sjdu4 | 66754 | 4 | kjhu6 | 76654 | 5 | cucu1 | 98876 | Running the query: SELECT ident,COUNT(*) FROM sales WHERE status=? AND team=? AND DATE(da ...

phphtmlsql

Symbol '%' is not supported in Internet Explorer

My experience with IE versions 8 and 9 has been that they do not recognize the &percnt; entity. I have tested this on two different computers. I found information suggesting that it should be supported in IE here: http://code.google.com/p/doctype/wiki ...

htmlcssinternet-explorerinternet-explorer-8internet-explorer-9

Using jQuery Datatables with Asp.Net

Having encountered an issue with displaying two jQuery datatables in separate menu tabs, I am seeking assistance to rectify the problem. The first datatable (id=gvSchedule) appends successfully while the second one (id=gvMySchedule) loses its formatting up ...

c#jqueryhtmlasp.net

When using a custom selection color to highlight underlined text, the underline becomes invisible

I am currently working on a website where I want to customize the text selection color. ::selection { background-color:#00ffff; } However, there seems to be an issue in this specific situation: p::after { content:"Try selecting the above elemen ...

htmlcssselection

Applying FadeIn Effect to Background Image on Hover

For several applications, I have utilized this jQuery code that swaps images with a smooth fading effect. It's incredibly straightforward. $(document).ready(function() { $("img.a").hover( function() { $(this).stop().animate({ ...

jquerycsshoverfade

OutOfMemoryError caused by Bitmap

I'm experiencing an issue with this error. I created a favicon parser from URLs using the following code: public class FavIconParser { public static String extractUrl(String url) { StringBuffer sb = new StringBuffer(); Pattern p = Pattern.co ...

javaandroidhtmlparsing

Unlinked from the main content, the Angular2 Material2 sidenav stands on its

I am in the process of implementing the material2 sidenav component. My goal is to have a standalone, full-height sidebar that smoothly slides in and out without any interference with the rest of the app layout caused by the sidenav-layout. The desired ou ...

cssangularlayoutangular2-material

Elements missing from the Bootstrap 5 framework

I've been attempting to link my bootstrap card deck to a mongo database with ejs. The website renders without any errors, but for some reason, the cards are not displaying. Does anyone have any insight into what could be causing this issue? Below is ...

htmlejsbootstrap-5bootstrap-cards

Bizarre Drop-down Peculiarities

Having a perplexing issue where the 'search' list item is oddly shifted below the dropdown box only when it is displayed. The other list items remain in their correct positions. Any advice on how to resolve this? The appearance and functionality ...

jqueryhtmlcssmenu

Nested elements not transitioning using CSS

Why is my transition not being applied to the submenu <a> tag? The color change is working fine, but the transition does not occur on hover. When I use the same rules on another element with a different main class, it works perfectly. It seems like t ...

htmlcsscss-transitions

What could be the reason that my submenus are not appearing as expected?

I'm currently working on refining the navigation bar design for a website, but I've encountered a problem with the submenu functionality. It appears that only one submenu is visible while the others remain hidden. For example, when navigating to ...

htmlcsssubmenu