<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h3>Panel inside horizontal layout form.</h3>
<div class="container-fluid">
<form class="form-horizontal">
<!-- Group 1 -->
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<div class="col-xs-12">
<h4>Panel Heading</h4>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<p>Resizing the browser from 600 to 800 pixels causes the vertical
alignment of 'Label 1' to change.</p>
</div>
</div>
<!-- ISSUE: When the view is wider than xs viewport scale
'control-label' style adds 7px padding bottom. But when the view is
narrower than xs scale this disappears and causes the label to
vertically align top. -->
<div class="form-group">
<div class="col-xs-4">
<label class="control-label" for="input1">Label 1</label>
</div>
<div class="col-xs-8">
<input class="form-control" type="text"
id="input1" placeholder="Input 1">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%;">
60%
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Group 2 -->
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<div class="col-xs-12">
<h4>Panel Heading</h4>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<p>A fix that uses flexbox.</p>
</div>
</div>
<!-- FIX 1: Fixed using flex alignment. -->
<div class="form-group vertical-align">
<div class="col-xs-4">
<label for="Input2">Label 2</label>
</div>
<div class="col-xs-8">
<input class="form-control" type="text"
id="Input2" placeholder="Input 2">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%;">
60%
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Group 2 -->
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<div class="col-xs-12">
<h4>Panel Heading</h4>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<p>A fix that uses the Booststrap 'form-control-static' class on
the label.</p>
</div>
</div>
<!-- FIX 1: Fixed using flex alignment. -->
<div class="form-group">
<div class="col-xs-4">
<label class="form-control-static" for="Input2">Label 3</label>
</div>
<div class="col-xs-8">
<input class="form-control" type="text"
id="Input2" placeholder="Input 3">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%;">
60%
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
// Code goes here
/* Styles go here */
.vertical-align {
display: flex;
align-items: center;
}