CODEWITHSUNDEEP
htmlcssbootstrap-4flexbox
user2887053
user2887053

Reputation: 103

Adjustable row heights with bootstrap 4

I'm using bootstrap columns to display expanding cards. When one expands though, it pushes the whole row underneath it down.

Unexpanded: Unexpanded

Currently how it behaves expanded: Current Expanded

How I'd like it to behave: Desired Expanded

I've been reading about flexbox, but I cant find any good examples of the desired behavior, while maintaining responsive design.

Currently the code is along the lines of 

<div class="row">
    <div class="col-xl-4 col-lg-5 col-12">
        expanding content...
    </div>
    .
    .
    .
    <div class="col-xl-4 col-lg-5 col-12">
        expanding content...
    </div>
</div>

Upvotes: 0

Views: 115

Answers (3)

Stephen Zahra
Stephen Zahra

Reputation: 29

Ok, so after some trial and error I managed

--HTML--

<div id="redDiv" style="background-color: red; height: 100px; width: 10%; float: left;"> <p>This is a div</p> </div>

--JavaScript--

var onWindowLoaded = () =>{ document.getElementById("redDiv").setAttribute("style", "height: 150px; background- color:red; width: 10%;"); } window.addEventListener("load", onWindowLoaded);

So it's important to note that I used a red background in order to tell how long my div was, I see you're using a greyish background (It was hard to see them to be honest). So basically once the page loads it will set the div to the height indicated in the setAttribute() function, I had to re-add the colour because modifying the div height through javascript made the colour disappear completely. Hope this helps :)

Upvotes: 1

J. Mann
J. Mann

Reputation: 133

I see 2 possibilities:

1. Solution: Have you checked out the bootstrap-component card-columns? It organizes the cards into Masonry-like columns. By using

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

you can make them responsive.

2. Solution: You use just 3 cols:

.row {
  margin-top: 20px;
  align-content: flex-start;
}

.card {
  padding: 10px;
  margin-bottom: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
				
<div class="col-4">

	<div class="card">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
	</div><!-- card -->
    
    <div class="card">
        Lorem
	</div><!-- card -->

</div><!-- col -->
			
					
 				
<div class="col-4">

	<div class="card">
        Lorem
	</div><!-- card -->
    
    <div class="card">
        Lorem
	</div><!-- card -->

</div><!-- col -->

				
<div class="col-4">

	<div class="card">
        Lorem
	</div><!-- card -->
    
    <div class="card">
        Lorem
	</div><!-- card -->

</div><!-- col -->
</div><!--row -->

Upvotes: 1

Stephen Zahra
Stephen Zahra

Reputation: 29

Maybe you could try giving it a css height: property. This can be done through Javascript, so when you're expanding the box, also give it a certain height to limit it. Tell me if you'd like me to do it for you :)

Upvotes: 1

Related Questions