CODEWITHSUNDEEP
bootstrap-4rowcol
rudtek
rudtek

Reputation: 403

full height nested rows and columns bootstrap 4

I'm trying to make a header on my site to look like this: enter image description here

Here's the code I've come up with with Bootstrap 4.

<div class="container h400">
<div class="row h-100">
    <div class="col-md-8">
        <img src="//placehold.it/800x400" class="img-responsive">
    </div>
    <div class="h-100 col-md text-center align-self-center align-items-center">
        <div class="row h-50">
            <div class="col-md">1</div>
            <div class="col-md bg-dark text-white">2</div>
        </div>
        <div class="row h-50">
            <div class="col-md bg-secondary text-center text-white">3</div>
            <div class="col-md bg-primary text-white">4</div>
        </div>
    </div>
</div>  
</div>

and this line of css

.h400 {
    height: 400px;
}

When I view this live though, the right 4 boxes don't expand as I had hoped they would: enter image description here

The row isn't exactly level, the text isn't vertically centered and it's not responsive.

Can anyone help tell me what I'm doing incorrectly?

Upvotes: 0

Views: 1345

Answers (2)

KuldipKoradia
KuldipKoradia

Reputation: 3031

for using bootstrap classes you can easily implement this structure here is the snippet below please refer this code for more understanding.

and you can use any image for here in image content box it will contains the box size never stretch or squeeze your image and always display your center portion of the image by positioning.

.h400 {
  height: 400px;
  position: relative;
}
.h400 img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 bg-dark text-white h400">
        <img src="https://im.rediff.com/news/2015/feb/11tulip8.jpg" alt="image">
      </div>
      <div class="col-md-6 h400">
        <div class="row h-100">
          <div class="col-md-6 d-flex align-content-center flex-wrap text-white h-50 bg-warning">
            <div class="w-100 text-center">1</div>
          </div>
          <div class="col-md-6 d-flex align-content-center flex-wrap text-white h-50 bg-danger">
            <div class="w-100 text-center">2</div>
          </div>
          <div class="col-md-6 d-flex align-content-center flex-wrap text-white h-50 bg-success">
            <div class="w-100 text-center">3</div>
          </div>
          <div class="col-md-6 d-flex align-content-center flex-wrap text-white h-50 bg-secondary">
            <div class="w-100 text-center">4</div>
          </div>
        </div>
      </div>
    </div>  
  </div>
</body>
</html>

Thank you...

Upvotes: 1

Akber Iqbal
Akber Iqbal

Reputation: 15041

A few things

  • the responsive class in BS4 is img-fluid; it was img-responsive in BS3
  • but you see that when the image is responsive, it will NOT conform to the 400 height which results in white space below the image
  • A fix would be to select an appropriately sized image which can still deliver an effective message despite being hidden from the right (this is the second DIV in my code)

.h400 {
  height: 400px;
}

.removePadding {
  padding: 0 !important
}

.myCentreAlign {
  display: flex;
  justify-content: center;
  align-items: center;
}

.myImageStyle {
  height: 400px;
  overflow: hidden;
}

@media screen and (max-width:575px) {
  .myImageStyle {
    height: auto;
  }
  .secondDiv .myImageStyle img {
    height: auto;
    width: 100%;
  }
  .secondDiv.h400 {
    height: auto;
  }
  .theFourDiv .h-50 {
    height: 200px !important;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<h1> Responsive image case (lots of empty space under the image) </h1>
<div class="container h400">
  <div class="row h-100">
    <div class="col-8 removePadding">
      <img src="//placehold.it/800x400" class="img-fluid">
    </div>
    <div class=" col-4 h-100 ">
      <div class="row h-50">
        <div class="col-md text-center myCentreAlign">1</div>
        <div class="col-md bg-dark text-white myCentreAlign ">2</div>
      </div>
      <div class="row h-50">
        <div class="col-md bg-secondary text-white myCentreAlign">3</div>
        <div class="col-md bg-primary text-white myCentreAlign">4</div>
      </div>
    </div>
  </div>
</div>

<hr/>

<h1> non-responsive but delivers a good message </h1>
<div class="container h400 secondDiv">
  <div class="row h-100">
    <div class="col-12 col-sm-8 removePadding myImageStyle">
      <img src="//placehold.it/800x400" class="">
    </div>
    <div class=" col-12 col-sm-4 h-100 theFourDiv">
      <div class="row h-50">
        <div class="col-md text-center myCentreAlign">1</div>
        <div class="col-md bg-dark text-white myCentreAlign ">2</div>
      </div>
      <div class="row h-50">
        <div class="col-md bg-secondary text-white myCentreAlign">3</div>
        <div class="col-md bg-primary text-white myCentreAlign">4</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions