Question 43949 in Html Question posted in
Some basic documentation can be found here.

Bootstrap responsive grid – to fill in only full rows always – Html

I have a list of 8 results that I render in the responsive bootstrap grid. I would like it to cut the results that do not fill in the whole row.

So, for example, right now, on a middle-size screen, it is shown as 2 rows with 4 results each, but on the smaller screen, it would be 2 rows with 2 results in each and the last row with 2 only. I would like only the first two full rows to be displayed.

How can I tell the bootstrap not to show the 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

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

2

Answers


  1. 0

    First, you need to update your for loop and add the appropriate Bootstrap grid classes to your myElem divs. Then, you can use media queries in your CSS to hide the elements on smaller screens.

    let frag = '';

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

$("#myDiv").html(frag);
    .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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row myDiv" id="myDiv">
  
</div>
    Login or Signup to reply.
  2. 0

    Your frag layout is without bootstrap classes. So they don’t fit the grid you started with "row". with bootstrap classes it would look something like that.

    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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

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

    So you have one row and many columns in it and you can use the display classes to controll them. like .d-md-none to hide it on the md breakpoint

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search