Utilize the Bootstrap responsive grid system to ensure that every row is filled with content, creating

I am working with a list of 8 results that I display in a responsive bootstrap grid. However, I want to only show the results that fill up entire rows.

For instance, on a medium-sized screen, it appears as 2 rows with 4 results each. On a smaller screen, it should display as 2 rows with 2 results in each row and the last row with 2 results only. I only want the first two complete rows to be visible.

Is there a way to instruct Bootstrap not to display the incomplete last row?

let frag = '';


for (let i = 0; i < 8; i++) {
frag += `
  <div class="myElem">
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </div>
`
}

$("#myDiv").html(frag);
.myElem {
  position: relative;
  width: 200px !important;
  margin-bottom: 1rem;
}
.content {
  width: 100%;
  height: 100%;
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353263d233d21">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row myDiv" id="myDiv">
  
</div>

javascripthtmlcssbootstrap-5

Answer №1

To start, make sure to modify your for loop and include the appropriate Bootstrap grid classes in your myElem divs. Additionally, utilize media queries within your CSS to hide elements on smaller screens.

let fragment = '';

for (let i = 0; i < 8; i++) {
  fragment += `
    <div class="col-lg-3 col-md-6 col-sm-12 myElem">
      <div class="content">
        <p>Lorem ipsum...</p>
      </div>
    </div>
  `
}

$("#myDiv").html(fragment);
.myElem {
  position: relative;
  margin-bottom: 1rem;
}

.content {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

@media (max-width: 767.98px) {
  .myElem:nth-child(n+5) {
    display: none;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0d2dfdfc4c3c4c2d1c0f0859e809e82">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row myDiv" id="myDiv">
  
</div>

Answer №2

Your frag layout does not include any bootstrap classes, causing it to not align with the grid structure you initially set up with the "row" class. Here is an example of how it would look with bootstrap classes:

let frag = '';

for (let i = 0; i < 8; i++) {
frag += `
  <div class="col-12 col-md-6 col-lg-4 myElem">
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </div>
`
}

$("#myDiv").html(frag);
.myElem {
  margin-bottom: 1rem;
}

.content {
  width: 100%;
  height: 100%;
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f4c5d6d18031d031f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row myDiv" id="myDiv">

</div>

By using Bootstrap display classes like d-md-none, you can control the visibility of columns within a row.

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 is the best way to obtain the final visible element using jQuery?

Could you please check out the following link: http://jsfiddle.net/SHfz4/ All of the blue boxes are technically visible, so I can't use the code $('.row .inner .item:visible:last'); as it will always return box 27. Some boxes may not be v ...

javascriptjquery

Tips for transmitting an array of Objects to AngularJS

Summary I'm curious about how I can successfully send the following array of objects from NodeJS to an AngularJS app. var players = [ Footer: { username: 'Footer', hp: 200, exp: 1 }, Barter: { username: 'Barter', hp: 200, e ...

javascriptarraysangularjsnode.js

What is the best way to handle a JSON arraylist in a Node.js environment?

Looking to extract and manipulate a specific data format in Node.js? Here is the data structure: {"orderSummary":[ { "name":"Wine", "ProductPrice":"500", "ProductQuantity":"2", "ProductCost":"1000", "SellerId":"2" },{ ...

javascriptjsonnode.js

Ways to determine the total number of npm packages installed, excluding development dependencies

Is there a specific NPM command I can run from the CLI to count only the installed NPM Modules in my package that are not Dev Dependencies? When I use npm ls, it lists all packages without distinguishing between regular dependencies and DevDependencies. ...

javascriptnode.jsnpmnpm-installnode-modules

Vue.js: Incorporating a client-side restful router using vue-router and a state manager

Trying to set up a client-side restful api with vue.js and vue-router where route params can be utilized to showcase a subset of a store's data into components. All the necessary data for the client is loaded into the store during initialization (not ...

javascriptvue.jsvue-router

Can passing parameters between nested map functions cause any issues?

While attempting to navigate to a page in reactjs and pass parameters using the useNavigate hook, I encounter an unexpected token error as soon as I include the navigation within the anchor tag. <a onClick={() ={ ...

javascripthtmlreactjs

How can I configure CRA to automatically append a slash to the end of URLs?

When I install CRA using npx create-react-app app-name and then run yarn start, the development server will by default start at http://localhost:9000. The issue arises when I try to copy the URL from the browser's address bar to my CORS middleware in ...

javascriptreactjscreate-react-app

Using Jquery Simplyscroll to incorporate images on both the left and right side within a container or clip

I am currently utilizing Jquery Simplyscroll (http://logicbox.net/jquery/simplyscroll/) and I am seeking a way to incorporate a faded png image on both the left and right sides to prevent my images from appearing "cut off" while sliding through. Below is ...

jquerycss

Using PHP script to retrieve MySQL table values and dynamically update a live graph in a Javascript function

I've been researching similar issues for quite some time now, but to no avail. Currently, I'm utilizing Highcharts to update a graph every 3 seconds with the latest entry from a specific MySQL table. I am referring to the example Javascript code ...

javascriptphpmysqlhighchartslivegraph

Focus automatically on an input component when the value in the Vuex store is updated in Vue

Here's the code snippet from my component: //template <v-select ref='ItemSearchSelect' :options="options"></v-select> ... //script created: function () { this.$store.subscribe((setFocusSearch, state) => { ...

javascriptvue.jsvuex

Removing a dynamic component in Angular

Utilizing Angular dynamic components, I have successfully implemented a system to display toaster notifications through the creation of dynamic components. To achieve this, I have utilized the following: - ComponentFactoryResolve - EmbeddedViewRef - Ap ...

javascriptangulartypescriptmodule

"An error has occurred in the file system, make sure to handle it when

I am encountering an issue with submitting a form using jQuery's ajaxSubmit() function. The problem arises when the file selected in the form is renamed, deleted, or made inaccessible before submission, leading to potential discrepancies in whether th ...

jqueryhtmljspfile-uploadstruts2

Navigating between socket.io and express using while loops

Currently, I am running an express app with socket.io on my raspberry pi to control an LED panel. The panel is being driven by a while loop that updates the pixels. However, I am looking for a way to modify the parameters of this loop or even switch to a d ...

javascriptnode.jsexpresswhile-loopsocket.io

Validating multiple fields that are added dynamically using jQuery

I am facing an issue with form validation using jQuery. The problem is that when one field is valid, the form gets submitted automatically. Here is a link to my code: http://jsfiddle.net/cvL0ymu7/. How can I ensure that all fields are validated before subm ...

javascriptjqueryhtml

The MuiPrivateTabScrollButton alters the dimensions and flexibility properties using CSS

I have been facing a challenge with overwriting the css of MuiPrivateTabScrollButton. Since this class is generated from material ui, I am unable to successfully overwrite it. Despite debugging and trying various fixes such as adding border colors, I still ...

htmlcssreactjsmaterial-ui

What is the method for selecting the element currently under the mouse cursor?

Is it possible to change the color of all elements you hover over using plain Javascript without jQuery? HTML <ul> <li></li> <li></li> <li></li> </ul> JavaScript (function() { var item = ...

javascripthtml

Verify whether the element retains the mouseenter event after a specified delay

I recently implemented some blocks with a mouseenter and mouseleave event. <button onMouseEnter={this.MouseEnter}>hover</button> MouseEnter(e) { setTimeout(() => { // Checking if the mouse is still on this element // Pe ...

javascriptreactjsmouseevent

Tweaking the placement of the dropdown menu in the subnavigation area

Just getting back into coding after a long hiatus - I've dabbled in the past but it's been about 6 years since I've worked with any code. Currently, I'm working on replicating a website for practice. I have created a nav bar and a drop ...

htmlcssmenudropdownstyling

Guide to efficiently utilizing flex to horizontally position two elements next to each other in a Material UI and ReactJS environment

I have successfully achieved side-by-side components of two cards from Material-UI. However, I am facing an issue when expanding one of the cards. The problem is that Card 1 automatically expands to match the size of Card 2 when Card 2 is expanded, even th ...

javascripthtmlreactjsflexboxmaterial-ui

Can you explain the contrast between EJS's render() function and renderFile() method?

const express = require('express'); const ejs = require('ejs'); const app = express(); app.engine('ejs', ejs.renderFile); app.get('/', (req, res) => { res.render('index.ejs', { ...

javascriptnode.jsexpressejs