Tips for arranging two columns and two rows on mobile using Bootstrap 5

I'm currently using bootstrap 5, and I need to display 2 columns and 2 rows on my mobile device, but it's only showing 1 row.

I have two PSDs for this layout in desktop mode:

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

And for mobile mode:

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

My goal with Bootstrap 5 is to have 6 columns in desktop mode and 2 columns in mobile mode. In the mobile view (which consists of 2 columns), I also want to implement horizontal scrolling for additional content.

<div class="container">
    <div class="row" id="content">
        <div class="col-lg-2 col-6 mb-3 text-center">
            <i class="fa-solid fa-circle"></i>
            <h5>General</h5>
        </div>
        <div class="col-lg-2 col-6 mb-3 text-center">
            <i class="fa-solid fa-circle"></i>
            <h5>Dental</h5>
        </div>
        <div class="col-lg-2 col-6 mb-3 text-center">
            <i class="fa-solid fa-circle"></i>
            <h5>Radiology</h5>
        </div>
        <div class="col-lg-2 col-6 mb-3 text-center">
            <i class="fa-solid fa-circle"></i>
            <h5>Neurology</h5>
        </div>
        <div class="col-lg-2 col-6 mb-3 text-center">
            <i class="fa-solid fa-circle"></i>
            <h5>Ophthalmology</h5>
        </div>
        <div class="col-lg-2 col-6 mb-3 text-center">
            <i class="fa-solid fa-circle"></i>
            <h5>Nutrition</h5>
        </div>
        <div class="col-lg-2 col-6 mb-3 text-center">
            <i class="fa-solid fa-circle"></i>
            <h5>Pediatrics</h5>
        </div>
        <div class="col-lg-2 col-6 mb-3 text-center">
            <i class="fa-solid fa-circle"></i>
            <h5>Neurology</h5>
        </div>
        <div class="col-lg-2 col-6 mb-3 text-center">
            <i class="fa-solid fa-circle"></i>
            <h5>Radiology</h5>
        </div>
        <div class="col-lg-2 col-6 mb-3 text-center">
            <i class="fa-solid fa-circle"></i>
            <h5>Children's Health</h5>
        </div>
        <div class="col-lg-2 col-6 mb-3 text-center">
            <i class="fa-solid fa-circle"></i>
            <h5>Neurology</h5>
        </div>
        <div class="col-lg-2 col-6 mb-3 text-center">
            <i class="fa-solid fa-circle"></i>
            <h5>All Specialties</h5>
        </div>
    </div>
</div>
htmlcssbootstrap-5

Answer №1

    <div class="container">
    <div class="row row-cols-1 row-cols-md-2">
        <div class="col">
            <div class="card custom-card">
                <div class="card-body">

                    Item A
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card custom-card">
                <div class="card-body">:
                    
                    Item B
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card custom-card">
                <div class="card-body">
                    
                    Item C
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card custom-card">
                <div class="card-body">:
                   
                    Item D
                </div>
            </div>
        </div>
    </div>
</div>

Give it a shot!

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

How to position elements within a content block in HTML with a CSS stylesheet

Looking for guidance on how to align text and image within a block in HTML using only a .css file. Specifically, I need the text to be on the left side and the image on the right. Since I am new to CSS, I could use some direction on where to start. Any t ...

htmlcss

Increase the dropdown size without altering the dimensions of the container

I have a dropdown menu enclosed in a div with a vibrant yellow background. Take a look at the code on Plunker here. Upon clicking the dropdown button, the list expands and the container's height increases as well. The background color of the dropdown ...

htmlcss

The menu item is having trouble aligning to the right side

Hello, I am currently working on developing a website menu for a project and I am facing an issue with aligning the "Login" Menu item to the right side. Any assistance in resolving this alignment issue would be greatly appreciated. I am also willing to pro ...

phphtmlcssmenu

Row within table extending beyond boundaries of parent div table

Is there a way to make a table row wider than its parent table? I want the button at the bottom to extend beyond the borders of the table. https://i.sstatic.net/VH0HP.png Do I need to abandon the table styling to achieve this effect? Check out this JsF ...

htmlcss

Having trouble with the PHP code for sending an email using a basic form

This is an example from my HTML page. <form method="POST" action="sm.php"> <p>Login</p><br /> Username: <input type="text" size="10" maxlength="50" name="un"> <br /> Password: <input type="text" size="10 ...

phphtml

Is there a way for me to retrieve the value from an input, round it up to the nearest even number, and assign it to a new variable?

