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.

D

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
 
Sort by date Sort by votes
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.
 
Upvote 1 Downvote
OldMan said:
#row2{background-color:green;height:calc(50vh - 3.5vh/2)}
#row3{background-color: pink;height:calc(50vh - 3.5vh/2)}
Click to expand...
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;}
 
Upvote 0 Downvote
<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>
 
Upvote 1 Downvote
wesleyhindley said:
<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>
Click to expand...

modify_Ответ_01_codeforum.org_06_wesleyhindley_Вопрос. - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net jsfiddle.net

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

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom