Utilize Bootstrap to display 8 columns side by side on Desktop screens, while on mobile, only display 3 columns

To display logos in 8 columns using Bootstrap 5, I implemented the following code:

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

<div class="row gy-3 px-5 pt-4">
          <div class="col-md-6 col-12">
            <div class="row gy-3">
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
            </div>
          </div>
          <div class="col-md-6 col-12">
            <div class="row gy-3">
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
            </div>
          </div>
        </div>

Now, I am looking to create a row with 3 columns for each logo on mobile devices. I need a way to eliminate the second row for small devices, but I am unsure how to accomplish this.

htmlcssbootstrap-5

Answer №1

Instead of using two rows and cols, you can achieve the same layout in a single row and adjust the xs and sm classes based on your screen size.

<div class="row gy-3">
  <div class="col col-xs-4">
    1
  </div>
  <div class="col col-xs-4">
    2
  </div>
  <div class="col  col-xs-4">
    3
  </div>
  <div class="col  col-xs-4">
    4
  </div>
  <div class="col  col-xs-4">
    5
  </div>
  <div class="col  col-xs-4">
    6
  </div>
  <div class="col col-xs-4">
    7
  </div>
  <div class="col col-xs-4">
    8
  </div>
</div>

Answer №2

To achieve this layout, utilize the Breakpoints feature.

For medium screens and larger, apply Justify content. For small screens, use col-sm-4:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63010c0c17101711021323564d534d51">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row justify-content-md-between">
  <div class="col-md-auto col-sm-4">Image 1</div>
  <div class="col-md-auto col-sm-4">Image 2</div>
  <div class="col-md-auto col-sm-4">Image 3</div>
  <div class="col-md-auto col-sm-4">Image 4</div>
  <div class="col-md-auto col-sm-4">Image 5</div>
  <div class="col-md-auto col-sm-4">Image 6</div>
  <div class="col-md-auto col-sm-4">Image 7</div>
  <div class="col-md-auto col-sm-4">Image 8</div>
</div>

Answer №3

When making adjustments, remember that "sm" is typically used for small devices such as tablets, while "col" is intended for extra small devices.

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

I would like some clarification on how bookmarking works

As I encountered a puzzling issue recently, I realize that I may need some assistance to navigate through it. It involves bookmarking some links for future reference. I attempted to search for answers online but found myself even more perplexed. Does boo ...

html

The arrow icon that I included in my bootstrap project seems to have disappeared from my view

While trying to enhance my footer, I attempted to include an arrow-up-circle icon. However, after adding the code, the icon doesn't appear. Here is the html snippet I used: <html> <head> <link href="https://cd ...

htmlcssbootstrap-4bootstrap-5

Utilizing Skeleton to create a cropped text button on an iPhone

I am currently using Skeleton for my simple CSS needs. While it works fine on desktop, I have noticed that on an iPhone, the text in my button gets cropped as shown in the picture. https://i.stack.imgur.com/EYo2P.png Below is the HTML code I'm using ...

htmlcssskeleton-css-boilerplate

Canvas in the off state has been removed

My goal is to create a basic JavaScript library that includes rotating, translating, and scaling the canvas. One issue I am facing is when I rotate the canvas, half of the content ends up getting deleted because the center of rotation is set at (0, 0). I ...

javascripthtmlcanvas

Mobile device tab animation

I am facing a challenge with a tab containing four items that are vertically stacked on mobile devices. My goal is to animate the clicked li element to move to the bottom of the stack. After experimenting with CSS animations, I was able to achieve this eff ...

jquerycss

Is there a way to adjust the background color of the clicked tab with divs and revert the others back to their original color?

