I have following form with multiple inputs
<form>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">filename: teamA_vs_teamB.mvd, map: ztndm3</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">TeamA</div>
<div class="col-md-4">TeamB</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-1">name</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p1_name">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p2_name">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p3_name">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p4_name">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p5_name">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p6_name">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p7_name">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p8_name">
</div>
<div class="col-md-2"></div>
</div>
</br>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-1">frags</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p1_frags">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p2_frags">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p3_frags">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p4_frags">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p5_frags">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p6_frags">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p7_frags">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p8_frags">
</div>
<div class="col-md-2"></div>
</div>
</br>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-1">deaths</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p1_deaths">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p2_deaths">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p3_deaths">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p4_deaths">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p5_deaths">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p6_deaths">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p7_deaths">
</div>
<div class="col-md-1">
<input class="form-control" type="text" name="p8_deaths">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<button type="submit" class="btn btn-primary">Process</button>
</div>
</form>
</div>
My problem is that it doesn't look 'bootstrap' at all. I would like to:
vertically center 'name', 'frags' and 'deaths' items
make input fields smaller
fix centering of whole form because as you can see I use workaround by adding some divs to fill up to 12 columns
What would be the best way to fix it? Also, for better explanation I have also created this snippet: https://bootsnipp.com/snippets/mQoqO
Related
I am trying to horizontally center the div id="lastrow"
<div class="container">
<div class="row" style="text-align:center">
<div class="col-md-12">Name: <input type="text" id="name"><span class="vishid"> Name:</span></div>
<div class="col-md-12">Company: <input type="text" id="comp"><span class="vishid"> Company:</span></div>
</div>
<div class="row" style="text-align:center">
<div class="col-md-12">Address: <input type="text" id="addr"><span class="vishid"> Address:</span></div>
<div class="col-md-12">City: <input type="text" id="city"> ST: <input type="text" id="stat"> Zip: <input type="text" id="zip1">-<input type="text" id="zip2"><span class="vishid"> City:</span></div>
</div>
<div class="row" style="text-align:center">
<div class="col-md-12">E-Mail: <input type="text" id="emai"><span class="vishid"> E-Mail:</span></div>
<div class="col-md-12">Phone: (<input type="text" id="area">) <input type="text" id="pho1">-<input type="text" id="pho2"> Extension: <input type="text" id="exte"><span class="vishid"> Phone:</span></div>
</div>
<div class="row" id="lastrow" style="display: block;margin-left: 0;margin-right: auto; text-align:center">
<div class="col-md-12">
<div>
Message:
</div>
<div>
<textarea id="mssg"></textarea>
</div>
</div>
<div class="col-md-12">
<div id="recap" class="g-recaptcha" data-sitekey="aewrwgtearhrtjtsryjEFEdUAPN5CrFuM5l_1ZdSu7OH_g"></div>
</div>
</div>
</div>
I am not sure if you need the CSS file as most of it is regarding widths.
Thank you for your time,
Don
If you are using bootstrap-4 call the default class text-center to align the div center. If you want to make the design better refer the bootstrap form.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row text-center">
<div class="col-md-12">Name:
<input type="text" id="name"><span class="vishid"> Name:</span></div>
<div class="col-md-12">Company:
<input type="text" id="comp"><span class="vishid"> Company:</span></div>
</div>
<div class="row text-center">
<div class="col-md-12">Address:
<input type="text" id="addr"><span class="vishid"> Address:</span></div>
<div class="col-md-12">City:
<input type="text" id="city"> ST:
<input type="text" id="stat"> Zip:
<input type="text" id="zip1">-
<input type="text" id="zip2"><span class="vishid"> City:</span></div>
</div>
<div class="row text-center">
<div class="col-md-12">E-Mail:
<input type="text" id="emai"><span class="vishid"> E-Mail:</span></div>
<div class="col-md-12">Phone: (
<input type="text" id="area">)
<input type="text" id="pho1">-
<input type="text" id="pho2"> Extension:
<input type="text" id="exte"><span class="vishid"> Phone:</span></div>
</div>
<div class="row text-center" id="lastrow">
<div class="col-md-12">
<div>
Message:
</div>
<div>
<textarea id="mssg"></textarea>
</div>
</div>
<div class="col-md-12">
<div id="recap" class="g-recaptcha" data-sitekey="aewrwgtearhrtjtsryjEFEdUAPN5CrFuM5l_1ZdSu7OH_g"></div>
</div>
</div>
</div>
Try to use bootstrap grid system, which is row and col class,
for example if you want to center the div write your div code between the following code.
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
//insert your div code to center
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext"
id="staticEmail" value="email#example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-
label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword"
placeholder="Password">
</div>
</div>
</form>
<!-- a bootstrap col has 12 that's why am divide col by 4 to
center 4+4+4 = 12 -->
</div>
<div class="col-md-4">
</div>
</div>
</div>
//or follow this bootstrap forms layout to get this
https://getbootstrap.com/docs/4.3/components/forms/
I am trying to create a form using bootstrap 3 that looks like
this.
I can get it to look pretty similar, but the only problem I have is that my last horizontal rule in the ETO section goes the entire way across. Is there any way I can make this only go across half of the page? I tried putting it in different col sizes inside that but I couldn't get it to work. Here's my html. Thanks ahead of time!
<div class="panel panel-default">
<div class="panel-heading">
<label style="color: white; font-weight: bold;">JOHNSON Summary</label>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" style="overflow-x:auto;">
<fieldset>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Status </label>
<div class="col-xs-7">
<select class="form-control" id="empStatus">
<option value="" disabled>Choose Type....</option>
<option value="Current">Current</option>
<option value="Terminated">Terminated</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Anniversary </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empAnniversary"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Start Date </label>
<div class="col-xs-7">
<input class='form-control' type="date" id="empStartDate"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Adjusted Start </label>
<div class="col-xs-7">
<input class='form-control' type="date" id="empAdjustedStart"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> STD/LTD </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empSTDLTD"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Uncharged </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empUncharged"/>
</div>
</div>
</div>
</fieldset>
<fieldset>
<h4>PTO</h4>
<div class="col-xs-12">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-2"> Base </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="ptoBase" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> + </label>
<label class="col-xs-4"> Carryover </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoCarryover" />
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBalance" />
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Borrowed </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBorrowed" />
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-1" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Requests </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoRequests" />
</div>
<div class="col-xs-1"></div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBalance" />
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-1" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Available </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoAvailable" />
</div>
<div class="col-xs-1"></div>
</div>
</div>
</fieldset>
<fieldset>
<h4>ETO</h4>
<div class="col-xs-12">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-2"> Earned </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoEarned" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label class="col-xs-1"> ― </label>
<label class="col-xs-2"> Requests </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoRequested" />
</div>
<div class="col-xs-6">
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-12">
<div class="form-group">
<label class="col-xs-1"> = </label>
<label class="col-xs-2"> Available </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoAvailable" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
UPDATED.
I think you need to use Bootstrap's horizontal form as described in official docs. It seems you are using horizontal form structure, but you've forgotten to add .form-horizontal class to your form element or to .form-group.
I want to align all the fields vertically which is exactly one below another. Currently all the fields are aligned randomly I am using bootstrap css The layout should be something like this:
Label1: Textbox1
Label2: Textbox2
Here is the code snippet:
Which class can i use to fix the alignment of textbox? Any help?
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-140px;">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<div class="row">
<form>
<div class="form-group">
<label class="col-md-4" for="currentmonth">Total Work days in Current Month:</label>
<input class="col-md-4" type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
<div class="col-md-4"></div>
</div>
</form>
</div>
<div class="row">
<form>
<div class="form-group">
<label class="col-md-4" for="annualeave">Annual Leave :</label>
<input class="col-md-4" type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
<div class="col-md-4"></div>
</div>
</form>
</div>
This answer is different from the above answer given by Rafa Romero.
I have added different style for these.
Here is the 2 ways you can use this .
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<br><h1 class="text-center">OR</h1><br>
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" >
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
You are using bootstrap class so do one thing use columns and give .col-sm-8 and .com-sm-4 respectively and check.
<div class="form-group">
<label for="annualeave" class="col-sm-8">Annual Leave :</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</div>
You can try with absolute position for the texfields and aligning both at the same distance from the right or left side
input{
position: absolute;
left: 275px
}
<form class="form-inline" style="margin-left:20px">
<div class="form-group">
<label for="currentmonth">Total Work days in Current Month:</label>
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
<br />
<div class="row">
<form class="form-inline" style="margin-left:20px">
<div class="form-group">
<label for="annualeave">Annual Leave :</label>
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
<br />
I really need some help here. I've been messing with this form all day and I can't get these boxes to show where I need them to. I'll include a picture below of how I want it to look. I've been trying different things with form-inline and form-horizontal but it's just not working.
Any help would be appreciated.
Here's some of what I've been trying:
<form class="form-horizontal">
<div class="col-md-6">
<h4>Shipping Address</h4>
<hr>
</div>
<div class="col-md-6">
<h4>Contact Info</h4>
<hr>
</div>
<div class="col-md-12">
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputKey" placeholder="First Name">
</div>
<label for="inputValue" class="col-md-3 control-label">Email Address</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Email Address">
</div>
</div>
</div>
</form>
You just need to make sure you're using the correct rows/cols, and don't use form-horizonal along with the grid columns.
<form class="row">
<div class="col-md-6">
<h4>Shipping Address</h4>
<hr>
</div>
<div class="col-md-6">
<h4>Contact Info</h4>
<hr>
</div>
<div class="col-md-12">
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">Key</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-2 control-label">Other</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">State</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputSt" placeholder="ST">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="inputZip" placeholder="Zip">
</div>
<label for="inputValue" class="col-md-2 control-label">Other</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
http://www.codeply.com/go/e92EivkCaq
I am trying to center a form in the center of the page, but everytime I center the col, the contents get pushed to the left side of that col. I want the form to be the full width of the col-md-6 and that col centered in the middle of the page.
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-2">Your Name:</div>
<div class="col-md-4">
<input type="text" name="uname" class="form-control" required="" placeholder="Your Name">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Email:</div>
<div class="col-md-4">
<input type="email" name="email" class="form-control" required="" placeholder="Email Address">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Company:</div>
<div class="col-md-4">
<input type="text" name="company" class="form-control" required="" placeholder="Company Name">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Contact:</div>
<div class="col-md-4">
<input type="email" name="contactemail" class="form-control" required="" placeholder="Email Address">
</div>
</div>
<div class="row">
<div class="col-md-2">Choose file(s):</div>
<div class="col-md-4">
<input name="files" type="file" id="files" multiple="multiple" class="form-control" required="">
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5></h5>
</div>
<div class="col-md-4">
<input id="sbmtBtn" type="submit" name="submit" value="Upload" class="btn btn-primary btn-lg btn-block">
</div>
</div>
http://www.bootply.com/OiRABZIff0
Add col-md-offset-3 before col-md-2.
Have a look at the bootply here
Also not that col should be defined within rows and rows should be encapsulated within container, so I modified the html structure a bit as well.
Change your
<div class="col-md-6 col-md-offset-3">
to
<div class="col-md-7 col-md-offset-4">
I have edited. check out this help you.
http://www.bootply.com/QnYcyyIh2V