Welcome!

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

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Positioning 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">
<head>
<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">
</head>
 
 
<!-- === === ===     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>

19.08.2022_16-10-01.png
 
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.
 
#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?
 

Buy us a coffee!

Back
Top Bottom