overflowing bootstrap cards are causing disruptions in row layouts and impacting the margins of surrounding elements

As a beginner in the world of programming, I'm reaching out for help with my first post. Please bear with any errors in my code or confusion in my terminology.

Experimenting with bootstrap cards on a blog template, I am facing an issue where the height of an element in one row is affecting the position of an element in a different row.

You can view my project here: https://codepen.io/jreecebowman/pen/NyOKpV

Below the main navbar lies a single .row housing two cards within separate columns: col-md-8 & col-md-4.

The following .row seems to be influenced by the row above due to margin between the two col-md-8 cards. In comparison, the subsequent row does not feature this gap; the cards are stacked directly on top of each other. This is how I want the initial row to display, regardless of the size of the smaller card on the right.

I have attempted placing the left cards into .card-columns, but that doesn't fully resolve the issue as I can only adjust the screen width using an @media query in the CSS.

I hope my explanation is clear. Can anyone provide assistance with this problem?

Thank you in advance!

htmlcsstwitter-bootstrapbootstrap-4responsive

Answer №1

To organize the left cards in a single column, use the col-md-8 class...

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <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 class="card">
                <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 class="card">
                <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="wotw col-md-4">
            <div class="card">
                <img class="card-img-top" src="..." alt="Card image cap">
                <div class="card-block">
                    <h4 class="card-title">Card title</h4>
                    <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="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>

    </div>
</div>

The spacing issue in the first row occurs due to the use of flexbox (Bootstrap 4) which ensures all columns in a row have the same height. Since the right card inside col-md-4 is taller, it affects the overall row height.

Answer №2

To modify your design, make sure to divide the div that spans 4 columns col-md-4 from the div that spans 8 columns col-md-8

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 JavaScript code included in the index.html file is not functioning as expected when called in the main.js file within a

Here is the index.html code for a simple VueJS app that includes a widget from netvibes.com. The widget code is added in the html file and functioning properly. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC " ...

javascripthtmlvue.jsjspwidget

React-Toolbox: Attempting to horizontally align the Cards side by side

When working with React-Toolbox, I encountered an issue with aligning Card elements horizontally. I attempted using display: inline-block, which successfully separated them into three distinct cards as desired. However, they did not align next to one ano ...

cssreactjsreact-toolbox

Tips for seamlessly integrating a Shopify App into a personalized HTML Call to Action

I'm in the process of putting together a Shopify online store and I've been able to put together a customized popup using HTML, CSS, and JS. I've also incorporated an app in Shopify for email marketing purposes. However, I'm looking to ...

htmlcssshopifyshopify-app

Using Flexbox to align content in a column with space between items

Is there a way to move the read more button to the bottom of the card using flexbox in a column layout? The top section, middle paragraph, and see more button are each contained within their own div inside the parent card div. https://i.stack.imgur.com/NG ...

cssflexboxtailwind-css

When attempting to refresh, the global.Exp.Data.getLocalDataSet() function returns empty

In the first method, data is retrieved from the database and populated into the grid. The second method is used for viewing user details. When the user clicks on this method, it displays the user details. However, if the page is refreshed at that time, v ...

jqueryasp.nethtmlazure

css readonly input textbox not changing background color when set

