I have Bootstrap downloaded and the following code snippet.
<header id="top">
<div class="container">
<div class="row">
<div class="col-sm-3 ">
<image alt="here will be the logo" src=""></image>
</div>
<div class="col-sm-6 ">
</div>
<div class="col-sm-3">
<form class="form-horizontal" >
<div class="form-group row">
<label class="control-label col-sm-4" for="document">Document:</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="document" placeholder="document">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-4" for="revision">Revision:</label>
<div class="col-sm-8">
<input class="form-control" id="revision" placeholder="revision">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-4" for="pagenr">Page nr:</label>
<div class="col-sm-8">
<input class="form-control" readonly = "true" id="pagenr" placeholder="here will be page number">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-4" for="iso">ISO:</label>
<div class="col-sm-8">
<input class="form-control" id="iso" placeholder="iso">
</div>
</div>
</form>
The result I get can be viewed here: web page I am interested in 1. the alignment of text inside the forms (for some reason, the label is positioned higher than the input) and 2. the huge right margin that does not go away no matter what I try, taking up input space. It's also worth noting that making an input field 'readonly' turns it perpetually gray. Here is my CSS code:
input.form-control{
width: 80%;
padding: 15px 22px;
margin: 5px 5px;
box-sizing: border-box;
font-size: 14px;
height: 10px;
border:0;
background-color: #FFEBCD;
}
header {
padding-top: 20px;
height: 100px;
font-size: 14px;
}
div.container
{
margin-right: 1px;
margin-left: 100px;
padding-right: 1px;
border-right: 1px;
}
div.form-group
{
margin-right: 1px;
padding-right: 1px;
border-right: 1px;
}
form.form-horizontal
{
margin-right: 1px;
padding-right: 1px;
border-right: 1px;
vertical-align: bottom;
}
div.row
{
margin-right: 1px;
padding-right: 1px;
border-right: 1px;
}
label.control-label
{
width: 100%;
vertical-align: baseline ;
background-color: CadetBlue;
text-align: left;
}
Vertical or text alignment attributes do not seem to work, nor setting 'right margin' = 1px to any element I can think of.
The HTML code provided only covers the first form, as the entire code would be twice as big with the same problem in the second form.