Issues with Bootstrap columns not displaying correctly in versions 5 with col-sm-6 and col-md-4

When using Bootstrap 5, the col-sm-6 and col-sm-4 classes do not function correctly on small and medium screens, but work fine on large screens. The goal is to display 2 images on small screens and 3 images on medium screens. However, only 4 images are displayed properly on large screens, causing an issue on smaller screens. I am new to Bootstrap and would appreciate any help in resolving this problem.

For visual reference, please see the attached images: https://i.sstatic.net/A0HMF.png.

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

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

 <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                     <div class="carousel-inner">
                        [content removed for brevity]
                     </div>
            </div>
        </div>
    </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Answer №1

To set the visibility of your specific div, use the following conditional lines: 

d-none d-lg-block d-xl-block d-md-none col-6 col-lg-3 col-xl-3

d-none d-lg-block d-xl-block d-md-block col-md-4 col-lg-3 col-xl-3

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <div class="d-none d-lg-block d-xl-block d-md-none col-6 col-lg-3 col-xl-3">
                                <div class="single-box">
                                    <div class="img-area"><img src="assets/images/img.jfif"></div>
                                    <div class="img-text">
                                        <h2>Person One</h2>
                                        <p>Some representative placeholder content for the third slide.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="d-none d-lg-block d-xl-block d-md-block col-md-4 col-lg-3 col-xl-3">
                                <div class="single-box">
                                    <div class="img-area"><img src="assets/images/img.jfif"></div>
                                    <div class="img-text">
                                        <h2>Person Two</h2>
                                        <p>Some representative placeholder content for the third slide.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-lg-3">
                                <div class="single-box">
                                    <div class="img-area"><img src="assets/images/img.jfif"></div>
                                    <div class="img-text">
                                        <h2>Person Three</h2>
                                        <p>Some representative placeholder content for the third slide.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-lg-3">
                                <div class="single-box">
                                    <div class="img-area"><img src="assets/images/img.jfif"></div>
                                    <div class="img-text">
                                        <h2>Person Three</h2>
                                        <p>Some representative placeholder content for the third slide.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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

Is there a way in PHP to retrieve database values and display them in HTML text boxes when a button is clicked, all without

