Looking for a Horizontal Layout?

@foreach (var item in APModel)
{
    <div class="row row-cols-1 row-cols-md-2 g-4">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="https://images.pexels.com/photos/2360673/pexels-photo-2360673.jpeg?auto=compress&cs=tinysrgb&w=600" class="card-img-top" alt="...">
                <div class="card-body">
                    <h6 class="card-title">PropertyType: @item.PropertyType</h6>
                    <h6 class="card-title">PropertyStatus: @item.PropertyStatus</h6>
                    <h6 class="card-title">Price: @item.Price</h6>
                    <h6 class="card-title">Location: @item.Location</h6>
                    <h6 class="card-title">Rooms @item.TotalRooms</h6>
                    <h6 class="card-title">Baths @item.Bathrooms</h6>
                    <p class="card-text">@item.Description</p>
                    <button class="btn btn-outline-danger btn-sm"
                        @onclick="(()=>DeleteProperty(item.PropertyID))">
                        Del
                    </button>
                </div>
            </div>
        </div>
    </div>
}

How can I make these cards display horizontally instead of vertically? Any suggestions would be greatly appreciated.

htmlcssbootstrap-5

Answer №1

To resolve this issue, the display flex property in CSS can be used. Since I cannot view your cards directly, you will need to handle the actual styling accordingly. Alternatively, grid styling can also be implemented for this purpose.

.card-body {
      display: flex;
      justify-content: space-between;
     }
<div class="row row-cols-1 row-cols-md-2 g-4">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="https://images.pexels.com/photos/2360673/pexels-photo-2360673.jpeg?auto=compress&cs=tinysrgb&w=600" class="card-img-top" alt="...">
                <div class="card-body">
                    <h6 class="card-title">PropertyType: @item.PropertyType</h6>
                    <h6 class="card-title">PropertyStatus: @item.PropertyStatus</h6>
                    <h6 class="card-title">Price: @item.Price</h6>
                    <h6 class="card-title">Location: @item.Location</h6>
                    <h6 class="card-title">Rooms @item.TotalRooms</h6>
                    <h6 class="card-title">Baths @item.Bathrooms</h6>
                    <p class="card-text">@item.Description</p>
                    </div>
                    <button class="btn btn-outline-danger btn-sm"
                        @onclick="(()=>DeleteProperty(item.PropertyID))">
                        Del
                    </button>
            </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

Adjusting cell width based on content in CSS to handle overflows automatically

I am facing a challenge with a table that has varying widths of content in each cell. I need the lengthy content to be displayed next to nowrap and overflow. After trying the solution mentioned here, all cells ended up with the same width. However, I requ ...

htmlcsshtml-tableoverflow

Javascript menu toggle malfunctioning with sub-menus

I am in the process of creating a responsive menu for a complex website. The horizontal menu transitions into a vertical layout on smaller screens, with javascript used to toggle the sub-menu items open and closed when clicked. One issue I am facing is wit ...

javascriptjqueryhtmlcssmenu

When incorporating `Ionic/core` into my project, it unexpectedly alters my scss styling

Exploring StencilJs: In my project using StencilJs, I aim to create a wheel time picker with 3 columns for hours in 12-hour format and minutes which can vary based on the provided array such as [0,15,30,45] or [00,30]. Additionally, there will be options ...

csssassweb-componentstenciljs

Incorporating Social Share Buttons to Enhance User Engagement on Your WordPress E

Looking to enhance my product page by adding social icons right below the 'Add to Cart' button. The product page URL is https://flowersforeveryone.co.za/product/cheerful-orange-tulips/. I already have a 'social menu' set up. How can I ...

phpcsswordpresswoocommerce

how to position one div above another using css

I currently have a page layout with 7 different div elements structured like this; <div id="container"> <div id="head"></div> <div id="A"> <div id="A1">A1</div> <div id="A2"></div> ...

css

I'm curious about the specific purpose of /1 in font styling at 16px

