JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid" style="height: 400px;background-color: yellow">

    <div class="row">

        <div class="col-lg-4 col-lg-offset-1" style="background-color: red;">

            <div class="row" style="padding-top:20%;padding-bottom: 20%;background-color: blue;">
                dddd
            </div>

        </div>

    </div>

</div>

CSS

* {
   margin: 0,
   padding: 0
 }
.container-fluid > .row, .col-lg-4.col-lg-offset-1 {
  height: 100%;
}

.col-lg-4.col-lg-offset-1 > .row {
  top: 50%;
  transform: translateY(-50%);
  position: relative;
  text-align: center;
}

.navbar {
    margin-bottom: 0 !important;
    background-color: white;
}

.row1 {
    background: url("appart.jpg");
    background-size: 100% 400px;
    background-repeat: no-repeat;
}


footer {

  background-color: lightgreen;

  opacity: 0.5;

  line-height: 400px;

  text-align: center;

}