Adaptable layout - featuring 2 cards side by side for smaller screens

I am currently designing a webpage that showcases a row of cards, each featuring an image and a title. At the moment, I am utilizing the Bootstrap grid system to display 4 cards per row on larger screens (col-md-2), but my goal is to modify this layout to show 2 cards per row on smaller screens.

<div class="row">
                <div class="col-md-2 col-sm-4 item mt-3">
                    <div class="card item-card card-block">
                        <img src="~/img/deprt-8.png" style="max-width: 100%; ">

                        <h5 class="item-card-title my-2">Internal/Family Medicine </h5>
                    </div>
                </div>
            <div class="col-md-2 col-sm-4 item mt-3">
                    <div class="card item-card card-block">
                    <img src="~/img/deprt-10.png" style="max-width: 100%; ">
                        <h5 class="item-card-title my-2">Pulmonology </h5>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4 item mt-3">
                    <div class="card item-card card-block">
                    <img src="~/img/deprt-11.png" style="max-width: 100%; ">
                        <h5 class="item-card-title my-2">Gastroenterology</h5>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4 item mt-3">
                    <div class="card item-card card-block">
                    <img src="~/img/deprt-1.png" style="max-width: 100%; ">
                        <h5 class="item-card-title my-2">Dentistry</h5>
                    </div>
                </div>
            
            </div>
htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Answer №1

To display 2 cards on small screens and 1 card on smaller ones, switch col-sm-4 to col-sm-6. Alternatively, use col-6 to show 2 cards on both small and smallest screens.

If you want to show 4 cards per row instead of 6 on larger screens, replace col-md-2 with col-md-3.

For those interested:

You can eliminate the unnecessary 

style="max-width: 100%; "
from <img> and remember to wrap a .row inside a container class like .container-fluid to prevent overflow issues in the parent element (unless there are additional styling concerns impacting image and row container layout).

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a09">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 col-sm-6 item mt-3">
      <div class="card item-card card-block">
        <img src="https://placehold.co/600x400">
        <h5 class="item-card-title my-2">Internal/Family Medicine </h5>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 item mt-3">
      <div class="card item-card card-block">
        <img src="https://placehold.co/600x400">
        <h5 class="item-card-title my-2">Pulmonology </h5>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 item mt-3">
      <div class="card item-card card-block">
        <img src="https://placehold.co/600x400">
        <h5 class="item-card-title my-2">Gastroenterology</h5>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 item mt-3">
      <div class="card item-card card-block">
        <img src="https://placehold.co/600x400">
        <h5 class="item-card-title my-2">Dentistry</h5>
      </div>
    </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

Button Fails to Respond on Second Click

I have a button that triggers a JavaScript function. This function, in turn, initiates two sequential AJAX calls. Upon completion of the first call, it performs some additional tasks before proceeding to the second AJAX call. The button functions correctl ...

javascriptjqueryhtmlajax

Chrome causing the vanishing act of floated iframes

I encountered an unexpected issue on my website recently. For the past three years, everything was working smoothly until I updated Chrome to version 60. Now, whenever I try to load iframes from Archive.org, they momentarily appear and then vanish instantl ...

htmlcssgoogle-chromeiframe

What is the best way to dynamically adjust the width of multiple divisions in Angular?

I am currently working on an angular project to create a sorting visualizer. My goal is to generate a visual representation of an array consisting of random numbers displayed as bars using divisions. Each bar's width will correspond to the value of th ...

javascriptcssangulartypescript

Having trouble aligning the image to the center

After researching and trying various solutions suggested for aligning an image, I am still unable to get it to align as desired. Here is the HTML code snippet: <section> <img class="seattle" src="img/Seattle Pier.jpg" alt="Seattle docks"> ...

htmlcss

The error message "email() is not a valid function when using the onclick attribute

Can anyone lend a hand? I feel like I must be overlooking something really obvious. I'm having trouble calling my function to execute my ajax call. Any assistance would be greatly appreciated. Thank you! Here is an excerpt of the HTML code: $(docu ...

javascriptjqueryhtmlajax

Encircling a particular group of cells with a border

I have completed the component with a table layout. My current challenge is figuring out how to surround a range of selected cells with a border, similar to the first cell in the group shown below: https://i.stack.imgur.com/5Euht.png I attempted using d ...

