I am using some panel in my form. Its working fine in maximum panel but two panel is not working . The image will be given below . i write a panel code for these 4 checkbox (payment, deposit Voucher, cash, bank) and in the bottom finish button.
but this two panel didn't working.
How can i solve this problem ?
Code of my full form is given below :
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Payment Deposit Voucher</title>
</head>
<body>
<div class="panel panel-default">
<div style="padding:25px; ">
<div class="container center_div">
<form action="" method="post" class="form">
<div class="col-sm-10">
<div class="form-group">
<div class="col-sm-12 panel panel-heading panel-success">PAYMENT DEPOSIT VOUCHER <span style="color:green">[DAFFODIL INTERNATIONAL UNIVERSITY]</span>
</div>
</div>
<div class="form-group">
<div class="panel panel-default">
<div class="col-sm-6" style="padding-bottom:5px;">
<input type="radio" name="voucher" value="payment_voucher">Payment Voucher
<input type="radio" name="voucher" value="deposit_voucher">Payment Voucher
</div>
<div class="col-sm-3"style="padding-bottom:5px;"></div>
<div class="col-sm-3" style="padding-bottom:5px;">
<input type="radio" name="transaction" value="cash">Cash
<input type="radio" name="transaction" value="bank">Bank
</div></div></div>
<div class="panel panel-default">
<div class="panel panel-body">
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Voucher ID:</label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="voucherid" id="voucherid"></div></div>
<div class="form-group">
<div class="col-sm-2"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Date :</label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="date" id="date">
</div></div><br>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Project : </label></div>
<div class="col-sm-10" style="padding-top:5px"><input type="text" class="form-control" name="project" id="project"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Department : </label></div>
<div class="col-sm-3" style="padding-top:5px"><select name="department" class="form-control">
<option value="Select">Select...</option>
<option value="SWE">SWE</option>
<option value="CSE">CSE</option>
<option value="EEE">EEE</option>
</select>
</div></div>
<div class="col-sm-2"></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Cash in Hand : </label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="cashinhand" id="cashinhand"> </div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Bank Account :</label></div>
<div class="col-sm-10" style="padding-top:5px"><input type="text" class="form-control" name="bankacc" id="bankacc"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Cheque No: </label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="chequeno" id="chequeno"></div></div>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-2" style="padding-top:5px"><label>MR. No :</label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="mrno" id="mrno"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Control Head : </label></div>
<div class="col-sm-10" style="padding-top:5px"><input type="text" class="form-control" name="controllhead" id="controllhead"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Client :</label></div>
<div class="col-sm-10" style="padding-top:5px"><select name="client" class="form-control">
<option value="Select">Select...</option>
<option value="SWE">SWE</option>
<option value="CSE">CSE</option>
<option value="EEE">EEE</option>
</select> </div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Debit: </label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="debit" id="debit"></div></div>
<div class="form-group">
<div class="col-sm-2" ></div>
<div class="col-sm-2" style="padding-top:5px"><label>Credit : </label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="credit" id="credit"></div></div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-10">
<div class="panel panel-default">
<div class="showtable">
<table class="table">
<tr>
<th>ACCOUNT HEAD</th>
<th>DEBIT</th>
<th>CREDIT</th>
<th>CHEQUE</th>
<th>PROJECT NAME</th>
<th>MR. NO</th>
<th>DEPT NAME</th>
<th>CLIENT NAME</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-10">
<div class="panel panel-default">
<div class="col-sm-10"></div>
<div class="col-sm-2" style="padding-bottom:5px">
<input type="submit" class="btn btn-lg btn-success" name="finish" value="FINISH" id="finish"></div>
</div>
</div>
</body>
</html>
It is not entirely clear what you are trying to achieve and what is exactly the issue. If your issue is that you are not reliably getting a panel border around the areas you mention, This can be resolved by wrapping the radio buttons and finish buttons (individually) with
<div class="panel-body">
....
</div>
This jsfiddle demonstrates how this can be used https://jsfiddle.net/2qut3hx7/.
Related
In my web form, there's a white space on the right side, how to remove it or resize the panel?
I have tried padding and margin also width for panel and container but it's not working.
.container {
margin-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>
<div class="container" >
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title ">Personal Infomation</h3>
</div>
<div class="panel-body " >
<br>
<div id="p_info">
<div class="row">
<div class="col-md-6">
<label class="control-label">First Name</label>
<input class="form-control" id="first_name" >
</div>
</div>
<div class="row" >
<div class="col-md-6">
<label class="control-label">Last Name</label>
<input class="form-control" id="last_name" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Gender</label>
<select class="form-control field" id="sel1" >
<option disabled selected value> -- select an option -- </option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Date of Birth</label>
<input type="date" name="bdaytime" class="form-control" id="DOB" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Place of Birth</label>
<input class="form-control" id="Place" >
</div>
</div>
</div>
</div>
</div>
</div>
I want to remove white space on this web from. why would this shows like that
let me know.I want to remove white space on this web from. why would this shows like that
let me know.I want to remove white space on this web from. why would this shows like that
let me know.
I want to remove marked part
Bootstrap uses a media query for the .col-md-6 class where it goes from full width to half width with a screen larger than 992px:
#media (min-width: 992px)
.col-md-6 {
width: 50%;
}
You can either create your own CSS rules or use an inline style (e.g., <div class="col-md-6" style="width:100%">) to override this Bootstrap style rule.
Is this what you look for ?
.panel-body {
padding-left: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style>
.container {
margin-top: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>
</head>
<body>
<div class="container" >
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title ">Personal Infomation</h3>
</div>
<div class="panel-body " >
<br>
<div id="p_info">
<div class="row">
<div class="col-md-6">
<label class="control-label">First Name</label>
<input class="form-control" id="first_name" >
</div>
</div>
<div class="row" >
<div class="col-md-6">
<label class="control-label">Last Name</label>
<input class="form-control" id="last_name" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Gender</label>
<select class="form-control field" id="sel1" >
<option disabled selected value> -- select an option -- </option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Date of Birth</label>
<input type="date" name="bdaytime" class="form-control" id="DOB" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Place of Birth</label>
<input class="form-control" id="Place" >
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.container {
margin-top: 50px;
}
.three-col {
width: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>
<div class="container" >
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title ">Personal Information</h3>
</div>
<div class="panel-body " >
<br>
<div id="p_info">
<div class="row">
<div class="col-md-6">
<label class="control-label">First Name</label>
<input class="form-control" id="first_name" >
</div>
</div>
<div class="row" >
<div class="col-md-6">
<label class="control-label">Last Name</label>
<input class="form-control" id="last_name" >
</div>
</div>
<div class="row three-col">
<div class="col-md-3">
<label class="control-label">Gender</label>
<select class="form-control field" id="sel1" >
<option disabled selected value> -- select an option -- </option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
</div>
<div class="row three-col">
<div class="col-md-3">
<label class="control-label">Date of Birth</label>
<input type="date" name="bdaytime" class="form-control" id="DOB" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Place of Birth</label>
<input class="form-control" id="Place" >
</div>
</div>
</div>
</div>
</div>
</div>
As you can see from my image I have a panel with 2 columns inside. I also need these columns to have input fields for a form. The problem is I can't get the input field width to be the same size as the column. Any help would be appreciated.
<div class="container">
<div class="row">
<div class="col-md-12">
<form method="POST" class="form-horizontal" role="form">
<div class="panel panel-default">
<div class="panel-heading">
Test Heading
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-2 control-label" for="Column1Row1">Column1Row1</label>
<div class="col-md-4">
<input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-md-2 control-label" for="Column2Row1">Column2Row1</label>
<div class="col-md-4">
<input class="form-control input-sm" type="text" name="" value="" id="Column2Row1">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Change
<div class="form-group">
<label class="col-md-2 control-label" for="Column1Row1">Column1Row1</label>
<div class="col-md-4">
<input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
</div>
</div>
to
<div class="row form-group">
<label class="col-md-3 control-label" for="Column1Row1">Column1Row1</label>
<div class="col-md-9">
<input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
</div>
</div>
I have included row class and then inside the row you need to extend the label and input in total to 12 columns. So, the label occupies 3 columns and input field occupies 9 columns.
Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<form method="POST" class="form-horizontal" role="form">
<div class="panel panel-default">
<div class="panel-heading">
Test Heading
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="row form-group">
<label class="col-md-3 control-label" for="Column1Row1">Column1Row1</label>
<div class="col-md-9">
<input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row form-group">
<label class="col-md-3 control-label" for="Column2Row1">Column2Row1</label>
<div class="col-md-9">
<input class="form-control input-sm" type="text" name="" value="" id="Column2Row1">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
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>
Your labels are too lengthy, I've just changed the structure with center align, is this what you need ?
.form-group {
width:50%;
float:left;
padding:0 15px;
}
.form-group input {
float:left;
}
.form-group label {
float:right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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-xs-12">
<form class="form-inline" style="">
<div class="form-group" >
<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-xs-12">
<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>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave">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-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >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-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >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-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >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>
I have removed all your inline styles. There is no need for every field styling. You can do it with bootstrap classes.
<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-body">
<section>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-6 control-label" for="currentmonth">Total Work days in Current Month:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Annual Leave :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Sick / Emergency Leave :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016):</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Month your name was added in Field Glass :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label"></label>
<div class="col-sm-6 text-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>
</section>
</div>
</div>
</div>
</div>
Add class form-inline to the form element
example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
reference: http://www.w3schools.com/bootstrap/bootstrap_forms.asp
Remove the form-inline class from the form tag.
I have the following fiddle which is a cut down sample of a page I am working on utilising bootstrap for the styling.
NOTE: When viewing the fiddle, make sure the Result pane is wide enough to have the first 3 controls on a single row!
The issue that I have is that the 'Free Text Search' row of controls seem to be offset to the right more than I would like. I want the 'Free Text Search' label to be directly under the 'Store Number' label and the same width. Along with that I wand the corresponding input to start at the beginning of the 'Store Number' input and finish at the end of the 'Parent Category' select.
I can't quite see where I have gone wrong with the bootstrap classes.
Here is my html:
<form class="form-horizontal">
<h3 style="padding-left: 20px; padding-bottom: 20px">A pointless title</h3>
<div class="row form-group">
<div class="col-md-4">
<label for="storeNumber" class="col-sm-4 control-label">Store Number</label>
<div class="col-sm-6">
<input id="storeNumber" class="form-control" type="text"
name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="col-md-4">
<label for="actionedTo" class="col-sm-4 control-label">Actioned To</label>
<div class="col-sm-6">
<select id="actionedTo" class="form-control"></select>
</div>
</div>
<div class="col-md-4">
<label for="parentCategory"
class="col-sm-4 control-label">Parent Category</label>
<div class="col-sm-6">
<select id="parentCategory" class="form-control"></select>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label for="freeTextSearch"
class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text"
name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</div>
</form>
Your general structure is counter to your classes. You're structuring for your inputs to position inline but you're using form-horizontal and you're nesting columns.
You don't need any of that markup for this. Just use the form-group class and columns.
See working Snippet.
*The CSS I've added isn't needed to make everything work but I believe it looks better on larger viewports with it.
#media (min-width: 768px) {
.lg-group {
margin-top: 25px;
}
h3.form-title {
margin-bottom: 40px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a>
</div>
</nav>
</div>
<div class="container">
<div class="form-group">
<div class="col-sm-12">
<h3 class="form-title">A Pointless Title</h3>
</div>
</div>
<form class="myForm">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group lg-group">
<label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</form>
</div>
Alternative Layout for Multiple Controls
#media (min-width: 768px) {
.lg-group {
margin-top: 25px;
}
h3.form-title {
margin-bottom: 40px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a>
</div>
</nav>
</div>
<div class="container">
<div class="form-group">
<div class="col-sm-12">
<h3 class="form-title">A Pointless Title</h3>
</div>
</div>
<form class="myForm">
<div class="row">
<div class="col-sm-12">
<div class="lg-group">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="lg-group">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="form-group lg-group">
<label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</div>
</div>
</form>
</div>
Hi how will I reduce the distance of the two dropdowns between each other?
Here is the code:
<div class="row">
<p class="col-md-offset-1"><b>Type of Meal:</b></p>
<div class="form-group col-md-2">
<div class="col-md-8">
<select class="form-control">
<%-- options --%>
</select>
</div>
</div>
<div class="form-group col-md-2">
<div class="col-md-8">
<select class="form-control">
<%-- options --%>
</select>
</div>
</div>
</div>
Thanks!
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Starfleet officer</p>
<form class="form-inline">
<select class="form-control form-group">
<option>Spock</option>
<option>Kirk</option>
</select>
<select class="form-control form-group">
<option>Picard</option>
<option>Riker</option>
</select>
</form>
</div>
<div class="col-md-8">
</div>
</div>
</div>