CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsivebootstrap-5
Fallen Angel
Fallen Angel

Reputation: 111

Bootstrap 5 not fit 100% width and 100% height: 2 rows 5 columns layout

Can you help me fix this Bootstrap 5 code to fit in all 16:9 full screen device (mobile and desktop/1080p/2160p chrome browser) to 100% width and 100% height? (and no scroll to right and no scroll to down) I read 100+ examples and tutorial about this and not found any working solution. All images are 16:9 ratio.

At 1920p width landscape mobile screen still need to scroll about 5% for right and down. But it's just spacing and no information in right and down. Also same as desktop too.

Ideal: first row about 40% height and second row is about 60% to fit 5 column in 1 row at same size. In the first column image should be fit this 40% total height.

Ideal sketch layout:

------------------------------------------------------
-                                                    -
-          big-img-big-img                           -
-          big-img-big-img    have a nice day        -
-          big-img-big-img                           -
-          big-img-big-img                           -
-          big-img-big-img                           -
-          big-img-big-img                           -
------------------------------------------------------
-                                                    -
-   img-img   img-img   img-img   img-img   img-img  -
-   img-img   img-img   img-img   img-img   img-img  -
-   img-img   img-img   img-img   img-img   img-img  -
-    text      text      text      text      text    -
-                                                    -
------------------------------------------------------

The source code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>a</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>

<body>
<div class="d-flex flex-column vw-100 vh-100">
  <div class="row justify-content-center row-cols-1">
    <div class="card mb-4 justify-content-center" style="max-width: 1920px;">
      <div class="row g-0">
        <div class="col-md-4"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
        <div class="col-md-4">
          <div class="card-body">
            <h5 class="card-title">Have a nice day!</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row d-flex justify-content-center row-cols-5">
    <div class="col-lg-2 col-md-2 col-sm-2">
      <div class="card mb-3" style="max-width: 1920px;">
        <div class="row g-0">
          <div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
          <div class="col-md-12">
            <div class="card-body">
              <h5 class="card-title">Hello 1</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2">
      <div class="card mb-3" style="max-width: 1920px;">
        <div class="row g-0">
          <div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
          <div class="col-md-12">
            <div class="card-body">
              <h5 class="card-title">Hello 2</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2">
      <div class="card mb-3" style="max-width: 1920px;">
        <div class="row g-0">
          <div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
          <div class="col-md-12">
            <div class="card-body">
              <h5 class="card-title">Hello 3</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2">
      <div class="card mb-3" style="max-width: 1920px;">
        <div class="row g-0">
          <div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
          <div class="col-md-12">
            <div class="card-body">
              <h5 class="card-title">Hello 4</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2">
      <div class="card mb-3" style="max-width: 1920px;">
        <div class="row g-0">
          <div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
          <div class="col-md-12">
            <div class="card-body">
              <h5 class="card-title">Hello 5</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Ideal if 5 column fit the 100% width and no scroll to right. Please help me how possible to fit in 1 screen without any scrolling right and down! Seems like it's already responsive but need to fix to be better. Thank you!

Upvotes: 0

Views: 1635

Answers (1)

AntonyMN
AntonyMN

Reputation: 921

A couple of things about bootstrap:

  • If images in columns in a row have the same aspect ratio, they will have the same height.
  • The number of grid items in a row are 12.

So, if you want the 40% and 60%, then is either col-5 and col-7 or col-4 and col-8. This caters for the first row.

The second row is even more direct. You can just have one row and several columns with either col-2 or just col.

Here is what I mean:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">

  <div class="col-5">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
  </div>

  <div class="col-7">
    Place content here.
  </div>

</div>

<div class="row">

  <div class="col-2">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
    <p>Some text here.</p>
  </div>

  <div class="col-2">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
    <p>Some text here.</p>
  </div>

  <div class="col-2">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
    <p>Some text here.</p>
  </div>

  <div class="col-2">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
    <p>Some text here.</p>
  </div>

  <div class="col-2">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
    <p>Some text here.</p>
  </div>

</div>

Upvotes: 1

Related Questions