I am working on a project that involves two text boxes and a drop-down menu for providing rates. The values in the text boxes are given as inches. I want these inputs to be taken as values, rounded up to the next even number, and then set as variables. How ...

javascripthtml

hint.css guide for inserting line breaks into hints

Is there a way to manually insert line breaks in Hint.css hints? I've attempted using <br>, \n,, and various combinations of them. I've also experimented with the following CSS properties: white-space: normal; word-wrap: break-word; ...

htmlcssline-breakshint

Creating a masonry layout with uniform row heights

I am trying to achieve a masonry style layout for these cards in Bootstrap. The current setup has columns with the same height, but I want them to have fluid height and consistent margin spacing like the blue line shown below. I attempted to use .card-colu ...

csstwitter-bootstrap

Turn off scrolling for the body content without removing the scrollbar visibility

Whenever I click a thumbnail, a div overlay box appears on top: .view-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; overflow-y:scroll; background-color:rgba(0,0,0,0.7); z-index:999; } Some browsers with non-f ...

javascriptjqueryhtmlcss

Loading Ajax dropdown with a preselected value in the dropdown menu

There are two pages, each containing a form. Page 1 - Form A) Includes a dropdown menu (with values populated from the database) and a continue button. <select name="form[formA][]" id="dropdown1"> <option value="1">Option 01</opti ...

javascriptphpjqueryhtmlajax

Troubleshooting the Issue with WordPress Image Customization Settings

I'm in the process of designing a Wordpress theme, but I've hit a roadblock. I'm utilizing the theme customize page to upload both a main logo and a mobile logo, which should then be displayed on the page. Initially, it was working for about ...

phphtmlwordpresscustomization

transfer information from a modifiable grid in a jsp file to a servlet

As a beginner in JSP's and servlets, I am tasked with allowing users to input questions into an HTML table and then passing that data to a servlet. The number of questions can vary, so I'm looking for a more efficient way to pass this data rather ...

javahtmljspservlets

Here's a unique version: "Steps for replacing an outdated chart with a new one using Chart.js and

Is there a way to remove an old chart when the user clicks a button to retrieve a new chart? I understand that the existing chart needs to be destroyed before a new one is generated, but currently, the code does not support destroying non-globally create ...

javascripthtmlvue.jschart.js

Unveiling the Mystery: Why YUI-3 Grids & Google Chrome Cause Overlapping Texts

Although I'm not well-versed in UI design, I find myself having to work on some CSS for a side project. Currently, I am utilizing YUI-3 files such as grids, reset, and fonts, all version 3.9.1. The main issue I am encountering is that the text inside ...

cssgoogle-chromeyui

The subdirectory containing the Rails assets is causing loading issues in the production environment

My event CSS is currently located in app/assets/stylesheets/pages/events.scss. Surprisingly, everything looks perfect in development mode with all the assets loading properly. However, the real issue arises when I switch to production as it seems like thes ...

cssruby-on-railsproduction-environment

Using Angular and Typescript to Submit a Post Request

I am working on a basic Angular and Typescript page that consists of just one button and one text field. My goal is to send a POST request to a specific link containing the input from the text field. Here is my button HTML: <a class="button-size"> ...

htmlangulartypescriptfrontend

Include an additional icon without replacing the existing one on the mouse cursor

I am looking for a way to enhance the user experience by adding an icon that appears when hovering over an HTML element, serving as a subtle hint that the user can right-click. Instead of replacing the default cursor, which varies across platforms and doe ...

javascripthtmlcss

To fill the remaining white space, add an underline after the last line of text

I'm struggling to implement a SCSS/CSS styling concept where I need to add a solid line before or after the last line of a heading. The challenge is that the width of the last line varies based on the screen size. I am open to any suggestions. Here&a ...

htmlcssreactjssassnext.js

What could be causing jQuery animate to malfunction on mobile devices when a viewport is present?

Everything seems to be working fine on my desktop webpage, but when I try it on mobile, there is no scroll... $("HTML, BODY").animate({ scrollTop: 500 }, 1000); This post suggests that mobile devices may not scroll on the body, but on the vi ...

javascriptjquerycssmobile

What is the proper way to showcase an element positioned absolutely within a Dialog window using material-ui?

My current project involves using React, TypeScript, StyledComponent, and MaterialUI. I am looking to add a button to a Dialog window (material-ui) similar to the design shown in this example image. However, when I apply position: absolute to the button, ...

cssreactjsmaterial-ui