'Hiding a div that on the next line

I am using Bootstrap for Auto Layout Columns.

I'd like to hide the div that breaks to the next line. I've tried to set a fixed height to the class row and then use @media queries.

Can you advise a better way ?

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- Body -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm" style="min-width:300px;">1 of 4</div>
    <div class="col-sm" style="min-width:300px;">2 of 4</div>
    <div class="col-sm" style="min-width:300px;">3 of 4</div>
    <div class="col-sm" style="min-width:300px;">4 of 4</div>
  </div>
</div>
htmlcssbootstrap-4responsive


Solution 1:[1]

I'd like to hide the div that breaks to the next line. I tried to set a fixed height to the "row" div...

You're right on track, you just have to set the overflow to hidden (default value of the overflow property is visible) to hide the div that breaks to the next line. See the snippet below:

.row {
  overflow: hidden;
  height: 1.5em;
}

@media only screen and (max-width: 620px) {
  .row{
    height: auto;
    flex-direction: column;
  }
}
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm" style="min-width:300px;">1 of 4</div>
    <div class="col-sm" style="min-width:300px;">2 of 4</div>
    <div class="col-sm" style="min-width:300px;">3 of 4</div>
    <div class="col-sm" style="min-width:300px;">4 of 4</div>
  </div>
</div>

More on overflow here.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions