The functionality of Bootstrap 4 Flexbox Horizontal Scrolling Cards is not optimal when there are less than 8 cards present

Encountering an issue with Bootstrap 4 flexbox while trying to create horizontally scrollable cards on Desktop Screens (works fine on mobile responsive mode):

Problem #1: When there are less than 8 cards, the cards do not fill the horizontal flexbox window properly
Scenario A: With only 3 cards, the flexbox window appears distorted and the 'badge' from below overlaps.
Scenario B: On having 7 cards, the flexbox is almost full but there's a gap on the left side.
Scenario C: At 8 cards, everything looks perfect - visible & scrolling smoothly.

Issue 2: If the content in a card pushes the button, how can I add space so that the buttons remain aligned?

@CBroe suggested adding .row { width:100%; max-width:100vw; }

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

body {
  padding: 5px;
}

img {
  border-radius: 50%;
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  margin-top: 5px;
}

.forlabel {
  margin-top: -14px;
}

.forlabeldiv {
  border: solid;
  border-width: 1px;
  border-radius: 5px;
  <!-- margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 15px;
  -->margin: 0, auto;
  width: 100%;
  text-align: center;
} 

... (omitted for brevity) ...

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">

Answer №1

Implementing advice from seasoned professionals, successfully tackled the challenges:

  1. Inserted .row { width:100%; max-width:100vw; } to maintain consistent width of flex-box with 3 cards.
  2. Applied d-flex flex-auto to card & mt-auto to ensure buttons display on the same line

Your guidance is greatly appreciated

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

JavaScript code to retrieve an image from an <img> tag's source URL that only allows a single request and is tainted due to cross-origin restrictions

I have an image displayed in the HTML DOM. https://i.stack.imgur.com/oRgvF.png This particular image (the one with a green border) is contained within an img tag and has a URL as its source. I attempted to fetch this image using the fetch method, but enc ...

Is there a way to prevent an iframe from being recorded in Chrome's browsing history?

I'm in the process of developing a Chrome extension that inserts an Angular application into the user's browser window to create an interactive sidebar. I've been successful in most of my goals by inserting an iframe through a content script ...

Enhancing the Appearance of WooCommerce Product Descriptions

Having some trouble with my website . There are two descriptions on the "Product" page - one above the tabs and one inside the tabs. Trying to change the text color in the tab section to black, but when I adjust the body text color it affects both areas. I ...

The multi-level dropdown feature in the BootStrap-4 navbar extends off the screen when the dropdown menu is opened

I have been struggling to make this work. I used BS4 for responsiveness, and my navigation items are aligned to the right in the navbar. Despite trying various methods to position the submenu on the left of the parent menu, I still can't get it to dis ...

Stop HTML <dialog> from automatically closing using Vue

I'm working on a project where I need to use Vue to programmatically prevent an HTML dialog element from closing when the close event is triggered. Here's the code snippet I am currently using: import {ref} from 'vue'; const dialogTe ...

How to ensure the table fits perfectly on the screen using JQueryMobile and Cordova?

I've been working on a JavaScript function that creates a dynamic page and displays data fetched from a database. However, I've encountered an issue where the displayed data overflows past the width of the mobile screen. Is there a way to ensure ...

What methods can be used to stop a bootstrap 4 column from decreasing in size when the text is shorter?

I created a razor page featuring a three-column grid format structured like this: @for (int i = 0; i < Model.Questions.Count; i++) { <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 align-self-center order-first">Quest ...

Exploring ways to expand the card tile size with Bootstrap CSS class

Currently, I am utilizing form.IO, which provides a field for targeting controls with Bootstrap custom CSS Classes. No syle tags and no .control{font-size:20px}. Remember, you can use multiple classes separated by a space. For example: card-title mb-2 tex ...

Combine lists with floating elements positioned to the left or right

My HTML includes the following ul tag: <ul style="position:absolute"> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li> list 4 <p>list 4 content goes here</p> ...

minimize javascript syntax (stackoverflow 2022)

I'm struggling with this puzzle game. Sometimes, when I start a new game, the pieces get shuffled incorrectly. I tried adding a function to fix it, but it doesn't seem to be working. It's really frustrating and I want to simplify the code as ...

What is the best way to slim down a material ui icon?

I need help creating a slimmer Material UI icon with a +: This is what it currently looks like: https://i.sstatic.net/VXsCW.png This is the desired outcome: https://i.sstatic.net/kkkll.png <AddCircleIcon style={{ color: "#00B790", fontSi ...

Dealing with a jQuery/JavaScript issue involving thumbnail images

I am facing an issue with smooth transitions between thumbnail images in HTML list tags. I have Jquery listeners set up for mouseenter and mouseleave events that update a parent image when a thumbnail is hovered over. The problem arises when scrolling fro ...

Angular static dropdown option

<input [formControl]="twitterHandle" id="twitterHandle" placeholder="twitterHandle"> Fetching the input value from the Twitter handle input field using the following code: twitterHandle = new FormControl(); this.twitterHandle.value; Similarly, if ...

Having trouble changing the chosen selection in the material UI dropdown menu

I've encountered an issue with my material ui code for a select dropdown. It seems that the selected option is not updating properly within the dropdown. <FormControl variant="outlined" className={classes.formControl}> <InputLabel ref={ ...

Tips for positioning the popup ul in relation to its parent li

How can the pop-up ul be positioned in the center of the parent li using CSS? * { margin: 0; padding: 0; } #track-nav { margin-left: 50px; margin-top: 50px; float: left; width: 100%; list-style: none; font-weight: bold; margin-bottom: ...

What's the best way to target an input that's appearing as it slides in from the edge of the screen?

My webpage has an element called #cols that is three times wider than the <body>. This element contains three columns, each exactly as wide as the <body>. When a button is clicked, the #cols element slides over by the width of one column while ...

Different ways to trigger code behind method with onclick excluding asp:button OnClick

I am working with asp.net and I have a form that already uses runat="server". I have added another form to the page and I need to run a method in the code behind on an onclick event. Since I already have one form on the page, I cannot use an asp:button wi ...

Do you know of any HTML Validators that are compatible with Maven?

Currently, I am working on a project that consists of multiple HTML files. In order to ensure a smooth Maven build process, I am looking for a validator that can perform the following checks: Validate the syntax of the files (such as ensuring all opening ...

What is the best character encoding for my website and how can I determine the right one to use?

What is the significance of specifying character encoding in an HTML page and how can I determine which type of character encoding is best for my website? In the past, I always defaulted to using UTF-8 for all HTML pages. However, is there a particular ra ...

Unable to redirect using wp_redirect() - URL does not change

I am using a method to randomly generate query parameters and then redirecting to the same URL with those parameters assigned. While trying to achieve this, I encountered an issue where even though I was using wp_redirect(), the URL remained unchanged and ...