<span class="row top-bar-left align-items-center" style="width: 80%; float:left"> <div tabindex="1" class="link tab" routerLink="details" routerLinkActive="active" [qu ...

htmlcssangular

Assign the chosen option value to a PHP variable for storage

Is there a way to assign the selected value of a select input to a php variable? I'm trying to take the value that is selected in a select box and store it in a php variable, then echo out the selected option value. However, I am having trouble access ...

phpjqueryhtml

What could be the reason my bootstrap cards are stacking vertically instead of being placed horizontally next to each other?

My Bootstrap cards are not aligning side by side and I'm having trouble locating the error in my code. I'm working with Django and HTML. {% extends 'base.html' %} <div> {% block content %} <h1>Team Members<h1& ...

htmldjangobootstrap-4

Achieving a partial fullscreen effect with Bootstrap's modal-fullscreen

In my search for creating fullscreen Bootstrap modals that didn't take up the entire screen, I wanted to avoid giving the impression that the site had navigated to a new page. After exploring different options, I decided to modify the existing modal-f ...

bootstrap-modalbootstrap-5bootstrap5-modal

How can I modify the value of a CSS animation rule in AngularJS?

I am looking to dynamically change the value assigned to stroke-dashoffset based on a custom input. @-webkit-keyframes donut-chart-1 { to { stroke-dashoffset: 100; } } @keyframes donut-chart-1 { to { stroke-d ...

javascriptangularjscsscss-animations

The second entry is not being styled by CSS, is there an issue with the code in this section?

I am facing a challenge while trying to set the same background image for two div elements: .abc { background: url('images/autogen.png') no-repeat 0px -133px; width: 256px; height: 256px; }; .def { background: url('images/autogen.png' ...

htmlcss

What steps should be followed to display an HTML page within an HTML div?

The question I have is a bit misleading, as I'm not looking for guidance on how to open an HTML document in a div. Rather, I am currently facing an issue where I am unable to replace the HTML file that I have already placed in a div. Initially, I pla ...

javascriptjqueryhtmlajax

Tips for transferring a variable from a hyperlink to a Flask application

Here is a snippet of my Python Flask code: @app.route('/ques/<string:idd>',methods=['GET', 'POST']) def ques(idd): print(id) And here is the accompanying Javascript code: var counts = {{ test|tojson }}; var text = ...

javascriptpythonhtmlflask

Guide on Creating a Popup Window When the User's Cursor Moves Beyond the Webpage Boundary

Imagine you're browsing a webpage and as you move your mouse towards the "back" button, a window pops up within the webpage area, displaying important information. This is a clever way to grab the user's attention before they leave the website. B ...

javascriptjqueryhtmlcss

The span is unresponsive

When focusing on an input or checking its validity, the span should move up but it's not responding to any styles. <div class="login"> <span class="logtxt">Username or email</span> <input type=& ...

htmlcss

Adjust the position of a child element to be just outside the boundaries of its parent element using CSS

I am facing an issue with 2 nested divs in my HTML code. The design requires the inner div to appear "on top of" the outer div, like this: (source: examplewebsite.com) Although I have applied CSS to both elements, including a negative top margin on t ...

htmlcsspositioning

Issue with nivo-lightbox not opening upon clicking image

I have diligently followed the instructions to set up this JavaScript plugin, but unfortunately it doesn't seem to be functioning properly. The plugin I'm using can be found here: All the links to the CSS, theme, and JavaScript files are display ...

javascriptcsslightboxnivo-slider

Using Angular Ionic 3 to apply the disabled attribute

I have a situation in my main.ts where I need to disable a textarea in the HTML if an object is initialized. I've attempted various methods like: ng-attr-disabled="!myObj"; ng-attr-disabled="{myObj!= null}"; and also directly using ng-disabled. I e ...

htmlangulartypescriptionic-frameworkionic3

menu roll-up in an upward direction

Is there a way to implement the CSS effects mentioned in this article to make the menu roll up instead of down? Learn How to Create a Menu that Rolls Up Using CSS! ...

htmlcssdrop-down-menu

Transforming an image by masking it to create a binocular-like view

I've been experimenting with creating a unique visual effect where an image is revealed through a binocular-shaped element that follows the mouse cursor. The circular part of the element moves along with the cursor, unveiling parts of the image as it ...

jquerycsssvgmasking