I've come across an old Classic ASP form that requires additional functionality, and I'm currently using IE11. To address this, I decided to include a doctype like so (even though I'm unsure of its necessity): <!DOCTYPE html> In my C ...

htmlcssreadonly-attribute

The menu will showcase all currently active sub-category items whenever an item below is selected (using Joomla/Mosets Tree)

I am currently managing a Joomla website that utilizes Mosets Tree for a business directory. One issue I have noticed is that on the right side of the site, all the categories are listed. When you expand sub-categories and then roll over to another menu it ...

phphtmlcssjoomla

Ensure that the initial section of the page spans the full height of the browser, while all subsequent sections have a

I have a website composed of various blocks with different heights, all extending to full width. My goal is to make the first block the full height and width of the browser window, while keeping the other blocks at a set height as seen on this site: After ...

javascriptjqueryhtmlcss

Update options in HTML form dropdowns dynamically based on selections from other dropdowns using Node.js

In my Node.js application, I have the following file system structure: public elegant-aero.css stadium-wallpaper.jpg team-results.html public.js app.js teamresults.mustache I am trying to dynamically populate a dropdown menu based on user sele ...

htmlnode.jsformsexpressvalidation

Font size for the PayPal login button

I am looking to adjust the font size of the PayPal Login button in order to make it smaller. However, it appears that the CSS generated by a script at the bottom of the head is overriding my changes. The button itself is created by another script which als ...

javascripthtmlcsspaypalopencart2.x

Rails does not transfer data-attributes in HTML5

I have a layout set up to show users: %table.table %tbody - @users.each do |user| %tr %td= avatar_tag user, {small:true, rounded:true} %td = username user .online-tag = user.online? %td= ...

javascriptjqueryruby-on-railshtml

I am trying to confirm in PHP whether any of the gender checkboxes have been selected. However, the code I have tried so far does not appear to be functioning as expected

Please refrain from suggesting the use of checked = "checked" in HTML, as the validation must be performed in PHP as per the requirements of my assignment. PHP Code: if (isset($_POST["gender"])) { $gender = $_POST["gender"]; if (($gender != "male") || ( ...

phphtml

React-Tooltip trimming

Currently, I am facing a dilemma that requires some resolution. The issue at hand is related to the placement of React-Tooltip within the List element. Whenever it's positioned there, it gets clipped. On the other hand, placing it at the bottom isn&a ...

javascriptcssreactjsmaterial-ui

Issue with collapsing dynamic lists in Asp Core Bootstrap

Struggling with a seemingly simple task here. I'm dealing with a list of 120 dynamically generated items in a .net Core MVC application, and I've included the following code snippet in my View: <table class="table"> <thead ...

jqueryasp.net-mvcasp.net-corebootstrap-4

Ways to switch out the background image using jQuery

I am currently using jQuery to dynamically change the background image of a web page. Right now, I have implemented two separate buttons that toggle between Image A and Image B. By default, Image A is displayed on the page. My goal is to enhance this func ...

javascriptjqueryhtmlcss

Tips for creating dynamic horizontal card layouts!

Check out my code here I've been struggling to create responsive horizontal cards that adjust properly on different screen sizes. Despite attempting to change the background image based on viewport size, I have not been successful. HTML <!DOCTYPE ...

htmlcssbootstrap-4grid

Verifying the angular form without the need for a submit button

I'm currently utilizing angular.js form validation and I'm looking to implement validation without the use of a form submit button. Below is my HTML code: <form name="userForm"> <input type="hidden" ng-model="StandardID" /> < ...

htmlangularjs

Why isn't Google Map showing up in my HTML <div> section?

I am currently working on a web page that consists of two containers. The mainmapdiv container covers the entire page, while the mainhomediv container is positioned on top of the mainmapdiv. My goal is to hide the mainhomediv container and show a Google Ma ...

javascriptjqueryhtmlcssgoogle-maps

Override the ui.bootstrap.tpls template for the datepicker popup.html template

I have developed a new template/datepicker/popup.html page that is loaded after ui.bootstrap.tpls. The issue I am facing involves calling a function from ng-click in the new template without making any changes to the ui.bootstrap.tpls file. I have attempt ...

angularjstwitter-bootstrapdatepickerui.bootstrap

Altering the dimensions of Bootstrap's default navbar for a more compact look

Currently, I am attempting to modify the size of Twitter Bootstrap's standard navbar to a smaller dimension. My goal is to have the Brand/logo on the left side, menu options in the center, and social media icons on the right side within the navbar. U ...

htmlcsstwitter-bootstrap