Is there a way to dynamically fetch values from a database and display them in text boxes without the need to refresh the page? Here is the PHP code snippet I have been working on: <?php include 'Connection.php'; $sql = mysqli_query($conn ...

javascriptphpjqueryhtmlajax

Ways to stop a JS plugin affecting HTML anchors and preventing them from automatically scrolling to the top

My friend is working on a website and he's using a plugin called Flip Lightbox. The basic functionality of the plugin is that when you click on an image, it flips over and pops out as a lightbox. Everything works fine, however, if you scroll down the ...

javascriptjqueryhtmlcss

Making a div equal in height to an image

What I currently have is like this... https://i.stack.imgur.com/7FeSi.png However, this is what I am aiming for. https://i.stack.imgur.com/fn9m0.png The image dimensions are set up as follows... #content img{ padding: 3%; width: 60%; height: 50%; floa ...

htmlcssimage

How to access the api variable in JavaScript

When attempting to retrieve variables from an API object, I encountered the obstacle of them being nested inside another object named "0" in this particular case. Here is a screenshot from the console: enter image description here Below is the JavaScrip ...

javascripthtmlapijavascript-objectsconsole.log

Creating a jQuery multiple image preview feature is a simple and effective way to

Looking to implement a single image upload preview function in jQuery? Want to modify it to allow for multiple image uploads with separate boxes? Check out the HTML script below. <!DOCTYPE html> <html> <head> <title></title> ...

javascriptjqueryhtmlcssajax

Vue lightweight loading CSS error: "Undefined property 'denominator'"

Within my project, I have a style.less file that I am loading in the following manner: import "./styles/styles.less"; The contents of the file are structured as shown below. I had to encapsulate the styles to prevent them from affecting the rest of the p ...

twitter-bootstrapvue.jsnpmvue-cli

Manipulating Width in CSS

I am facing a challenge with the HTML code below where an automated software inserts the initial CSS style g2f0 <div class="linelevel row"> <div class="g2f0 col-sm-6 form-group"> <label for="name">Name</label> < ...

jqueryhtmlcsstwitter-bootstrap

Struggling with applying mixins

Is it possible to select only the top border using this mixin? Currently, I only need a top border but would like to have the option to use others in the future. Using separate mixins for each side of the border seems inefficient. .bordered(@top-width: 1 ...

csslessmixins

Tips for managing responsive font sizes as screen size decreases

Hey there, I could really use some assistance with a new website I've been working on. While I have experience building Joomla sites for the past 6 months, this is my first attempt at making a responsive site using media queries. You can check out th ...

htmlcssresponsive-designjoomla3.0

What's the reason for the icon not updating in the responsive mode?

I am venturing into the world of responsive web design for the first time. My aim is to create a website menu that drops down when the menu icon is clicked, using the onclick command in JavaScript. However, upon inspecting my browser, I noticed an uncaught ...

javascripthtmlcss

When applying multiple classes with NgClass, use the property name instead of the class content

I am facing a challenge trying to add multiple classes (in this case 2) to a custom component that includes a list item component from MDBootstrap: App.module.ts <custom-list-component size="w-50"> <custom-list-item-component href="#">lis ...

cssangularng-classmdbootstrap

Is it detrimental to my search engine ranking if I utilize CSS display:none?

Imagine having valuable content that is initially hidden with CSS, and then using javascript to reveal it only when the user clicks on certain links. Even users without javascript enabled can access this content by following the links to a new page where i ...

javascriptcssseo

Hide button for the last input form to dynamically remove in jQuery

At first, I hide the remove button when there is only one form. However, if there are multiple forms and the user deletes all of them, I want the last form to remain visible and not be deleted. Can someone assist with this issue? Here is my code: <! ...

javascriptjqueryhtml

Is there a way to modify the edit button to become a save button and include a cancel button?

Is there a way to toggle between an edit button and a save button, along with a cancel option? $('#edit').click(function() { $(this).hide(); $('#save, #cancel').show(); }); $('#cancel').click(function() { $('#ed ...

javascriptjqueryhtml

Adding data to the SharePoint RichText Control using the WinForms WebBrowser Control

I am struggling to modify the content of an SP Rich Text field using the WinForms web browser control. While changing the values of other controls is straightforward, I have encountered difficulties with Rich Text fields. I found some suggestions on this b ...

javascripthtmlsharepointbrowsercontrols

Activate Bootstrap 4 modal screen by utilizing ajaxStart and ajaxStop functionality

How can I trigger the modal screen to appear during ajaxStart and disappear during ajaxStop events? Despite trying various solutions found on Stack Overflow, I am still unable to achieve the desired functionality. Below is the Bootstrap 4 modal code snip ...

jquerybootstrap-4bootstrap-modal

Node.js file successfully establishes a database connection, but script tags fail to do so

Having some trouble connecting to my MongoDB database (or MongoLab server). It works perfectly fine when the code is in the name.js file, but for some reason it fails when placed inside <script> tags within an HTML file. My folder contains only thes ...

javascripthtmlnode.jsmongodbmlab

Show blank value if there are no search results, along with an additional menu option

I am currently working on a Typeahead feature with a customized menu using the renderMenu method. In this setup, I have added 2 custom menu items at the bottom - one divider and a button. An issue arises when there are no search results. If I do not inclu ...

javascriptreactjstypescripttwitter-bootstrapreact-bootstrap-typeahead

Struggling to align images side by side using HTML and CSS along with figcaption and buttons

Adding buttons below images on my webpage is proving to be a bit challenging. I tried using the figcaption tag, but it resulted in the images stacking on top of each other instead of side by side. **My HTML:** <section class="mostpurch"> ...

javascripthtmlcss

Utilize the splice function when resizing the window based on specific breakpoints

On a series of div elements, I have implemented some JS/jQuery code that organizes them by wrapping every three elements in a container with the class .each-row. <div class="element"></div> <div class="element"></div> <div class ...

javascriptjqueryhtmlcss