How to Set Responsive Height of DIV in Bootstrap 3 My code attached?

Question

I am having problem to set responsive height of div inside bootstrap row.

In code I have bootstrap row with styling having background color. inside row I have div of full width "col xs 12". Inside this div I have div containing form control label

I have to adjust this row having background color responsive its height remain same in all devices how to set responsive height of div and row?

my code is,

.big-box,
.mini-box {
    background-color: none;
    color: white;
    text-align: center;
    margin: 2px;
    font-size: 1.5em;
}

.big-box {
    height: 69px;
    line-height: 68px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
	<div class="row" style="background-image: linear-gradient(to bottom, #00a896, #2d6f84);">
    	<div class="col-xs-12">
        	<div class="big-box">
            	<div class="name">
                	<asp:Label runat="server" ID="lblFullNameArabic"></asp:Label>
    			</div>  
    		</div>
    	</div>
    </div>
</div>

Nisharg Shah Nisharg Shah · Accepted Answer · 2018-12-31T12:10:21

Give height in vh format like 100vh for whole page size

.big-box,
.mini-box {
    background-color: none;
    color: white;
    text-align: center;
    font-size: 1.5em;
}

.big-box {
    height: 100vh;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
	<div class="row" style="background-image: linear-gradient(to bottom, #00a896, #2d6f84);">
    	<div class="col-xs-12">
        	<div class="big-box">
            	<div class="name">
                	<asp:Label runat="server" ID="lblFullNameArabic"></asp:Label>
    			</div>  
    		</div>
    	</div>
    </div>
</div>

How to Set Responsive Height of DIV in Bootstrap 3 My code attached?

1 Answers