Generate a series of 5 columns that repeat in Bootstrap 4

I need to figure out how to create a 5 column grid in Bootstrap 4 to display over 100 images. The code I have currently only works if I have exactly 5 items, but what should I do if I have more than that?

Additionally, the grid needs to switch to a 2 column layout on mobile screens.

While there are many similar questions with marked answers, none of them provide an actual solution for when there are more than 5 columns.

To see the issue in action, you can check out this JSFiddle Demo: https://jsfiddle.net/fwg2os0h/

<div class="row">
   <div class="col">
      1
   </div>
   <div class="col">
      2
   </div>
   ...
</div>

Answer №1

Consider setting the min-width to 20% to resolve the issue. This will ensure a minimum width of 20%, allowing for only 5 items per row.

.my-col {
  min-width: 20%;
}

For mobile support, create a custom media query to set min-width: 50%.

@media screen and (max-width: 480px) {
  .my-col {
    min-width: 50%;
  }
}

Demos

Here's how it looks in normal view:

.my-col {
  min-width: 20%;
}
@media screen and (max-width: 480px) {
  .my-col {
    min-width: 50%;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col my-col">
    1
  </div>
  <div class="col my-col">
    2
  </div>
  <div class="col my-col">
    3
  </div>
  <div class="col my-col">
    4
  </div>
  <div class="col my-col">
    5
  </div>
  <div class="col my-col">
    6
  </div>
  <div class="col my-col">
    7
  </div>
  <div class="col my-col">
    8
  </div>
  <div class="col my-col">
    9
  </div>
  <div class="col my-col">
    10
  </div>
</div>

When fewer than 5 items are present, they will be justified automatically.

.my-col {
  min-width: 20%;
}
@media screen and (max-width: 480px) {
  .my-col {
    min-width: 50%;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col my-col">
    1
  </div>
  <div class="col my-col">
    2
  </div>
  <div class="col my-col">
    3
  </div>
  <div class="col my-col">
    4
  </div>
</div>

Answer №2

Implementing a media query to create a column width class at 20% seems like the most straightforward approach...

@media (min-width: 768px){
    .col-sm-five {
        flex: 0 0 20%;
        max-width: 20%;
    }
}


<div class="container">
    <div class="row">
        <div class="col-6 col-sm-five">
            1
        </div>
        <div class="col-6 col-sm-five">
            2
        </div>
        <div class="col-6 col-sm-five">
            3
        </div>
         ..
     </div> 
</div>

Answer №3

For more information on grid systems, take a look at Bootstrap's documentation here.

Experiment with the column classes to achieve your desired layout. Use col-md- for tablets or larger screens, and col-sm- for mobile devices.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-2 col-sm-6">
    1
  </div>
  <div class="col-md-2 col-sm-6">
    2
  </div>
  <div class="col-md-2 col-sm-6">
    3
  </div>
  <div class="col-md-2 col-sm-6">
    4
  </div>
  <div class="col-md-2 col-sm-6">
    5
  </div>
  <div class="col-md-2 col-sm-6">
    6
  </div>
  <div class="col-md-2 col-sm-6">
    7
  </div>
  <div class="col-md-2 col-sm-6">
    8
  </div>
  <div class="col-md-2 col-sm-6">
    9
  </div>
  <div class="col-md-2 col-sm-6">
    10
  </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

What could be the reason for the empty space between the upper and middle cuts?

I am working on these two web pages: http://slacklog.heroku.com/ http://slacklog.heroku.com/signup/date As you can see, there is a gap between the top and middle images as well as the bottom and middle images on both pages. Below is my HTML code: <d ...

Dynamic Bootstrap design with scrollable horizontal and vertical interfaces, complemented by a persistent footer and header

I am currently working on a table and struggling to implement both vertical and horizontal scrolling. I have searched for solutions but haven't found one yet. Can someone please assist me in resolving this issue? Any examples or code snippets would be ...

Override the foundation SASS property for an element identified by its unique ID

Is it possible to override properties for a specific element with an ID using Foundation and Sass? I need to customize the style of a <section id='myid'> element by overriding certain properties: #myid { background: blue; color: whi ...

What is the best way to align a dialog box on a screen?

I'm having an issue with the positioning of my dialog box - it always appears in the upper left corner when I want it to be centered in the middle. Can anyone provide guidance on how to achieve this? Below is my script code: $(function() { $("#c ...

The validation feature in ASP.NET MVC does not seem to be functioning properly while using

I'm struggling to make the bootstrap modal and asp.net mvc validation work together seamlessly. My form is quite complex with validation displayed in a bootstrap modal. However, when I press the submit button, the validation doesn't seem to be fu ...

Steps to fully eliminate the recent action panel from Django's administrative user interface

Is there a way to completely remove the recent action panel from Django admin UI? I have searched extensively but all the information I find is about clearing the data in the panel from the database. What I'm looking for is a way to entirely eliminate ...

How can I create a fixed class="form-row" and align a label and textbox in a horizontal line?

I encountered an issue with my simple bootstrap form that contains the following fields: The Labels and text box are not aligned properly in a straight line. When adjusting the size of the Notes field, it affects the positioning of the other fields causin ...

Implement jQuery Styling using .toggleClass on Freshly-Added DOM Elements

I am currently developing a webpage with a unique "notepad" widget, and I have made some adjustments to the interface: The notepad is essentially an aesthetically modified <ul> where each line on the notepad page is represented by its own <li> ...

The compatibility of Cordova CSS properties varies across different devices

I am currently using the ionic framework to develop my upcoming app. I encountered an issue while trying to set a background SVG image for body. The background displayed perfectly on desktop browsers like Firefox and Chrome, as well as on my Nexus 4 device ...

Creating a static menu icon and implementing a wide dropdown menu in Bootstrap 4

I am facing two major challenges and I am struggling to find solutions for them! Below is the code snippet I am working with: @font-face { font-family: 'yekani'; src: url("../fonts/yekan.ttf"); } @font-face { font-family: 'ye ...

Issue with Bootstrap 4 custom list-group collapse arrow not working as expected

I recently customized a Bootstrap 4 list-group to include collapse functionality. In my customization, I added a CSS caret arrow with the following behavior: 1. Initially pointing down 2. Clicked once, it points up 3. Clicked again, it returns to the init ...

What is the best way to integrate LESS css into a Reactjs application?

I am looking to incorporate LESS into my React app, but I have been unsuccessful in finding a solution through Google. As a newcomer to ReactJs, I lack deep knowledge and would greatly appreciate guidance on installing Less. If anyone is able to help me ...

col-md-4 overlapping on smaller screens

I have a contact section on my website that contains columns. I used col-md-4 as the site is divided into 12 columns, but on mobile devices, they stack on top of each other. How are you today? https://i.sstatic.net/CdKAI.png And I'm trying to keep ...

Can TypeScript be imported into HTML to set a color value or modify a color value from HTML using TypeScript?

I've been working on this code for a couple of days now. Utilizing Angular to develop a web application, I am trying to change the color of certain numbers when they reach a specific value. For example, if num > 45 then color = green, otherwise col ...

Attempting to align two text boxes in the center using the text-align property

I've been attempting to center two text boxes using text-align. Unfortunately, they didn't align properly, as evident in this snapshot: https://gyazo.com/c47f4037ba1ab3abef5833358d94172e. What could have caused this misalignment, and how can it b ...

Is there a method in JavaScript to prevent href="#" from causing a page refresh? This pertains to nyroModal

Is there a way to prevent <herf="#"> from causing a page refresh? I am currently working on improving an older .NET web project that utilizes nyroModal jQuery for displaying lightboxes. However, when I attempt to close the lightbox, nyroMo ...

Ensure that the only element on the page is clickable

How can I check the checkbox without causing an alert to pop up? <div onclick="alert('test')"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. <input type="checkbox"> </div> I attempted using p ...

What are some strategies to prevent the scrollTop function from affecting child elements within an accordion?

On my website, I have incorporated a bootstrap 4 accordion that includes a secondary accordion to display or hide additional content: MainAccordionHeader 1 MainAccordionBody 1 SubAccordionHeader a SubAccordionHeader b SubAccordionBody a SubAccordionB ...

Div containing a centered span with a background

<div> <span style= "background: red; text-align: center;"> There seems to be an issue here </span> </div> The text alignment is not functioning as expected. I need the text to be centered along with the background. https://jsfiddl ...

The site isn't displaying the background image, even though it appears in Dreamweaver

I've encountered an issue with a background image that displays correctly in Dreamweaver but disappears once I upload my website along with the CSS files. Below is my CSS code: .ELSsubbg { background-image: url('../images/NTG_images.jpg&apo ...