What is the best way to stack columns on small screens in a single row?

While utilizing the default bootstrap col classes, I noticed that when I reduce the grid to mobile size, the columns span the entire width of the row. This results in a long vertical list of items on mobile devices, even though there is sufficient space on the horizontal axis for more items to fit.

For my personal website, I am creating a course section where a grid layout of the courses we plan to offer is displayed. Below, I explain the issue and what I have attempted so far.

Here is the HTML code I am using:

  <div class="container courses-container">
        <div class="row justify-content-center courses-header no-gutters">
          <div class="col-1">
            <h2>Courses</h2>
          </div>
        </div>
        <div class="row courses">
          <div class="col-xs-1 col-md-2 course-item">
            <div >
              <img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid"  >
            </div>
          </div>
          ... (Additional course items follow)
        </div>
      </div>

And here is the CSS code:

.courses-header {
    margin: 2em 0;
}

.carousel-container, .courses-container {
  padding: 0;
}

@media (min-width:  720px) {
  .courses {
  margin: 3em 0;
  }
}

@media only screen and (max-width: 767px) {
  .course-item {
    width: 33%;
  }
}

The last media query at the 767px breakpoint addresses the issue by adjusting the width of each column to 33% on smaller screens. However, without this adjustment, each column spans across one line, creating a layout issue. It seems like there should be a simpler solution to ensure the grid displays correctly on smaller screens.

On larger screens, the full layout consists of 2 rows with 6 columns each. This layout is not feasible on smaller screens due to its width. When resizing the browser window to a smaller size, the columns should break into more rows vertically, maintaining at least 2 or 3 items side by side.

The objective is for the items to gracefully transition into more rows on smaller screens while keeping multiple columns together. The smaller the screen, the fewer items should appear on each line, but there should always be a minimum of 2 or 3 items side by side.

Answer №1

To apply the class col-xs-2 to every

<div class="col-xs-1 col-md-2 course-item">

Simply delete col-xs-1 and insert col-xs-2

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

Tips for creating a two-tier selection filter system

I'm having an issue with this code. My objective is to create two filters for this table. The select element with id="myInput" should determine which rows appear in the table and apply the first filter. Here is the JavaScript code: function myFunctio ...

The focus of the input is lost when the value is being edited, specifically in the case where ngFor and ng

I'm facing an issue with a simple list that binds two-way to a parameter hero in my hero.component.ts. Whenever I begin typing in the input field, it seems to lose focus and I have to click on it again. How can I ensure that users are able to edit th ...

Issues with Image and Product Name Rendering in Outlook for Windows

Having a bit of trouble with Outlook PC not cooperating with my product images and names. While other email clients show the product names below the images as intended, Outlook PC is causing the names to appear next to the images like this - Product name ...

What are the steps to develop an ElectronJS application that displays "Hello world!" in the console after a button click?

Can anyone offer a helping hand? From the depths of imagination to the realms never before conceived by humans. Check out this HTML snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hell ...

Using CSS to Showcase the Art Gallery Page

This is my unique gallery display: https://i.stack.imgur.com/RddD8.png Here is the look I am going for https://i.stack.imgur.com/kuOye.png I want to showcase images in a slightly messy yet awesome way However, I encounter an issue when some images have ...

Create a new div element in your HTML structure that is not currently defined in your Sass/CSS

Currently, I am developing a React Component that includes a DatePicker feature using PrimeReact's Calendar component. I have a specific requirement to display an arrow on top of the datepicker when it pops up. You can view the desired layout in the ...

Showing user data in a div using JavaScript ajax without the use of jQuery

Recently diving into the world of javascript and ajax, I find myself tinkering with code on jsfiddle. My current goal is to populate a list with usernames and emails upon form submission. Upon submitting the form, an error message pops up: {"error":"key m ...

Collect information from forms and save it to a mobile phone number

Is it possible to forward form field details to a cell phone number via text message? Here is the code I currently have for sending form data to an email address. If any adjustments need to be made, please provide instructions. <?php if(isset($_POST[ ...

The min-vh-50 class in Bootstrap CSS is not working as anticipated

I need to create two rows containing buttons in each row (10 buttons each). My goal is to center these two rows on the page while ensuring they are not too close together. To achieve this, I used the min-vh-50 class on both rows to align them in the upper ...

Trying to reduce the cursor box area within an A link containing a div box

My communication skills are lacking, so I have included an image to better illustrate my issue. Here is the problem .body { text-align: center; display: flex; flex-direction: column; align-items: center; } .flex-container { display: flex; ...

Issue with Bootstrap tab display of content

I'm having trouble with the tabs in my page. When I click on each tab, the content doesn't display correctly. Here is my code: <div class="w470px exam" style="border: 1px solid #ddd; margin-top: 30px;"> <ul id="myTab" class="nav nav ...

Guide to defining a conditional statement in a Nuxt.js application

I am working on displaying data from the Wordpress API in a Nuxt.js project. I am trying to organize the data by category, for example where ('post.category ', '=', 'categoryName '). Can anyone help me with the syntax in Vue.j ...

Pick out grouped objects without the use of Javascript

I am looking to design a single page where the display of categorized items changes based on user selection. Ideally, I want this to be chapter/hash (:target) dependent, but checkboxes influencing state would also work. As an experiment, I am trying to ac ...

Angular not functioning properly with alert windows

Here is a snippet of code where I am attempting to create an alert when a button is clicked: <!DOCTYPE html> <html> <head> <title></title> </head> <body ng-app> <button ng-click="alert('test')"> ...

Submitting form data from an HTML page to a specific Skype account is a straightforward process that can be easily accomplished

[Situation] A new feature is being considered for a feedback form that would allow users to input their name, email address, subject, and message. A unique option being proposed is the ability for users to submit their messages via Skype. If this option is ...

Launching a Dialog in Angular upon selection of an option

Within my application, I have a mat-form-field that includes a mat-option. My goal is for a dialog to open whenever I select an element from the mat-option. However, at the moment, nothing happens when I make a selection. What steps should I take to resolv ...

Is it causing issues having the same version of jQuery included multiple times?

Within my HTML file, referred to as x.html, I've included other HTML files as well. In x.html, I have integrated the jquery library version 1.4.1. It seems that this same version of jquery is also being included from the other HTML files. Even though ...

Designing HTML columns to adapt to different screen resolutions

Looking for a clever jQuery or CSS trick to dynamically adjust the number of columns in a website layout based on the size of the viewport. For instance, an iPhone display would have 1 column, while an 800x600 screen would have 2, and a 1024x768 screen wou ...

Expansive picture within a Bootstrap container

How can I create a wide image within a Bootstrap container? <div class="container-fluid"> <div class="container"> <img data-layout="wide" src="big-image.jpg" alt="Big image" class="embedded_image"> </div> </div& ...

How can you center the body of a webpage while using the zoom in and zoom out features in HTML5?

What is the best way to maintain body alignment while zooming in and out on a web page? <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> body { font-family: 'Merriweather Sans&apos ...