# Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

# HTML & CSSPositioning of bootstrap child rows.

#### dt65231

##### Coder
Positioning of bootstrap child rows.
Let's say there are three rows nested in the parent div: Row-1,
Row-2, Row-3.

Solution-1.
Row-1 - fills the free space (Row-2, Row-3 - 50/50 );
Row-2 - fills the free space (Row-2, Row-3 - 50/50 );
Row-3 is pressed to the bottom point of the parent. The row height is set.

Solution-2.
Row-1 is pressed to the top point of the parent. The row height is set.
Row-2 - fills the free space (Row-2, Row-3 - 50/50 );
Row-3 - fills the free space (Row-2, Row-3 - 50/50 );

Question: How to implement these two solutions?

https://jsfiddle.net/User65659/xaz6j4wk/37/

HTML:
``````<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<!-- === === ===     BODY  === === === === === === === === === === === -->
<body>
<div class="container vh-100 w-100 bg-info">
<div class="row vh-100 w-100 border border-white">
<div class="col-4 border  border-danger" >
col-1
<div class="row border border-danger" >
row-1
</div>
<div class="row border border-danger" >
row-2
</div>
<div class="row border border-danger" >
row-3
</div>
</div>
<div class="col-5 border border-danger" >
col-2
</div>
<div class="col-3 border border-danger" >
col-3
</div>
</div>
</div>
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>``````

I would give the row an ID Then use the calc css function like this:
Code:
``````<style>
#row1{background-color:red;height: 3.5vh;}
#row2{background-color:green;height:calc(50vh - 3.5vh/2)}
#row3{background-color:pink;height:calc(50vh - 3.5vh/2)}
</style>``````
This will not give a great example because I don't know the dimensions of the rows or columns. Just sub in the proper values and jake's your uncle.

I would give the row an ID Then use the calc css function like this:
Is it possible to make the strings not compressed?
Or is this normal behavior?

Initial state.

I have reduced the screen.

Make them any height you want, but you have to change the css for the other two
in calc(50vh - 3.5vh/2)} the 3.5vh should be the height of both the top rows added.

#row2{background-color:green;height:calc(50vh - 3.5vh/2)}
#row3{background-color: pink;height:calc(50vh - 3.5vh/2)}
Not being familiar with the calc function, I wonder why you need CSS to calculate that expression ? Is this not equivalent to

CSS:
``````#row2{background-color:green;height:48.25vh;}
#row3{background-color:pink;height:48.25vh;}``````

<div class="container-fluid position-relative fz-wrap">
<div class="row h-100 align-items-center">
<div class="text-center">
<img class="mx-auto d-flex rounded img-fluid" src="images/lrg-img.jpg" alt="">
</div>
</div>
<div class="fz-brand-band">
<div class="row align-items-center">
<div class="col-12 col-md-4 text-center fz-brand-1">
<img class="mx-auto d-flex rounded img-fluid" src="images/img-1.png" alt="">
</div>
<div class="col-12 col-md-4 text-center fz-brand-2">
<img class="mx-auto d-flex rounded img-fluid" src="images/img-2.png" alt="">
</div>
<div class="col-12 col-md-4 text-center fz-brand-3">
<img class="mx-auto d-flex rounded img-fluid" src="images/img-3.png" alt="">
</div>
</div>
</div>
</div>
<div class="p-2">
Footer
</div>

<div class="container-fluid position-relative fz-wrap">
<div class="row h-100 align-items-center">
<div class="text-center">
<img class="mx-auto d-flex rounded img-fluid" src="images/lrg-img.jpg" alt="">
</div>
</div>
<div class="fz-brand-band">
<div class="row align-items-center">
<div class="col-12 col-md-4 text-center fz-brand-1">
<img class="mx-auto d-flex rounded img-fluid" src="images/img-1.png" alt="">
</div>
<div class="col-12 col-md-4 text-center fz-brand-2">
<img class="mx-auto d-flex rounded img-fluid" src="images/img-2.png" alt="">
</div>
<div class="col-12 col-md-4 text-center fz-brand-3">
<img class="mx-auto d-flex rounded img-fluid" src="images/img-3.png" alt="">
</div>
</div>
</div>
</div>
<div class="p-2">
Footer
</div>

How can your solution be applied?
I try to apply it, but nothing happens.
What is the point?