javascripthtmlcss

The TinyMCE extension in Yii fails to load CSS files when accessed through a subdomain

My Yii application located at site.com/module has the tinymce extension installed, but I am facing an issue where the tinymce CSS files are not loading when I access the application through the sub-domain alias module.site.com. Interestingly, all JS file ...

cssyiitinymce

Explore the limitless possibilities of using jQuery Superscrollorama with fixed backgrounds

I am looking to achieve a scrolling effect with multiple elements, specifically three pictures in this case. While it is easy to implement scrolling, my goal is to keep the background fixed during the scroll event and have it move once the scrolling is co ...

jqueryhtmlcsssuperscrollorama

Troubleshooting the problem of divs overlapping when scrolling in JavaScript

I am experiencing some issues with full screen divs that overlay each other on scroll and a background image. When scrolling back to the top in Chrome, the background shifts down slightly, and in Safari, the same issue occurs when scrolling down. I have cr ...

javascriptjqueryhtmlcss

css element remains stationary and in view

Issue at hand: I have created a logo file named .art-obj1631017189 and I am looking to fix its position. It appears to work fine, but when scrolling down and it encounters the content section, my object falls behind the content (item-layout). I desire to ...

jqueryhtmlcss

Eliminate borders for text input in Bootstrap 3 styling

Trying to eliminate the top, right, and left borders for text input fields in Bootstrap 3. The selector being used is as follows: input[type="text"] { border-top: 0; border-right: 0; border-left: 0; } However, in Chrome, a faint thin line is ...

formstwitter-bootstrapcssinput

What is the best way to dynamically set minDate for a datetime-local input field?

I need assistance with setting up two input fields: one for the start date and one for the end date. I want the end date to automatically populate with the same value as the start date when the start date is filled, and have the minimum value set to be the ...

htmlangularjs

Is there any way to determine if Bootstrap has been utilized to build my WordPress page?

I'm currently contemplating if it's worth incorporating Bootstrap into my pre-existing Wordpress site. During my research, an interesting thought crossed my mind - could the template I'm utilizing already be built with Bootstrap? Although a ...

csswordpresswebresponsiveness

Adjust the width of the TinyMCE Editor to automatically resize based on the content being

Is it possible for TinyMCE to adjust the content within an absolutely positioned container and update the width while editing? <div class="container"> <textarea>This is my very long text that should not break. This is my very long text tha ...

javascripthtmlcsstinymcewysiwyg

Concealing an element upon clicking with jQuery

Can someone help me with this issue? I'm trying to use jQuery to hide the div element with the ID 'professional-panel' when a button with the ID 'hideButton' is clicked. I know it should be simple, but I'm new to jQuery and s ...

jqueryhtml

Certain Android devices may experience compatibility issues with the web app

I am facing an issue with my webapp on Raspberry Pi, as it is not being recognized properly by all my Android devices. The server hosting the website is a Raspberry Pi 3 running Apache and everything is up to date. To protect privacy and security, all IP ...

phpandroidhtmljsonweb-applications

sort jquery alphabetical characters

I have created some html and jQuery code that allows me to hide elements based on class name when I click on specific buttons in the filter div. However, I am now looking to add functionality to sort the elements alphabetically by class name when I press ...

jqueryhtml

Filtering, cleaning, and confirming the validity of data input allowed for HTML tags

While there is a lot of information available on sanitizing, filtering, and validating forms for simple inputs like email addresses, phone numbers, and addresses, the security of your application ultimately relies on its weakest link. What if your form inc ...

phphtmlsecurityvalidationpdo

Instructions for aligning the final LI element to the right in a Bootstrap 5 navbar

I noticed that on the Bootstrap 5 site, they only display non-list nav items aligned to the right. In my case, I have a total of 4 menu items, with 3 needing to be left-aligned and the last one pushed to the right. <nav class="navbar navbar-expand ...

bootstrap-5

Can someone assist me in successfully incorporating a web font into a template?

After downloading a Wordpress template, I found the font used for h1 and h2 text to be difficult to read due to its slim design - Century Gothic. However, I prefer using Noteworthy, a font available on my Mac. I converted Noteworthy from OTF to web-font st ...

htmlcsswordpressfonts