Can anyone explain the purpose of /1 in the font: 16px/1 style declaration? I removed the /1 from the code and noticed increased spacing between lines. What is the specific role of /1 in this situation? body { font: 16px/1 'Open Sans', sans ...

css

How to style an HTML table with just a bottom border

Is there a way to recreate the Staff Directory section of this page using only HTML, without having to rely on CSS and Javascript? Specifically, I want to create a table with only bottom borders/dividers for each line. Any suggestions on how to achieve thi ...

htmlhtml-tableborderdivider

Effortlessly browse through directory with the seamless integration of AngularJS or

Hey there! I'm working on a really cool feature - creating a list with editable inputs. However, I've encountered a bit of an issue. Is there any way to navigate through this list using arrow keys and focus on the desired input? .content ul { ...

javascripthtmlangularjs

button that smooth slides out using jquery

Here is the source code for a jQuery slideout: jQuery(function($) { $('#slideClick').toggle(function() { $(this).parent().animate({left:'0px'}, {queue:false, duration: 500}); }, function() { $(t ...

javascriptphpjqueryhtml

Reducing Image Size for Logo Placement in Menu Bar

Hello all, I am a newcomer to the world of web coding. Please bear with me if I ask something that may seem silly or trivial. I recently created a menu bar at the top of my webpage. Below that, there is a Div element containing an image. My goal is to make ...

jqueryhtmlcss

JavaScript date selector allowing the selection of multiple dates

As a beginner in JavaScript, I am struggling to create a datepicker input field that allows multiple selections. Despite researching for solutions, none seem to fit my specific case. Can anyone offer guidance on how to achieve this? Your help is greatly ap ...

javascriptcsshtmltwitter-bootstrap

Pass data back and forth between app.js (node) and javascript (main.js)

I am facing a challenge in sending and retrieving data (username) between app.js and main.js. In my setup, I have a node app.js that calls index.html which then triggers the main.js function called "clicked". Below is the code snippets for each file: app. ...

javascripthtmlnode.js

Sidebar content alignment vertically

Struggling with aligning items in a sidebar, specifically regarding the fixed footer and the overflow of the main sidebar container. Trying to achieve a layout where the scrollable element stays within the designated space. Current setup includes: ...

htmlcsstwitter-bootstrapbootstrap-5

Incorporate a Bootstrap panel featuring a stylish border design and perfectly centered text

I am attempting to design two panels in Bootstrap with centered text and different fonts. Similar to the layout shown in the image below https://i.sstatic.net/aVGwV.png Here is my code: <div class="row"> <div class="col-lg-6&q ...

cssbootstrap-4

What is the best way to align these div elements within a table cell?

I am encountering an issue with the placement of elements. What I am striving for is something like this: https://i.stack.imgur.com/VSFXE.png where a div with several other divs inside is positioned at the top of the td, and another div is at the bottom o ...

javascriptjquerycssfirefox

Tips for extracting information from Bootstrap text boxes

Hi there! I am currently learning how to use Bootstrap and I have a question. I want to populate my Bootstrap table with data from my Firestore database. Although the data is being loaded and fetched successfully (confirmed by logging it into my console), ...

firebasegoogle-cloud-firestorebootstrap-5bootstrap-table

When the sidebar is set to position: fixed, the icons magically vanish

This CSS is specifically for the side navigation bar. .side-nav { // position: sticky; top: 0; left: 0; height: 100vh; z-index: 100; width: calc(3.5vw + 3.5vh); // position: fixed; &.content { height: 100%; display: flex; fl ...

csssass

Looking to locate .zip files using PHP Simple HTML DOM Parser?

Just started using PHP Simple HTML DOM Parser and I'm attempting to display links that have either a .zip or -animal.jpg at the end, but I seem to be stuck. I've done some searching online, but unfortunately, all I see below is a blank screen. ...

phphtmlsimple-html-dom

The latest grid system in Bootstrap 5 is designed to streamline

I'm attempting to use Bootstrap 5 to create a grid system similar to the image shown below View Image I've been struggling to replicate the grid section shown in the attached image using Bootstrap 5. <div class="container-fluid"> ...

htmlcssbootstrap-5

Flip the Script: JQuery slideshow in reverse

Hey there, I've been tinkering with a JQuery slideshow and encountering an issue. All my images in the HTML are stacked on top of each other, and I attempted to modify the code so it starts with the last image. However, my attempts have not been succe ...

jquerycssslideshow