Arranging Bootstrap Carousel cards in a top-down position

When using Bootstrap Cards in a horizontal carousel, each card's height is dynamically adjusted based on the length of the copy. However, there is an issue where the cards appear positioned at the bottom of the carousel instead of aligning to the top as intended.

Check out this CodePen example

  <div class="scrollmenu">

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. 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 class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <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>

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

Answer №1

Hopefully this solution provides some clarity for you!

.horizontal-scroll{
    display: inline-flex;
    }

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

Utilize the HTML canvas to sketch on an image that has been inserted

I have a HTML canvas element within my Ionic application. <canvas id="canvas" color="{{ color }}" width="800" height="600" style="position:relative;"></canvas> Within this canvas, I am loading an image. Below is the code snippet from the con ...

Unable to incorporate additional functions while using directives

http://example.com Is there a way to incorporate an addChild(tree) function into this code in order to expand the data array? I have made changes to the template as shown below: '<p>{{ family.name }}{{test }}</p>'+ '<ul>& ...

Displaying data from a table with Html::TreeBuilder::XPath

My goal is to extract all the tables from an HTML file and display their contents with each cell separated by \t, each row separated by \n, and each table separated by \n\n. Despite trying various methods like findnodes_as_strings($path ...

Enhanced User Experience Through Triggered Content Recommendations based on Scrolling Patterns

When a user scrolls beyond a certain point on a webpage, I would like a recommended content popup to slide out from the right side at the bottom of the page. An excellent example can be seen on USAToday where a blue recommended box appears as you scroll d ...

Enhancing security in client-server communication using HTML5 Ajax

Thank you for your assistance today. I am currently in the process of developing an HTML5 game and require guidance on the most effective method for Client Server communications. I am exploring alternatives to socket.io for undisclosed reasons. The key p ...

menu roll-up in an upward direction

Is there a way to implement the CSS effects mentioned in this article to make the menu roll up instead of down? Learn How to Create a Menu that Rolls Up Using CSS! ...

Is the order of elements in a CSS file important?

In my situation, I am dealing with a nested list and enclosing div that was created by Drupal's menu system, so I am unable to modify it. My goal is to replicate the menu from a hardcoded website (link removed). How can I include the sub-items (ul l ...

Issue with displaying dropdown menu icon in Bootstrap 5

Currently utilizing Angular 14 alongside Bootstrap 5. The code snippet below showcases a simple Bootstrap dropdown menu: <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id=&quo ...

I can't figure out why the item.newStock number is always one less when I click the button with the Up function in React

Currently in the process of developing a small e-commerce platform with a focus on enhancing the shopping cart feature. The objective is to have the array update and display on the screen via item.newStock every time the Up button is clicked. However, upon ...

Tips for sending an HTML form through Ajax, storing the data in a file, and then showcasing the results in a div

Embarking on my journey in Web Development, I am currently delving into JavaScript (specifically JQuery) and have decided to kick things off with a Simple Chat project. However, I'm facing an issue with preventing the page from refreshing after a mess ...

What's the best way to dynamically show Bootstrap collapse panels in a loop with AngularJS ng-repeat?

Currently, I am utilizing angularJS and attempting to include a bootstrap collapsible-panel within a loop. The code that I have written is causing all the panel bodies to be displayed beneath the first panel header. I need each body to be shown below i ...

Displaying a background image in Laravel using the storage directory

Can anyone offer some guidance on how to load a background image from storage? I have tried using the following code with normal img src, but it doesn't seem to work with background images. background-image: url({{ Storage::get("{$post->image}") } ...

When initializing a new instance of Stripe using cartalyst/stripe-laravel, an error occurs stating "The Stripe API key has not been properly defined!"

I am eager to explore Stripe and learn how to process payments. Currently, I am utilizing the cartalyst/stripe-laravel package to create a new instance of Stripe following the instructions provided here. The code snippet should resemble this: $stripe = ...

Troubleshooting CSS navigation bar hamburger dilemma

Currently, I am facing an issue with a toggle button on my website. When I click on the hamburger menu, the navigation bar does not show up even though the toggle feature is working perfectly fine. I have tried combining different sources to solve this pro ...

Stretching a row in Wordpress Visual Composer and setting the direction to Right-to-Left

Whenever I attempt to expand a row using the row settings in Visual Composer, the row stretches but the alignment of the row becomes completely off. This issue only occurs when the body direction is set to direction:rtl in the CSS. You can view the websit ...

Show both text and image inputs side by side within a table

Hey there, I'm trying to create a table with both text and image inputs inside. Here's the code I've attempted: <tbody> <tr> <td class="inputs"> <input type=" ...

Problem with Express server not fetching or applying public stylesheet

As I delve into the world of serving pages with node, express, and ejs, I encountered an issue with linking a stylesheet to my index.ejs file using a public folder. Despite setting up the link correctly in the HTML code, the styles were not loading when I ...

The issue of Facebook login not inserting data into the MySQL database has been identified

I've been following tutorials to implement login with Facebook, and I have most of it working. However, the data is not being saved to the database. Here is the code that is currently functional: <?php require 'lib/db.php'; require &apo ...

Issue with applying value changes in Timeout on Angular Material components

I'm currently experimenting with Angular, and I seem to be struggling with displaying a fake progress bar using the "angular/material/progress-bar" component. (https://material.angular.io/components/progress-bar/) In my "app.component.html", I have m ...

Noticeable increase in load time post integration of Facebook SDK

I am in the process of integrating Facebook social buttons into my website. Feel free to visit the website here. Though I am new to using the Facebook API, I noticed a significant increase in load time after adding the code to the footer. After conductin ...